Spaces:
Paused
Paused
| /* The switch - the box around the slider */ | |
| .switch { | |
| position: relative; | |
| text-align: center; | |
| display: inline-block; | |
| margin-right: 0px; | |
| padding-right: 0px; | |
| max-width: 60px; | |
| min-width: 60px; | |
| height: var(--input-height); | |
| font-size: large; | |
| } | |
| .switch-container { | |
| width: 100%; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-evenly; | |
| align-items: center; | |
| margin: 5px 5px 5px 5px; | |
| } | |
| .switch-label { | |
| text-align: center; | |
| font-size: large; | |
| margin: 0px 10px 0px 10px; | |
| } | |
| /* Hide default HTML checkbox */ | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| /* The slider */ | |
| .slider { | |
| position: absolute; | |
| cursor: pointer; | |
| height: var(--input-height); | |
| width: calc(var(--input-height) * 2); | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: var(--input-background-color); | |
| border: 2px solid var(--knob-color); | |
| box-shadow: inset 0 0 0px 1px var(--light-accent), | |
| var(--box-shadow-inset-neg); | |
| outline: 1px var(--knob-color); | |
| } | |
| /*knob*/ | |
| .slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: var(--input-height); | |
| width: calc(var(--input-height)); | |
| left: 0px; | |
| bottom: 0px; | |
| background-color: var(--knob-color); | |
| box-shadow: var(--box-shadow-inset-pos); | |
| transition: .3s; | |
| } | |
| input:checked+.slider:before { | |
| transform: translateX(100%); | |
| } | |
| /* Rounded sliders */ | |
| .slider.round { | |
| border-radius: 66px; | |
| } | |
| .slider.round:before { | |
| border-radius: 100%; | |
| } |