heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2021-09-30 01:13:54 +09:00
parent 1ac1a968b9
commit c5e5a9b8ef
3 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/client/components/debobigego/switch.vue
View file

@ -13,7 +13,7 @@
@keydown.enter="toggle" @keydown.enter="toggle"
> >
<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff"> <span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
<span></span> <span class="handle"></span>
</span> </span>
<span class="label"> <span class="label">
<span><slot></slot></span> <span><slot></slot></span>
@ -64,23 +64,6 @@ export default defineComponent({
user-select: none; 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 { > input {
position: absolute; position: absolute;
width: 0; width: 0;
@ -93,25 +76,26 @@ export default defineComponent({
position: relative; position: relative;
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
margin: 3px 0 0 0; margin: 0;
width: 34px; width: 34px;
height: 14px; height: 22px;
background: var(--X6); background: var(--switchBg);
outline: none; outline: none;
border-radius: 14px; border-radius: 999px;
transition: all 0.3s; transition: all 0.3s;
cursor: pointer; cursor: pointer;
> * { > .handle {
position: absolute; position: absolute;
top: -3px; top: 0;
left: 0; left: 3px;
bottom: 0;
margin: auto 0;
border-radius: 100%; border-radius: 100%;
transition: background-color 0.3s, transform 0.3s; transition: background-color 0.3s, transform 0.3s;
width: 20px; width: 16px;
height: 20px; height: 16px;
background-color: #fff; 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; transition: inherit;
} }
} }
&.disabled {
opacity: 0.6;
cursor: not-allowed;
}
&.checked {
> .button {
background-color: var(--accent);
> .handle {
transform: translateX(12px);
}
}
}
} }
} }
</style> </style>

1
src/client/themes/_dark.json5
View file

@ -51,6 +51,7 @@
infoFg: '#fff', infoFg: '#fff',
infoWarnBg: '#42321c', infoWarnBg: '#42321c',
infoWarnFg: '#ffbd3e', infoWarnFg: '#ffbd3e',
switchBg: 'rgba(255, 255, 255, 0.15)',
cwBg: '#687390', cwBg: '#687390',
cwFg: '#393f4f', cwFg: '#393f4f',
cwHoverBg: '#707b97', cwHoverBg: '#707b97',

1
src/client/themes/_light.json5
View file

@ -51,6 +51,7 @@
infoFg: '#72818a', infoFg: '#72818a',
infoWarnBg: '#fff0db', infoWarnBg: '#fff0db',
infoWarnFg: '#8f6e31', infoWarnFg: '#8f6e31',
switchBg: 'rgba(0, 0, 0, 0.15)',
cwBg: '#b1b9c1', cwBg: '#b1b9c1',
cwFg: '#fff', cwFg: '#fff',
cwHoverBg: '#bbc4ce', cwHoverBg: '#bbc4ce',