From 234c4974745e00e1049e34e4bcad77c0bfa3e5a9 Mon Sep 17 00:00:00 2001
From: Lapo Calamandrei <calamandrei@gmail.com>
Date: Thu, 3 Dec 2015 12:18:17 +0100
Subject: [PATCH] Adwaita: scale fill style

---
 gtk/theme/Adwaita/_common.scss           | 181 +++++++++++++----------
 gtk/theme/Adwaita/gtk-contained-dark.css | 101 +++++++------
 gtk/theme/Adwaita/gtk-contained.css      | 101 +++++++------
 3 files changed, 218 insertions(+), 165 deletions(-)

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d4c1b80a69..59541b8677 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2124,81 +2124,6 @@ checkbutton.text-button, radiobutton.text-button {
  * GtkScale *
  ************/
 
-scale {
-  // FIXME: rationalize
-  -GtkScale-slider-length: 20;
-  -GtkRange-slider-width: 24;
-  -GtkRange-trough-border: 2;
-
-  outline-offset: -9px;
-  outline-radius: 6px;
-
-  &.fine-tune {
-    outline-offset: -7px;
-    outline-radius: 8px;
-
-    trough,
-    fill,
-    highlight {
-      margin: 10px;
-      border-radius: 4px;
-    }
-  }
-
-  trough,
-  fill,
-  highlight { margin: 12px; }
-
-  &:not(.vertical) slider { margin: 2px 0; }
-
-  &.vertical slider { margin: 0 2px; }
-
-  trough { @extend %scale_trough; }
-
-  highlight { @extend %scale_highlight; }
-
-  slider {
-    // FIXME: scale-has-marks-* missing
-    $_slider_edge_color: transparentize(black, 0.9);
-    @include button(normal, $edge: $_slider_edge_color);
-    border: 1px solid darken($borders_color, 3%);
-    border-radius: 100%;
-
-    &:hover { @include button(hover, $edge: $_slider_edge_color); }
-
-    &:active { border-color: $selected_borders_color; }
-
-    &:insensitive { @include button (insensitive); }
-
-    &:backdrop {
-      @include button(backdrop);
-      &:insensitive { @include button(backdrop-insensitive); }
-    }
-
-    // ...on selected list rows
-    row:selected & { &, &:insensitive { border-color: $selected_borders_color; } }
-
-    // OSD
-    .osd & {
-      @include button(osd);
-      border-color: darken($osd_borders_color, 3%);
-      background-color: opacify($osd_bg_color, 1); // solid background needed here
-
-      &:hover { @include button(osd-hover); }
-
-      &:active { @include button(osd-active); }
-
-      &:insensitive { @include button(osd-insensitive); }
-
-      &:backdrop {
-        @include button(osd-backdrop);
-
-        &:insensitive { @include button(osd-backdrop-insensitive); }
-      }
-    }
-  }
-}
-
 %scale_trough {
   border: 1px solid $borders_color;
   border-radius: 3px;
@@ -2265,6 +2190,112 @@ scale {
   }
 }
 
+scale {
+  // FIXME: rationalize
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 24;
+  -GtkRange-trough-border: 2;
+
+  outline-offset: -9px;
+  outline-radius: 6px;
+
+  &.fine-tune {
+    outline-offset: -7px;
+    outline-radius: 8px;
+
+    trough,
+    fill,
+    highlight {
+      margin: 10px;
+      border-radius: 4px;
+    }
+  }
+
+  trough,
+  fill,
+  highlight { margin: 12px; }
+
+  &:not(.vertical) slider { margin: 2px 0; }
+
+  &.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);
+    @include button(normal, $edge: $_slider_edge_color);
+    border: 1px solid darken($borders_color, 3%);
+    border-radius: 100%;
+
+    &:hover { @include button(hover, $edge: $_slider_edge_color); }
+
+    &:active { border-color: $selected_borders_color; }
+
+    &:insensitive { @include button (insensitive); }
+
+    &:backdrop {
+      @include button(backdrop);
+      &:insensitive { @include button(backdrop-insensitive); }
+    }
+
+    // ...on selected list rows
+    row:selected & { &, &:insensitive { border-color: $selected_borders_color; } }
+
+    // OSD
+    .osd & {
+      @include button(osd);
+      border-color: darken($osd_borders_color, 3%);
+      background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+      &:hover { @include button(osd-hover); }
+
+      &:active { @include button(osd-active); }
+
+      &:insensitive { @include button(osd-insensitive); }
+
+      &:backdrop {
+        @include button(osd-backdrop);
+
+        &:insensitive { @include button(osd-backdrop-insensitive); }
+      }
+    }
+  }
+}
+
+
 /*****************
  * Progress bars *
  *****************/
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index a16011029e..01dbe1afc3 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 6f17d1d88c..affe646ac2 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 *
  *****************/