From 227c50429afb3c039ab9656d3e64cd215d9d3c91 Mon Sep 17 00:00:00 2001 From: Boris Kubiak Date: Fri, 14 Feb 2020 15:35:52 +0100 Subject: [PATCH] Impove form elements style --- index.html | 17 +++++----- index.js | 7 +++-- style.css | 92 +++++++++++++++++++++++++++++++++++++----------------- 3 files changed, 77 insertions(+), 39 deletions(-) diff --git a/index.html b/index.html index 211026e..1a807eb 100644 --- a/index.html +++ b/index.html @@ -26,15 +26,18 @@ npm/clipboard@2/dist/clipboard.min.js
diff --git a/index.js b/index.js index 74cb361..2289653 100644 --- a/index.js +++ b/index.js @@ -19,7 +19,6 @@ function initLangSelector() { data: Object.entries(languages).map(([value, text]) => ({ text, value })), showContent: 'up', onChange: e => { - console.log(e.value); flask.updateLanguage(e.value); } }); @@ -69,8 +68,10 @@ function generateLink() { const url = `${location.protocol}//${location.host}${ location.pathname }?lang=${select.selected()}#${base64}`; - document.getElementById('copy-link').value = url; - copyElement.style.display = 'block'; + const linkInput = document.getElementById('copy-link'); + linkInput.value = url; + linkInput.setSelectionRange(0, url.length); + copyElement.style.display = 'flex'; }; reader.readAsDataURL(new Blob([new Uint8Array(compressed)])); }); diff --git a/style.css b/style.css index 7cef310..8a425c8 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -/* General app style */ +/* App layout */ #editor, #footer, @@ -11,45 +11,77 @@ #editor { top: 0; - bottom: 36px; + bottom: 46px; } #footer, #copy { - height: 36px; - padding: 4px 20px 0 50px; + height: 38px; + padding: 8px 10px 0 42px; background-color: #3b3b47; + display: flex; + flex-wrap: wrap; } - -.d-inline-block { - display: inline-block; +#footer > *, +#copy > * { + margin: 0 6px; } - -.select-wrapper { - 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); +.grow { + flex-grow: 1; } .codeflask textarea { 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 */ .codeflask { @@ -67,13 +99,13 @@ button:hover { .codeflask textarea::-moz-selection, .codeflask textarea ::-moz-selection { - background-color: #5a5f80; + background-color: rgba(90, 95, 128, 0.99); color: #5a5f80; } .codeflask textarea::selection, .codeflask textarea ::selection { - background-color: #5a5f80; + background-color: rgba(90, 95, 128, 0.99); color: #5a5f80; } @@ -81,6 +113,8 @@ button:hover { background: #3b3b47 !important; } +/* Code editor syntax highlight */ +/* Inspiration from https://github.com/dracula/prism */ .token.comment { color: rgba(98, 114, 164, 1); }