103 lines
2.5 KiB
CSS
103 lines
2.5 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 - Light theme */
|
|
.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;
|
|
}
|
|
|
|
/* Toggle background enhancement with perfect centering */
|
|
.theme-toggle-bg {
|
|
background: linear-gradient(135deg, #e0f2fe 0%, #fff3e0 100%);
|
|
border: 2px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dark .theme-toggle-bg {
|
|
background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
|
|
border-color: #6b7280;
|
|
}
|
|
|
|
/* Enhanced slider styles with perfect centering */
|
|
.theme-toggle-slider {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
/* Позволяем Tailwind CSS управлять позиционированием */
|
|
}
|
|
|
|
.dark .theme-toggle-slider {
|
|
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
|
border-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Hover effects */
|
|
label:hover .theme-toggle-slider {
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
input[type="checkbox"]:focus + label > div {
|
|
box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* 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;
|
|
} |