[libadwaita/wip/exalm/scales: 2/2] stylesheet: Update GtkColorScale style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 5a3b825f85dc7314a7eedc938b862ca1f93ecc20
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu May 12 14:57:21 2022 +0400

    stylesheet: Update GtkColorScale style
    
    Now that GTK changes are in, sync up with them.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/469

 src/stylesheet/widgets/_scale.scss | 118 +++++++------------------------------
 1 file changed, 20 insertions(+), 98 deletions(-)
---
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 6c21a55f..92f05519 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -194,116 +194,38 @@ scale {
   }
 
   &.color {
-    min-height: 0;
-    min-width: 0;
+    padding: 0;
+    @include focus-ring("> trough", $offset: 1px);
 
     > trough {
-      background-image: image($border_color);
-      background-repeat: no-repeat;
-    }
+      border: none;
+      background: none;
+      border-radius: 10px;
 
-    &.horizontal {
-      padding: 0 0 15px 0;
-
-      > trough {
-        padding-bottom: 4px;
-        background-position: 0 -3px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-
-        > slider {
-          &:dir(ltr), &:dir(rtl) { // specificity bump
-            &:hover, &:disabled, & {
-              margin-bottom: -15px;
-              margin-top: 6px;
-            }
-          }
-        }
+      > slider {
+        margin: 0;
+        opacity: .8;
       }
     }
 
-    &.vertical {
-      &:dir(ltr) {
-        padding: 0 0 0 15px;
-
-        > trough {
-          padding-left: 4px;
-          background-position: 3px 0;
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
-
-          > slider {
-            &:hover, &:disabled, & {
-              margin-left: -15px;
-              margin-right: 6px;
-            }
-          }
-        }
-      }
+    &.fine-tune {
+      &.vertical {
+        padding-left: 2px;
+        padding-right: 2px;
 
-      &:dir(rtl) {
-        padding: 0 15px 0 0;
-
-        > trough {
-          padding-right: 4px;
-          background-position: -3px 0;
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
-
-          > slider {
-            &:hover, &:disabled, & {
-              margin-right: -15px;
-              margin-left: 6px;
-            }
-          }
+        > trough > slider {
+          margin-left: -2px;
+          margin-right: -2px;
         }
       }
-    }
 
-    &.fine-tune {
       &.horizontal {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          padding: 0 0 12px 0;
-
-          > trough {
-            padding-bottom: 7px;
-            background-position: 0 -6px;
-
-            > slider {
-              margin-bottom: -15px;
-              margin-top: 6px;
-            }
-          }
-        }
-      }
-
-      &.vertical {
-        &:dir(ltr) {
-          padding: 0 0 0 12px;
-
-          > trough {
-            padding-left: 7px;
-            background-position: 6px 0;
-
-            > slider {
-              margin-left: -15px;
-              margin-right: 6px;
-            }
-          }
-        }
-
-        &:dir(rtl) {
-          padding: 0 12px 0 0;
-
-          > trough {
-            padding-right: 7px;
-            background-position: -6px 0;
+        padding-top: 2px;
+        padding-bottom: 2px;
 
-            > slider {
-              margin-right: -15px;
-              margin-left: 6px;
-            }
-          }
+        > trough > slider {
+          margin-top: -2px;
+          margin-bottom: -2px;
         }
       }
     }