/* ======================================= */ /* BYTE-WERK – OPTIONAL MODERN ADD-ON CSS */ /* Ergänzend zum bestehenden CSS verwenden */ /* ======================================= */ /* ---------- Design Tokens (CSS-Variablen) ---------- */ :root { --bw-bg: #ffffff; --bw-surface: #f7f8fa; --bw-text: #1f2937; --bw-muted: #6b7280; --bw-border: #e5e7eb; --bw-primary: #3198cc; /* 334083 entspricht deiner CI */ --bw-primary-contrast: #ffffff; --bw-accent: #ff1515; /* akzent/hover */ --bw-success: #16a34a; --bw-danger: #ef4444; --bw-warning: #f59e0b; --bw-radius: 8px; --bw-radius-lg: 12px; --bw-shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --bw-shadow-2: 0 6px 16px rgba(0,0,0,.08); --bw-focus: 0 0 0 3px rgba(51,64,131,.25); } /* Opt-in Dark-Theme via .theme-dark am oder */ .theme-dark { --bw-bg: #0b1020; --bw-surface: #12172a; --bw-text: #e5e7eb; --bw-muted: #a5adbd; --bw-border: #27314c; --bw-primary: #5b6bd6; --bw-primary-contrast: #0b1020; --bw-accent: #ff5c5c; --bw-success: #22c55e; --bw-danger: #ef4444; --bw-warning: #fbbf24; } /* System-Dark-Mode automatisch berücksichtigen */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bw-bg: #0b1020; --bw-surface: #12172a; --bw-text: #e5e7eb; --bw-muted: #a5adbd; --bw-border: #27314c; --bw-primary: #5b6bd6; --bw-primary-contrast: #0b1020; --bw-accent: #ff5c5c; } } /* ---------- Grundlegende Politur ---------- */ html, body { background-color: var(--bw-bg); color: var(--bw-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { transition: color .15s ease, opacity .15s ease, text-decoration-color .15s ease; text-decoration-thickness: .08em; text-underline-offset: .2em; } .container a { color: var(--bw-primary); } .container a:hover { color: var(--bw-accent); text-decoration: underline; } /* ---------- Fokus & A11y ---------- */ .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } :focus-visible { outline: none; box-shadow: var(--bw-focus); border-radius: 4px; } /* ---------- Header / Sub-Header ---------- */ .header { backdrop-filter: saturate(120%) blur(6px); -webkit-backdrop-filter: saturate(120%) blur(6px); border-bottom: 1px solid var(--bw-border); background-color: rgba(17, 24, 39, .35); /* dezente Glass-Optik */ } .header .navbar-light .navbar-nav .nav-link { padding-top: 14px; padding-bottom: 14px; font-weight: 600; letter-spacing: .2px; } /* Sub-Header Bild: leichte Abdunklung für bessere Lesbarkeit */ #sub-header { position: relative; background-color: var(--bw-surface); border-bottom: 1px solid var(--bw-border); } #sub-header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0)); pointer-events: none; } /* ---------- Navbar / Dropdowns ---------- */ .navbar-nav.mr-auto { background: transparent; width: auto; } /* .navbar-light .navbar-nav .nav-link { color: var(--bw-primary-contrast) !important; } */ .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: #fff !important; text-decoration: none; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,0)); } .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-item.active .nav-link { box-shadow: inset 0 -2px 0 var(--bw-accent); } .navbar-light .dropdown-menu { border: 1px solid var(--bw-border); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow-2); overflow: hidden; } .navbar-light .dropdown-menu .nav-link { padding: .6rem .9rem; color: var(--bw-text) !important; } .navbar-light .dropdown-menu .nav-link:hover { background-color: var(--bw-surface); } .navbar-light .navbar-nav .dropdown-menu .nav-link.active{ color: #ff0000 !important; } /* ---------- Buttons ---------- */ .btn, .btn-primary, .button-style-default { border-radius: var(--bw-radius); transition: transform .04s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; will-change: transform; } .btn, .btn-primary { background-color: var(--bw-primary); border-color: var(--bw-primary); color: var(--bw-primary-contrast); } .btn:hover, .btn:focus, .btn:active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--bw-accent); border-color: var(--bw-accent); color: #fff; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-danger { background-color: var(--bw-danger); border-color: var(--bw-danger); } .btn-danger:hover, .btn-danger:focus { filter: brightness(1.05); } .btn-xs { border-radius: 6px; padding: 2px 8px; } /* ---------- Form Controls ---------- */ .form-control { /*border-radius: var(--bw-radius);*/ border: 1px solid var(--bw-border); background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } /* @media (prefers-color-scheme: dark) { .form-control { background: #0f172a; color: var(--bw-text); } } */ .form-control:focus { border-color: var(--bw-primary); box-shadow: var(--bw-focus); } .form-control:disabled{ color: #000; } /* ---------- Listen/Zeilen (z. B. Admin-Liste) ---------- */ .row-border-bottom { border-bottom-color: var(--bw-border); font-size: 0.95rem; } .user-row { transition: background-color .12s ease, box-shadow .12s ease, transform .04s ease; border-radius: var(--bw-radius); padding-top: 6px; padding-bottom: 6px; } .user-row:hover { background-color: var(--bw-surface); box-shadow: var(--bw-shadow-1); } .user-row .btn-xs + .btn-xs { margin-left: 4px; } /* Kopfzeile der Liste etwas dezenter & sticky bei Bedarf */ .page-header { border-bottom: 1px solid var(--bw-border); margin-top: 32px; } .page-header .lead { color: var(--bw-muted); } /* Collapsible Panel smoother */ .panel { border-radius: var(--bw-radius); border: 1px solid var(--bw-border); box-shadow: var(--bw-shadow-1); } /* ---------- Footer ---------- */ .footer { background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,1)); border-top: 1px solid var(--bw-border); } .footer a { color: #fff; opacity: .9; } .footer a:hover { opacity: 1; text-decoration: underline; } /* ---------- Kleinzeug / Utilities ---------- */ .elev-1 { box-shadow: var(--bw-shadow-1) !important; } .elev-2 { box-shadow: var(--bw-shadow-2) !important; } .rounded { border-radius: var(--bw-radius) !important; } .rounded-lg{ border-radius: var(--bw-radius-lg) !important; } .border { border: 1px solid var(--bw-border) !important; } .surface { background: var(--bw-surface) !important; } .text-muted-ux { color: var(--bw-muted) !important; } .badge-dot { position: relative; } .badge-dot::after { content: ""; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px; border-radius: 999px; background: var(--bw-accent); box-shadow: 0 0 0 2px var(--bw-bg); } /* ---------- Mobile Tuning ---------- */ @media (max-width: 897px) { .navbar-light .navbar-nav .nav-link { padding: 12px 14px; } .navbar-nav.mr-auto { background: rgba(17,24,39,.95); border: 1px solid var(--bw-border); border-radius: var(--bw-radius); padding: 6px; box-shadow: var(--bw-shadow-2); } .user-row { padding: 10px 6px; } } /* ---------- Optional: Skip-Link (falls hinzugefügt) ---------- */ .skip-link { position: absolute; left: 8px; top: 8px; background: var(--bw-primary); color: var(--bw-primary-contrast); padding: 6px 10px; border-radius: 6px; transform: translateY(-150%); transition: transform .15s ease; z-index: 10000; } .skip-link:focus { transform: translateY(0); } /* ---------- Icon-Feinschliff ---------- */ .glyphicon { filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); } .glyph-weiss .glyphicon, .userdetails-container fieldset.glyph-white-block .glyphicon { color: #fff; /* beibehalten, aber mit leichtem Schatten */ } /* ---------- Farb-Helfer neu interpretieren (dezenter) ---------- */ .highlight { background-color: var(--bw-primary); color: #fff; } .font-red { color: var(--bw-danger); } .border-red { border-color: var(--bw-danger) !important; background: transparent; } /* ---------- Dezentere HRs ---------- */ hr { border-top-color: var(--bw-border); } /* ---------- Jquery UI Tuning, ohne Funktion zu brechen ---------- */ .ui-widget, .ui-dialog, .ui-widget-content { border-radius: var(--bw-radius); } .ui-widget-header, .ui-button { background: var(--bw-primary) !important; } .ui-widget-overlay { backdrop-filter: blur(2px); } .systemnachrichten{ background: var(--bw-bg) !important; } .form-signin{ color: #000; } #importlog-div pre{ color:#fff; }