56 lines
921 B
CSS
56 lines
921 B
CSS
{15738c854dd678553159efaf6d5ed65cb18264ee true 921 style.css 0xc001f552d0}
*{
|
|
margin: 0;
|
|
padding:0;
|
|
box-sizing: border-box;
|
|
}
|
|
body{
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
transition: background .3s linear;
|
|
}
|
|
body.dark{
|
|
background-color: #292c35;
|
|
}
|
|
body.dark p {
|
|
color: #fff;
|
|
}
|
|
.checkbox{
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
.label{
|
|
background: #111;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 50px;
|
|
padding: 5px;
|
|
height: 26px;
|
|
width: 50px;
|
|
position: relative;
|
|
transform: scale(1.5);
|
|
}
|
|
.ball{
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
width: 22px;
|
|
height: 22px;
|
|
transition: .3s linear;
|
|
}
|
|
.checkbox:checked + .label .ball{
|
|
transform: translateX(24px);
|
|
}
|
|
.moon{
|
|
color: #f1c40f;
|
|
}
|
|
.sun{
|
|
color: #f39c12;
|
|
} |