Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
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 */
|
|
--sidebar-width-mobile: 100%;
|
|
--sidebar-width-tablet: 250px;
|
|
--sidebar-width-desktop: 250px;
|
|
--sidebar-width-wide: 280px;
|
|
|
|
/* Header Heights per Breakpoint */
|
|
--header-height-mobile: 2.5rem;
|
|
--header-height-tablet: 3rem;
|
|
--header-height-desktop: 3rem;
|
|
--header-height-wide: 3.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);
|