[gtk+] Adwaita: scale fill style

[Lapo Calamandrei <lapo src gnome org>]

commit 234c4974745e00e1049e34e4bcad77c0bfa3e5a9
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Dec 3 12:18:17 2015 +0100

    Adwaita: scale fill style

 gtk/theme/Adwaita/_common.scss           |  161 ++++++++++++++++++------------
 gtk/theme/Adwaita/gtk-contained-dark.css |  101 ++++++++++--------
 gtk/theme/Adwaita/gtk-contained.css      |  101 ++++++++++--------
 3 files changed, 208 insertions(+), 155 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d4c1b80..59541b8 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2124,6 +2124,72 @@ checkbutton.text-button, radiobutton.text-button {
  * GtkScale *
  ************/
 
+%scale_trough {
+  border: 1px solid $borders_color;
+  border-radius: 3px;
+  background-color: $dark_fill;
+  box-shadow: inset 1px 1px transparentize(black, 0.9),
+              _widget_edge();
+
+  &:insensitive {
+    background-color: $insensitive_bg_color;
+    box-shadow: _widget_edge();
+  }
+
+  &:backdrop {
+    background-color: $backdrop_dark_fill;
+    border-color: $backdrop_borders_color;
+    box-shadow: none;
+    &:insensitive { background-color: $insensitive_bg_color; }
+  }
+
+  // ...on selected list rows
+  row:selected & {
+    box-shadow: none;
+
+    &, &:insensitive { border-color: $selected_borders_color; }
+  }
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+    background-color: transparentize($osd_borders_color, 0.2);
+    box-shadow: none;
+    outline-color: transparentize($osd_fg_color, 0.8);
+
+    &:insensitive { background-color: $osd_insensitive_bg_color; }
+  }
+}
+
+%scale_highlight {
+  border: 1px solid $selected_borders_color;
+  border-radius: 3px;
+  background-color: $selected_bg_color;
+
+  &:insensitive {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &:backdrop {
+    border-color: if($variant=='light', $selected_bg_color,
+                                        $selected_borders_color);
+    &:insensitive {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  // ...on selected list rows
+  row:selected & { &, &:insensitive { border-color: $selected_borders_color; } }
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+    &:insensitive { border-color: transparent; }
+  }
+}
+
 scale {
   // FIXME: rationalize
   -GtkScale-slider-length: 20;
@@ -2153,10 +2219,40 @@ scale {
 
   &.vertical slider { margin: 0 2px; }
 
+  // the backing bit
   trough { @extend %scale_trough; }
 
+  // the colored part of the backing bit
   highlight { @extend %scale_highlight; }
 
+  // this is another differently styled part of the backing bit, the most relevant use case is for example
+  // in media player to indicate how much video stream as been cached
+  fill {
+    @extend %scale_trough;
+    &, &:backdrop {
+      background-color: $borders_color;
+      box-shadow: none;
+    }
+
+    &:insensitive {
+      &, &:backdrop {
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+
+    // OSD
+    .osd & {
+      background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+      &:insensitive {
+        &, &:backdrop {
+          border-color: transparent;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
   slider {
     // FIXME: scale-has-marks-* missing
     $_slider_edge_color: transparentize(black, 0.9);
@@ -2199,71 +2295,6 @@ scale {
   }
 }
 
-%scale_trough {
-  border: 1px solid $borders_color;
-  border-radius: 3px;
-  background-color: $dark_fill;
-  box-shadow: inset 1px 1px transparentize(black, 0.9),
-              _widget_edge();
-
-  &:insensitive {
-    background-color: $insensitive_bg_color;
-    box-shadow: _widget_edge();
-  }
-
-  &:backdrop {
-    background-color: $backdrop_dark_fill;
-    border-color: $backdrop_borders_color;
-    box-shadow: none;
-    &:insensitive { background-color: $insensitive_bg_color; }
-  }
-
-  // ...on selected list rows
-  row:selected & {
-    box-shadow: none;
-
-    &, &:insensitive { border-color: $selected_borders_color; }
-  }
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-    background-color: transparentize($osd_borders_color, 0.2);
-    box-shadow: none;
-    outline-color: transparentize($osd_fg_color, 0.8);
-
-    &:insensitive { background-color: $osd_insensitive_bg_color; }
-  }
-}
-
-%scale_highlight {
-  border: 1px solid $selected_borders_color;
-  border-radius: 3px;
-  background-color: $selected_bg_color;
-
-  &:insensitive {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  &:backdrop {
-    border-color: if($variant=='light', $selected_bg_color,
-                                        $selected_borders_color);
-    &:insensitive {
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
-
-  // ...on selected list rows
-  row:selected & { &, &:insensitive { border-color: $selected_borders_color; } }
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-    &:insensitive { border-color: transparent; }
-  }
-}
 
 /*****************
  * Progress bars *
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index a160110..01dbe1a 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2908,6 +2908,51 @@ checkbutton.text-button, radiobutton.text-button {
 /************
  * GtkScale *
  ************/
+scale trough, scale fill, progressbar trough {
+  border: 1px solid #1c1f1f;
+  border-radius: 3px;
+  background-color: #2f3434;
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+  scale trough:insensitive, scale fill:insensitive, progressbar trough:insensitive {
+    background-color: #333636;
+    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+  scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
+    background-color: #303535;
+    border-color: #1f2222;
+    box-shadow: none; }
+    scale trough:backdrop:insensitive, scale fill:backdrop:insensitive, progressbar 
trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
+      background-color: #333636; }
+  row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected progressbar trough, progressbar row:selected trough {
+    box-shadow: none; }
+    row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected progressbar trough, progressbar row:selected trough, row:selected scale trough:insensitive, 
scale row:selected trough:insensitive, row:selected scale fill:insensitive, scale row:selected 
fill:insensitive, row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
+      border-color: #0f2b48; }
+  .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill, .osd progressbar trough, 
progressbar .osd trough {
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.2); }
+    .osd scale trough:insensitive, scale .osd trough:insensitive, .osd scale fill:insensitive, scale .osd 
fill:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
+      background-color: rgba(53, 57, 58, 0.5); }
+
+scale highlight, progressbar progress {
+  border: 1px solid #0f2b48;
+  border-radius: 3px;
+  background-color: #215d9c; }
+  scale highlight:insensitive, progressbar progress:insensitive {
+    background-color: transparent;
+    border-color: transparent; }
+  scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
+    border-color: #0f2b48; }
+    scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop 
progress:insensitive {
+      background-color: transparent;
+      border-color: transparent; }
+  row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar 
row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, 
row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
+    border-color: #0f2b48; }
+  .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
+    border-color: rgba(0, 0, 0, 0.7); }
+    .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar 
progress:insensitive, progressbar .osd progress:insensitive {
+      border-color: transparent; }
+
 scale {
   -GtkScale-slider-length: 20;
   -GtkRange-slider-width: 24;
@@ -2930,6 +2975,17 @@ scale {
     margin: 2px 0; }
   scale.vertical slider {
     margin: 0 2px; }
+  scale fill, scale fill:backdrop {
+    background-color: #1c1f1f;
+    box-shadow: none; }
+  scale fill:insensitive, scale fill:insensitive:backdrop {
+    border-color: transparent;
+    background-color: transparent; }
+  .osd scale fill {
+    background-color: rgba(91, 91, 90, 0.775); }
+    .osd scale fill:insensitive, .osd scale fill:insensitive:backdrop {
+      border-color: transparent;
+      background-color: transparent; }
   scale slider {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
@@ -3023,51 +3079,6 @@ scale {
         text-shadow: none;
         -gtk-icon-shadow: none; }
 
-scale trough, progressbar trough {
-  border: 1px solid #1c1f1f;
-  border-radius: 3px;
-  background-color: #2f3434;
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
-  scale trough:insensitive, progressbar trough:insensitive {
-    background-color: #333636;
-    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
-  scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
-    background-color: #303535;
-    border-color: #1f2222;
-    box-shadow: none; }
-    scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop 
trough:insensitive {
-      background-color: #333636; }
-  row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar 
row:selected trough {
-    box-shadow: none; }
-    row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar 
row:selected trough, row:selected scale trough:insensitive, scale row:selected trough:insensitive, 
row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
-      border-color: #0f2b48; }
-  .osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough {
-    border-color: rgba(0, 0, 0, 0.7);
-    background-color: rgba(0, 0, 0, 0.5);
-    box-shadow: none;
-    outline-color: rgba(238, 238, 236, 0.2); }
-    .osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, 
progressbar .osd trough:insensitive {
-      background-color: rgba(53, 57, 58, 0.5); }
-
-scale highlight, progressbar progress {
-  border: 1px solid #0f2b48;
-  border-radius: 3px;
-  background-color: #215d9c; }
-  scale highlight:insensitive, progressbar progress:insensitive {
-    background-color: transparent;
-    border-color: transparent; }
-  scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
-    border-color: #0f2b48; }
-    scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop 
progress:insensitive {
-      background-color: transparent;
-      border-color: transparent; }
-  row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar 
row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, 
row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
-    border-color: #0f2b48; }
-  .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
-    border-color: rgba(0, 0, 0, 0.7); }
-    .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar 
progress:insensitive, progressbar .osd progress:insensitive {
-      border-color: transparent; }
-
 /*****************
  * Progress bars *
  *****************/
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 6f17d1d..affe646 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -3070,6 +3070,51 @@ checkbutton.text-button, radiobutton.text-button {
 /************
  * GtkScale *
  ************/
+scale trough, scale fill, progressbar trough {
+  border: 1px solid #a1a1a1;
+  border-radius: 3px;
+  background-color: #d2d2d2;
+  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
+  scale trough:insensitive, scale fill:insensitive, progressbar trough:insensitive {
+    background-color: #f4f4f4;
+    box-shadow: 0 1px white; }
+  scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
+    background-color: #d5d5d5;
+    border-color: darkgray;
+    box-shadow: none; }
+    scale trough:backdrop:insensitive, scale fill:backdrop:insensitive, progressbar 
trough:backdrop:insensitive, progressbar:backdrop trough:insensitive {
+      background-color: #f4f4f4; }
+  row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected progressbar trough, progressbar row:selected trough {
+    box-shadow: none; }
+    row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected progressbar trough, progressbar row:selected trough, row:selected scale trough:insensitive, 
scale row:selected trough:insensitive, row:selected scale fill:insensitive, scale row:selected 
fill:insensitive, row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
+      border-color: #184472; }
+  .osd scale trough, scale .osd trough, .osd scale fill, scale .osd fill, .osd progressbar trough, 
progressbar .osd trough {
+    border-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: none;
+    outline-color: rgba(238, 238, 236, 0.2); }
+    .osd scale trough:insensitive, scale .osd trough:insensitive, .osd scale fill:insensitive, scale .osd 
fill:insensitive, .osd progressbar trough:insensitive, progressbar .osd trough:insensitive {
+      background-color: rgba(53, 57, 58, 0.5); }
+
+scale highlight, progressbar progress {
+  border: 1px solid #184472;
+  border-radius: 3px;
+  background-color: #4a90d9; }
+  scale highlight:insensitive, progressbar progress:insensitive {
+    background-color: transparent;
+    border-color: transparent; }
+  scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
+    border-color: #4a90d9; }
+    scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop 
progress:insensitive {
+      background-color: transparent;
+      border-color: transparent; }
+  row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar 
row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, 
row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
+    border-color: #184472; }
+  .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
+    border-color: rgba(0, 0, 0, 0.7); }
+    .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar 
progress:insensitive, progressbar .osd progress:insensitive {
+      border-color: transparent; }
+
 scale {
   -GtkScale-slider-length: 20;
   -GtkRange-slider-width: 24;
@@ -3092,6 +3137,17 @@ scale {
     margin: 2px 0; }
   scale.vertical slider {
     margin: 0 2px; }
+  scale fill, scale fill:backdrop {
+    background-color: #a1a1a1;
+    box-shadow: none; }
+  scale fill:insensitive, scale fill:insensitive:backdrop {
+    border-color: transparent;
+    background-color: transparent; }
+  .osd scale fill {
+    background-color: rgba(91, 91, 90, 0.775); }
+    .osd scale fill:insensitive, .osd scale fill:insensitive:backdrop {
+      border-color: transparent;
+      background-color: transparent; }
   scale slider {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
@@ -3185,51 +3241,6 @@ scale {
         text-shadow: none;
         -gtk-icon-shadow: none; }
 
-scale trough, progressbar trough {
-  border: 1px solid #a1a1a1;
-  border-radius: 3px;
-  background-color: #d2d2d2;
-  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
-  scale trough:insensitive, progressbar trough:insensitive {
-    background-color: #f4f4f4;
-    box-shadow: 0 1px white; }
-  scale trough:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
-    background-color: #d5d5d5;
-    border-color: darkgray;
-    box-shadow: none; }
-    scale trough:backdrop:insensitive, progressbar trough:backdrop:insensitive, progressbar:backdrop 
trough:insensitive {
-      background-color: #f4f4f4; }
-  row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar 
row:selected trough {
-    box-shadow: none; }
-    row:selected scale trough, scale row:selected trough, row:selected progressbar trough, progressbar 
row:selected trough, row:selected scale trough:insensitive, scale row:selected trough:insensitive, 
row:selected progressbar trough:insensitive, progressbar row:selected trough:insensitive {
-      border-color: #184472; }
-  .osd scale trough, scale .osd trough, .osd progressbar trough, progressbar .osd trough {
-    border-color: rgba(0, 0, 0, 0.7);
-    background-color: rgba(0, 0, 0, 0.5);
-    box-shadow: none;
-    outline-color: rgba(238, 238, 236, 0.2); }
-    .osd scale trough:insensitive, scale .osd trough:insensitive, .osd progressbar trough:insensitive, 
progressbar .osd trough:insensitive {
-      background-color: rgba(53, 57, 58, 0.5); }
-
-scale highlight, progressbar progress {
-  border: 1px solid #184472;
-  border-radius: 3px;
-  background-color: #4a90d9; }
-  scale highlight:insensitive, progressbar progress:insensitive {
-    background-color: transparent;
-    border-color: transparent; }
-  scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
-    border-color: #4a90d9; }
-    scale highlight:backdrop:insensitive, progressbar progress:backdrop:insensitive, progressbar:backdrop 
progress:insensitive {
-      background-color: transparent;
-      border-color: transparent; }
-  row:selected scale highlight, scale row:selected highlight, row:selected progressbar progress, progressbar 
row:selected progress, row:selected scale highlight:insensitive, scale row:selected highlight:insensitive, 
row:selected progressbar progress:insensitive, progressbar row:selected progress:insensitive {
-    border-color: #184472; }
-  .osd scale highlight, scale .osd highlight, .osd progressbar progress, progressbar .osd progress {
-    border-color: rgba(0, 0, 0, 0.7); }
-    .osd scale highlight:insensitive, scale .osd highlight:insensitive, .osd progressbar 
progress:insensitive, progressbar .osd progress:insensitive {
-      border-color: transparent; }
-
 /*****************
  * Progress bars *
  *****************/