/* ============================================================================= ZeroFeed - Modernes SaaS-Theme (hell) mit Sidebar ============================================================================= Gilt fuer alle Bereiche AUSSER dem klassischen Dashboard (#dashboard bleibt unveraendert). Additive Ebene ueber Bootstrap 3 - die bestehende JS-Logik und die Steuer-Widgets bleiben funktional. Aktiv nur wenn . Schweizer Konvention: Zahlen in Tabellen rechtsbuendig (.num / td.num). ========================================================================== */ :root { --zf-bg: #f7f9fc; --zf-surface: #ffffff; --zf-surface-2: #f1f5fb; --zf-border: #e4e9f2; --zf-border-strong: #d3dae7; --zf-text: #1e2a3b; --zf-text-dim: #64748b; --zf-text-faint: #94a3b8; --zf-accent: #2563eb; --zf-accent-hover: #1d4ed8; --zf-accent-weak: #eaf1ff; --zf-success: #16a34a; --zf-success-weak: #e7f6ec; --zf-warning: #d97706; --zf-warning-weak: #fdf3e3; --zf-danger: #dc2626; --zf-danger-weak: #fdECEC; --zf-radius: 12px; --zf-radius-sm: 8px; --zf-shadow-sm: 0 1px 2px rgba(16,24,40,.05); --zf-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --zf-shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04); --zf-shadow-lg: 0 12px 32px rgba(16,24,40,.14); --zf-sidebar-w: 244px; --zf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- Grundlayout: Sidebar + Content --------------------------------------- */ body.ui-modern { background: var(--zf-bg); color: var(--zf-text); font-family: var(--zf-font); -webkit-font-smoothing: antialiased; } .zf-shell { display: flex; min-height: 100vh; } /* Sidebar */ .zf-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--zf-sidebar-w); background: var(--zf-surface); border-right: 1px solid var(--zf-border); display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease; } .zf-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--zf-text); border-bottom: 1px solid var(--zf-border); } .zf-sidebar__brand img { height: 28px; width: auto; } .zf-sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 10px; } .zf-nav-group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--zf-text-faint); padding: 14px 12px 6px; } .zf-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 2px 0; border-radius: var(--zf-radius-sm); color: var(--zf-text-dim); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .12s, color .12s; } .zf-nav-item:hover, .zf-nav-item:focus { background: var(--zf-surface-2); color: var(--zf-text); text-decoration: none; } .zf-nav-item.active { background: var(--zf-accent-weak); color: var(--zf-accent); font-weight: 600; } .zf-nav-item .glyphicon { font-size: 15px; width: 18px; text-align: center; } .zf-sidebar__footer { padding: 12px; border-top: 1px solid var(--zf-border); font-size: 13px; color: var(--zf-text-dim); } /* Bestehenden .container-Content neben die fixe Sidebar schieben (kein DOM-Umbau) */ .ui-modern > .container { margin-left: var(--zf-sidebar-w); width: auto; max-width: 1200px; padding: 8px 28px 48px; } /* Klassische Kopfzeile (grosse Live-Zahlen) nur im Dashboard zeigen */ .ui-modern:not([data-section="dashboard"]) #zfClassicHeader { display: none; } /* Altes Hamburger-Menue entfaellt - die Sidebar uebernimmt die Navigation */ .ui-modern #mainMenuBtn, .ui-modern #mainMenuBtn + .dropdown-menu { display: none !important; } @media (max-width: 991px) { .ui-modern > .container { margin-left: 0; padding: 16px 16px 40px; } } /* Content-Bereich */ .zf-main { flex: 1; margin-left: var(--zf-sidebar-w); min-width: 0; display: flex; flex-direction: column; } .zf-topbar { display: none; align-items: center; gap: 12px; padding: 12px 16px; background: var(--zf-surface); border-bottom: 1px solid var(--zf-border); position: sticky; top: 0; z-index: 1030; } .zf-topbar__title { font-weight: 700; font-size: 17px; } .zf-burger { border: 1px solid var(--zf-border-strong); background: var(--zf-surface); border-radius: var(--zf-radius-sm); padding: 7px 11px; color: var(--zf-text); font-size: 16px; line-height: 1; cursor: pointer; } .zf-content { padding: 24px 28px 48px; max-width: 1200px; width: 100%; } .zf-page-head { margin: 0 0 20px; } .zf-page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; } .zf-page-head p { color: var(--zf-text-dim); font-size: 14px; margin: 0; } /* Sidebar-Backdrop (Mobile) */ .zf-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 1035; } /* Responsive: Sidebar wird zum Off-Canvas */ @media (max-width: 991px) { .zf-sidebar { transform: translateX(-100%); box-shadow: var(--zf-shadow-lg); } body.zf-sidebar-open .zf-sidebar { transform: translateX(0); } body.zf-sidebar-open .zf-backdrop { display: block; } .zf-main { margin-left: 0; } .zf-topbar { display: flex; } .zf-content { padding: 16px 16px 40px; } } /* ============================================================================= Komponenten - nur in modernen Sektionen (nicht im Dashboard) und in Modals ========================================================================== */ .ui-modern .section-pane:not(#dashboard) .panel, .ui-modern .zf-card { background: var(--zf-surface); border: 1px solid var(--zf-border); border-radius: var(--zf-radius); box-shadow: var(--zf-shadow-sm); margin-bottom: 20px; overflow: hidden; } .ui-modern .section-pane:not(#dashboard) .panel-heading { background: transparent; border-bottom: 1px solid var(--zf-border); padding: 14px 18px; font-weight: 600; font-size: 15px; color: var(--zf-text); } .ui-modern .section-pane:not(#dashboard) .panel-title { font-size: 15px; font-weight: 600; } .ui-modern .section-pane:not(#dashboard) .panel-body { padding: 18px; } /* Buttons */ .ui-modern .section-pane:not(#dashboard) .btn, .ui-modern .modal .btn, .ui-modern .zf-btn { border-radius: var(--zf-radius-sm); font-weight: 600; font-size: 14px; padding: 8px 15px; border: 1px solid transparent; transition: background .12s, border-color .12s, box-shadow .12s, color .12s; text-shadow: none; background-image: none; box-shadow: none; } .ui-modern .section-pane:not(#dashboard) .btn-primary, .ui-modern .modal .btn-primary { background: var(--zf-accent); border-color: var(--zf-accent); color: #fff; } .ui-modern .section-pane:not(#dashboard) .btn-primary:hover, .ui-modern .modal .btn-primary:hover { background: var(--zf-accent-hover); border-color: var(--zf-accent-hover); } .ui-modern .section-pane:not(#dashboard) .btn-default, .ui-modern .modal .btn-default { background: var(--zf-surface); border-color: var(--zf-border-strong); color: var(--zf-text); } .ui-modern .section-pane:not(#dashboard) .btn-default:hover, .ui-modern .modal .btn-default:hover { background: var(--zf-surface-2); border-color: var(--zf-text-faint); } .ui-modern .section-pane:not(#dashboard) .btn-success, .ui-modern .modal .btn-success { background: var(--zf-success); border-color: var(--zf-success); color: #fff; } .ui-modern .section-pane:not(#dashboard) .btn-danger, .ui-modern .modal .btn-danger { background: var(--zf-danger); border-color: var(--zf-danger); color: #fff; } .ui-modern .section-pane:not(#dashboard) .btn-info, .ui-modern .modal .btn-info { background: var(--zf-surface); border-color: var(--zf-border-strong); color: var(--zf-accent); } .ui-modern .section-pane:not(#dashboard) .btn:focus, .ui-modern .modal .btn:focus { outline: none; box-shadow: 0 0 0 3px var(--zf-accent-weak); } /* Formulare */ .ui-modern .section-pane:not(#dashboard) .form-control, .ui-modern .modal .form-control { border: 1px solid var(--zf-border-strong); border-radius: var(--zf-radius-sm); box-shadow: none; height: auto; padding: 9px 12px; font-size: 14px; color: var(--zf-text); background: var(--zf-surface); transition: border-color .12s, box-shadow .12s; } .ui-modern .section-pane:not(#dashboard) .form-control:focus, .ui-modern .modal .form-control:focus { border-color: var(--zf-accent); box-shadow: 0 0 0 3px var(--zf-accent-weak); } .ui-modern .section-pane:not(#dashboard) label, .ui-modern .modal label { font-weight: 600; font-size: 13px; color: var(--zf-text); margin-bottom: 5px; } .ui-modern .section-pane:not(#dashboard) .help-block, .ui-modern .modal .help-block { color: var(--zf-text-faint); font-size: 12px; } /* Tabellen */ .ui-modern .section-pane:not(#dashboard) .table { margin-bottom: 0; } .ui-modern .section-pane:not(#dashboard) .table > thead > tr > th { border-bottom: 1px solid var(--zf-border); color: var(--zf-text-dim); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 11px 14px; } .ui-modern .section-pane:not(#dashboard) .table > tbody > tr > td { border-top: 1px solid var(--zf-border); padding: 12px 14px; font-size: 14px; vertical-align: middle; } .ui-modern .section-pane:not(#dashboard) .table-hover > tbody > tr:hover { background: var(--zf-surface-2); } .ui-modern .section-pane:not(#dashboard) .table .num, .ui-modern .section-pane:not(#dashboard) .table th.num, .ui-modern .section-pane:not(#dashboard) .table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Badges / Labels */ .ui-modern .section-pane:not(#dashboard) .label, .ui-modern .zf-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; } .ui-modern .section-pane:not(#dashboard) .label-success { background: var(--zf-success-weak); color: var(--zf-success); } .ui-modern .section-pane:not(#dashboard) .label-danger { background: var(--zf-danger-weak); color: var(--zf-danger); } .ui-modern .section-pane:not(#dashboard) .label-warning { background: var(--zf-warning-weak); color: var(--zf-warning); } .ui-modern .section-pane:not(#dashboard) .label-default { background: var(--zf-surface-2); color: var(--zf-text-dim); } .ui-modern .section-pane:not(#dashboard) .label-info { background: var(--zf-accent-weak); color: var(--zf-accent); } /* Alerts */ .ui-modern .section-pane:not(#dashboard) .alert { border-radius: var(--zf-radius); border: 1px solid transparent; font-size: 14px; padding: 13px 16px; } .ui-modern .section-pane:not(#dashboard) .alert-info { background: var(--zf-accent-weak); border-color: #cfe0ff; color: #1e40af; } .ui-modern .section-pane:not(#dashboard) .alert-warning { background: var(--zf-warning-weak); border-color: #f5e0bd; color: #92400e; } .ui-modern .section-pane:not(#dashboard) .alert-danger { background: var(--zf-danger-weak); border-color: #f4c9c9; color: #991b1b; } /* Modals */ .ui-modern .modal-content { border: none; border-radius: var(--zf-radius); box-shadow: var(--zf-shadow-lg); overflow: hidden; } .ui-modern .modal-header { border-bottom: 1px solid var(--zf-border); padding: 16px 20px; } .ui-modern .modal-title { font-weight: 700; font-size: 17px; } .ui-modern .modal-body { padding: 20px; } .ui-modern .modal-footer { border-top: 1px solid var(--zf-border); padding: 14px 20px; } /* Geraete-Karten (modernisiert) */ .ui-modern #devices .device-card { background: var(--zf-surface); border: 1px solid var(--zf-border); border-radius: var(--zf-radius); box-shadow: var(--zf-shadow-sm); padding: 16px 18px; margin-bottom: 12px; transition: box-shadow .15s, border-color .15s; } .ui-modern #devices .device-card:hover { box-shadow: var(--zf-shadow-md); border-color: var(--zf-border-strong); } .ui-modern #devices .device-card.offline { opacity: .62; } .ui-modern .device-status { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } .ui-modern .device-status.on { background: var(--zf-success); box-shadow: 0 0 0 3px var(--zf-success-weak); } .ui-modern .device-status.off { background: var(--zf-text-faint); } .ui-modern .device-status.unknown { background: var(--zf-danger); box-shadow: 0 0 0 3px var(--zf-danger-weak); } /* Kleine Helfer */ .ui-modern .zf-muted { color: var(--zf-text-dim); } .ui-modern .zf-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .ui-modern .zf-stat { background: var(--zf-surface); border: 1px solid var(--zf-border); border-radius: var(--zf-radius); padding: 16px 18px; box-shadow: var(--zf-shadow-sm); } .ui-modern .zf-stat__label { font-size: 12px; color: var(--zf-text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .ui-modern .zf-stat__value { font-size: 26px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }