/* ── Eno Design Schema — Bootstrap-Overrides ──────────────────────────── Legt das Eno/DINLOK-Look-and-Feel über das bestehende Bootstrap-5-Markup. Pilot: base.html + dashboard.html. Greift wegen globaler Bootstrap-Klassen (btn, card, badge, table …) automatisch auch schon auf andere Seiten. Reihenfolge im : bootstrap.min.css → tokens.css → overrides.css. */ /* ═══ Bootstrap-Variablen umbiegen ══════════════════════════════════════ Bootstrap 5.3 zieht Border-/Body-/Link-Utilities zur Laufzeit aus diesen Variablen — retheming das, was unsere Klassen-Overrides unten nicht explizit anfassen (border-*, generische Links, Schatten). */ :root,[data-bs-theme=light]{ --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-body-font-family:var(--font-core); --bs-border-color:var(--line); --bs-border-color-translucent:var(--line); --bs-border-radius:var(--r-button); --bs-border-radius-sm:var(--r-tag); --bs-border-radius-lg:var(--r-card); --bs-link-color:var(--accent); --bs-link-color-rgb:124,58,237; --bs-link-hover-color:var(--accent-hover); --bs-box-shadow-sm:none; --bs-box-shadow:none; --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--muted); --bs-secondary-bg:var(--surface2); --bs-tertiary-bg:var(--surface2); /* rgb-Varianten — treiben .text-*/.bg-*/.border-* Utilities zur Laufzeit */ --bs-primary-rgb:124,58,237; --bs-success-rgb:21,128,61; --bs-warning-rgb:180,83,9; --bs-danger-rgb:180,34,24; --bs-info-rgb:124,58,237; --bs-secondary-rgb:107,114,128; --bs-light-rgb:248,248,251; --bs-dark-rgb:36,31,51; /* alert-* Feintöne */ --bs-success-bg-subtle:var(--ok-bg); --bs-success-text-emphasis:var(--ok-fg); --bs-warning-bg-subtle:var(--due-bg); --bs-warning-text-emphasis:var(--due-fg); --bs-danger-bg-subtle:var(--overdue-bg); --bs-danger-text-emphasis:var(--overdue-fg); --bs-primary-bg-subtle:var(--accent-soft); --bs-primary-text-emphasis:var(--accent); --bs-info-bg-subtle:var(--accent-soft); --bs-info-text-emphasis:var(--accent); --bs-success-border-subtle:var(--line); --bs-warning-border-subtle:var(--line); --bs-danger-border-subtle:var(--line); --bs-primary-border-subtle:var(--line); --bs-info-border-subtle:var(--line); } /* Dark-Mode: gleiche Struktur, Werte wandern automatisch mit tokens.css mit (--bg/--text/... sind dort unter [data-bs-theme="dark"] neu gesetzt). */ [data-bs-theme=dark]{ --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-border-color:var(--line); --bs-border-color-translucent:var(--line); --bs-emphasis-color:var(--ink); --bs-secondary-color:var(--muted); --bs-secondary-bg:var(--surface2); --bs-tertiary-bg:var(--surface2); --bs-link-color:var(--accent); --bs-link-hover-color:var(--accent-hover); --bs-primary-rgb:168,85,247; --bs-success-rgb:74,222,128; --bs-warning-rgb:251,191,36; --bs-danger-rgb:251,113,133; --bs-info-rgb:168,85,247; --bs-secondary-rgb:154,146,171; --bs-light-rgb:34,27,45; --bs-dark-rgb:236,233,244; --bs-success-bg-subtle:var(--ok-bg); --bs-success-text-emphasis:var(--ok-fg); --bs-warning-bg-subtle:var(--due-bg); --bs-warning-text-emphasis:var(--due-fg); --bs-danger-bg-subtle:var(--overdue-bg); --bs-danger-text-emphasis:var(--overdue-fg); --bs-primary-bg-subtle:var(--accent-soft); --bs-primary-text-emphasis:var(--accent); --bs-info-bg-subtle:var(--accent-soft); --bs-info-text-emphasis:var(--accent); --bs-success-border-subtle:var(--line); --bs-warning-border-subtle:var(--line); --bs-danger-border-subtle:var(--line); --bs-primary-border-subtle:var(--line); --bs-info-border-subtle:var(--line); } [data-bs-theme=dark] body{background:var(--bg);color:var(--text)} /* ═══ Grundlagen ═══════════════════════════════════════════════════════ */ body{ background:var(--bg); color:var(--text); font-family:var(--font-core); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } a{color:var(--accent)} a:hover{color:var(--accent-hover)} h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--ink); font-weight:700; letter-spacing:0; } .h3, h1.h3{font-size:var(--fs-screen-title)} .h4{font-size:17px} .h5{font-size:var(--fs-section)} .h6{font-size:var(--fs-card-title);text-transform:uppercase;letter-spacing:var(--ls-overline);color:var(--muted);font-weight:700} ::selection{background:var(--accent-soft)} /* ═══ Topbar ════════════════════════════════════════════════════════════ */ .eno-topbar{ background:var(--surface); border-bottom:1px solid var(--line); min-height:var(--topbar-h); box-shadow:none; } .eno-logo-tile{ width:36px;height:24px;border-radius:var(--r-logo); background:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden; border:1px solid var(--line); } .eno-logo-tile img{width:88%;display:block} .eno-wordmark{ font-size:var(--fs-wordmark);font-weight:700;letter-spacing:var(--ls-wordmark); text-transform:uppercase;color:var(--text); } .eno-topbar .nav-link{ font-size:var(--fs-body);color:var(--muted);padding:8px 10px;border-radius:var(--r-button); transition:background .12s linear,color .12s linear; } .eno-topbar .nav-link:hover{color:var(--text);background:var(--surface2)} .eno-topbar .nav-link.active{color:var(--accent);background:var(--accent-soft);font-weight:600} .eno-topbar .navbar-toggler{border-color:var(--line)} /* ═══ Buttons ═══════════════════════════════════════════════════════════ */ .btn{ font-weight:700;font-size:var(--fs-button);border-radius:var(--r-button); padding:var(--pad-button-y) var(--pad-button-x); transition:background .12s linear,color .12s linear,border-color .12s linear; box-shadow:none !important; } .btn-sm{font-size:12px;padding:6px 11px} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)} .btn-primary:hover,.btn-primary:focus{background:var(--accent-hover);border-color:var(--accent-hover)} .btn-outline-primary{color:var(--accent);border-color:var(--accent)} .btn-outline-primary:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .btn-outline-secondary{color:var(--muted);border-color:var(--line);background:var(--surface)} .btn-outline-secondary:hover{background:var(--surface2);color:var(--text);border-color:var(--line)} .btn-light{background:var(--surface2);border-color:var(--line);color:var(--text)} /* Bootstrap setzt für .btn.disabled/.btn:disabled eigene --bs-btn-disabled-* Variablen pro Variante fest auf harte Hex-Werte (z.B. .btn-light: #f8f9fa/#000) — das ignoriert unsere Theme-Variablen komplett und blieb im Dark Mode hell/ unleserlich. .btn.disabled hat 2 Klassen Spezifität, .btn-light nur 1 — deshalb hier ausdrücklich auf beide Zustände zielen. */ .btn.disabled,.btn:disabled{opacity:1;background:var(--surface2);border-color:var(--line);color:var(--faint)} /* Ausnahme: der Monats-Label-Button (btn-light.disabled) ist kein wirklich deaktiviertes Steuerelement, sondern reiner Text — bleibt voll lesbar. */ .btn-light.disabled{color:var(--text);font-weight:600} /* ═══ Cards ═════════════════════════════════════════════════════════════ Kanten statt Schatten. Emphase = farbiger linker Rand, nie Volltonkarte. */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card-lg); box-shadow:none; } .shadow-sm{box-shadow:none !important} .border-primary{border-color:var(--line) !important;border-left:3px solid var(--accent) !important} .border-warning{border-color:var(--line) !important;border-left:3px solid var(--due-fg) !important} .border-danger{border-color:var(--line) !important;border-left:3px solid var(--overdue-fg) !important} .border-success{border-color:var(--line) !important;border-left:3px solid var(--ok-fg) !important} /* ═══ KPI-Kacheln (stat-card) ══════════════════════════════════════════ */ .stat-card{transition:none} .stat-card:hover{transform:none} .stat-lbl{ font-size:var(--fs-overline);font-weight:var(--fw-overline);letter-spacing:var(--ls-overline); text-transform:uppercase;color:var(--muted); } .stat-num{font-size:var(--fs-kpi);font-weight:var(--fw-kpi);color:var(--ink);line-height:1.1} .text-primary.stat-num{color:var(--accent) !important} /* ═══ Badges / Tags ═════════════════════════════════════════════════════ Ton = Text auf getönter Fläche, kein Volltonchip. */ .badge{ font-size:var(--fs-tag);font-weight:var(--fw-tag);letter-spacing:var(--ls-tag); text-transform:uppercase;border-radius:var(--r-tag);padding:4px 6px; } /* background-color (Langform) statt background (Kurzform) — Safari kaskadiert shorthand vs. longhand bei !important nicht zuverlässig gegen Bootstraps eigene .bg-*-Regeln (die selbst background-color verwenden). Chrome/Firefox verzeihen das, Safari zeigte trotz !important Bootstraps Volltonfarbe. */ .badge.bg-success{background-color:var(--ok-bg) !important;color:var(--ok-fg) !important} .badge.bg-warning{background-color:var(--due-bg) !important;color:var(--due-fg) !important} .badge.bg-danger{background-color:var(--overdue-bg) !important;color:var(--overdue-fg) !important} .badge.bg-secondary{background-color:var(--surface2) !important;color:var(--muted) !important} .badge.bg-primary{background-color:var(--accent-soft) !important;color:var(--accent) !important} .badge.bg-light{background-color:var(--surface2) !important;color:var(--muted) !important} .badge.bg-info{background-color:var(--accent-soft) !important;color:var(--accent) !important} .badge.bg-dark{background-color:#000 !important;color:#fff !important} .badge-uber{background-color:#000;color:#fff} .badge-sammel{background-color:var(--due-bg);color:var(--due-fg)} .priv-on{color:var(--overdue-fg);font-weight:600} /* ═══ Tabellen ══════════════════════════════════════════════════════════ */ .table{color:var(--text)} .table td,.table th{border-color:var(--line)} .table thead.table-light,.table > :not(caption) > * > th{ background-color:var(--surface2) !important; font-size:var(--fs-overline);font-weight:var(--fw-overline);letter-spacing:var(--ls-overline); text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line); } .table-hover>tbody>tr:hover>*{background-color:var(--surface2)} .table tfoot.table-light{background-color:var(--surface2) !important} /* Markierte Zeilen (z.B. "ohne Beleg"): Hintergrund bleibt normal/dunkel, Text bleibt normal lesbar — Betonung nur über einen farbigen linken Rand, wie überall sonst im Design (nie eine flächig eingefärbte Zeile/Karte). */ /* Bootstrap malt die Zeilenfarbe nicht nur über background-color, sondern zusätzlich über einen 9999px-Inset-box-shadow (--bs-table-accent-bg-Kette) — in Safari gewann diese Kette trotz --bs-table-bg:transparent weiter sichtbar. Deshalb hier direkt auf den Zellen beides hart deaktivieren/setzen. */ .table-success>*,.table-warning>*,.table-danger>*{ background-color:transparent !important; box-shadow:none !important; color:var(--text) !important; } .table-success>*:first-child{box-shadow:inset 3px 0 0 var(--ok-fg) !important} .table-warning>*:first-child{box-shadow:inset 3px 0 0 var(--due-fg) !important} .table-danger>*:first-child{box-shadow:inset 3px 0 0 var(--overdue-fg) !important} /* ═══ List-Group ════════════════════════════════════════════════════════ */ .list-group-item{ background:var(--surface);color:var(--text);border-color:var(--line); } .list-group-item.active{background:var(--accent-soft);color:var(--accent);border-color:var(--line)} /* ═══ Formulare ═════════════════════════════════════════════════════════ */ .form-control,.form-select{ border-radius:var(--r-input);border-color:var(--line);font-size:var(--fs-body); color:var(--text);background:var(--surface); } .form-control::placeholder{color:var(--faint)} .form-control:disabled,.form-select:disabled{background:var(--surface2);color:var(--faint)} .form-check-input{background:var(--surface);border-color:var(--line)} .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)} .form-control:focus,.form-select:focus{ border-color:var(--accent);box-shadow:0 0 0 .15rem var(--accent-soft); } .form-label{color:var(--muted);font-size:var(--fs-meta)} /* ═══ Sonstiges ═════════════════════════════════════════════════════════ */ .progress{background:var(--surface2);border-radius:var(--r-tag)} .progress-bar.bg-primary{background-color:var(--accent) !important} .dropdown-menu{ background:var(--surface);border-color:var(--line);border-radius:var(--r-card); box-shadow:var(--shadow-raised); } .dropdown-item{color:var(--text)} .dropdown-item:hover,.dropdown-item:focus{background:var(--surface2);color:var(--text)} details summary{color:var(--muted)} footer.text-muted{color:var(--faint) !important;border-top:1px solid var(--line);margin-top:2rem} /* Kontrast des Hamburger-Icons zum jeweiligen Topbar-Hintergrund */ .eno-topbar .navbar-toggler-icon{ --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231f2430' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-bs-theme=dark] .eno-topbar .navbar-toggler-icon{ --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ece9f4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ═══ Theme-Toggle ══════════════════════════════════════════════════════ Eno "Toggle"-Komponente: 36×20 Pill, Punkt wandert, keine Icons. */ .eno-theme-toggle{ display:inline-flex;align-items:center;gap:var(--gap-sm); background:transparent;border:0;cursor:pointer;padding:0; font-size:var(--fs-meta);color:var(--muted);font-family:inherit; } .eno-theme-toggle:hover{color:var(--text)} .eno-theme-toggle .switch{ width:36px;height:20px;border-radius:var(--r-chip);border:1px solid var(--line); background:var(--surface2);padding:2px;display:flex;align-items:center; transition:background .14s linear,border-color .14s linear;flex:0 0 auto; } .eno-theme-toggle .knob{ width:14px;height:14px;border-radius:50%;background:var(--faint); transition:transform .14s linear,background .14s linear; } [data-bs-theme=dark] .eno-theme-toggle .switch{background:var(--accent);border-color:transparent} [data-bs-theme=dark] .eno-theme-toggle .knob{background:#fff;transform:translateX(16px)}