From bbf5c604927ad2be123dafe082052e5e843867e1 Mon Sep 17 00:00:00 2001
From: EliverLara <eliverlara@gmail.com>
Date: Sun, 5 Dec 2021 14:48:59 -0600
Subject: [PATCH] Gtk-4: Fix switch styling issues

---
 gtk-4.0/gtk-dark.css           | 11 ++++++-----
 gtk-4.0/gtk.css                | 11 ++++++-----
 gtk-4.0/widgets/_switches.scss | 18 +++++++++++-------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
index 7877be6..4dc08d7 100755
--- a/gtk-4.0/gtk-dark.css
+++ b/gtk-4.0/gtk-dark.css
@@ -4112,11 +4112,12 @@ switch {
   font-weight: bold;
   outline-offset: -4px;
   transition: all 200ms ease-in;
-  border: 1px solid rgba(238, 238, 238, 0.1);
+  border: none;
   border-radius: 14px;
   color: transparent;
   padding: 2.3px 0px;
-  background: linear-gradient(to right, #1E2233, #1E2233); }
+  background: linear-gradient(to right, #859398, #859398);
+  box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753); }
   switch:disabled {
     background-color: #171a26; }
   switch:backdrop {
@@ -4125,11 +4126,11 @@ switch {
     switch:backdrop:disabled {
       background-color: #171a26; }
   switch:active, switch:checked {
-    background: linear-gradient(to right, #f7005a, #fadd00); }
+    background: linear-gradient(to right, #ff9200, #fadd00); }
     switch:active slider, switch:checked slider {
       background: #fff; }
     switch:active:backdrop, switch:checked:backdrop {
-      background: linear-gradient(to right, #de0051, #e1c600); }
+      background: linear-gradient(to right, #e68300, #e1c600); }
       switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop {
         box-shadow: none;
         background-color: rgba(24, 27, 40, 0.9);
@@ -4141,7 +4142,7 @@ switch {
     min-height: 12px;
     border-radius: 100%;
     transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    background-color: #151723; }
+    background-color: #bcc4c7; }
     switch slider:backdrop {
       padding: 2px;
       box-shadow: none;
diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
index b46759f..1793321 100755
--- a/gtk-4.0/gtk.css
+++ b/gtk-4.0/gtk.css
@@ -4118,11 +4118,12 @@ switch {
   font-weight: bold;
   outline-offset: -4px;
   transition: all 200ms ease-in;
-  border: 1px solid rgba(0, 0, 0, 0.13);
+  border: none;
   border-radius: 14px;
   color: transparent;
   padding: 2.3px 0px;
-  background: linear-gradient(to right, #1E2233, #1E2233); }
+  background: linear-gradient(to right, #859398, #859398);
+  box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753); }
   switch:disabled {
     background-color: #e8eaec; }
   switch:backdrop {
@@ -4131,11 +4132,11 @@ switch {
     switch:backdrop:disabled {
       background-color: #e8eaec; }
   switch:active, switch:checked {
-    background: linear-gradient(to right, #f7005a, #fadd00); }
+    background: linear-gradient(to right, #ff9200, #fadd00); }
     switch:active slider, switch:checked slider {
       background: #fff; }
     switch:active:backdrop, switch:checked:backdrop {
-      background: linear-gradient(to right, #de0051, #e1c600); }
+      background: linear-gradient(to right, #e68300, #e1c600); }
       switch:active:backdrop slider:backdrop, switch:checked:backdrop slider:backdrop {
         box-shadow: none;
         background-color: rgba(235, 240, 245, 0.9);
@@ -4147,7 +4148,7 @@ switch {
     min-height: 12px;
     border-radius: 100%;
     transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    background-color: #151723; }
+    background-color: #bcc4c7; }
     switch slider:backdrop {
       padding: 2px;
       box-shadow: none;
diff --git a/gtk-4.0/widgets/_switches.scss b/gtk-4.0/widgets/_switches.scss
index 882e123..707ba3b 100644
--- a/gtk-4.0/widgets/_switches.scss
+++ b/gtk-4.0/widgets/_switches.scss
@@ -1,18 +1,20 @@
 /**********
  * Switch *
  **********/
-switch {
+ switch {
   font-size: 1px;
   font-weight: bold;
   outline-offset: -4px;
   transition: all 200ms ease-in;
 
-  border: 1px solid $borders_color;
+  border: none;
   border-radius: 14px;
   color: transparent;
   padding: 2.3px 0px;
-  background:  linear-gradient(to right, #1E2233, #1E2233);
+
+  background:  linear-gradient(to right, #859398, #859398);
  // border: 1px solid rgba(170, 170, 170, 0.4);
+  box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753);
   &:disabled {
     background-color: $insensitive_bg_color;
   }
@@ -27,12 +29,14 @@ switch {
 
   &:active,
   &:checked {
-   background:  linear-gradient(to right, #f7005a, #fadd00);
+   // border: 1px solid $teal;
+   background:  linear-gradient(to right, #ff9200, #fadd00);
     slider{
       background: #fff;
     }
     &:backdrop {
-      background:  linear-gradient(to right, darken(#f7005a, 5%), darken(#fadd00, 5%));
+      //border: 1px solid $teal;
+      background:  linear-gradient(to right, darken(#ff9200, 5%), darken(#fadd00, 5%));
       slider {
         &:backdrop {
           box-shadow:none;
@@ -45,14 +49,14 @@ switch {
 
   // Handle
   slider {
-    padding: 2px;
+    padding:2px;
     margin: 0 2.3px;
     min-width: 12px;
     min-height: 12px;
 
     border-radius: 100%;
     transition: $button_transition;
-    background-color: darken(#1E2233, 5%);
+    background-color: lighten(#859398, 20%);
 
     &:backdrop {
       padding:2px;