update overall scss structure

make styles more flexible / customizable

ui/scss/_gui.scss

@@ -11,6 +11,12 @@ body
   line-height: var(--font-line-height);
 }
 
+/* Custom text selection */
+*::selection {
+  background: var(--text-selection-bg);
+  color: var(--text-selection-color);
+}
+
 #window
 {
   min-height: 100vh;

ui/scss/_vars.scss

@@ -12,12 +12,18 @@
   --color-notice: #8a6d3b;
   --color-error: #a94442;
   --color-load-screen-text: #c3c3c3;
-  --color-money: #216C2A;
   --color-meta-light: #505050;
+  --color-money: #216C2A;
+  --color-download: #444;
   --color-canvas: #f5f5f5;
   --color-bg: #ffffff;
   --color-bg-alt: #D9D9D9;
 
+  /* Misc */
+  --content-max-width: 1000px;
+  --nsfw-blur-intensity: 20px;
+  --height-video-embedded: $width-page-constrained * 9 / 16 ;
+
   /* Font */
   --font-size: 16px;
   --font-line-height: 1.3333;
@@ -27,19 +33,20 @@
   --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
   --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
 
-  /* Misc */
+  /* Transition */
-  --content-max-width: 1000px;
-  --nsfw-blur-intensity: 20px;
-  --height-video-embedded: $width-page-constrained * 9 / 16 ;
-
-  /* Transitions */
   --transition-duration: .225s;
   --transition-type: ease;
 
   /* Text */
   --text-color: #000;
+  --text-help-color: #EEE;
   --text-max-width: 660px;
   --text-link-padding: 4px;
+  --text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color
+  --text-selection-color: #FFF;
+
+  /* Window */
+  --window-bg: var(--color-canvas);
 
   /* Input */
   --input-width: 330px;
@@ -47,6 +54,8 @@
   --input-border-color: rgba(0,0,0,.25);
 
   /* Button */
+  --button-bg: var(--color-bg-alt);
+  --button-color: #FFF;
   --button-primary-bg: var(--color-primary);
   --button-primary-color: #FFF;
   --button-padding: 12px;
@@ -55,11 +64,26 @@
   /* Header */
   --header-bg: var(--color-bg);
   --header-color: #666;
+  --header-active-color: rgba(0,0,0, 0.85);
   --header-height: $spacing-vertical * 2.5;
-  --header-shadow: var(--box-shadow-layer);
 
-  /* Window */
+  /* Header -> search */
-  --window-bg: var(--color-canvas);
+  --search-bg: rgba(255, 255, 255, 0.7);
+  --search-border:1px solid #ccc;
+  --search-color: #666;
+  --search-active-color: var(--header-active-color);
+
+  /* Tabs */
+  --tab-bg: transparent;
+  --tab-color: #666;
+  --tab-active-color: var(--header-active-color);
+  --tab-border-size: 2px;
+  --tab-border: var(--tab-border-size) solid var(--tab-active-color);
+
+  /* Table */
+  --table-border: 1px solid #e2e2e2;
+  --table-item-even: white;
+  --table-item-odd: #f4f4f4;
 
   /* Card */
   --card-bg: var(--color-bg);
@@ -69,12 +93,21 @@
   --card-padding: $spacing-vertical * 2/3;
   --card-radius: 2px;
   --card-link-scaling: 1.1;
-  --card-shadow: var(--box-shadow-layer);
   --card-small-width: $spacing-vertical * 10;
 
+  /* Modal */
+  --modal-bg: var(--color-bg);
+  --modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
+  --modal-border: 1px solid rgb(204, 204, 204);
+
+  /* Menu */
+  --menu-bg: var(--color-bg);
+  --menu-radius: 2px;
+  --menu-item-hover-bg: var(--color-bg-alt);
+
   /* Tooltip */
   --tooltip-body-width: 300px;
   --tooltip-bg: var(--color-bg);
   --tooltip-color: var(--text-color);
-  --tooltip-shadow: var(--box-shadow-layer);
+  --tooltip-border: 1px solid #aaa;
 }

ui/scss/component/_button.scss

@@ -64,7 +64,7 @@ $button-focus-shift: 12%;
 }
 .button-alt
 {
-  background-color: var(--color-bg-alt);
+  background-color: var(--button-bg);
   box-shadow: var(--box-shadow-layer);
 }
 
@@ -79,7 +79,7 @@ $button-focus-shift: 12%;
 }
 .button-text-help
 {
-  @include text-link(#aaa);
+  @include text-link(var(--text-help-color));
   font-size: 0.8em;
 }
 .button--flat

ui/scss/component/_card.scss

@@ -5,7 +5,7 @@
   margin-right: auto;
   max-width: var(--card-max-width);
   background: var(--card-bg);
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--box-shadow-layer);
   border-radius: var(--card-radius);
   margin-bottom: var(--card-margin);
   overflow: auto;

ui/scss/component/_file-actions.scss

@@ -1,7 +1,5 @@
 @import "../global";
 
-$color-download: #444;
-
 .file-actions
 {
   line-height: var(--button-height);
@@ -17,11 +15,11 @@ $color-download: #444;
 .file-actions__download-status-bar
 {
   position: relative;
-  color: $color-download;
+  color: var(--color-download);
 }
 .file-actions__download-status-bar-overlay
 {
-  background: $color-download;
+  background: var(--color-download);
   color: white;
   position: absolute;
   white-space: nowrap;

ui/scss/component/_header.scss

@@ -1,15 +1,12 @@
 @import "../global";
 
-$color-header: #666;
-$color-header-active: darken($color-header, 20%);
-
 #header
 {
-  color: $color-header;
+  color: var(--header-color);
-  background: #fff;
+  background: var(--header-bg);
   display: flex;
   position: fixed;
-  box-shadow: var(--header-shadow);
+  box-shadow: var(--box-shadow-layer);
   top: 0;
   left: 0;
   width: 100%;
@@ -39,18 +36,18 @@ $color-header-active: darken($color-header, 20%);
 .wunderbar--active .icon-search { color: var(--color-primary); }
 
 .wunderbar__input {
-  background: rgba(255, 255, 255, 0.7);
+  background: var(--search-bg);
   width: 100%;
-  color: $color-header;
+  color: var(--search-color);
   height: $spacing-vertical * 1.5;
   line-height: $spacing-vertical * 1.5;
   padding-left: 38px;
   padding-right: 5px;
-  border: 1px solid var(--text-color);
   @include border-radius(2px);
-  border: 1px solid #ccc;
+  border: var(--search-border);
+  transition: all var(--transition-duration) var(--transition-type);
   &:focus {
-    color: $color-header-active;
+    color: var(--search-active-color);
     box-shadow: var(--box-shadow-focus);
     border-color: var(--color-primary);
   }
@@ -65,12 +62,11 @@ nav.sub-header
   margin-right: auto;
   > a
   {
-    $sub-header-selected-underline-height: 2px;
     display: inline-block;
     margin: 0 15px;
     padding: 0 5px;
-    line-height:calc(var(--header-height) - $spacing-vertical - $sub-header-selected-underline-height);
+    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
-    color: var(--header-color);
+    color: var(--tab-color);
     &:first-child
     {
       margin-left: 0;
@@ -81,12 +77,12 @@ nav.sub-header
     }
     &.sub-header-selected
     {
-      border-bottom: $sub-header-selected-underline-height solid $color-header-active;
+      border-bottom: var(--tab-border);
-      color: $color-header-active;
+      color: var(--tab-active-color);
     }
     &:hover
     {
-      color: $color-header-active;
+      color: var(--tab-active-color);
     }
   }
 }

ui/scss/component/_menu.scss

@@ -9,9 +9,9 @@ $border-radius-menu: 2px;
 .menu {
   position: absolute;
   white-space: nowrap;
-  background-color: white;
+  background-color: var(--menu-bg);
   box-shadow: var(--box-shadow-layer);
-  border-radius: $border-radius-menu;
+  border-radius: var(--menu-radius);
   padding-top: ($spacing-vertical / 5) 0px;
   z-index: 1;
 }
@@ -20,6 +20,6 @@ $border-radius-menu: 2px;
   display: block;
   padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
   &:hover {
-    background: var(--color-bg-alt);
+    background: var(--menu-item-hover-bg);
   }
 }

ui/scss/component/_modal.scss

@@ -10,7 +10,7 @@
   left: 0px;
   right: 0px;
   bottom: 0px;
-  background-color: rgba(255, 255, 255, 0.74902);
+  background-color: var(--modal-overlay-bg);
   z-index: 9999;
 }
 
@@ -24,12 +24,12 @@
   justify-content: center;
   align-items: center;
 
-  border: 1px solid rgb(204, 204, 204);
+  border: var(--modal-border);
-  background: rgb(255, 255, 255);
+  background: var(--modal-bg);
   overflow: auto;
   border-radius: 4px;
   padding: $spacing-vertical;
-  box-shadow: var(--modal-shadow);
+  box-shadow: var(--box-shadow-layer);
   max-width: 400px;
 
   word-break: break-word;
@@ -52,7 +52,7 @@
 }
 
 .error-modal-overlay {
-  background: var(--color-dark-overlay);
+  background: var(--modal-overlay-bg);
 }
 
 .error-modal__content {

ui/scss/component/_table.scss

@@ -20,13 +20,13 @@ table.table-standard {
     font-size: 0.9em;
     padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
     text-align: left;
-    border-bottom: 1px solid #e2e2e2;
+    border-bottom: var(--table-border);
     img {
       vertical-align: text-bottom;
     }
   }
   tr.thead:not(:first-child) th {
-    border-top: 1px solid #e2e2e2;
+    border-top: var(--table-border);
   }
   tfoot td {
     padding: $spacing-vertical / 2 8px;
@@ -35,10 +35,10 @@ table.table-standard {
   tbody {
     tr {
       &:nth-child(even):not(.odd) {
-        background-color: #f4f4f4;
+        background-color: var(--table-item-odd);
       }
       &:nth-child(odd):not(.even) {
-        background-color: white;
+        background-color: var(--table-item-ever);
       }
       &.thead {
         background: none;

ui/scss/component/_tooltip.scss

@@ -17,12 +17,12 @@
   box-sizing: border-box;
   padding: $spacing-vertical / 2;
   width: var(--tooltip-width);
-  border: 1px solid #aaa;
+  border: var(--tooltip-border);
   color: var(--tooltip-color);
   background-color: var(--tooltip-bg);
   font-size: calc(var(--font-size) * 7/8);
   line-height: var(--font-line-height);
-  box-shadow: var(--tooltip-shadow);
+  box-shadow: var(--box-shadow-layer);
 }
 
 .tooltip--header .tooltip__link {