Michael Schiemer
fc3d7e6357
- Add comprehensive health check system with multiple endpoints - Add Prometheus metrics endpoint - Add production logging configurations (5 strategies) - Add complete deployment documentation suite: * QUICKSTART.md - 30-minute deployment guide * DEPLOYMENT_CHECKLIST.md - Printable verification checklist * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference * production-logging.md - Logging configuration guide * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation * README.md - Navigation hub * DEPLOYMENT_SUMMARY.md - Executive summary - Add deployment scripts and automation - Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment - Update README with production-ready features All production infrastructure is now complete and ready for deployment.
123 lines
3.2 KiB
CSS
123 lines
3.2 KiB
CSS
/**
|
|
* Theme Transition Utilities
|
|
*
|
|
* Smooth transitions when switching between light/dark themes.
|
|
* Respects prefers-reduced-motion for accessibility.
|
|
*/
|
|
|
|
@layer admin-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(--admin-transition-base),
|
|
color var(--admin-transition-base),
|
|
border-color var(--admin-transition-base);
|
|
}
|
|
|
|
/* Apply transitions to all elements during theme change */
|
|
* {
|
|
transition:
|
|
background-color var(--admin-transition-base),
|
|
color var(--admin-transition-base),
|
|
border-color var(--admin-transition-base),
|
|
box-shadow var(--admin-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.
|
|
*/
|
|
html:not([data-theme]) {
|
|
/* Hide content until theme is determined */
|
|
visibility: hidden;
|
|
}
|
|
|
|
html[data-theme] {
|
|
/* Show content once theme is set */
|
|
visibility: visible;
|
|
}
|
|
|
|
/**
|
|
* Theme Toggle Animation
|
|
*
|
|
* Icon rotation when toggling theme.
|
|
*/
|
|
[data-theme-toggle] svg {
|
|
transition: transform var(--admin-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 */
|
|
--admin-bg-primary: oklch(10% 0 0);
|
|
--admin-content-text: oklch(100% 0 0);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
/* Ensure maximum contrast */
|
|
--admin-bg-primary: oklch(100% 0 0);
|
|
--admin-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 */
|
|
--admin-bg-primary: oklch(100% 0 0);
|
|
--admin-content-bg: oklch(100% 0 0);
|
|
--admin-content-text: oklch(0% 0 0);
|
|
--admin-border-light: oklch(20% 0 0);
|
|
|
|
/* Remove shadows for print */
|
|
--admin-shadow-sm: none;
|
|
--admin-shadow-md: none;
|
|
--admin-shadow-lg: none;
|
|
}
|
|
}
|
|
}
|