diff --git a/src/client/components/debobigego/switch.vue b/src/client/components/debobigego/switch.vue
index 0ee0881236..abc380374d 100644
--- a/src/client/components/debobigego/switch.vue
+++ b/src/client/components/debobigego/switch.vue
@@ -13,7 +13,7 @@
@keydown.enter="toggle"
>
-
+
@@ -64,23 +64,6 @@ export default defineComponent({
user-select: none;
}
- &.disabled {
- opacity: 0.6;
- cursor: not-allowed;
- }
-
- &.checked {
- > .button {
- background-color: var(--X10);
- border-color: var(--X10);
-
- > * {
- background-color: var(--accent);
- transform: translateX(14px);
- }
- }
- }
-
> input {
position: absolute;
width: 0;
@@ -93,25 +76,26 @@ export default defineComponent({
position: relative;
display: inline-block;
flex-shrink: 0;
- margin: 3px 0 0 0;
+ margin: 0;
width: 34px;
- height: 14px;
- background: var(--X6);
+ height: 22px;
+ background: var(--switchBg);
outline: none;
- border-radius: 14px;
+ border-radius: 999px;
transition: all 0.3s;
cursor: pointer;
- > * {
+ > .handle {
position: absolute;
- top: -3px;
- left: 0;
+ top: 0;
+ left: 3px;
+ bottom: 0;
+ margin: auto 0;
border-radius: 100%;
transition: background-color 0.3s, transform 0.3s;
- width: 20px;
- height: 20px;
+ width: 16px;
+ height: 16px;
background-color: #fff;
- box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
}
}
@@ -127,6 +111,21 @@ export default defineComponent({
transition: inherit;
}
}
+
+ &.disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+
+ &.checked {
+ > .button {
+ background-color: var(--accent);
+
+ > .handle {
+ transform: translateX(12px);
+ }
+ }
+ }
}
}
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index e1d5779a80..22f4dc13d4 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -51,6 +51,7 @@
infoFg: '#fff',
infoWarnBg: '#42321c',
infoWarnFg: '#ffbd3e',
+ switchBg: 'rgba(255, 255, 255, 0.15)',
cwBg: '#687390',
cwFg: '#393f4f',
cwHoverBg: '#707b97',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 87895e6406..64b92dba8a 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -51,6 +51,7 @@
infoFg: '#72818a',
infoWarnBg: '#fff0db',
infoWarnFg: '#8f6e31',
+ switchBg: 'rgba(0, 0, 0, 0.15)',
cwBg: '#b1b9c1',
cwFg: '#fff',
cwHoverBg: '#bbc4ce',