From 1a0a8c123f76954d69fc2e48e65e0ef1576f2edd Mon Sep 17 00:00:00 2001
From: Rafael Mardojai CM <email@rafaelmardojai.com>
Date: Sat, 21 May 2022 22:15:54 -0500
Subject: [PATCH] Controls: Update switcher stlye

---
 theme/colors/dark.css    | 12 ++++--------
 theme/colors/light.css   | 12 ++++--------
 theme/parts/controls.css | 27 ++++++++++-----------------
 3 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/theme/colors/dark.css b/theme/colors/dark.css
index f474fda..181cbed 100644
--- a/theme/colors/dark.css
+++ b/theme/colors/dark.css
@@ -66,14 +66,10 @@
 		--gnome-focused-urlbar-border-color: rgba(120, 174, 237, .5); /* Same as --gnome-accent but with opacity*/
 
 		/* Switch */
-		--gnome-switch-background: #535353;
-		--gnome-switch-border-color: var(--gnome-switch-background);
-		--gnome-switch-slider-background: #FFFFFF;
-		--gnome-switch-slider-border-color: var(--gnome-switch-background);
-		--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
-		--gnome-switch-active-background: #3584E4;
-		--gnome-switch-active-border-color: var(--gnome-switch-active-background);
-		--gnome-switch-active-slider-border-color: var(--gnome-switch-active-background);
+		--gnome-switch-background: rgba(255, 255, 255, .15);
+		--gnome-switch-slider-background: #d2d2d2;
+		--gnome-switch-active-background: var(--gnome-accent-bg);
+		--gnome-switch-active-slider-background: #ffffff;
 
 		/* Tabs */
 		--gnome-tabbar-tab-color: rgb(141, 144, 145);
diff --git a/theme/colors/light.css b/theme/colors/light.css
index 352a0a4..1f87157 100644
--- a/theme/colors/light.css
+++ b/theme/colors/light.css
@@ -67,14 +67,10 @@
 	--gnome-focused-urlbar-border-color: var(--gnome-accent);
 
 	/* Switch */
-	--gnome-switch-background: #E0E0E0;
-	--gnome-switch-border-color: var(--gnome-switch-background);
-	--gnome-switch-slider-background: #FFFFFF;
-	--gnome-switch-slider-border-color: var(--gnome-switch-background);
-	--gnome-switch-slider-box-shadow: inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
-	--gnome-switch-active-background: #3584E4;
-	--gnome-switch-active-border-color: var(--gnome-switch-active-background);
-	--gnome-switch-active-slider-border-color: var(--gnome-switch-active-background);
+	--gnome-switch-background: rgba(0, 0, 0, .12);
+	--gnome-switch-slider-background: #ffffff;
+	--gnome-switch-active-background: var(--gnome-accent-bg);
+	--gnome-switch-active-slider-background: #ffffff;
 
 	/* Tabs */
 	--gnome-tabbar-tab-color: #303030;
diff --git a/theme/parts/controls.css b/theme/parts/controls.css
index a4d6bfe..acf3027 100644
--- a/theme/parts/controls.css
+++ b/theme/parts/controls.css
@@ -13,41 +13,34 @@
 }
 #protections-popup-tp-switch {
 	background: var(--gnome-switch-background) !important;
-	border: 1px solid var(--gnome-switch-border-color) !important;
+	border: 0 !important;
 	border-radius: 24px !important;
-	min-width: 50px !important;
-	width: 50px !important;
+	min-width: 48px !important;
+	width: 48px !important;
 	min-height: 26px !important;
 	padding: 0 !important;
 	position: relative !important;
 	display: block !important;
 	margin: 0 !important;
 }
-#protections-popup-tp-switch:hover {
-	border-color: var(--gnome-switch-border-color) !important;
-}
 #protections-popup-tp-switch::before {
 	position: absolute !important;
-	top: 0px;
-	left: 0px;
+	top: 2px;
+	left: 2px;
 	background: var(--gnome-switch-slider-background) !important;
-	border: 1px solid var(--gnome-switch-slider-border-color) !important;
-	box-shadow: var(--gnome-switch-slider-box-shadow);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
+	border: 0 !important;
 	border-radius: 24px !important;
-	height: 24px !important;
-	width: 24px !important;
+	height: 22px !important;
+	width: 22px !important;
 	transition: left .2s ease;
 	outline: 0 !important;
 }
 #protections-popup-tp-switch[enabled] {
 	background: var(--gnome-switch-active-background) !important;
-	border-color: var(--gnome-switch-active-border-color) !important;
 	padding-inline-start: 24px !important;
 }
-#protections-popup-tp-switch[enabled]:hover {
-	border-color: var(--gnome-switch-active-border-color) !important;
-}
 #protections-popup-tp-switch[enabled]::before {
-	border-color: var(--gnome-switch-active-slider-border-color) !important;
+	background: var(--gnome-switch-active-slider-background) !important;
 	left: 24px;
 }