mirror of
https://iceshrimp.dev/iceshrimp/iceshrimp
synced 2024-12-01 08:18:05 +09:00
🎨
This commit is contained in:
parent
9f50312a59
commit
33f4010144
@ -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>
|
||||
|
@ -51,6 +51,7 @@
|
||||
infoFg: '#fff',
|
||||
infoWarnBg: '#42321c',
|
||||
infoWarnFg: '#ffbd3e',
|
||||
switchBg: 'rgba(255, 255, 255, 0.15)',
|
||||
cwBg: '#687390',
|
||||
cwFg: '#393f4f',
|
||||
cwHoverBg: '#707b97',
|
||||
|
@ -51,6 +51,7 @@
|
||||
infoFg: '#72818a',
|
||||
infoWarnBg: '#fff0db',
|
||||
infoWarnFg: '#8f6e31',
|
||||
switchBg: 'rgba(0, 0, 0, 0.15)',
|
||||
cwBg: '#b1b9c1',
|
||||
cwFg: '#fff',
|
||||
cwHoverBg: '#bbc4ce',
|
||||
|
Loading…
Reference in New Issue
Block a user