More LESS refactoring

src/less/main.less

@@ -1,86 +1,128 @@
 @import "variables.less";
 
-/*-------------------------------*/
-/*           Style Mods          */
-/*-------------------------------*/
+// Elements.
+
+body {
+  color: @text-color;
+}
+
+hr {
+  height: 1px;
+  border: 0;
+  background-color: #333;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+button {
+  border: 1px solid @button-border;
+  border-radius: 5px;
+  background: @button-background;
+  text-shadow: none;
+  padding: 5px 10px 5px 10px;
+}
+
+button:hover {
+  background: @button-background-hover;
+}
+
+input[type=text] {
+  border: 1px solid @button-border;
+  padding: 5px;
+  width: 100%;
+  border-radius: 5px;
+  background: @button-background;
+  text-shadow: none;
+}
+
+// Theme buttons inside color pickers.
 
 .sp-container button {
-    background: #222;
-    padding: 10px;
-    text-shadow: none;
-    color: #fff;
-    margin-top: 5px;
+  background: @button-background;
+  border: 1px solid @button-border;
+  padding: 10px;
+  text-shadow: none;
+  color: @button-text;
+  margin-top: 5px;
 }
 
 .sp-container button:hover {
-    background: #444;
+  background: @button-background-hover;
 }
 
+// Hide the color picker cancel buttons.
+
 .sp-cancel {
-    display: none;
+  display: none;
 }
 
+// Theme color picker popups.
+
 .sp-container {
-    background: #222;
-    border: 1px solid #333;
-    border-radius: 5px;
+  background: @picker-background;
+  border: 1px solid @picker-border;
+  border-radius: 5px;
 }
 
 .sp-picker-container {
-    border: 0;
+  border: 0;
 }
 
+// Theme color picker input elements.
+
 .sp-replacer {
-    background: #333;
-    border: 1px solid #444;
-    border-radius:5px;
-    color: #bbb;
+  background: @input-background;
+  border: 1px solid @input-border;
+  border-radius: 5px;
+  color: @input-text;
 }
 
 .sp-replacer:hover, 
 .sp-replacer.sp-active {
-    border: 1px solid #ccc;
-    color: #bbb;
-    background: #444;
+  border: 1px solid @input-border;
+  color: @input-text;
+  background: @input-background-hover;
+}
+
+// Tool sections.
+
+.tool-section {
+  width: @sidebar-width;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .section-lbl {
-    color: #ccc;
-    font-size: 14pt;
+  color: #ccc;
+  font-size: 14pt;
 }
 
-.picker-label {
-    color: #aaa;  
-    margin-bottom: 5px;
+.picker-lbl {
+  color: #aaa;
+  margin-bottom: 5px;
 }
 
-hr {
-    height: 1px;
-    border: 0;
-    background-color: #333;
-    margin-top: 5px;
-    margin-bottom: 5px;
+.download-btn {
+  width: 100%;
 }
 
-.logo-wrapper{
-  text-align:center;
-  width:@sidebar-width;
+// Logo.
+
+.logo-wrapper {
+  text-align: center;
+  width: @sidebar-width;
 }
 
 .logo {
-    margin: 20px;
-    width: 170px;
-    height: auto;
+  margin: 20px;
+  width: 170px;
+  height: auto;
 }
 
-.tool-section {
-    width: @sidebar-width;
-    padding-left: 10px;
-    padding-right: 10px;
-}
+// Margin classes.
 
 .mtop-10 {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .mleft-10 {
@@ -91,32 +133,14 @@ hr {
   margin-bottom: 10px;
 }
 
-.dark-tbox {
-    border: 1px solid #444;
-    padding: 5px;width:100%;
-    border-radius: 5px;
-    background: #222;
-    text-shadow: none;
-    color: #fff;
-}
-
-button {
-    border: 1px solid #444;
-    border-radius: 5px;
-    background: #222;
-    text-shadow: none;
-    color: #fff;
-    padding: 5px 10px 5px 10px;
-}
-
-.download-btn {
-    width: 100%;
-}
+// Error row.
 
 .row-error {
   color: #ff1103;
 }
 
+// Social row.
+
 .row-social {
   font-size: 26pt;
   text-align: center;
@@ -130,14 +154,15 @@ button {
   color: #fff;
 }
 
+// Bottom right notice.
+
 .misc-text {
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(0, 0, 0, 0.5);
   border-radius: 3px;
-  color: #fff;
   position: absolute;
   right: 8px;
   bottom: 8px;
   padding: 4px;
   font-size: 8pt;
-}
+}

src/less/sidebar.less

@@ -86,12 +86,15 @@ body, html {
   width: 32px;
   z-index: 999;
   &:hover {
+    background: transparent;
     outline: none;
   }
   &:focus {
+    background: transparent;
     outline: none;
   }
   &:active {
+    background: transparent;
     outline: none;
   }
 }

src/less/variables.less

@@ -4,13 +4,29 @@
 // Text color.
 @text-color: #fff;
 
-// Sidebar link color variables.
+// Sidebar color.
 @sidebar-background: #1a1a1a;
 
-// Hamburger color.
+// Hamburger colors.
 @hamburger-color-closed: fadeout(@text-color, 30);
 @hamburger-color-open: @text-color;
 
+// Button colors.
+@button-background: #222;
+@button-background-hover: #444;
+@button-border: #555;
+@button-text: #fff;
+
+// Input fields.
+@input-background: #222;
+@input-background-hover: #444;
+@input-border: #444;
+@input-text: #fff;
+
+// Picker popup colors.
+@picker-background: #333;
+@picker-border: #444;
+
 // Width variables.
 @sidebar-width: 250px;
 @width2: 100px;

templates/index.html.twig

@@ -97,7 +97,7 @@
                     </div>
                     <div class="row mtop-10">
                         <div class="col-xs-6">
-                            <div class="picker-label">Molecule:</div>
+                            <div class="picker-lbl">Molecule:</div>
                         </div>
                         <div class="col-xs-6">
                             <input type="text" class="picker picker-fg">
@@ -105,7 +105,7 @@
                     </div>
                     <div class="row mtop-10">
                         <div class="col-xs-6">
-                            <div class="picker-label">Background:</div>
+                            <div class="picker-lbl">Background:</div>
                         </div>
                         <div class="col-xs-6">
                             <input type="text" class="picker picker-bg">