2023-07-27 10:05:16 +08:00

121 lines
2.4 KiB
CSS

/* ***** Colors - Start ***** */
/* ***** Colors - End ***** */
/* ***** Global Styles - Start ***** */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container-switch {
display: flex;
justify-content: center;
align-items: center;
}
/* ***** Global Styles - End ***** */
/* ***** Specific Styles - Start ***** */
.switch {
width: 60px;
height: 110px;
padding-top: 2px;
background-color: #514e4b;
border-radius: 40px;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.toggle-button {
transform: scale(0.8);
transform-origin: center center;
}
.toggle {
position: relative;
width: 35px;
height: 35px;
margin: 12px;
margin-top: 12px;
background-color: #fff;
border-radius: 50%;
}
.moon-mask {
position: absolute;
width: 35px;
height: 35px;
margin: -74px 0 0 34px;
background-color: #514e4b;
border-radius: 50%;
}
.circle {
position: absolute;
width: 4px;
height: 8px;
background-color: #fff;
border-radius: 10px;
}
.circle:first-child {
margin: -57px 0 0 27px;
}
.circle:nth-child(2) {
margin: -9px 0 0 28px;
}
.circle:nth-child(3) {
margin: -32px 0 0 51px;
transform: rotate(90deg);
}
.circle:nth-child(4) {
margin: -33px 0 0 4px;
transform: rotate(90deg);
}
.circle:nth-child(5) {
margin: -14px 0 0 10px;
transform: rotate(45deg);
}
.circle:nth-child(6) {
margin: -14px 0 0 45px;
transform: rotate(320deg);
}
.circle:nth-child(7) {
margin: -50px 0 0 10px;
transform: rotate(135deg);
}
.circle:nth-child(8) {
margin: -50px 0 0 45px;
transform: rotate(235deg);
}
.text p {
margin-left: 5px;
font-size: 55px;
line-height: 1.1;
font-weight: 700;
}
.social-icons {
display: flex;
justify-content: space-between;
position: fixed;
bottom: 20px;
right: 20px;
width: 70px;
}
/* ***** Specific Styles - End ***** */