mirror of
https://git-qiuchenly.yltfspace.com/QiuChenly/corepatch
synced 2025-11-25 20:27:33 +08:00
2 lines
12 KiB
CSS
2 lines
12 KiB
CSS
|
.slider-wrapper[data-v-0979b282]{display:flex;align-items:center;gap:16px;max-width:500px}.setting-slider[data-v-0979b282]{flex:1;height:8px;border-radius:4px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:transparent;position:relative}.setting-slider[data-v-0979b282]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;box-shadow:0 2px 6px #007aff4d;transition:all .2s ease;margin-top:-6px;position:relative;z-index:2}.setting-slider[data-v-0979b282]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px #007aff66}.setting-slider[data-v-0979b282]::-webkit-slider-thumb:active{transform:scale(1.2)}.setting-slider[data-v-0979b282]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:none;box-shadow:0 2px 6px #007aff4d;transition:all .2s ease;position:relative;z-index:2}.setting-slider[data-v-0979b282]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px #007aff66}.setting-slider[data-v-0979b282]::-moz-range-thumb:active{transform:scale(1.2)}.setting-slider[data-v-0979b282]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--primary-color) 0%,var(--primary-color) var(--progress-percent),rgba(0,0,0,.25) var(--progress-percent),rgba(0,0,0,.25) 100%)}.setting-slider[data-v-0979b282]::-moz-range-track{height:8px;border-radius:4px;background:#00000040}.setting-slider[data-v-0979b282]::-moz-range-progress{height:8px;border-radius:4px;background:var(--primary-color)}.setting-slider[data-v-0979b282]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #007aff33,0 2px 8px #007aff66}.setting-slider[data-v-0979b282]:focus::-moz-range-thumb{box-shadow:0 0 0 3px #007aff33,0 2px 8px #007aff66}.slider-value[data-v-0979b282]{min-width:60px;text-align:right;font-size:14px;font-weight:600;color:var(--primary-color)}[data-theme=dark] .setting-slider[data-v-0979b282]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--primary-color) 0%,var(--primary-color) var(--progress-percent),rgba(255,255,255,.3) var(--progress-percent),rgba(255,255,255,.3) 100%)}[data-theme=dark] .setting-slider[data-v-0979b282]::-moz-range-track{background:#ffffff4d}[data-theme=dark] .setting-slider[data-v-0979b282]::-moz-range-progress{background:var(--primary-color)}.toggle-wrapper[data-v-c85b3e46]{position:relative;display:inline-block;cursor:pointer}.toggle-input[data-v-c85b3e46]{opacity:0;width:0;height:0}.toggle-input:checked+.toggle-slider[data-v-c85b3e46]{background-color:#007aff;border-color:#007aff}.toggle-input:checked+.toggle-slider[data-v-c85b3e46]:before{transform:translate(32px) translateY(-50%);background-color:#fff}.toggle-input:checked+.toggle-slider .toggle-text[data-v-c85b3e46]{left:8px;right:auto}.toggle-input:focus+.toggle-slider[data-v-c85b3e46]{box-shadow:0 0 0 3px #007aff33}.toggle-input:disabled+.toggle-slider[data-v-c85b3e46]{opacity:.5;cursor:not-allowed}.toggle-slider[data-v-c85b3e46]{position:relative;display:inline-block;width:56px;height:24px;background-color:#e0e0e0;border:1px solid #B0B0B0;border-radius:12px;transition:background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);overflow:visible}.toggle-slider[data-v-c85b3e46]:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:50%;transform:translateY(-50%);background-color:#606060;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0003;z-index:2}.toggle-slider .toggle-text[data-v-c85b3e46]{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:3;-webkit-user-select:none;user-select:none;pointer-events:none;right:8px;color:#0009;opacity:1}.toggle-input:checked+.toggle-slider .toggle-text[data-v-c85b3e46]{right:auto;left:8px;color:#fff}[data-theme=dark] .toggle-s
|