From 33f40101449c3d7c70192a600db4f7ff1cbe8151 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Sep 2021 01:13:54 +0900
Subject: [PATCH] :art:
---
src/client/components/debobigego/switch.vue | 55 ++++++++++-----------
src/client/themes/_dark.json5 | 1 +
src/client/themes/_light.json5 | 1 +
3 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/src/client/components/debobigego/switch.vue b/src/client/components/debobigego/switch.vue
index 0ee088123..abc380374 100644
--- a/src/client/components/debobigego/switch.vue
+++ b/src/client/components/debobigego/switch.vue
@@ -13,7 +13,7 @@
@keydown.enter="toggle"
>
<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
- <span></span>
+ <span class="handle"></span>
</span>
<span class="label">
<span><slot></slot></span>
@@ -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);
+ }
+ }
+ }
}
}
</style>
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index e1d5779a8..22f4dc13d 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 87895e640..64b92dba8 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',