Inactive toggle hover color fix

btcpayserver · Oct 15, 2024 · 86688b4 · 86688b4
1 parent 32b3ed8
commit 86688b4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/src/components/toggle/toggle.css b/src/components/toggle/toggle.css
@@ -28,7 +28,7 @@ input.btcpay-toggle {
 
 input.btcpay-toggle:checked,
 .btcpay-toggle.btcpay-toggle--active {
-  background: var(--btcpay-toggle-bg-active);
+  background: var(--btcpay-toggle-bg-hover);
 }
 
 input.btcpay-toggle:not(:disabled):checked:hover,

diff --git a/src/components/toggle/variants/simple.html b/src/components/toggle/variants/simple.html
@@ -8,7 +8,12 @@
   <label for="PayJoinEnabledOn" class="form-label mb-0 me-1">PayJoin enabled</label>
 </div>
 
-<div class="form-group d-flex align-items-center mb-0">
+<div class="form-group d-flex align-items-center">
   <input id="Disabled" type="checkbox" class="btcpay-toggle me-2" disabled />
   <label for="Disabled" class="form-label mb-0 me-1">Disabled</label>
 </div>
+
+<div class="form-group d-flex align-items-center mb-0">
+  <input id="Disabled" type="checkbox" class="btcpay-toggle me-2" disabled checked />
+  <label for="Disabled" class="form-label mb-0 me-1">Disabled active</label>
+</div>
diff --git a/src/static/styles/btcpayserver-bootstrap.css b/src/static/styles/btcpayserver-bootstrap.css
@@ -12862,7 +12862,7 @@ input.btcpay-toggle {
 
 input.btcpay-toggle:checked,
 .btcpay-toggle.btcpay-toggle--active {
-  background: var(--btcpay-toggle-bg-active);
+  background: var(--btcpay-toggle-bg-hover);
 }
 
 input.btcpay-toggle:not(:disabled):checked:hover,

diff --git a/src/styles/variables/theme.css b/src/styles/variables/theme.css
@@ -74,7 +74,7 @@
   --btcpay-form-shadow-invalid: var(--btcpay-danger-shadow);
 
   --btcpay-toggle-bg: var(--btcpay-neutral-500);
-  --btcpay-toggle-bg-hover: var(--btcpay-primary-bg-hover);
+  --btcpay-toggle-bg-hover: var(--btcpay-neutral-600);
   --btcpay-toggle-bg-active: var(--btcpay-primary);
   --btcpay-toggle-bg-active-hover: var(--btcpay-primary-bg-active);