From 5f531cf8aacfedd42ad43b4d891284ae326c6989 Mon Sep 17 00:00:00 2001
From: Rafael Mardojai CM <email@rafaelmardojai.com>
Date: Thu, 28 Sep 2023 08:31:09 -0500
Subject: [PATCH] controls: Update switchers theming

Fixes #671
---
 theme/parts/controls.css        | 51 ++++++++-------------------------
 theme/parts/popups-contents.css |  2 +-
 2 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/theme/parts/controls.css b/theme/parts/controls.css
index 8bf90a0..6ddae0e 100644
--- a/theme/parts/controls.css
+++ b/theme/parts/controls.css
@@ -58,46 +58,19 @@ radio > .radio-check[selected] {
 }
 
 /* Switchers */
-.protections-popup-tp-switch-box {
-	padding: 0 !important;
-	-moz-box-pack: start !important;
-}
-#protections-popup-tp-switch:not([enabled])[showdotindicator]::after {
-	display: none !important;
-}
-#protections-popup-tp-switch {
-	background: var(--gnome-trough-background) !important;
+.toggle-button {
+	--toggle-height: 26px !important;
+	--toggle-width: 48px !important;
+	--toggle-border-radius: 24px !important;
+	--toggle-border-color: var(--gnome-trough-background) !important;
+	--toggle-background-color:  var(--gnome-trough-background) !important;
+	--toggle-background-color-pressed: var(--gnome-accent-bg) !important;
+	--toggle-dot-height: 22px !important;
+	--toggle-dot-background-color: #FFF !important;
+	--toggle-dot-background-color-on-pressed: #FFF !important;
+	
 	border: 0 !important;
-	border-radius: 24px !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 {
-	background-image: var(--gnome-trough-hover-background) !important;
-}
-#protections-popup-tp-switch::before {
-	position: absolute !important;
-	top: 2px;
-	left: 2px;
-	background: #fff !important;
+.toggle-button::before {
 	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
-	border: 0 !important;
-	border-radius: 24px !important;
-	height: 22px !important;
-	width: 22px !important;
-	transition: left .2s ease;
-	outline: 0 !important;
-}
-#protections-popup-tp-switch[enabled] {
-	background: var(--gnome-accent-bg) !important;
-	padding-inline-start: 24px !important;
-}
-#protections-popup-tp-switch[enabled]::before {
-	background: #fff !important;
-	left: 24px;
 }
diff --git a/theme/parts/popups-contents.css b/theme/parts/popups-contents.css
index 369161c..6540ee4 100644
--- a/theme/parts/popups-contents.css
+++ b/theme/parts/popups-contents.css
@@ -268,7 +268,7 @@
 	background: var(--gnome-menu-background);
 	border: 1px solid var(--gnome-button-border-color) !important;
 	border-radius: 9px;
-	padding: 12px 8px !important;
+	padding: 12px 0 !important;
 	margin: 0 !important;
 }