Merge branch 'master' into wip/3.18

1 files changed, 152 insertions, 64 deletions

diff --git a/common/gtk-3.0/3.16/sass/_common.scss b/common/gtk-3.0/3.16/sass/_common.scss
index 7049206..e55cea3 100644
--- a/common/gtk-3.0/3.16/sass/_common.scss
+++ b/common/gtk-3.0/3.16/sass/_common.scss
@@ -398,7 +398,8 @@ $_dot_color: $selected_bg_color;
 
   &.flat { 
     @include button(undecorated);
-    background-color: transparentize($bg_color, 1);
+    background-color: transparentize($button_bg, 1);
+    border-color: transparentize($button_border, 1);
     // to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
     // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
     // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
@@ -415,7 +416,7 @@ $_dot_color: $selected_bg_color;
     -gtk-image-effect: highlight;
   }
   &:active, &:checked {
-    background-clip: border-box;
+    background-clip: if($variant=='light', border-box, padding-box);
     @include button(active);
     transition-duration: 50ms;
   }
@@ -436,14 +437,14 @@ $_dot_color: $selected_bg_color;
   }
   // big standalone buttons like in Documents pager
   &.osd {
+    color: $osd_fg_color;
     outline-color: transparentize($osd_fg_color, 0.7);
-
-    @include button(osd);
     background-color: $osd_bg_color;
+    border-color: darken($osd_bg_color, 8%);
 
     &.image-button { padding: 10px; }
 
-    &:hover { @include button(osd-hover); background-color: $osd_bg_color; }
+    &:hover { color: $selected_bg_color; }
     &:active, &:checked { @include button(osd-active); }
     &:insensitive { @include button(osd-insensitive); }
   }
@@ -651,14 +652,18 @@ $_dot_color: $selected_bg_color;
   &:only-child > .button.flat { @extend %linked:only-child; }
 }
 
+$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5));
+
 %linked_middle {
   border-radius: 0;
   border-left-style: none;
   border-right-style: none;
 
   &:hover {
-    box-shadow: inset 1px 0 $selected_bg_color, inset -1px 0 $selected_bg_color;
+    box-shadow: inset  1px 0 $_linked_separator_color,
+                inset -1px 0 $_linked_separator_color;
   }
+  &:active, &:checked { box-shadow: none; }
 
   &:dir(rtl) {
     border-radius: 0; // needed when including %linked_middle:dir(rtl)
@@ -672,13 +677,15 @@ $_dot_color: $selected_bg_color;
     border-radius: 3px 0 0 3px;
     border-left-style: solid;
 
-    &:hover { box-shadow: inset -1px 0 $selected_bg_color; }
+    &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
+    &:active, &:checked { box-shadow: none; }
   }
   &:last-child {
     border-radius: 0 3px 3px 0;
     border-right-style: solid;
 
-    &:hover { box-shadow: inset 1px 0 $selected_bg_color; }
+    &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+    &:active, &:checked { box-shadow: none; }
 
     &:dir(rtl) { border-bottom-left-radius: 0; }
 
@@ -688,6 +695,7 @@ $_dot_color: $selected_bg_color;
     border-style: solid;
 
     &:hover { box-shadow: none; }
+    &:active, &:checked { box-shadow: none; }
   }
 }
 
@@ -697,7 +705,11 @@ $_dot_color: $selected_bg_color;
   border-top-style: none;
   border-radius: 0;
 
-  &:hover { box-shadow: inset 0 1px $selected_bg_color, inset 0 -1px $selected_bg_color; }
+  &:hover {
+    box-shadow: inset 0 -1px $_linked_separator_color,
+                inset 0  1px $_linked_separator_color;
+  }
+  &:active, &:checked { box-shadow: none; }
 }
 
 %linked_vertical{
@@ -707,19 +719,22 @@ $_dot_color: $selected_bg_color;
     border-radius: 3px 3px 0 0;
     border-top-style: solid;
 
-    &:hover { box-shadow: inset 0 -1px $selected_bg_color; }
+    &:hover { box-shadow: inset 0 -1px $_linked_separator_color; }
+    &:active, &:checked { box-shadow: none; }
   }
   &:last-child {
     border-radius: 0 0 3px 3px;
     border-bottom-style: solid;
 
-    &:hover { box-shadow: inset 0 1px $selected_bg_color; }
+    &:hover { box-shadow: inset 0 1px $_linked_separator_color; }
+    &:active, &:checked { box-shadow: none; }
   }
   &:only-child {
     border-radius: 3px;
     border-style: solid;
 
     &:hover { box-shadow: none; }
+    &:active, &:checked { box-shadow: none; }
   }
 }
 
@@ -737,7 +752,7 @@ $_dot_color: $selected_bg_color;
   outline-offset: -1px;
   border-radius: 2px;
 
-  &:hover { background-color: mix($fg_color,$bg_color,5%); }
+  &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); }
   &:active, &:selected {
     @extend %selected_items;
   }
@@ -793,9 +808,7 @@ $_dot_color: $selected_bg_color;
   //  padding-right: 6px;
     &:dir(rtl) { border-style: none solid none none; }
     &:first-child { color: red; }
-    &:hover {
-      color: $selected_bg_color;
-    }
+
     &:insensitive {
       color: $insensitive_fg_color;
     }
@@ -916,26 +929,31 @@ GtkComboBox {
   &.combobox-entry .entry {
     @extend %linked;
 
-    border-right-style: none;
-    &:dir(rtl) { border-left-style: none; }
+    &:dir(ltr) {
+      border-right-style: none;
+
+      &:focus { box-shadow: 1px 0 $selected_bg_color; }
+    }
+    &:dir(rtl) {
+      border-left-style: none;
+
+      &:focus { box-shadow: -1px 0 $selected_bg_color; }
+    }
   }
 
   &.combobox-entry .button {
     @extend %linked;
 
-    color: transparentize($fg_color, 0.4);
-    background-color: $button_border;
-    border-color: $button_border;
+    &:dir(ltr) {
+      box-shadow: inset  1px 0 $button_border;
 
-    &:hover {
-      background-color: lighten($button_border, 5%);
-      border-color: $selected_bg_color;
-      box-shadow: -1px 0 $selected_bg_color;
+      &:insensitive { box-shadow: inset 1px 0 transparentize($button_border, 0.45); }
     }
+    &:dir(rtl) {
+      box-shadow: inset -1px 0 $button_border;
 
-    &:active, &:checked { @include button(active); }
-
-    &:insensitive { opacity: 0.5 }
+      &:insensitive { box-shadow: inset -1px 0 transparentize($button_border, 0.45); }
+    }
   }
 }
 
@@ -973,7 +991,7 @@ GtkComboBox {
   background-color: $bg_color;
   .osd &, &.osd {
     padding: 7px;
-    border: 1px solid transparentize(black, 0.4);
+    border: 1px solid transparentize(black, 0.5);
     border-radius: 3px;
     background-color: transparentize($osd_bg_color, 0.1);
   }
@@ -1191,6 +1209,7 @@ GtkComboBox {
 
     &:focus {
       @include entry(header-focus);
+      background-clip: if($darker=='false' and $variant=='light', border-box, padding-box);
 
       &.image { color: $selected_fg_color; }
     }
@@ -1216,7 +1235,10 @@ GtkComboBox {
     &:backdrop { opacity: 0.7; }
 
     &:hover { @include button(header-hover); }
-    &:active, &:checked { @include button(header-active); }
+    &:active, &:checked {
+      @include button(header-active);
+      background-clip: if($darker=='false' and $variant=='light', border-box, padding-box);
+    }
     &:insensitive { @include button(header-insensitive); }
     &:insensitive:active, &:insensitive:checked { @include button(header-insensitive-active); }
   }
@@ -1227,12 +1249,35 @@ GtkComboBox {
 
     .linked.stack-switcher > .button,
     .linked.path-bar > .button {
+
+      $_linked_separator_color: $header_button_border;
+
       @include button(header-hover);
 
-      &:hover { border-color: $selected_bg_color; }
+      &:hover { background-color: lighten($header_button_bg, 15%); }
       &:active, &:checked { @include button(header-active); }
+      &:insensitive { color: transparentize($header_fg, 0.4); }
 
       @extend %linked;
+
+      &:hover {
+        box-shadow: inset  1px 0 $_linked_separator_color,
+                    inset -1px 0 $_linked_separator_color;
+      }
+      &:active, &:checked { box-shadow: none; }
+
+      &:first-child {
+        &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
+        &:active, &:checked { box-shadow: none; }
+      }
+      &:last-child {
+        &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+        &:active, &:checked { box-shadow: none; }
+      }
+      &:only-child {
+        &:hover { box-shadow: none; }
+        &:active, &:checked { box-shadow: none; }
+      }
     }
 
   // Header-bar Suggested and Destructive Action buttons
@@ -1267,14 +1312,18 @@ GtkComboBox {
   // Header-bar Spinbuttons
   & .spinbutton {
 
-      &:focus .button { color: $selected_fg_color; }
+    &:focus .button {
+      color: $selected_fg_color;
 
-      .button {
-        color: $header_fg;
+      &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; }
+      &:insensitive { color: transparentize($selected_fg_color, 0.6); }
+    }
+    .button {
+      color: $header_fg;
 
-        &:hover { background-color: rgba(255,255,255,0.1); border-color: transparent; }
-        &:insensitive { color: transparentize($header_fg, 0.3); }
-        &:active { background-color: rgba(0,0,0,0.1); }
+      &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; }
+      &:insensitive { color: transparentize($header_fg, 0.3); }
+      &:active { background-color: rgba(0,0,0,0.1); }
     }
   }
 
@@ -1285,9 +1334,30 @@ GtkComboBox {
     &.combobox-entry .button {
       @include entry(header-normal);
 
-      &:hover { @include entry(header-focus); }
+      &:hover { @include entry(header-focus); box-shadow: none; }
       &:insensitive { @include entry(header-insensitive); }
     }
+    &.combobox-entry .entry {
+      &:dir(ltr) {
+        &:focus { box-shadow: none; }
+      }
+      &:dir(rtl) {
+        &:focus { box-shadow: none; }
+      }
+    }
+    &.combobox-entry .button {
+
+      &:dir(ltr) {
+        box-shadow: inset  1px 0 $header_button_border;
+
+        &:insensitive { box-shadow: inset 1px 0 transparentize($header_button_border, 0.45); }
+      }
+      &:dir(rtl) {
+        box-shadow: inset -1px 0 $header_button_border;
+
+        &:insensitive { box-shadow: inset -1px 0 transparentize($header_button_border, 0.45); }
+      }
+    }
   }
 
   // Header-bar Switches
@@ -1297,7 +1367,7 @@ GtkComboBox {
 
   GtkProgressBar {
 
-    &.trough { background-color: transparentize($header_fg, 0.65); }
+    &.trough { background-color: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); }
 
     &:backdrop { opacity: 0.75; }
   }
@@ -1308,17 +1378,29 @@ GtkComboBox {
     &:backdrop { opacity: 0.75; }
 
     &.trough {
-      background-image: linear-gradient(to bottom, transparentize($header_fg, 0.65));
+      $_trough_bg: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border);
+      background-image: linear-gradient(to bottom, $_trough_bg);
 
-      &:insensitive { background-image: linear-gradient(to bottom, transparentize($header_fg, 0.7)); }
+      &:insensitive { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); }
     }
     &.slider {
-      background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 90%), darken($header_bg, 4%)));
+      $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3));
+      $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%));
 
-      &:insensitive {
-        background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 40%), darken($header_bg, 1%)));
+      background-image: linear-gradient(to bottom, $_slider_bg);
+      border-color: $_slider_border;
 
-        @if $darker=='true' { border-color: mix($header_bg, $selected_bg_color, 60%); }
+      &:hover {
+        background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%));
+        border-color: $_slider_border;
+      }
+      &:active {
+        background-image: linear-gradient(to bottom, $selected_bg_color);
+        border-color: $selected_bg_color;
+      }
+      &:insensitive {
+        background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%));
+        border-color: $_slider_border;
       }
     }
   }
@@ -1500,7 +1582,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, $bg_color);
   border: 1px solid $borders_color;
 
   .csd & {
@@ -1553,7 +1635,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, $bg_color);
 
   box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65));
 
@@ -2011,30 +2093,31 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
   -GtkRange-trough-border: 0;
   outline-offset: -1px;
   outline-radius: 2px;
-  //@include _shadows(_button_shadow(normal));
 
   &.trough { margin: 5px; }
   &.fine-tune {
     &.trough { border-radius: 5px; margin: 3px; }
   }
   &.slider {
+    $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
+
     background-clip: border-box;
-    background-image: linear-gradient(to bottom, $entry_bg);
-    border: 1px solid $selected_bg_color;
+    background-image: linear-gradient(to bottom, $button_bg);
+    border: 1px solid $_slider_border;
     border-radius: 50%;
     box-shadow: none;
 
     &:hover {
-    background-image: linear-gradient(to bottom, $selected_bg_color);
-    border-color: $selected_bg_color;
+    background-image: linear-gradient(to bottom, lighten($button_bg, 5%));
+    border-color: $_slider_border;
     }
     &:insensitive {
       background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%));
-      border-color: mix($selected_bg_color, $bg_color, 55%);
+      border-color: transparentize($_slider_border, 0.2);
     }
     &:active {
-      background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%));
-      border-color: darken($selected_bg_color, 10%);
+      background-image: linear-gradient(to bottom, $selected_bg_color);
+      border-color: $selected_bg_color;
     }
     //OSD sliders
     .osd & {
@@ -2068,7 +2151,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
   }
   &.trough {
 
-    $_scale_trough_bg: if($variant == 'light', $button_border, darken($base_color, 4%));
+    $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
 
     border: none;
     border-radius: 2.5px;
@@ -2147,7 +2230,7 @@ GtkProgressBar {
 GtkProgressBar.trough {
   border: none;
   border-radius: 3px;
-  background-color: if($variant == 'light', $button_border, darken($base_color, 4%));
+  background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
 
   &.osd {
     border-style: none;
@@ -2197,8 +2280,8 @@ GtkLevelBar.vertical {
       background-color: $warning_color;
     }
     &.empty-fill-block {
-      background-color: transparentize($fg_color,0.8);
-      border-color: transparentize($fg_color,0.8);
+      background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
+      border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
     }
   }
 }
@@ -2349,11 +2432,16 @@ GtkCalendar {
   }
   &.button, &.button:focus {
     color: transparentize($fg_color,0.55);
-    box-shadow: none;
-    border: none;
+    @include button(undecorated);
+
     &:hover {
       color: $fg_color;
     }
+    &:insensitive {
+      color: $insensitive_fg_color;
+      background-color: transparent;
+      background-image: none;
+    }
   }
   &.highlight { color: gtkalpha(currentColor,0.55); }
 }
@@ -2703,14 +2791,14 @@ GtkVolumeButton.button { padding: 8px; }
   $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45));
 
   box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
-              0 4px 8px 1px if($darker == 'false', opacify($_wm_border, 0.1), opacify($_wm_border, 0.15));
+              0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
 
   /* this is used for the resize cursor area */
   margin: 10px;
 
   &:backdrop {
-    box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
-                0 4px 5px 2px if($darker == 'false', $_wm_border, opacify($_wm_border, 0.15));
+    box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border),
+                0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
   }
   &.tiled {
     border-radius: 0;
@@ -2726,7 +2814,7 @@ GtkVolumeButton.button { padding: 8px; }
     &.popup, &.menu {
       border-radius: 2px;
       box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)),
-                  0 0 0 1px if($variant == 'light', $_wm_border, darken($base_color, 10%));
+                  0 0 0 1px if($variant == 'light', $_wm_border, darken($bg_color, 10%));
     }
     &.tooltip {
       border-radius: 2px;