more dark theme work

1 files changed, 48 insertions, 47 deletions

diff --git a/common/gtk-3.0/3.14/_common.scss b/common/gtk-3.0/3.14/_common.scss
index 445ae06..b78f78d 100644
--- a/common/gtk-3.0/3.14/_common.scss
+++ b/common/gtk-3.0/3.14/_common.scss
@@ -3,6 +3,7 @@
 }
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant
 
 * {
   background-clip: padding-box;
@@ -600,10 +601,11 @@ $_dot_color: $selected_bg_color;
                                     to(transparent));
     background-size: 6px 6px, 6px 6px;
     background-repeat: no-repeat;
-    background-position: right 3px, right 4px;
-
+    @if $variant == 'light' { background-position: right 3px, right 4px; }
+    @else { background-position: right 3px, right 2px; }
     &:dir(rtl) {
-      background-position: left 3px, left 4px;
+      @if $variant == 'light' { background-position: left 3px, left 4px; }
+      @else { background-position: left 3px, left 2px; }
     }
   }
 
@@ -984,7 +986,7 @@ GtkComboBox {
   border-image: linear-gradient(to bottom, opacify($header_bg, 1),
                                            darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1
 
-  &:backdrop { background-color: lighten(opacify($header_bg, 1), 3%); }
+  &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
 
   .separator { @extend %header_separator; }
 
@@ -1022,7 +1024,7 @@ GtkComboBox {
   border-width: 0 0 1px;
   border-style: solid;
   border-radius: 0;
-  border-color: darken($header_bg, 7%);
+  border-color: if($variant == 'light', darken($header_bg, 7%), darken($header_bg, 5%));
 
   color: $header_fg;
   background-color: opacify($header_bg, 1);
@@ -1031,9 +1033,9 @@ GtkComboBox {
 
   &:backdrop {
     color: transparentize($header_fg, 0.3);
-    background-color: lighten(opacify($header_bg, 1), 3%);
+    background-color: opacify($header_bg_backdrop, 1);
 
-    .csd & { background-color: lighten($header_bg, 3%); }  // Transparent header-bars only in csd windows
+    .csd & { background-color: $header_bg_backdrop; }  // Transparent header-bars only in csd windows
   }
 
   .title {
@@ -1116,7 +1118,7 @@ GtkComboBox {
   .maximized & {
     background-color: opacify($header_bg, 1);
 
-    &:backdrop { background-color: opacify(lighten($header_bg, 3%), 1); }
+    &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
   }
 }
 
@@ -1132,19 +1134,18 @@ GtkComboBox {
 
   &:backdrop {
     color: transparentize($header_fg, 0.3);
-    background-color: opacify($header_bg, 1);
+    background-color: opacify($header_bg_backdrop, 1);
 
-    .csd & { background-color: lighten($header_bg, 3%); }
+    .csd & { background-color: $header_bg_backdrop; }
   }
 
   .maximized & {
     background-color: opacify($header_bg, 1);
 
-    &:backdrop { background-color: opacify(lighten($header_bg, 3%), 1); }
+    &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
   }
 }
 
-
 .titlebar .titlebar,
 .titlebar .titlebar:backdrop { background-color: transparent; }
 
@@ -1444,10 +1445,10 @@ column-header.button.dnd { // for treeview-like derive widgets
   border-style: none solid none none;
   border-radius: 0;
   border-image: linear-gradient(to bottom,
-                                transparentize(black, 1) 20%,
-                                transparentize(black, 0.89) 20%,
-                                transparentize(black, 0.89) 80%,
-                                transparentize(black, 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch;
+                                transparentize(if($variant == 'light', black, white), 1) 20%,
+                                transparentize(if($variant == 'light', black, white), 0.89) 20%,
+                                transparentize(if($variant == 'light', black, white), 0.89) 80%,
+                                transparentize(if($variant == 'light', black, white), 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch;
 
   &:active { background-color: $base_color; }
   &:insensitive {
@@ -1465,7 +1466,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   background-color: opacify($header_bg, 1);
   color: $header_fg;
 
-  &:backdrop { background-color: lighten(opacify($header_bg, 1), 3%); }
+  &:backdrop { background-color: opacify($header_bg_backdrop, 1); }
 
   & > .menuitem {
     padding: 6px 8px;
@@ -1487,7 +1488,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   margin: 4px;
   padding: 0;
   border-radius: 0;
-  background-color: $base_color;
+  background-color: if($variant == 'light', $base_color, darken($base_color, 3%));
   border: 1px solid $borders_color;
 
   .csd & {
@@ -1500,8 +1501,8 @@ column-header.button.dnd { // for treeview-like derive widgets
     padding: 5px;
     &:hover {
       color: $fg_color;
-      background-color: transparentize(black, 0.96);
-      border: solid transparentize(black, 0.92);
+      background-color: if($variant == 'light', transparentize(black, 0.96), transparentize(white, 0.95));
+      border: solid if($variant == 'light', transparentize(black, 0.92), transparentize(white, 0.93));
       border-width: 1px 0 1px 0;
     }
     &:insensitive {
@@ -1541,7 +1542,7 @@ column-header.button.dnd { // for treeview-like derive widgets
   border: 1px solid darken($borders_color, 5%);
   border-radius: 3px;
   background-clip: border-box;
-  background-color: $base_color;
+  background-color: if($variant == 'light', $base_color, darken($base_color, 3%));
 
   box-shadow: 0 2px 6px 1px transparentize(black, 0.93);
 
@@ -1613,7 +1614,7 @@ column-header.button.dnd { // for treeview-like derive widgets
       &.left { border-right-width: 0; }
     }
 
-    $_header_border: lighten($borders_color, 5%);
+    $_header_border: if($variant == 'light', lighten($borders_color, 5%), lighten($borders_color, 1%));
     &.top {
       box-shadow: inset 0 -1px $_header_border; // border
     }
@@ -1673,8 +1674,8 @@ column-header.button.dnd { // for treeview-like derive widgets
           border-width: 1px;
           border-#{$_tab}-width: 0;
           border-color: $borders_color;
-          background-color: transparentize(black, 0.98);
-          &:hover { background-color: transparentize(black, 0.98); }
+          background-color: if($variant == 'light', transparentize(black, 0.98), transparentize(black, 0.9));
+          &:hover { background-color: if($variant == 'light', transparentize(black, 0.98), transparentize(black, 0.9)); }
         }
       }
     }
@@ -1797,13 +1798,13 @@ GtkSwitch {
     // load switch troughs from .png files in assets directory
 
     #{$i}GtkSwitch.trough#{$k} {
-      background-image: -gtk-scaled(url("assets/switch#{$l}#{$j}.png"),url("assets/switch#{$l}#{$j}@2.png"));
+      background-image: -gtk-scaled(url("assets/switch#{$l}#{$j}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$j}#{$asset_suffix}@2.png"));
     }
 
     // load switch sliders from .png files in assets directory
 
     //#{$i}GtkSwitch.slider#{$k} {
-    //  background-image: -gtk-scaled(url("assets/switch-slider#{$l}#{$j}.png"),url("assets/switch-slider#{$l}#{$j}@2.png"));
+    //  background-image: -gtk-scaled(url("assets/switch-slider#{$l}#{$j}#{$asset_suffix}.png"),url("assets/switch-slider#{$l}#{$j}#{$asset_suffix}@2.png"));
     //}
   }
 }
@@ -1826,8 +1827,8 @@ GtkSwitch {
                   (':checked', '-checked'),
                   (':checked:insensitive','-checked-insensitive') {
     .#{$w}#{$s} {
-      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}.png"),
-                                    url("assets/#{$a}#{$as}@2.png"));
+      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
+                                    url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
     }
     // the borders of checks and radios are
     // too similar in luminosity to the selected background color, hence
@@ -1845,8 +1846,8 @@ GtkSwitch {
                   (':checked', '-checked-selectionmode') {
   GtkIconView.view.check#{$s},
   GtkFlowBox.view.check#{$s} {
-    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
-                                    url("assets/checkbox#{$as}@2.png"));
+    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
+                                    url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
     background-color: transparent;
   }
 }
@@ -2119,7 +2120,7 @@ GtkScrolledWindow {
   border-radius: 0;   // and no rounded corners
   box-shadow: none;   // and no box-shadow
   &:hover {
-    background-color: transparentize(black, 0.95);
+    background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97));
   }
   &:active {
     color: $fg_color;
@@ -2523,8 +2524,8 @@ GtkVolumeButton.button { padding: 8px; }
 
   // this needs to be transparent
   // see bug #722563
-  $_wm_border: transparentize(black, 0.9);
-  $_wm_border_backdrop: transparentize(black, 0.9);
+  $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.35));
+  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.35));
 
   box-shadow: 0 0 0 1px $_wm_border, 0 4px 8px 1px $_wm_border;
 
@@ -2540,8 +2541,8 @@ GtkVolumeButton.button { padding: 8px; }
   &.csd {
     &.popup, &.menu {
       border-radius: 3px;
-      box-shadow: 0 3px 6px $_wm_border,
-                  0 0 0 1px $_wm_border;
+      box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)),
+                  0 0 0 1px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1));
     }
     &.tooltip {
       border-radius: 2px;
@@ -2581,11 +2582,11 @@ GtkVolumeButton.button { padding: 8px; }
   .right:dir(rtl) .button.titlebutton:nth-child(3),
   .left .button.titlebutton:nth-child(3),
   .left:dir(rtl) .button.titlebutton:nth-last-child(3) {
-    background-image: -gtk-scaled(url('assets/titlebutton-min.png'),url('assets/titlebutton-min@2.png'));
+    background-image: -gtk-scaled(url('assets/titlebutton-min#{$asset_suffix}.png'),url('assets/titlebutton-min#{$asset_suffix}@2.png'));
 
-    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover.png'),url('assets/titlebutton-min-hover@2.png')); }
-    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-active.png'),url('assets/titlebutton-min-active@2.png')); }
-    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop.png'),url('assets/titlebutton-min-backdrop@2.png')); }
+    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$asset_suffix}.png'),url('assets/titlebutton-min-hover#{$asset_suffix}@2.png')); }
+    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$asset_suffix}.png'),url('assets/titlebutton-min-active#{$asset_suffix}@2.png')); }
+    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$asset_suffix}@2.png')); }
 }
 
   // Maximize
@@ -2594,11 +2595,11 @@ GtkVolumeButton.button { padding: 8px; }
   .right:dir(rtl) .button.titlebutton:nth-child(2),
   .left .button.titlebutton:nth-child(2),
   .left:dir(rtl) .button.titlebutton:nth-last-child(2) {
-    background-image: -gtk-scaled(url('assets/titlebutton-max.png'),url('assets/titlebutton-max@2.png'));
+    background-image: -gtk-scaled(url('assets/titlebutton-max#{$asset_suffix}.png'),url('assets/titlebutton-max#{$asset_suffix}@2.png'));
 
-    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover.png'),url('assets/titlebutton-max-hover@2.png')); }
-    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-active.png'),url('assets/titlebutton-max-active@2.png')); }
-    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop.png'),url('assets/titlebutton-max-backdrop@2.png')); }
+    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$asset_suffix}.png'),url('assets/titlebutton-max-hover#{$asset_suffix}@2.png')); }
+    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$asset_suffix}.png'),url('assets/titlebutton-max-active#{$asset_suffix}@2.png')); }
+    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$asset_suffix}@2.png')); }
 }
 
   // Close
@@ -2607,11 +2608,11 @@ GtkVolumeButton.button { padding: 8px; }
   .right:dir(rtl) .button.titlebutton:first-child,
   .left .button.titlebutton:first-child,
   .left:dir(rtl) .button.titlebutton:last-child {
-    background-image: -gtk-scaled(url('assets/titlebutton-close.png'),url('assets/titlebutton-close@2.png'));
+    background-image: -gtk-scaled(url('assets/titlebutton-close#{$asset_suffix}.png'),url('assets/titlebutton-close#{$asset_suffix}@2.png'));
 
-    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover.png'),url('assets/titlebutton-close-hover@2.png')); }
-    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-active.png'),url('assets/titlebutton-close-active@2.png')); }
-    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop.png'),url('assets/titlebutton-close-backdrop@2.png')); }
+    &:hover, &:backdrop:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$asset_suffix}.png'),url('assets/titlebutton-close-hover#{$asset_suffix}@2.png')); }
+    &:active:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$asset_suffix}.png'),url('assets/titlebutton-close-active#{$asset_suffix}@2.png')); }
+    &:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$asset_suffix}@2.png')); }
   }
 }