Refactor theme toggle styles for improved positioning

- Updated CSS for the theme toggle component to ensure relative positioning for the container.
- Centered light and dark icons within the theme toggle using absolute positioning and transform properties.
- Added transition effects for opacity to enhance visual feedback during theme changes.
This commit is contained in:
Will Miao
2025-03-22 09:49:15 +08:00
parent 372d74ec71
commit 4cc6996406

View File

@@ -110,8 +110,18 @@
transform: translateY(-2px);
}
.theme-toggle .light-icon {
.theme-toggle {
position: relative; /* Ensure relative positioning for the container */
}
.theme-toggle .light-icon,
.theme-toggle .dark-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center perfectly */
opacity: 0;
transition: opacity 0.3s ease;
}
.theme-toggle .dark-icon {