gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Fix the theme toggle

Browse source
This commit is contained in:
Greg Burri 2025-04-01 23:47:39 +02:00
parent 9874497469
commit 221d813c2b
1 changed files with 6 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

41
backend/scss/main.scss
View file

@ -291,6 +291,7 @@ body {
// font-size: 17px; // font-size: 17px;
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle;
width: 3.5em; width: 3.5em;
height: 2em; height: 2em;
@ -301,7 +302,6 @@ body {
height: 0; height: 0;
} }
// The slider.
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
@ -309,12 +309,13 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #223243; background-color: $color-2;
transition: .4s; transition: .4s;
border-radius: 30px; border-radius: 30px;
margin: 0px;
} }
.slider:before { .slider::before {
position: absolute; position: absolute;
content: ""; content: "";
height: 1.4em; height: 1.4em;
@ -322,44 +323,14 @@ body {
border-radius: 20px; border-radius: 20px;
left: 0.3em; left: 0.3em;
bottom: 0.3em; bottom: 0.3em;
background-color: #223243; background-color: $color-1;
box-shadow: inset 2px -2px 0 1.8px #fff; box-shadow: inset 2px -2px 0 1.8px #ffffff;
transition: .4s; transition: .4s;
animation: anima1 0.3s linear;
}
@keyframes anima1 {
0% {
transform: translateX(1.5em);
}
80% {
transform: translateX(-0.3em);
}
100% {
transform: translateX(0em);
}
} }
input:checked+.slider:before { input:checked+.slider:before {
background-color: yellow; background-color: yellow;
box-shadow: none; box-shadow: none;
transform: translateX(1.5em); transform: translateX(1.5em);
animation: anima 0.3s linear;
}
@keyframes anima {
0% {
transform: translateX(0px)
}
80% {
transform: translateX(1.6em)
}
100% {
transform: translateX(1.4em)
}
} }
} }