57 lines
1.1 KiB
CSS
57 lines
1.1 KiB
CSS
.switch {
|
|
--input-focus: var(--link);
|
|
--font-color: #191102;
|
|
--bg-color: #fff;
|
|
--main-color: #191102;
|
|
--offset: 10px;
|
|
position: fixed;
|
|
display: flex;
|
|
left: calc(200px + var(--offset));
|
|
bottom: calc(32px + var(--offset));
|
|
align-items: center;
|
|
gap: 30px;
|
|
width: 50px;
|
|
height: 20px;
|
|
}
|
|
|
|
.toggle {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--main-color);
|
|
box-shadow: 0px 4px var(--main-color);
|
|
position: absolute;
|
|
cursor: var(--pointercur), pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--bg-color);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.slider:before {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
border: 1px solid var(--main-color);
|
|
left: -1px;
|
|
bottom: 2px;
|
|
background-color: var(--bg-color);
|
|
box-shadow: 0 3px 0 var(--main-color);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.toggle:checked + .slider {
|
|
background-color: var(--input-focus);
|
|
}
|
|
|
|
.toggle:checked + .slider:before {
|
|
transform: translateX(30px);
|
|
} |