[libadwaita/wip/exalm/scales: 1/2] stylesheet: Update scales and progress bars

[Alexander Mikhaylenko <alexm src gnome org>]

commit c17bcf3ef8fecdb4dec4fd108ae88aec77928d11
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu May 20 14:08:55 2021 +0500

    stylesheet: Update scales and progress bars
    
    Use a similar style to the new checks, radios, switches and level bars.
    
    Use an always light slider with a drop shadow, change that shadow for hover
    and active. Since the shadow is not visible in dark variant, also change
    the slider color in a way that will only affect dark.
    
    Since progress bars use the same styles, update them too.

 src/stylesheet/_colors.scss               |   2 -
 src/stylesheet/widgets/_progress-bar.scss |  17 ++--
 src/stylesheet/widgets/_scale.scss        | 129 +++++++++++++-----------------
 3 files changed, 61 insertions(+), 87 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index ba0d0c42..03099f7d 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -55,8 +55,6 @@ $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 //special cased widget colors
 $suggested_bg_color: $selected_bg_color;
 $suggested_border_color: $selected_borders_color;
-$progress_bg_color: $selected_bg_color;
-$progress_border_color: $selected_borders_color;
 $focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5), 
transparentize($selected_bg_color, 0.3));
 $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
 $dim_label_opacity: 0.55;
diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss
index e82e0356..8cfb203e 100644
--- a/src/stylesheet/widgets/_progress-bar.scss
+++ b/src/stylesheet/widgets/_progress-bar.scss
@@ -3,37 +3,34 @@ progressbar {
   &.horizontal {
     > trough {
       min-width: 150px;
-      &, > progress { min-height: 2px; }
+      &, > progress { min-height: 4px; }
     }
   }
 
   &.vertical {
     > trough {
       min-height: 80px;
-      &, > progress { min-width: 2px; }
+      &, > progress { min-width: 4px; }
     }
   }
 
-  &.horizontal > trough > progress { margin: 0 -1px; } // the progress node is positioned after the trough 
border
-  &.vertical > trough > progress { margin: -1px 0; }   // this moves it over it.
-
   // FIXME: insensitive state missing and some other state should be set probably
   font-size: smaller;
   color: transparentize($fg_color, 0.6);
   font-feature-settings: "tnum";
 
+  &:disabled {
+    filter: opacity(.5);
+  }
+
   > trough {
     @extend %scale_trough;
 
     > progress {
       @extend %scale_highlight; /* share most of scales' */
-      /* override insensitive that is specific to progress */
-      &:disabled {
-        background-color: $insensitive_fg_color;
-        border-color: $insensitive_fg_color;
-      }
 
       border-radius: 1.5px;
+
       $_progress-radius: 5px;
       &.left {
         border-top-left-radius: $_progress-radius;
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 6e916027..42af4780 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -1,40 +1,20 @@
 %scale_trough {
-  border: 1px solid $dark_fill;
   border-radius: 3px;
-  background-color: $dark_fill;
+  background-color: transparentize($text_color, .85);
 
-  headerbar & { background-color: darken($dark_fill,8%); } //3504
-
-  &:disabled {
-   background-color: $insensitive_bg_color;
-   border-color: $insensitive_borders_color;
+  @if $contrast == "high" {
+    box-shadow: inset 0 0 0 1px $borders_color;
   }
 
   // OSD
   .osd & {
-    border-color: $osd_borders_color;
-    background-color: transparentize($osd_borders_color, 0.2);
-
-    &:disabled { background-color: $osd_insensitive_bg_color; }
+    background-color: transparentize($osd_text_color, .85);
   }
 }
 
 %scale_highlight {
-  border: 1px solid $selected_bg_color;
   border-radius: 3px;
   background-color: $selected_bg_color;
-
-  &:disabled {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-
-    &:disabled { border-color: transparent; }
-  }
 }
 
 scale {
@@ -52,10 +32,6 @@ scale {
     transition: $focus_transition;
     @extend %scale_trough;
 
-    // those are inside the trough node, I need them to show their own border over the trough one, so 
negative margin
-    > fill,
-    > highlight { margin: -1px; }
-
     // the colored part of the backing bit
     > highlight { @extend %scale_highlight; }
 
@@ -64,82 +40,74 @@ scale {
     > fill {
       @extend %scale_trough;
 
-      &:disabled {
-        border-color: transparent;
-        background-color: transparent;
-      }
-
       // OSD
       .osd & {
         background-color: mix($osd_fg_color, $osd_borders_color, 25%);
-
-        &:disabled {
-         border-color: transparent;
-         background-color: transparent;
-        }
       }
     }
 
     > slider {
-      @include button(normal);
-      border-width: 1px;
-      border-style: solid;
+      background-color: mix(white, $base_color, 80%);
+      box-shadow: 0 2px 4px transparentize(black, .8);
+      outline: 1px solid transparentize(black, .9);
+
       border-radius: 100%;
       transition: $button_transition;
       transition-property: background, border, box-shadow;
 
       // the slider is inside the trough, so to have make it bigger there's a negative margin
-      min-height: 18px;
-      min-width: 18px;
-      margin: -9px;
-
-      &:hover { @include button(hover); }
+      min-width: 20px;
+      min-height: 20px;
+      margin: -8px;
+    }
+  }
 
-      &:active { border-color: $selected_borders_color; }
+  &:hover {
+    > trough {
+      background-color: transparentize($text_color, .8);
 
-      &:disabled { @include button(insensitive); }
+      > highlight {
+        background-color: mix($selected_bg_color, $text_color, 90%);
+      }
 
-      // OSD
-      .osd & {
-        @include button(osd);
-        border-color: darken($osd_borders_color, 3%);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
+      > slider {
+        background-color: white;
+      }
+    }
+  }
 
-        &:hover {
-          @include button(osd-hover);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
+  &:disabled {
+    filter: opacity(.5);
 
-        &:active {
-          @include button(osd-active);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
+    > trough > slider {
+      box-shadow: 0 2px 4px transparent;
+      outline-color: transparentize(black, .8);
+    }
+  }
 
-        &:disabled {
-          @include button(osd-insensitive);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
+  @if $contrast == "high" {
+    &, &:hover, &.dragging, &:disabled {
+      > trough > slider {
+        outline-color: transparentize(black, .5);
       }
     }
   }
 
   // click-and-hold the slider to activate
   &.fine-tune {
+    padding: 9px;
+
     &.horizontal {
-      padding-top: 9px;
-      padding-bottom: 9px;
       min-height: 16px;
     }
 
     &.vertical {
-      padding-left: 9px;
-      padding-right: 9px;
       min-width: 16px;
     }
 
     > trough {
       // to make the trough grow in fine-tune mode
-      > slider { margin: -6px; }
+      > slider { margin: -5px; }
 
       > fill,
       > highlight,
@@ -155,13 +123,24 @@ scale {
   }
 
   &.marks-before, &.marks-after {
-    > trough > slider {
-      // Adjust box-shadow for the 45deg rotation, for 0 1px we ideally want
-      // 1/√2px 1/√2px, round that to 1px 1px
-      $_button_shadow: 1px 1px 2px transparentize($shadow_color, 0.03);
+    // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want
+    // 1/√2px 1/√2px, round that to 1px 1px
+    $_shadow_size: 1px 1px;
 
-      box-shadow: $_button_shadow;
+    > trough > slider {
       transform: rotate(45deg);
+
+      box-shadow: $_shadow_size 4px transparentize(black, .8);
+    }
+
+    &:hover > trough > slider {
+      box-shadow: $_shadow_size 4px transparentize(black, .6);
+    }
+
+    &.dragging, &:disabled {
+      > trough > slider {
+        box-shadow: $_shadow_size 4px transparent;
+      }
     }
   }