toggle visual adjustments

This commit is contained in:
ChuckBuilds
2025-07-24 20:59:58 -05:00
parent 58251eefb7
commit b03371d69a

View File

@@ -105,8 +105,8 @@
.toggle-switch { .toggle-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 44px;
height: 34px; height: 24px;
} }
.toggle-switch input { .toggle-switch input {
opacity: 0; opacity: 0;
@@ -121,25 +121,25 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: #ccc;
transition: .4s; transition: .3s;
border-radius: 34px; border-radius: 24px;
} }
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 18px;
width: 26px; width: 18px;
left: 4px; left: 3px;
bottom: 4px; bottom: 3px;
background-color: white; background-color: white;
transition: .4s; transition: .3s;
border-radius: 50%; border-radius: 50%;
} }
input:checked + .slider { input:checked + .slider {
background-color: #4CAF50; background-color: #4CAF50;
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(26px); transform: translateX(20px);
} }
button { button {
background-color: #4CAF50; background-color: #4CAF50;