Files
explore/ui/header/ColorModeToggler.module.css
T
2022-07-13 10:04:57 +03:00

53 lines
902 B
CSS

.root {
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 0;
}
.track {
width: 72px;
height: 32px;
background-color: rgba(16, 17, 18, 0.06);
border-radius: 16px;
display: inline-flex;
flex-shrink: 0;
justify-content: space-between;
box-sizing: content-box;
cursor: pointer;
}
.input {
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
padding: 0px;
overflow: hidden;
white-space: nowrap;
position: absolute;
}
.thumb {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
width: 24px;
height: 24px;
border-radius: 12px;
position: absolute;
transform: translate(4px, 4px);
}
.thumb[data-checked] {
transform: translate(44px, 4px);
}
.nightIcon {
margin: 8px;
z-index: 5;
}
.dayIcon {
margin: 8px;
z-index: 5;
}