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.
91 lines
2.4 KiB
CSS
91 lines
2.4 KiB
CSS
/**
|
|
* Responsive Breakpoints - Admin Interface
|
|
*
|
|
* Mobile-First breakpoint system with semantic naming.
|
|
* Verwendet Custom Media Queries für bessere Wiederverwendbarkeit.
|
|
*/
|
|
|
|
@layer admin-settings {
|
|
/**
|
|
* Breakpoint Tokens
|
|
*
|
|
* Mobile-First Approach:
|
|
* - Mobile: 0px - 767px (default, keine media query nötig)
|
|
* - Tablet: 768px - 1023px
|
|
* - Desktop: 1024px - 1439px
|
|
* - Wide: 1440px+
|
|
*/
|
|
:root {
|
|
/* Breakpoint Values */
|
|
--admin-breakpoint-tablet: 768px;
|
|
--admin-breakpoint-desktop: 1024px;
|
|
--admin-breakpoint-wide: 1440px;
|
|
|
|
/* Container Max Widths per Breakpoint */
|
|
--admin-container-mobile: 100%;
|
|
--admin-container-tablet: 720px;
|
|
--admin-container-desktop: 960px;
|
|
--admin-container-wide: 1400px;
|
|
|
|
/* Sidebar Widths per Breakpoint */
|
|
--admin-sidebar-width-mobile: 100%;
|
|
--admin-sidebar-width-tablet: 250px;
|
|
--admin-sidebar-width-desktop: 250px;
|
|
--admin-sidebar-width-wide: 280px;
|
|
|
|
/* Header Heights per Breakpoint */
|
|
--admin-header-height-mobile: 3.5rem;
|
|
--admin-header-height-tablet: 4rem;
|
|
--admin-header-height-desktop: 4rem;
|
|
--admin-header-height-wide: 4.5rem;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Custom Media Queries
|
|
*
|
|
* Verwendung in anderen CSS-Dateien:
|
|
* @media (min-width: 768px) { ... }
|
|
* @media (min-width: 1024px) { ... }
|
|
* @media (min-width: 1440px) { ... }
|
|
*/
|
|
|
|
/* Tablet and up (768px+) */
|
|
@custom-media --admin-tablet (min-width: 768px);
|
|
|
|
/* Desktop and up (1024px+) */
|
|
@custom-media --admin-desktop (min-width: 1024px);
|
|
|
|
/* Wide screens (1440px+) */
|
|
@custom-media --admin-wide (min-width: 1440px);
|
|
|
|
/* Mobile only (max 767px) */
|
|
@custom-media --admin-mobile-only (max-width: 767px);
|
|
|
|
/* Tablet only (768px - 1023px) */
|
|
@custom-media --admin-tablet-only (min-width: 768px) and (max-width: 1023px);
|
|
|
|
/* Desktop only (1024px - 1439px) */
|
|
@custom-media --admin-desktop-only (min-width: 1024px) and (max-width: 1439px);
|
|
|
|
/**
|
|
* Orientation Queries
|
|
*/
|
|
@custom-media --admin-landscape (orientation: landscape);
|
|
@custom-media --admin-portrait (orientation: portrait);
|
|
|
|
/**
|
|
* Touch Device Detection
|
|
*/
|
|
@custom-media --admin-touch (hover: none) and (pointer: coarse);
|
|
|
|
/**
|
|
* Reduced Motion Preference
|
|
*/
|
|
@custom-media --admin-reduced-motion (prefers-reduced-motion: reduce);
|
|
|
|
/**
|
|
* High Contrast Preference
|
|
*/
|
|
@custom-media --admin-high-contrast (prefers-contrast: more);
|