jessa
/
inkyboo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Impove form elements style

master
Boris Kubiak 2020-02-14 15:35:52 +01:00
parent cd01019408
commit 227c50429a
3 changed files with 77 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -26,15 +26,18 @@ npm/clipboard@2/dist/clipboard.min.js
<body> <body>
<div id="editor"></div> <div id="editor"></div>
<div id="footer"> <div id="footer">
<div class="select-wrapper d-inline-block"> <select id="language"></select>
<select id="language"></select> <span class="grow"></span>
</div> <button onclick="generateLink()" type="button">Generate link</button>
<div class="d-inline-block">
<button onclick="generateLink()" type="button">Generate link</button>
</div>
</div> </div>
<div id="copy" style="display: none"> <div id="copy" style="display: none">
<input type="text" value="copy me" id="copy-link" onClick="this.setSelectionRange(0, this.value.length)" /> <input
type="text"
value="copy me"
id="copy-link"
class="grow"
onClick="this.setSelectionRange(0, this.value.length)"
/>
<button class="clipboard" data-clipboard-target="#copy-link" type="button">Copy</button> <button class="clipboard" data-clipboard-target="#copy-link" type="button">Copy</button>
<button onclick="copyElement.style.display = 'none'" type="button">Cancel</button> <button onclick="copyElement.style.display = 'none'" type="button">Cancel</button>
</div> </div>

7
index.js
View File

@ -19,7 +19,6 @@ function initLangSelector() {
data: Object.entries(languages).map(([value, text]) => ({ text, value })), data: Object.entries(languages).map(([value, text]) => ({ text, value })),
showContent: 'up', showContent: 'up',
onChange: e => { onChange: e => {
console.log(e.value);
flask.updateLanguage(e.value); flask.updateLanguage(e.value);
} }
}); });
@ -69,8 +68,10 @@ function generateLink() {
const url = `${location.protocol}//${location.host}${ const url = `${location.protocol}//${location.host}${
location.pathname location.pathname
}?lang=${select.selected()}#${base64}`; }?lang=${select.selected()}#${base64}`;
document.getElementById('copy-link').value = url; const linkInput = document.getElementById('copy-link');
copyElement.style.display = 'block'; linkInput.value = url;
linkInput.setSelectionRange(0, url.length);
copyElement.style.display = 'flex';
}; };
reader.readAsDataURL(new Blob([new Uint8Array(compressed)])); reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
}); });

92
style.css
View File

@ -1,4 +1,4 @@
/* General app style */ /* App layout */
#editor, #editor,
#footer, #footer,
@ -11,45 +11,77 @@
#editor { #editor {
top: 0; top: 0;
bottom: 36px; bottom: 46px;
} }
#footer, #footer,
#copy { #copy {
height: 36px; height: 38px;
padding: 4px 20px 0 50px; padding: 8px 10px 0 42px;
background-color: #3b3b47; background-color: #3b3b47;
display: flex;
flex-wrap: wrap;
} }
#footer > *,
.d-inline-block { #copy > * {
display: inline-block; margin: 0 6px;
} }
.grow {
.select-wrapper { flex-grow: 1;
width: 300px;
font-size: 14px;
font-family: sans-serif;
}
.select-wrapper .ss-main .ss-single-selected {
height: 28px;
}
button {
cursor: pointer;
background-color: transparent;
color: #fff;
border: 1px solid #ccc;
border-radius: 2px;
height: 28px;
padding: 4px 8px;
}
button:hover {
background-color: rgba(255, 255, 255, 0.1);
} }
.codeflask textarea { .codeflask textarea {
box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset; box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset;
} }
/* Form elements */
.ss-main {
max-width: 300px;
width: calc(100% - 150px);
font-family: sans-serif;
}
.ss-main .ss-single-selected,
button,
input[type='text'],
input[type='search'] {
height: 28px;
background-color: #3b3b47 !important;
color: #fff !important;
border-radius: 2px !important;
border: 1px solid #ccc !important;
font-size: 14px !important;
}
.ss-content {
background-color: #282936;
color: #dedede;
font-size: 14px;
}
.ss-content .ss-disabled {
background-color: #3b3b47 !important;
}
input[type='text'],
input[type='search'] {
height: 26px !important;
padding: 0 5px;
}
input::-moz-selection {
background-color: rgba(90, 95, 128, 0.99);
}
input::selection {
background-color: rgba(90, 95, 128, 0.99);
}
button {
cursor: pointer;
padding: 4px 8px;
}
button:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Code editor theme */ /* Code editor theme */
.codeflask { .codeflask {
@ -67,13 +99,13 @@ button:hover {
.codeflask textarea::-moz-selection, .codeflask textarea::-moz-selection,
.codeflask textarea ::-moz-selection { .codeflask textarea ::-moz-selection {
background-color: #5a5f80; background-color: rgba(90, 95, 128, 0.99);
color: #5a5f80; color: #5a5f80;
} }
.codeflask textarea::selection, .codeflask textarea::selection,
.codeflask textarea ::selection { .codeflask textarea ::selection {
background-color: #5a5f80; background-color: rgba(90, 95, 128, 0.99);
color: #5a5f80; color: #5a5f80;
} }
@ -81,6 +113,8 @@ button:hover {
background: #3b3b47 !important; background: #3b3b47 !important;
} }
/* Code editor syntax highlight */
/* Inspiration from https://github.com/dracula/prism */
.token.comment { .token.comment {
color: rgba(98, 114, 164, 1); color: rgba(98, 114, 164, 1);
} }