all repos — NoPaste @ 227c50429afb3c039ab9656d3e64cd215d9d3c91

Resurrected - The PussTheCat.org fork of NoPaste

Impove form elements style
Boris Kubiak kubiakboris@gmail.com
Fri, 14 Feb 2020 15:35:52 +0100
commit

227c50429afb3c039ab9656d3e64cd215d9d3c91

parent

cd01019408d98a729b85d0f5b4d330f0c10bfa2f

3 files changed, 70 insertions(+), 32 deletions(-)

jump to
M index.html → index.html 
@@ -26,15 +26,18 @@ </head>
     <body>
         <div id="editor"></div>
         <div id="footer">
-            <div class="select-wrapper d-inline-block">
-                <select id="language"></select>
-            </div>
-            <div class="d-inline-block">
-                <button onclick="generateLink()" type="button">Generate link</button>
-            </div>
+            <select id="language"></select>
+            <span class="grow"></span>
+            <button onclick="generateLink()" type="button">Generate link</button>
         </div>
         <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 onclick="copyElement.style.display = 'none'" type="button">Cancel</button>
         </div>
M index.js → index.js 
@@ -19,7 +19,6 @@ select: '#language',
         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 @@ const base64 = reader.result.substr(reader.result.indexOf(',') + 1);
             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)]));
     });
M style.css → style.css 
@@ -1,4 +1,4 @@
-/* General app style */
+/* App layout */
 
 #editor,
 #footer,

@@ -11,43 +11,75 @@ }
 
 #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;
+}
+#footer > *,
+#copy > * {
+    margin: 0 6px;
+}
+.grow {
+    flex-grow: 1;
 }
 
-.d-inline-block {
-    display: inline-block;
+.codeflask textarea {
+    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset;
 }
 
-.select-wrapper {
-    width: 300px;
-    font-size: 14px;
+/* Form elements */
+
+.ss-main {
+    max-width: 300px;
+    width: calc(100% - 150px);
     font-family: sans-serif;
 }
-.select-wrapper .ss-main .ss-single-selected {
+
+.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;
-    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 {
-    box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset;
+    background-color: rgba(255, 255, 255, 0.1) !important;
 }
 
 /* Code editor theme */

@@ -67,13 +99,13 @@ }
 
 .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 @@ .codeflask.codeflask--has-line-numbers::before {
     background: #3b3b47 !important;
 }
 
+/* Code editor syntax highlight */
+/* Inspiration from https://github.com/dracula/prism */
 .token.comment {
     color: rgba(98, 114, 164, 1);
 }