orbit-oss/flask
4
5
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix icon placement in toggle

Browse source 
This commit addresses the issue where the icon was incorrectly
placed in the center of the toggle's background. The icon should
be positioned inside the circle part that moves with the toggle.
This change ensures that the icon moves along with the toggle,
providing a more intuitive and visually consistent user
experience.
This commit is contained in:
Neo 2024-09-06 00:07:57 +00:00 • committed by Jose Palazon
parent 3c2dae6bd6
commit 8b0b9d259c
1 changed files with 5 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
flaskr/static/style.css
View file

@ -168,7 +168,9 @@ input[type=submit]:hover {
} }
#theme-toggle:before { #theme-toggle:before {
content: ''; content: '\f186'; /* FontAwesome Unicode for moon */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
@ -176,17 +178,12 @@ input[type=submit]:hover {
height: 21px; height: 21px;
background: white; background: white;
border-radius: 50%; border-radius: 50%;
transition: transform 0.3s; transition: transform 0.3s, content 0.3s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
#theme-icon {
position: absolute;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
transition: color 0.3s;
} }
body.dark-mode #theme-toggle { body.dark-mode #theme-toggle {
@ -195,9 +192,7 @@ body.dark-mode #theme-toggle {
body.dark-mode #theme-toggle:before { body.dark-mode #theme-toggle:before {
transform: translateX(25px); transform: translateX(25px);
} content: '\f185'; /* FontAwesome Unicode for sun */
body.dark-mode #theme-icon {
color: #e0e0e0; color: #e0e0e0;
} }