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.
199 lines
5.1 KiB
CSS
199 lines
5.1 KiB
CSS
/**
|
|
* Layout Primitives - Admin Interface
|
|
*
|
|
* Mobile-First Grid Layout mit progressiver Verbesserung für Tablet/Desktop.
|
|
*/
|
|
|
|
@layer admin-objects {
|
|
/**
|
|
* 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(--admin-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(--admin-sidebar-width-wide) 1fr;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sidebar Area
|
|
*/
|
|
.admin-sidebar {
|
|
grid-area: sidebar;
|
|
background-color: var(--admin-sidebar-bg);
|
|
color: var(--admin-sidebar-text);
|
|
|
|
/* Mobile: Hidden by default, shown via toggle */
|
|
@media (max-width: 767px) {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: var(--admin-sidebar-width-mobile);
|
|
max-width: 280px;
|
|
transform: translateX(-100%);
|
|
transition: transform var(--admin-transition-base);
|
|
z-index: var(--admin-z-sidebar);
|
|
overflow-y: auto;
|
|
|
|
/* Mobile Menu Open State */
|
|
&[data-mobile-menu-open="true"] {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Tablet+: Always visible */
|
|
@media (min-width: 768px) {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
border-right: 1px solid var(--admin-sidebar-border);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Header Area
|
|
*/
|
|
.admin-header {
|
|
grid-area: header;
|
|
background-color: var(--admin-header-bg);
|
|
color: var(--admin-header-text);
|
|
border-bottom: 1px solid var(--admin-header-border);
|
|
padding: var(--admin-spacing-md) var(--admin-spacing-content-padding);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--admin-spacing-md);
|
|
|
|
/* Mobile */
|
|
min-height: var(--admin-header-height-mobile);
|
|
|
|
/* Tablet+ */
|
|
@media (min-width: 768px) {
|
|
min-height: var(--admin-header-height-tablet);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--admin-z-header);
|
|
}
|
|
|
|
/* Wide */
|
|
@media (min-width: 1440px) {
|
|
min-height: var(--admin-header-height-wide);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Content Area
|
|
*/
|
|
.admin-content {
|
|
grid-area: content;
|
|
background-color: var(--admin-content-bg);
|
|
padding: var(--admin-spacing-content-padding);
|
|
overflow-x: hidden;
|
|
|
|
/* Wide: Center content with max-width */
|
|
@media (min-width: 1440px) {
|
|
max-width: var(--admin-spacing-content-max-width);
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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(--admin-z-sidebar) - 1);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Skip Link (Accessibility)
|
|
*/
|
|
.admin-skip-link {
|
|
position: absolute;
|
|
top: -999px;
|
|
left: -999px;
|
|
z-index: var(--admin-z-toast);
|
|
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
|
background-color: var(--admin-accent-primary);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: var(--admin-radius-md);
|
|
|
|
&:focus {
|
|
top: var(--admin-spacing-sm);
|
|
left: var(--admin-spacing-sm);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Container Width Utilities
|
|
*/
|
|
.admin-container {
|
|
width: 100%;
|
|
max-width: var(--admin-container-mobile);
|
|
margin: 0 auto;
|
|
padding: 0 var(--admin-spacing-md);
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: var(--admin-container-tablet);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
max-width: var(--admin-container-desktop);
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
max-width: var(--admin-container-wide);
|
|
}
|
|
}
|
|
|
|
.admin-container--narrow {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.admin-container--wide {
|
|
max-width: 100%;
|
|
}
|
|
}
|