Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
145 lines
3.4 KiB
CSS
145 lines
3.4 KiB
CSS
/**
|
|
* Layout Primitives - Admin Interface
|
|
*
|
|
* Mobile-First Grid Layout mit progressiver Verbesserung für Tablet/Desktop.
|
|
*/
|
|
|
|
@layer layout {
|
|
/**
|
|
* Main Admin Layout Grid
|
|
*
|
|
* Mobile: Stacked (header, sidebar, content)
|
|
* Tablet+: Side-by-side (sidebar + header/content)
|
|
*/
|
|
.admin-layout {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
|
|
/* Mobile Layout (default) */
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto auto 1fr;
|
|
grid-template-areas:
|
|
"header"
|
|
"sidebar"
|
|
"content";
|
|
|
|
/* Tablet+ Layout (768px+) */
|
|
@media (min-width: 768px) {
|
|
grid-template-columns: var(--sidebar-width, var(--spacing-sidebar)) 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-areas:
|
|
"sidebar header"
|
|
"sidebar content";
|
|
}
|
|
|
|
/* Wide Screen Layout (1440px+) */
|
|
@media (min-width: 1440px) {
|
|
grid-template-columns: var(--sidebar-width, var(--spacing-sidebar-wide)) 1fr;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Sidebar Area - Grid Positioning Only
|
|
*
|
|
* Note: Detailed sidebar styling is in _sidebar.css component file.
|
|
* This only defines grid positioning for the layout system.
|
|
*/
|
|
.admin-sidebar {
|
|
grid-area: sidebar;
|
|
}
|
|
|
|
/**
|
|
* Header Area
|
|
*
|
|
* Note: Detailed header styling is in _header.css component file.
|
|
* This only defines grid positioning and basic layout.
|
|
*/
|
|
.admin-header {
|
|
grid-area: header;
|
|
}
|
|
|
|
/**
|
|
* Content Area
|
|
*
|
|
* Note: Detailed content styling is in _content.css component file.
|
|
* This only defines grid positioning.
|
|
*/
|
|
.admin-content {
|
|
grid-area: content;
|
|
}
|
|
|
|
/**
|
|
* Mobile Menu Overlay
|
|
*
|
|
* Backdrop für off-canvas Sidebar auf Mobile.
|
|
*/
|
|
.admin-mobile-overlay {
|
|
display: none;
|
|
|
|
@media (max-width: 767px) {
|
|
&[data-mobile-menu-open="true"] {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: oklch(0% 0 0 / 0.5);
|
|
z-index: calc(var(--z-sidebar) - 1);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Skip Link (Accessibility)
|
|
*/
|
|
.admin-skip-link {
|
|
position: absolute;
|
|
top: -999px;
|
|
left: -999px;
|
|
z-index: var(--z-toast);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background-color: var(--accent-primary);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: var(--radius-md);
|
|
|
|
&:focus {
|
|
top: var(--spacing-sm);
|
|
left: var(--spacing-sm);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Container Width Utilities
|
|
*/
|
|
.admin-container {
|
|
width: 100%;
|
|
max-width: var(--container-mobile);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: var(--container-tablet);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
max-width: var(--container-desktop);
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
max-width: var(--container-wide);
|
|
}
|
|
}
|
|
|
|
.admin-container--narrow {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.admin-container--wide {
|
|
max-width: 100%;
|
|
}
|
|
}
|