:root { --brand: #1D4ED8; --brand-dark: #1E3A8A; --brand-light: #DBEAFE; --ink: #0F172A; --ink-soft: #475569; --ink-faint: #94A3B8; --paper: #F8FAFC; --card: #FFFFFF; --line: #E2E8F0; --ok: #16A34A; --warn: #D97706; --crit: #DC2626; --sidebar-bg: #0B1220; --sidebar-line: #1E293B; --mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace; --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* abgeleitete Oberflaechen-Variablen (Tabellen, Modal, Warn-/Fehlerboxen) - passen sich im Darkmode an */ --row-hover: #F8FAFC; --border-soft: #F1F5F9; --overlay-bg: rgba(15,23,42,.45); --modal-bg: #FFFFFF; --meter-track: #E2E8F0; --error-bg: #FEF2F2; --error-border: #FECACA; --warn-bg: #FFFBEB; --warn-border: #FDE68A; } /* ---------- Darkmode ---------- Wird per data-theme="dark" auf aktiviert (siehe static/theme.js). Nur die Oberflaechen-/Textfarben werden ueberschrieben - die Marken- farbe eines Mandanten (--brand/--brand-dark/--brand-light, inline pro Seite gesetzt) bleibt davon unberuehrt und funktioniert in beiden Modi weiter. */ :root[data-theme="dark"] { --ink: #E2E8F0; --ink-soft: #94A3B8; --ink-faint: #64748B; --paper: #0B1220; --card: #16202F; --line: #2A3A52; --ok: #4ADE80; --warn: #FBBF24; --crit: #F87171; --row-hover: #1C2739; --border-soft: #1E293B; --overlay-bg: rgba(0,0,0,.6); --modal-bg: #16202F; --meter-track: #2A3A52; --error-bg: rgba(248,113,113,.12); --error-border: rgba(248,113,113,.4); --warn-bg: rgba(251,191,36,.12); --warn-border: rgba(251,191,36,.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 14px; } button { font-family: var(--sans); cursor: pointer; } input, select, textarea { font-family: var(--sans); } /* ---------- Login ---------- */ .login-body { height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 20%, #16213E 0%, #0B1220 55%, #060A13 100%); } .login-card { background: var(--card); border-radius: 14px; padding: 40px 44px; width: 360px; box-shadow: 0 30px 60px rgba(0,0,0,.35); } .login-card h1 { margin: 0 0 2px; font-size: 22px; letter-spacing: -0.02em; } .login-card h1 span { color: var(--brand); } .login-logo { max-width: 180px; max-height: 64px; display: block; margin: 0 auto 16px; object-fit: contain; } .powered-by { text-align: center; font-size: 10.5px; color: var(--ink-faint); margin-top: 22px; letter-spacing: .03em; } .login-card .subtitle { color: var(--ink-faint); font-family: var(--mono); font-size: 12px; margin: 0 0 24px; text-transform: uppercase; letter-spacing: .08em; } .login-card label { display: block; font-size: 12px; color: var(--ink-soft); margin: 14px 0 4px; } .login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; } .login-card button { width: 100%; margin-top: 22px; padding: 11px; border: none; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; } .login-card button:hover { background: var(--brand-dark); } .error-box { background: var(--error-bg); color: var(--crit); border: 1px solid var(--error-border); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 4px; } /* ---------- App shell ---------- */ .app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } .sidebar { background: var(--sidebar-bg); color: #CBD5E1; padding: 20px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { padding: 4px 8px 20px; border-bottom: 1px solid var(--sidebar-line); margin-bottom: 14px; } .sidebar-logo { max-width: 100%; max-height: 40px; object-fit: contain; margin-bottom: 8px; display: block; } .brand .name { font-weight: 700; font-size: 15px; color: #fff; } .brand .name b { color: #60A5FA; } .brand .tag { font-family: var(--mono); font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: .1em; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #94A3B8; font-size: 13.5px; margin-bottom: 2px; text-decoration: none; border: none; background: transparent; width: 100%; text-align: left; } .nav-item:hover { background: #131E33; color: #fff; } .nav-item.active { background: var(--brand); color: #fff; } .nav-item .count { margin-left: auto; font-family: var(--mono); font-size: 11px; background: #1E293B; color: #94A3B8; padding: 1px 6px; border-radius: 10px; } .nav-item.active .count { background: rgba(255,255,255,.25); color: #fff; } .sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sidebar-line); } .sidebar-footer .user { font-size: 12px; color: #64748B; padding: 0 10px 8px; font-family: var(--mono); } .logout-link { color: #94A3B8; font-size: 12.5px; padding: 8px 10px; display: block; text-decoration: none; border-radius: 8px; } .logout-link:hover { background: #131E33; color: #fff; } .main { padding: 28px 36px; overflow-y: auto; } .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .page-header h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; } .page-header .sub { color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); } /* ---------- Cards / KPI ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } .kpi-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .kpi-card .label { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; } .kpi-card .value { font-size: 26px; font-weight: 700; margin-top: 4px; font-family: var(--mono); } .kpi-card.crit .value { color: var(--crit); } .kpi-card.warn .value { color: var(--warn); } .kpi-card.ok .value { color: var(--ok); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; } .card h3 { margin: 0 0 14px; font-size: 14.5px; } /* ---------- Table ---------- */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; color: var(--ink-faint); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); } td { padding: 10px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } tr.clickable:hover { background: var(--row-hover); cursor: pointer; } .mono { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .status-dot.online { background: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .status-dot.offline { background: var(--crit); box-shadow: 0 0 0 3px rgba(220,38,38,.15); } .status-dot.unknown { background: var(--ink-faint); } .badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; } .badge.kritisch { background: #FEF2F2; color: var(--crit); } .badge.wichtig { background: #FFFBEB; color: var(--warn); } .badge.normal { background: #F1F5F9; color: var(--ink-soft); } .badge.server { background: var(--brand-light); color: var(--brand-dark); } .badge.client { background: #ECFDF5; color: #047857; } .badge.sonstige { background: #F3F4F6; color: #4B5563; } .btn { border: 1px solid var(--line); background: #fff; padding: 7px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); } .btn:hover { border-color: var(--brand); color: var(--brand); } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { background: var(--brand-dark); } .btn.danger { color: var(--crit); } .btn.danger:hover { border-color: var(--crit); } .btn.small { padding: 4px 9px; font-size: 11.5px; } .toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; } .tabs { display: flex; gap: 4px; background: #F1F5F9; padding: 3px; border-radius: 8px; } .tab { padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); border: none; background: transparent; } .tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); } .spacer { flex: 1; } .empty-state { text-align: center; padding: 50px 20px; color: var(--ink-faint); } .empty-state .big { font-size: 28px; margin-bottom: 8px; } /* ---------- Alerts ---------- */ .alert-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--line); } .alert-row.kritisch { border-color: #FECACA; background: #FEF2F2; } .alert-row.wichtig { border-color: #FDE68A; background: #FFFBEB; } .alert-row .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .alert-row.kritisch .dot { background: var(--crit); } .alert-row.wichtig .dot { background: var(--warn); } .alert-row .title { font-weight: 600; font-size: 13px; } .alert-row .detail { color: var(--ink-soft); font-size: 12px; margin-top: 2px; } /* ---------- Modal ---------- */ .overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px; overflow-y: auto; z-index: 50; } .modal { background: var(--modal-bg); border-radius: 14px; width: 560px; max-width: 100%; padding: 26px 28px; } .modal h3 { margin: 0 0 18px; font-size: 16px; } .modal .row { margin-bottom: 12px; } .modal label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; } .modal input, .modal select, .modal textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13.5px; } .modal textarea { font-family: var(--mono); font-size: 12.5px; min-height: 70px; } .modal .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .modal .close-x { position: absolute; } .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; margin-bottom: 6px; } .detail-grid div .k { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; } .detail-grid div .v { font-size: 13px; margin-top: 2px; font-family: var(--mono); } .config-box { background: #0B1220; color: #93C5FD; font-family: var(--mono); font-size: 12px; padding: 14px 16px; border-radius: 8px; white-space: pre-wrap; word-break: break-all; } @media print { body * { visibility: hidden; } .print-label, .print-label * { visibility: visible; } .print-label { position: fixed; top: 40px; left: 0; right: 0; margin: 0 auto; } } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: row; overflow-x: auto; } .kpi-row { grid-template-columns: repeat(2, 1fr); } .detail-grid { grid-template-columns: repeat(2, 1fr); } } a.btn { text-decoration: none; display: inline-block; } a.btn.primary:hover { color: #fff; } /* ---- Geraetedetail v1.0.0.5: Kennzahlen, Reiter, Tabellen ---- */ .sub-line { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; font-family: var(--mono); } .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .kpi .k { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; } .kpi .v { font-size: 15px; font-weight: 700; margin-top: 3px; } .kpi.ok .v { color: var(--ok); } .kpi.warn .v { color: var(--warn); } .kpi.crit .v { color: var(--crit); } .detail-tabs { margin-bottom: 16px; flex-wrap: wrap; } .tab-pane[hidden] { display: none; } .table-wrap { overflow-x: auto; } .table-wrap table { min-width: 100%; } td.wrap { white-space: normal; max-width: 520px; } .meter { display: inline-block; width: 110px; height: 8px; background: var(--meter-track); border-radius: 4px; vertical-align: middle; overflow: hidden; } .meter-fill { height: 100%; border-radius: 4px; } .meter-fill.ok { background: var(--ok); } .meter-fill.warn { background: var(--warn); } .meter-fill.crit { background: var(--crit); } .meter-label { margin-left: 8px; font-size: 12px; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .card-head h3 { margin: 0; } .filters { display: flex; gap: 8px; } .filter-input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; } .card h3 .sub { font-weight: 400; color: var(--ink-faint); font-size: 12px; margin-left: 8px; } td.nowrap { white-space: nowrap; } /* ---- Dokumentation / Wissensdatenbank v1.0.0.5 ---- */ .kb-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; } .kb-sidebar { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; position: sticky; top: 16px; } .kb-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; margin-bottom: 10px; box-sizing: border-box; } .kb-tree { max-height: 55vh; overflow-y: auto; } .kb-folder-row { padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; } .kb-folder-row:hover { background: var(--paper); } .kb-folder-row.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; } .kb-folder-del { color: var(--ink-faint); font-size: 11px; opacity: 0; } .kb-folder-row:hover .kb-folder-del { opacity: 1; } .kb-folder-del:hover { color: var(--crit); } .kb-main-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .kb-main-head h2 { margin: 0; } .kb-row { cursor: pointer; } .kb-row:hover td { background: var(--paper); } .kb-preview { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; font-weight: 400; } .kb-content { line-height: 1.65; font-size: 13.5px; } .kb-content h3, .kb-content h4, .kb-content h5, .kb-content h6 { margin: 18px 0 8px; } .kb-content h3:first-child { margin-top: 0; } .kb-content pre { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; } .kb-content code { background: var(--paper); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 12px; } .kb-content ul { padding-left: 20px; } .kb-version-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); gap: 12px; } .kb-version-row:last-child { border-bottom: none; } @media (max-width: 860px) { .kb-layout { grid-template-columns: 1fr; } .kb-sidebar { position: static; } } /* ---- Superadmin-Modus (Mandant betreten) v1.0.0.5 ---- */ .sa-banner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#0F172A; color:#E2E8F0; padding:9px 18px; border-radius:10px; margin:0 0 18px; font-size:13px; } .sa-banner .sa-badge { background:#F59E0B; color:#0F172A; font-weight:700; padding:3px 9px; border-radius:6px; font-size:12px; } .sa-banner .sa-switch { display:flex; align-items:center; gap:6px; margin-left:auto; } .sa-banner select { padding:4px 8px; border-radius:6px; border:1px solid #334155; background:#1E293B; color:#F8FAFC; } .sa-banner .btn { background:#1E293B; color:#F8FAFC; border-color:#334155; } .sa-banner .btn:hover { background:#334155; } .kb-section-title { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:14px 0 4px 8px; } .kb-count { float:right; font-size:11px; color:var(--ink-faint); } .kb-hint { font-size:12.5px; color:var(--ink-faint); margin:-6px 0 14px; } .kb-content table { width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0 10px; } .kb-content th, .kb-content td { border-bottom:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top; } .kb-content th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); } .kb-main-head h2 .sub { font-size:12px; font-weight:400; color:var(--ink-faint); margin-left:6px; } /* Geräte-Typen (v1.0.0.5+) */ .badge.firewall { background: #FEF2F2; color: #B91C1C; } .badge.router { background: #EFF6FF; color: #1D4ED8; } .badge.switch { background: #EEF2FF; color: #4338CA; } .badge.accesspoint { background: #ECFEFF; color: #0E7490; } .badge.drucker { background: #FFF7ED; color: #C2410C; } .badge.nas { background: #F5F3FF; color: #6D28D9; } .badge.usv { background: #FEFCE8; color: #A16207; } .badge.kamera { background: #FDF4FF; color: #A21CAF; } .badge.telefon { background: #F0FDFA; color: #0F766E; } /* ---------- Darkmode: Badge-/Status-/Hinweisfarben ---------- Die pastellfarbenen Hell-Varianten (helles Pastell + dunkler Text) werden im Darkmode auf transparente, dunkle Varianten mit hellerem Text umgestellt - sonst waeren sie auf dunklem Hintergrund kaum lesbar bzw. wirkten zu grell. */ :root[data-theme="dark"] .badge.kritisch { background: rgba(248,113,113,.15); color: #F87171; } :root[data-theme="dark"] .badge.wichtig { background: rgba(251,191,36,.15); color: #FBBF24; } :root[data-theme="dark"] .badge.normal { background: #1E293B; color: var(--ink-soft); } :root[data-theme="dark"] .badge.server { background: rgba(96,165,250,.15); color: #93C5FD; } :root[data-theme="dark"] .badge.client { background: rgba(74,222,128,.15); color: #4ADE80; } :root[data-theme="dark"] .badge.sonstige { background: #1E293B; color: #CBD5E1; } :root[data-theme="dark"] .badge.firewall { background: rgba(248,113,113,.15); color: #F87171; } :root[data-theme="dark"] .badge.router { background: rgba(96,165,250,.15); color: #93C5FD; } :root[data-theme="dark"] .badge.switch { background: rgba(129,140,248,.18); color: #A5B4FC; } :root[data-theme="dark"] .badge.accesspoint { background: rgba(34,211,238,.15); color: #67E8F9; } :root[data-theme="dark"] .badge.drucker { background: rgba(251,146,60,.18); color: #FDBA74; } :root[data-theme="dark"] .badge.nas { background: rgba(167,139,250,.18); color: #C4B5FD; } :root[data-theme="dark"] .badge.usv { background: rgba(250,204,21,.15); color: #FDE047; } :root[data-theme="dark"] .badge.kamera { background: rgba(232,121,249,.15); color: #F0ABFC; } :root[data-theme="dark"] .badge.telefon { background: rgba(45,212,191,.15); color: #5EEAD4; } :root[data-theme="dark"] .alert-row.kritisch { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); } :root[data-theme="dark"] .alert-row.wichtig { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); } :root[data-theme="dark"] .kb-folder-row.active { background: rgba(96,165,250,.18); color: #93C5FD; } :root[data-theme="dark"] .kb-content pre, :root[data-theme="dark"] .kb-content code { border-color: var(--line); } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--paper); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .btn { background: var(--card); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .tabs { background: var(--paper); } :root[data-theme="dark"] .tab.active { background: var(--card); color: var(--ink); } /* ---------- Theme-Umschalter (Sidebar) ---------- */ .theme-switcher { margin: 0 0 12px; } .theme-switcher label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #64748B; margin-bottom: 4px; } .theme-switcher select { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--sidebar-line); background: #131E33; color: #E2E8F0; font-size: 12.5px; }