Improve backdrop style of scale, progressbar and checked switches

tanderson-google · Feb 6, 2018 · 1a5a5b2 · 1a5a5b2
1 parent 9b9da5e
commit 1a5a5b2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/gtk-3.0/_common.scss b/gtk-3.0/_common.scss
@@ -2545,9 +2545,9 @@ switch {
 
     &:checked {
       @if $variant == 'light' { color: $backdrop_bg_color; }
-      border-color: if($variant == 'light', $selected_bg_color,
-                                            $selected_borders_color);
-      background-color: $selected_bg_color;
+      border-color: transparentize($selected_borders_color, 0.3);
+      background-color: transparentize($selected_bg_color, 0.3);
+      background-image: none;
       box-shadow: none;
     }
   }
@@ -2582,7 +2582,7 @@ switch {
       @include button(backdrop);
     }
 
-    &:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
+    &:checked slider { border-color: transparentize($selected_borders_color, 0.3); }
 
     &:disabled slider { @include button(backdrop-insensitive); }
   }
@@ -2823,8 +2823,9 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
   }
 
   &:backdrop {
-    border-color: if($variant=='light', $selected_bg_color,
-                                        $selected_borders_color);
+    border-color: transparentize($selected_borders_color, 0.3);
+    background-color: transparentize($selected_bg_color, 0.3);
+    background-image: none;
     &:disabled {
       background-color: transparent;
       border-color: transparent;

diff --git a/gtk-3.0/gtk-contained-dark.css b/gtk-3.0/gtk-contained-dark.css
@@ -2641,8 +2641,9 @@ switch {
     text-shadow: none;
     transition: 200ms ease-out; }
     switch:backdrop:checked {
-      border-color: #09294b;
-      background-color: #145ba6;
+      border-color: rgba(9, 41, 75, 0.7);
+      background-color: rgba(20, 91, 166, 0.7);
+      background-image: none;
       box-shadow: none; }
   switch:disabled {
     border-color: #1f2222;
@@ -2686,7 +2687,7 @@ switch {
     switch:backdrop slider label, switch:backdrop slider {
       color: #949796; }
   switch:backdrop:checked slider {
-    border-color: #09294b; }
+    border-color: rgba(9, 41, 75, 0.7); }
   switch:backdrop:disabled slider {
     border-color: #1f2222;
     background-color: #333636;
@@ -2975,7 +2976,9 @@ scale highlight, progressbar progress {
     background-color: transparent;
     border-color: transparent; }
   scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
-    border-color: #09294b; }
+    border-color: rgba(9, 41, 75, 0.7);
+    background-color: rgba(20, 91, 166, 0.7);
+    background-image: none; }
     scale highlight:backdrop:disabled, progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled {
       background-color: transparent;
       border-color: transparent; }

diff --git a/gtk-3.0/gtk-contained.css b/gtk-3.0/gtk-contained.css
@@ -2656,8 +2656,9 @@ switch {
     transition: 200ms ease-out; }
     switch:backdrop:checked {
       color: #cecece;
-      border-color: #398ee7;
-      background-color: #398ee7;
+      border-color: rgba(15, 66, 120, 0.7);
+      background-color: rgba(57, 142, 231, 0.7);
+      background-image: none;
       box-shadow: none; }
   switch:disabled {
     border-color: #8a8a8a;
@@ -2701,7 +2702,7 @@ switch {
     switch:backdrop slider label, switch:backdrop slider {
       color: #858585; }
   switch:backdrop:checked slider {
-    border-color: #398ee7; }
+    border-color: rgba(15, 66, 120, 0.7); }
   switch:backdrop:disabled slider {
     border-color: #8a8a8a;
     background-color: #e0e0e0;
@@ -3005,7 +3006,9 @@ scale highlight, progressbar progress {
     background-color: transparent;
     border-color: transparent; }
   scale highlight:backdrop, progressbar progress:backdrop, progressbar:backdrop progress {
-    border-color: #398ee7; }
+    border-color: rgba(15, 66, 120, 0.7);
+    background-color: rgba(57, 142, 231, 0.7);
+    background-image: none; }
     scale highlight:backdrop:disabled, progressbar progress:backdrop:disabled, progressbar:backdrop progress:disabled {
       background-color: transparent;
       border-color: transparent; }