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.
171 lines
4.7 KiB
CSS
171 lines
4.7 KiB
CSS
/**
|
|
* Base Element Styles - Admin Interface
|
|
*
|
|
* Grundlegende Styles für HTML-Elemente im Admin-Bereich.
|
|
*/
|
|
|
|
@layer admin-elements {
|
|
/**
|
|
* Root Admin Layout
|
|
*/
|
|
.admin-layout {
|
|
font-family: var(--admin-font-family-base);
|
|
font-size: var(--admin-font-size-base);
|
|
line-height: var(--admin-line-height-normal);
|
|
color: var(--admin-content-text);
|
|
background-color: var(--admin-bg-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/**
|
|
* Typography
|
|
*/
|
|
.admin-layout h1 {
|
|
font-size: var(--admin-font-size-3xl);
|
|
font-weight: var(--admin-font-weight-bold);
|
|
line-height: var(--admin-line-height-tight);
|
|
margin-bottom: var(--admin-spacing-lg);
|
|
}
|
|
|
|
.admin-layout h2 {
|
|
font-size: var(--admin-font-size-2xl);
|
|
font-weight: var(--admin-font-weight-semibold);
|
|
line-height: var(--admin-line-height-tight);
|
|
margin-bottom: var(--admin-spacing-md);
|
|
}
|
|
|
|
.admin-layout h3 {
|
|
font-size: var(--admin-font-size-xl);
|
|
font-weight: var(--admin-font-weight-semibold);
|
|
line-height: var(--admin-line-height-tight);
|
|
margin-bottom: var(--admin-spacing-md);
|
|
}
|
|
|
|
.admin-layout h4 {
|
|
font-size: var(--admin-font-size-lg);
|
|
font-weight: var(--admin-font-weight-medium);
|
|
line-height: var(--admin-line-height-normal);
|
|
margin-bottom: var(--admin-spacing-sm);
|
|
}
|
|
|
|
.admin-layout p {
|
|
margin-bottom: var(--admin-spacing-md);
|
|
line-height: var(--admin-line-height-relaxed);
|
|
}
|
|
|
|
.admin-layout small {
|
|
font-size: var(--admin-font-size-sm);
|
|
color: oklch(from var(--admin-content-text) calc(l * 0.7) c h);
|
|
}
|
|
|
|
.admin-layout code {
|
|
font-family: var(--admin-font-family-mono);
|
|
font-size: 0.875em;
|
|
background-color: var(--admin-bg-tertiary);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--admin-radius-sm);
|
|
}
|
|
|
|
.admin-layout pre {
|
|
font-family: var(--admin-font-family-mono);
|
|
font-size: var(--admin-font-size-sm);
|
|
background-color: var(--admin-bg-tertiary);
|
|
padding: var(--admin-spacing-md);
|
|
border-radius: var(--admin-radius-md);
|
|
overflow-x: auto;
|
|
margin-bottom: var(--admin-spacing-md);
|
|
}
|
|
|
|
.admin-layout pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/**
|
|
* Lists
|
|
*/
|
|
.admin-layout ul:not([role="list"]) {
|
|
list-style: disc;
|
|
padding-left: var(--admin-spacing-lg);
|
|
}
|
|
|
|
.admin-layout ol:not([role="list"]) {
|
|
list-style: decimal;
|
|
padding-left: var(--admin-spacing-lg);
|
|
}
|
|
|
|
/**
|
|
* Tables
|
|
*/
|
|
.admin-layout table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: var(--admin-spacing-lg);
|
|
}
|
|
|
|
.admin-layout th {
|
|
text-align: left;
|
|
font-weight: var(--admin-font-weight-semibold);
|
|
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
|
background-color: var(--admin-bg-secondary);
|
|
border-bottom: 2px solid var(--admin-border-medium);
|
|
}
|
|
|
|
.admin-layout td {
|
|
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
|
border-bottom: 1px solid var(--admin-border-light);
|
|
}
|
|
|
|
.admin-layout tr:hover {
|
|
background-color: var(--admin-hover-overlay);
|
|
}
|
|
|
|
/**
|
|
* Forms
|
|
*/
|
|
.admin-layout input[type="text"],
|
|
.admin-layout input[type="email"],
|
|
.admin-layout input[type="password"],
|
|
.admin-layout input[type="search"],
|
|
.admin-layout input[type="url"],
|
|
.admin-layout input[type="tel"],
|
|
.admin-layout input[type="number"],
|
|
.admin-layout textarea,
|
|
.admin-layout select {
|
|
width: 100%;
|
|
padding: var(--admin-spacing-sm) var(--admin-spacing-md);
|
|
font-family: inherit;
|
|
font-size: var(--admin-font-size-base);
|
|
line-height: var(--admin-line-height-normal);
|
|
color: var(--admin-content-text);
|
|
background-color: var(--admin-content-bg);
|
|
border: 1px solid var(--admin-border-medium);
|
|
border-radius: var(--admin-radius-md);
|
|
transition: border-color var(--admin-transition-fast),
|
|
box-shadow var(--admin-transition-fast);
|
|
}
|
|
|
|
.admin-layout input:focus,
|
|
.admin-layout textarea:focus,
|
|
.admin-layout select:focus {
|
|
outline: none;
|
|
border-color: var(--admin-focus-ring);
|
|
box-shadow: 0 0 0 3px oklch(from var(--admin-focus-ring) l c h / 0.1);
|
|
}
|
|
|
|
.admin-layout textarea {
|
|
min-height: 8rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
/**
|
|
* HR
|
|
*/
|
|
.admin-layout hr {
|
|
border: none;
|
|
border-top: 1px solid var(--admin-border-light);
|
|
margin: var(--admin-spacing-xl) 0;
|
|
}
|
|
}
|