theme: Redesign color scales

See https://gitlab.gnome.org/GNOME/libadwaita/-/issues/469

Since this style needs changes in color scales themselves, it makes sense
to have it in GTK as well.

1 files changed, 19 insertions, 97 deletions

diff --git a/gtk/theme/Default/_common.scss b/gtk/theme/Default/_common.scss
index fc0f75c5aa..0d992641f7 100644
--- a/gtk/theme/Default/_common.scss
+++ b/gtk/theme/Default/_common.scss
@@ -2923,116 +2923,38 @@ scale {
   }
 
   &.color {
-    min-height: 0;
-    min-width: 0;
+    padding: 0;
 
     > trough {
-      background-image: image($borders_color);
-      background-repeat: no-repeat;
-    }
-
-    &.horizontal {
-      padding: 0 0 15px 0;
-
-      > trough {
-        padding-bottom: 4px;
-        background-position: 0 -3px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
+      border: none;
+      background: none;
+      border-radius: 10px;
+      outline-offset: 1px;
 
-      > trough > slider {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          &:hover, &:backdrop, &:disabled, &:backdrop: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;
-        }
-
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-left: -15px;
-            margin-right: 6px;
-          }
-        }
-      }
-
-      &: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;
-        }
+    &.fine-tune {
+      &.vertical {
+        padding-left: 2px;
+        padding-right: 2px;
 
         > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-right: -15px;
-            margin-left: 6px;
-          }
+          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;
-          }
-
-          > trough > slider {
-            margin-bottom: -15px;
-            margin-top: 6px;
-          }
-        }
-      }
-
-      &.vertical {
-        &:dir(ltr) {
-          padding: 0 0 0 12px;
-
-          > trough {
-            padding-left: 7px;
-            background-position: 6px 0;
-          }
-
-          > trough > slider {
-            margin-left: -15px;
-            margin-right: 6px;
-          }
-        }
+        padding-top: 2px;
+        padding-bottom: 2px;
 
-        &:dir(rtl) {
-          padding: 0 12px 0 0;
-
-          > trough {
-            padding-right: 7px;
-            background-position: -6px 0;
-          }
-
-          > trough > slider {
-            margin-right: -15px;
-            margin-left: 6px;
-          }
+        > trough > slider {
+          margin-top: -2px;
+          margin-bottom: -2px;
         }
       }
     }