From 4359106bd985b83b0d4681acd570e97ca47cc204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= <daniel@drasite.com>
Date: Wed, 30 Dec 2020 10:05:45 +0100
Subject: [PATCH] GTK3: use button styling for switch and scale sliders

---
 share/themes/Kali-Dark/gtk-3.0/gtk.css        | 48 ++++++++----------
 share/themes/Kali-Light/gtk-3.0/gtk-dark.css  | 48 ++++++++----------
 share/themes/Kali-Light/gtk-3.0/gtk.css       | 50 ++++++++-----------
 .../Kali/sass/gtk-sass/_common-tweaks.scss    | 39 ++++++---------
 4 files changed, 78 insertions(+), 107 deletions(-)

diff --git a/share/themes/Kali-Dark/gtk-3.0/gtk.css b/share/themes/Kali-Dark/gtk-3.0/gtk.css
index 875540bb..fd7c8bf3 100644
--- a/share/themes/Kali-Dark/gtk-3.0/gtk.css
+++ b/share/themes/Kali-Dark/gtk-3.0/gtk.css
@@ -5089,12 +5089,6 @@ headerbar spinbutton:not(.vertical),
 headerbar entry {
   background: #272a34; }
 
-/**********
- * Slider *
- **********/
-scale slider:active, switch:hover slider {
-  background-image: image(#0f1014); }
-
 /**********
  * Switch *
  **********/
@@ -5108,23 +5102,12 @@ switch {
   switch:backdrop, switch:disabled {
     box-shadow: none;
     border-color: #16171d; }
-  switch slider {
-    color: #eeeeec;
-    outline-color: rgba(238, 238, 236, 0.3);
-    border-color: black;
-    background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
-    border: 1px solid black;
-    border-radius: 50%;
-    transition-property: background, border, box-shadow; }
-    switch slider:checked {
-      border-color: black; }
-      switch slider:checked:backdrop:not(:disabled) {
-        border-color: #16171d; }
-    switch slider:disabled {
+  switch slider:checked {
+    border-color: #0d0e11; }
+    switch slider:checked:backdrop:not(:disabled) {
       border-color: #16171d; }
-  switch:hover slider {
-    border-color: #2777ff; }
+  switch slider:disabled {
+    border-color: #16171d; }
 
 /*************************
  * Check and Radio items *
@@ -5161,11 +5144,22 @@ radio:indeterminate, menu menuitem radio:checked, menu menuitem radio:indetermin
   radio:indeterminate:backdrop, menu menuitem radio:checked:backdrop, menu menuitem radio:indeterminate:backdrop {
     background-image: image(#2777ff); }
 
-/************
- * GtkScale *
- ************/
-scale slider:active {
-  border-color: #2777ff; }
+switch slider,
+scale slider {
+  color: #eeeeec;
+  outline-color: rgba(238, 238, 236, 0.3);
+  border-color: #0d0e11;
+  border-bottom-color: black;
+  background-image: linear-gradient(to top, #292c37 2px, #2e313d);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
+  border-color: black; }
+  switch:hover slider, switch slider:active,
+  scale slider:active {
+    background-image: image(#0f1014);
+    border-color: #2777ff; }
+  switch slider:disabled,
+  scale slider:disabled {
+    border-color: #16171d; }
 
 /***************
  * Header bars *
diff --git a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
index 875540bb..fd7c8bf3 100644
--- a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
+++ b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
@@ -5089,12 +5089,6 @@ headerbar spinbutton:not(.vertical),
 headerbar entry {
   background: #272a34; }
 
-/**********
- * Slider *
- **********/
-scale slider:active, switch:hover slider {
-  background-image: image(#0f1014); }
-
 /**********
  * Switch *
  **********/
@@ -5108,23 +5102,12 @@ switch {
   switch:backdrop, switch:disabled {
     box-shadow: none;
     border-color: #16171d; }
-  switch slider {
-    color: #eeeeec;
-    outline-color: rgba(238, 238, 236, 0.3);
-    border-color: black;
-    background-image: linear-gradient(to bottom, #1c1e25 20%, #16171d 90%);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
-    border: 1px solid black;
-    border-radius: 50%;
-    transition-property: background, border, box-shadow; }
-    switch slider:checked {
-      border-color: black; }
-      switch slider:checked:backdrop:not(:disabled) {
-        border-color: #16171d; }
-    switch slider:disabled {
+  switch slider:checked {
+    border-color: #0d0e11; }
+    switch slider:checked:backdrop:not(:disabled) {
       border-color: #16171d; }
-  switch:hover slider {
-    border-color: #2777ff; }
+  switch slider:disabled {
+    border-color: #16171d; }
 
 /*************************
  * Check and Radio items *
@@ -5161,11 +5144,22 @@ radio:indeterminate, menu menuitem radio:checked, menu menuitem radio:indetermin
   radio:indeterminate:backdrop, menu menuitem radio:checked:backdrop, menu menuitem radio:indeterminate:backdrop {
     background-image: image(#2777ff); }
 
-/************
- * GtkScale *
- ************/
-scale slider:active {
-  border-color: #2777ff; }
+switch slider,
+scale slider {
+  color: #eeeeec;
+  outline-color: rgba(238, 238, 236, 0.3);
+  border-color: #0d0e11;
+  border-bottom-color: black;
+  background-image: linear-gradient(to top, #292c37 2px, #2e313d);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
+  border-color: black; }
+  switch:hover slider, switch slider:active,
+  scale slider:active {
+    background-image: image(#0f1014);
+    border-color: #2777ff; }
+  switch slider:disabled,
+  scale slider:disabled {
+    border-color: #16171d; }
 
 /***************
  * Header bars *
diff --git a/share/themes/Kali-Light/gtk-3.0/gtk.css b/share/themes/Kali-Light/gtk-3.0/gtk.css
index 0516f49c..9b91aa5d 100644
--- a/share/themes/Kali-Light/gtk-3.0/gtk.css
+++ b/share/themes/Kali-Light/gtk-3.0/gtk.css
@@ -5110,12 +5110,6 @@ headerbar spinbutton:not(.vertical),
 headerbar entry {
   background: #fafafa; }
 
-/**********
- * Slider *
- **********/
-scale slider:active, switch:hover slider {
-  background-image: image(white); }
-
 /**********
  * Switch *
  **********/
@@ -5129,23 +5123,12 @@ switch {
   switch:backdrop, switch:disabled {
     box-shadow: none;
     border-color: #e0e0e0; }
-  switch slider {
-    color: #5c616c;
-    outline-color: rgba(92, 97, 108, 0.3);
-    border-color: #c2c2c2;
-    background-image: linear-gradient(to bottom, white 20%, #ffffff 90%);
-    box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
-    border: 1px solid #bababa;
-    border-radius: 50%;
-    transition-property: background, border, box-shadow; }
-    switch slider:checked {
-      border-color: #0051da; }
-      switch slider:checked:backdrop:not(:disabled) {
-        border-color: #2777ff; }
-    switch slider:disabled {
-      border-color: #e0e0e0; }
-  switch:hover slider {
-    border-color: #2777ff; }
+  switch slider:checked {
+    border-color: #0051da; }
+    switch slider:checked:backdrop:not(:disabled) {
+      border-color: #2777ff; }
+  switch slider:disabled {
+    border-color: #e0e0e0; }
 
 /*************************
  * Check and Radio items *
@@ -5182,11 +5165,22 @@ radio:indeterminate, menu menuitem radio:checked, menu menuitem radio:indetermin
   radio:indeterminate:backdrop, menu menuitem radio:checked:backdrop, menu menuitem radio:indeterminate:backdrop {
     background-image: image(#2777ff); }
 
-/************
- * GtkScale *
- ************/
-scale slider:active {
-  border-color: #2777ff; }
+switch slider,
+scale slider {
+  color: #5c616c;
+  outline-color: rgba(92, 97, 108, 0.3);
+  border-color: #d9d9d9;
+  border-bottom-color: #c2c2c2;
+  background-image: linear-gradient(to top, white 2px, white);
+  box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
+  border-color: #bababa; }
+  switch:hover slider, switch slider:active,
+  scale slider:active {
+    background-image: image(white);
+    border-color: #2777ff; }
+  switch slider:disabled,
+  scale slider:disabled {
+    border-color: #e0e0e0; }
 
 /***************
  * Header bars *
diff --git a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
index 18a95a4e..2a3214bc 100644
--- a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
+++ b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
@@ -59,19 +59,10 @@ headerbar entry {
   background: $base_color;
 }
 
-/**********
- * Slider *
- **********/
-%slider_active {
-  background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
-}
-
 /**********
  * Switch *
  **********/
 switch {
-  $_slider_border_color: darken($alt_borders_color, 3%);
-
   box-shadow: $_widget_inset_shadow;
 
   &:checked {
@@ -87,14 +78,10 @@ switch {
   }
 
   slider {
-    @include button(normal-alt, $edge: $shadow_color);
-
-    border: 1px solid $_slider_border_color;
-    border-radius: 50%;
-    transition-property: background, border, box-shadow;
+    @extend %slider;
 
     &:checked {
-      border-color: if($variant=='light', $suggested_border_color, $_slider_border_color);
+      border-color: if($variant=='light', $suggested_border_color, $borders_color);
       &:backdrop:not(:disabled) {
         border-color: if($variant=='light', $suggested_bg_color, $backdrop_borders_color);
       }
@@ -105,10 +92,7 @@ switch {
     }
   }
 
-  &:hover slider {
-    @extend %slider_active;
-    border-color: $suggested_bg_color;
-  }
+  &:hover slider { @extend %slider_active; }
 }
 
 /*************************
@@ -146,13 +130,18 @@ radio {
   }
 }
 
-/************
- * GtkScale *
- ************/
-scale slider:active {
-  @extend %slider_active;
+%slider,
+scale slider {
+  @include button(normal, $edge: $shadow_color);
 
-  border-color: $suggested_bg_color;
+  border-color: darken($alt_borders_color, 3%);
+  @at-root %slider_active,
+  &:active {
+    background-image: if($variant == 'light', image(lighten($bg_color, 14%)), image(darken($bg_color, 9%)));
+    border-color: $suggested_bg_color;
+  }
+
+  &:disabled { border-color: $backdrop_borders_color; }
 }
 
 /***************