87 lines
1.8 KiB
CSS
87 lines
1.8 KiB
CSS
/* Animated Theme Toggle Styles */
|
|
.theme-toggle-slider {
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
|
background-color 0.3s ease;
|
|
}
|
|
|
|
.theme-sun-icon,
|
|
.theme-moon-icon {
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Initial states */
|
|
.theme-sun-icon {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-moon-icon {
|
|
transform: rotate(-180deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Dark theme states */
|
|
.dark .theme-sun-icon {
|
|
transform: rotate(180deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
.dark .theme-moon-icon {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Enhanced toggle background gradient */
|
|
.theme-toggle-bg {
|
|
background: linear-gradient(45deg, #dbeafe, #fef3c7);
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.dark .theme-toggle-bg {
|
|
background: linear-gradient(45deg, #374151, #4b5563);
|
|
}
|
|
|
|
/* Hover effects */
|
|
.theme-toggle-slider:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
input[type="checkbox"]:focus + label .theme-toggle-slider {
|
|
ring: 2px;
|
|
ring-color: #3b82f6;
|
|
ring-offset: 2px;
|
|
}
|
|
|
|
/* Animation keyframes for icon rotation */
|
|
@keyframes iconSpinIn {
|
|
from {
|
|
transform: rotate(-180deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes iconSpinOut {
|
|
from {
|
|
transform: rotate(0deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: rotate(180deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Animation states */
|
|
.icon-animate-in {
|
|
animation: iconSpinIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
.icon-animate-out {
|
|
animation: iconSpinOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
} |