Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
122 lines
3.0 KiB
CSS
122 lines
3.0 KiB
CSS
/**
|
|
* Theme Transition Utilities
|
|
*
|
|
* Smooth transitions when switching between light/dark themes.
|
|
* Respects prefers-reduced-motion for accessibility.
|
|
*/
|
|
|
|
@layer utilities {
|
|
/**
|
|
* Theme Transition Class
|
|
*
|
|
* Applied to :root during theme changes for smooth color transitions.
|
|
* Automatically disabled when user prefers reduced motion.
|
|
*/
|
|
:root {
|
|
/* Smooth transitions for theme changes */
|
|
transition:
|
|
background-color var(--transition-base),
|
|
color var(--transition-base),
|
|
border-color var(--transition-base);
|
|
}
|
|
|
|
/* Apply transitions to all elements during theme change */
|
|
* {
|
|
transition:
|
|
background-color var(--transition-base),
|
|
color var(--transition-base),
|
|
border-color var(--transition-base),
|
|
box-shadow var(--transition-base);
|
|
}
|
|
|
|
/* Respect reduced motion preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root,
|
|
* {
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Theme Loading State
|
|
*
|
|
* Prevent FOUC (Flash of Unstyled Content) during initial theme load.
|
|
* REMOVED: visibility hidden rule - causes blank page if data-theme is not set
|
|
*/
|
|
/* html:not([data-theme]) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
html[data-theme] {
|
|
visibility: visible;
|
|
} */
|
|
|
|
/**
|
|
* Theme Toggle Animation
|
|
*
|
|
* Icon rotation when toggling theme.
|
|
*/
|
|
[data-theme-toggle] svg {
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
[data-theme-toggle]:hover svg {
|
|
transform: rotate(20deg);
|
|
}
|
|
|
|
/**
|
|
* Dark Mode Specific Optimizations
|
|
*/
|
|
[data-theme="dark"] {
|
|
/* Reduce brightness for dark mode images */
|
|
img:not([data-no-dark-mode-filter]) {
|
|
filter: brightness(0.9) contrast(1.1);
|
|
}
|
|
|
|
/* Invert logos/icons if needed */
|
|
.admin-sidebar__logo {
|
|
filter: brightness(1.2);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* High Contrast Mode Theme Adjustments
|
|
*
|
|
* Ensure theme switching works in Windows High Contrast Mode.
|
|
*/
|
|
@media (prefers-contrast: high) {
|
|
[data-theme="dark"] {
|
|
/* Increase contrast in forced colors mode */
|
|
--bg-primary: oklch(10% 0 0);
|
|
--content-text: oklch(100% 0 0);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
/* Ensure maximum contrast */
|
|
--bg-primary: oklch(100% 0 0);
|
|
--content-text: oklch(0% 0 0);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Print Mode Override
|
|
*
|
|
* Always use light theme for printing.
|
|
*/
|
|
@media print {
|
|
:root,
|
|
[data-theme] {
|
|
/* Force light colors for printing */
|
|
--bg-primary: oklch(100% 0 0);
|
|
--content-bg: oklch(100% 0 0);
|
|
--content-text: oklch(0% 0 0);
|
|
--border-light: oklch(20% 0 0);
|
|
|
|
/* Remove shadows for print */
|
|
--shadow-sm: none;
|
|
--shadow-md: none;
|
|
--shadow-lg: none;
|
|
}
|
|
}
|
|
}
|