Centralized sidebar toggle knob span styles into stylesheet ↞ [auto-s…

…ync from https://github.com/adamlui/ai-web-extensions]

greasemonkey/autoclear-chatgpt-history.user.js

@@ -225,7 +225,7 @@
 // @description:zu      Ziba itshala lokucabanga okuzoshintshwa ngokuzenzakalelayo uma ukubuka chatgpt.com
 // @author              Adam Lui
 // @namespace           https://github.com/adamlui
-// @version             2024.12.30.5
+// @version             2024.12.30.6
 // @license             MIT
 // @icon                https://media.autoclearchatgpt.com/images/icons/openai/black/icon48.png?a8868ef
 // @icon64              https://media.autoclearchatgpt.com/images/icons/openai/black/icon64.png?a8868ef
@@ -804,7 +804,9 @@
                     ':root {' // vars
                       + '--switch-enabled-bg-color: #ad68ff ; --switch-disabled-bg-color: #ccc ;'
                       + '--switch-enabled-box-shadow: 2px 1px 9px #d8a9ff ;'
-                      + '--switch-enabled-hover-box-shadow: 0 1px 10px #9b5ad1 }'
+                      + '--switch-enabled-hover-box-shadow: 0 1px 10px #9b5ad1 ;'
+                      + '--knob-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px 0 ;'
+                      + '--knob-box-shadow-dark: rgba(0, 0, 0, 0.3) 0 1px 2px 0, rgba(0, 0, 0, 0.15) 0 3px 6px 2px }'
 
                     // Element styles
                   + `.${this.class} {` // parent div
@@ -832,6 +834,7 @@
                   + `.${this.class} > span > span {` // knob span
                       + 'position: absolute ; width: 12px ; height: 12px ; content: "" ; border-radius: 28px ;'
                       + 'background-color: white ; -webkit-transition: 0.4s ; transition: 0.4s ; left: 3px ; bottom: 1.25px ;'
+                      + 'box-shadow: var(--knob-box-shadow) ;' // make 3D
                       + `transform: translateX(${ config.autoclear ? 0 : 13 }px) }` // init opposite final pos
                   + `.${this.class} > label {` // toggle label
                       + 'cursor: pointer ; overflow: hidden ; text-overflow: ellipsis ;'
@@ -845,6 +848,8 @@
                       + 'box-shadow: var(--switch-enabled-hover-box-shadow) }' // use hover style instead
                   + `.${this.class}.dark:hover > span.enabled {` // switch on when hover on parent div
                       + 'box-shadow: var(--switch-enabled-box-shadow) }' // use regular style instead
+                  + `.${this.class}.dark > span > span {` // knob span
+                      + 'box-shadow: var(--knob-box-shadow-dark) }' // make 3D-er
                 )
                 document.head.append(this.styles)
             },
@@ -860,8 +865,6 @@
                 const isDarkScheme = env.ui.scheme == 'dark'
                 this.div.classList.add(isDarkScheme ? 'dark' : 'light')
                 this.div.classList.remove(isDarkScheme ? 'light' : 'dark')
-                this.knobSpan.style.boxShadow = `rgba(0, 0, 0, 0.3) 0 1px 2px 0${
-                    env.ui.scheme == 'dark' ? ', rgba(0, 0, 0, 0.15) 0 3px 6px 2px' : '' }`
                 this.navicon.src = `${app.urls.mediaHost}/images/icons/incognito/${
                     env.ui.scheme == 'dark' ? 'white' : 'black' }/icon32.png?${app.latestAssetCommitHash}`
             },