31 lines
2.0 KiB
CSS
31 lines
2.0 KiB
CSS
/* CRITICAL INLINE CSS - Sollte im HTML <head> stehen */
|
|
/* Nur die absolut notwendigen Styles für First Paint */
|
|
|
|
:root{--primary:#0073ce;--bg:#fafbfc;--surface:#fff;--text:#111827;--border:#e5e7eb;--shadow:0 2px 4px rgba(0,0,0,.05)}
|
|
*{box-sizing:border-box;margin:0;padding:0;contain:layout style}
|
|
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;text-rendering:optimizeSpeed;-webkit-font-smoothing:antialiased}
|
|
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem;position:sticky;top:0;z-index:1000}
|
|
.nav{display:flex;gap:1rem}
|
|
.nav-item{padding:.5rem 1rem;border-radius:6px;text-decoration:none;color:#6b7280;transition:background .1s}
|
|
.nav-item:hover{background:var(--bg);color:var(--text)}
|
|
.nav-item.active{background:var(--primary);color:#fff}
|
|
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
|
|
.btn{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:.75rem 1.5rem;font-weight:600;cursor:pointer;transition:background .1s}
|
|
.btn:hover{background:#005a9f}
|
|
.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem;box-shadow:var(--shadow)}
|
|
.flex{display:flex}
|
|
.grid{display:grid;gap:1rem}
|
|
.hidden{display:none}
|
|
.w-full{width:100%}
|
|
.text-center{text-align:center}
|
|
.p-4{padding:1rem}
|
|
.mb-4{margin-bottom:1rem}
|
|
.status{display:inline-block;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase}
|
|
.status-online{background:#d1fae5;color:#065f46}
|
|
.status-offline{background:#fee2e2;color:#991b1b}
|
|
.status-printing{background:#dbeafe;color:#1e40af}
|
|
.input{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.75rem;width:100%}
|
|
.input:focus{outline:none;border-color:var(--primary)}
|
|
@media (prefers-color-scheme:dark){:root{--bg:#1e293b;--surface:#334155;--text:#f8fafc;--border:#475569;--shadow:0 2px 4px rgba(0,0,0,.3)}}
|
|
@media (max-width:768px){.nav{flex-direction:column;gap:.5rem}}
|
|
@media (prefers-reduced-motion:reduce){*{transition:none!important}} |