100-project-100-days-website/100_projects/8-light-&-dark-theme-toggle/style.css
2023-03-01 17:21:02 +03:00
Ask

56 lines
921 B
CSS

{15738c854dd678553159efaf6d5ed65cb18264ee true 921 style.css 0xc002b162a0}

*{
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;
}