/* ===================================================================== VLYX Auftrags-Dashboard – Design-System Portiert aus der t-shirtbox-Auftragsverwaltung ("dezent & seriös"): neutrale Flächen, Akzentfarbe nur als Highlight, flache 1px-Rahmen, hell + dunkel über Bootstraps data-bs-theme (auf ). Die Akzentfarbe (--primary ...) wird pro Instanz aus den Einstellungen (branding_color) im injiziert – siehe brandVars(). ===================================================================== */ /* ---- Design-Tokens ---- */ :root, :root[data-bs-theme="light"] { --primary:#d62839; --primary-dark:#b21f2b; --primary-ink:#ffffff; --primary-weak:#fcebed; --primary-line:#f2c7cc; --ground:#f4f4f6; --surface:#ffffff; --surface-2:#fafafa; --surface-3:#f1f1f4; --border:#e6e5e9; --border-strong:#d9d8dd; --text:#1b1c21; --muted:#6c6e78; --faint:#9a9ca5; --bar:#22232b; --bar-ink:#e9eaee; --bar-muted:#a6a8b2; --radius:8px; --radius-sm:6px; --navbar-height:52px; --shadow-sm:0 1px 2px rgba(20,20,30,.05); --shadow-md:0 4px 14px rgba(20,20,30,.10); --mono: ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace; --bs-body-bg: var(--ground); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-primary-rgb: 214,40,57; --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); --bs-focus-ring-color: rgba(214,40,57,.20); } :root[data-bs-theme="dark"] { --ground:#16171b; --surface:#1e1f26; --surface-2:#23242c; --surface-3:#262832; --border:#2e303a; --border-strong:#3a3c47; --text:#e7e8ec; --muted:#9a9ca6; --faint:#71737d; --bar:#111217; --bar-ink:#e9eaee; --bar-muted:#8a8c96; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 6px 20px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) { --ground:#16171b; --surface:#1e1f26; --surface-2:#23242c; --surface-3:#262832; --border:#2e303a; --border-strong:#3a3c47; --text:#e7e8ec; --muted:#9a9ca6; --faint:#71737d; --bar:#111217; --bar-ink:#e9eaee; --bar-muted:#8a8c96; } } /* ---- Grundlagen ---- */ body { font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background-color: var(--ground); color: var(--text); padding-top: var(--navbar-height); font-size: 0.925rem; } .mono, .num, .onr { font-family: var(--mono); font-variant-numeric: tabular-nums; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); text-decoration: underline; } .card a:hover, a.btn:hover, .list-group-item a:hover, .navbar a:hover { text-decoration: none; } /* ---- Navbar ---- */ .navbar { background-color: var(--bar) !important; border-bottom: 1px solid rgba(0,0,0,.28); min-height: var(--navbar-height); z-index: 1030; } .brand-logo { font-weight: 700; font-size: 1.15rem; color: var(--primary) !important; letter-spacing: -0.02em; } .brand-subtitle { font-size: 0.78rem; color: var(--bar-muted); font-weight: 500; } .navbar .navbar-nav .nav-link { color: var(--bar-muted); transition: color .15s, background-color .15s; font-size: 0.9rem; padding: 0.4rem 0.75rem; border-radius: 6px; } .navbar .navbar-nav .nav-link:hover { color: var(--bar-ink); background: rgba(255,255,255,.05); } .navbar .navbar-nav .nav-link.active { color: var(--bar-ink); box-shadow: inset 0 -2px 0 var(--primary); } .navbar .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .navbar .btn-primary:hover { filter: brightness(.94); } .dropdown-menu-dark { background-color: var(--bar); border-color: rgba(0,0,0,.3); } .dropdown-menu-dark .dropdown-item { color: var(--bar-muted); } .dropdown-menu-dark .dropdown-item:hover { background-color: var(--primary); color: var(--primary-ink); } .main-content { min-height: calc(100vh - var(--navbar-height)); padding-top: 1rem; padding-bottom: 2rem; } /* ---- Karten ---- */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; transition: border-color .15s; } .card-header { background-color: transparent; border-bottom: 1px solid var(--border); padding: 0.7rem 1rem; } .admin-tile { transition: border-color .15s, box-shadow .15s; } .admin-tile:hover { border-color: var(--faint); box-shadow: var(--shadow-sm); } /* KPI-Kacheln */ .kpi-card .kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; } .kpi-card .kpi-label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; } /* ---- Tabellen ---- */ .table { font-size: 0.9rem; --bs-table-bg: transparent; color: var(--text); border-color: var(--border); } .table thead th { background-color: transparent; color: var(--muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); padding: 0.7rem 0.85rem; white-space: nowrap; } .table td { vertical-align: middle; padding: 0.6rem 0.85rem; border-color: var(--border); } .table > :not(caption) > * > * { background-color: transparent; } .table-hover tbody tr:hover td { background-color: var(--surface-2); } /* ---- Buttons ---- */ .btn { border-radius: 7px; font-weight: 600; font-size: 0.875rem; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-ink); } .btn-outline-primary { color: var(--primary); border-color: var(--border-strong); background: var(--surface); } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .btn-outline-secondary { color: var(--muted); border-color: var(--border-strong); background: transparent; } .btn-outline-secondary:hover { background-color: var(--surface-3); border-color: var(--border-strong); color: var(--text); } /* ---- Formulare ---- */ .form-control, .form-select { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); background-color: var(--surface); } .form-control::placeholder { color: var(--faint); } .form-label { font-weight: 550; font-size: 0.82rem; color: var(--muted); } /* ---- Badges / Status-Chips ---- */ .badge { font-weight: 600; font-size: 0.72rem; padding: 0.34em 0.62em; border-radius: 999px; } .tb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; line-height: 1.7; white-space: nowrap; --_c: var(--c,#6c757d); color: color-mix(in srgb, var(--_c) 78%, var(--text)); background: color-mix(in srgb, var(--_c) 15%, var(--surface)); } .tb-chip::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--_c); opacity:.95; flex:0 0 auto; } @supports not (color: color-mix(in srgb, red, blue)) { .tb-chip { background: var(--_c); color:#fff; } .tb-chip::before { background:#fff; } } .alert { border-radius: var(--radius); border: 1px solid var(--border); font-size: 0.9rem; } .list-group-item { background-color: var(--surface); border-color: var(--border); color: var(--text); } /* ---- Kanban-Board ---- */ .board-scroll { overflow-x: auto; padding-bottom: .5rem; } .board-columns { display: flex; gap: .75rem; align-items: flex-start; min-height: 60vh; } .board-column { flex: 0 0 280px; width: 280px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; } .board-column-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; font-size: .85rem; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); background: var(--surface); border-bottom: 1px solid var(--border); } .board-column-body { padding: .5rem; display: flex; flex-direction: column; gap: .5rem; } .board-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .7rem; box-shadow: var(--shadow-sm); transition: box-shadow .12s, border-color .12s; } .board-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .board-card-id { font-family: var(--mono); font-size: .74rem; color: var(--muted); font-weight: 600; } .board-card-title { font-weight: 600; margin: .15rem 0; font-size: .9rem; color: var(--text); } .board-card-meta { font-size: .77rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem; } .board-empty { text-align: center; padding: .5rem 0; } /* Fokus auf EINE Spalte (aktiver Status-/Unterstatus-Filter): Spalte auf volle Breite, Karten als responsives Raster in Reihen. */ .board-columns.board-single { display: block; } .board-columns.board-single .board-column { flex: none; width: 100%; } .board-columns.board-single .board-column-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; align-items: start; } /* Checklisten-Fortschritt auf der Kachel */ .cl-badge { display: inline-flex; align-items: center; gap: 5px; width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: var(--radius-sm); padding: .2rem .5rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: filter .12s, border-color .12s; } .cl-badge:hover:not(:disabled) { border-color: var(--border-strong); } .cl-badge:disabled { cursor: default; opacity: .8; } .cl-badge .cl-open { font-weight: 600; } .cl-badge.cl-done { color: #198754; border-color: color-mix(in srgb,#198754 30%,var(--border)); background: color-mix(in srgb,#198754 8%,var(--surface)); } .cl-badge.cl-warn { color: #b8860b; border-color: color-mix(in srgb,#d0a020 40%,var(--border)); background: color-mix(in srgb,#d0a020 10%,var(--surface)); } @supports not (color: color-mix(in srgb, red, blue)) { .cl-badge.cl-done { color:#198754; } .cl-badge.cl-warn { color:#b8860b; } } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); } .cursor-pointer { cursor: pointer; } /* Dark-Mode: fest kodierte Bootstrap-Utilities angleichen */ [data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; } [data-bs-theme="dark"] .text-dark { color: var(--text) !important; } /* ---- Responsive ---- */ @media (max-width: 576px) { .board-column { flex-basis: 85vw; width: 85vw; } .brand-subtitle { display: none; } .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; } }