/* ============================================================ theme.css – Projekt-Theme / Overrides (projektneutral) Wird NACH app.css geladen. Enthält KEINE festen Farbwerte – Farben, Schrift, Schriftgrößen, Button- & Sidebar-Stil kommen als CSS-Variablen aus den Design-Einstellungen (DB) via im (siehe layout.html.twig + App::getTwig). Hier nur var(--…), Helfer-Klassen, Layout. Klassen-Präfix: brand- (projektneutral). ============================================================ */ :root { /* Design-Tokens der Basis (app.css) auf die Palette ummappen (nur var-Referenzen). */ --lp-primary: var(--primary); --lp-primary-light: var(--primary); /* Hover via Helligkeitsfilter */ --lp-accent: var(--surface); --lp-highlight: var(--accent); --lp-text: var(--ink); --lp-muted: var(--muted); --lp-border: var(--border); --lp-bg: var(--surface); --lp-card: var(--bg); --lp-btn-bg: var(--primary); --lp-btn-text: var(--bg); /* Fallbacks für die per DB injizierten Größen (werden im überschrieben). */ --lp-font-size: 15px; --lp-h1: 1.6rem; --lp-h2: 1.2rem; --lp-h3: 1.0rem; } /* Grundschriftgröße (per DB einstellbar). */ body, body.lp-body { font-size: var(--lp-font-size); } /* Schrift konsequent durchsetzen (Wert kommt aus --lp-font, per DB einstellbar). */ body, body.lp-body, .btn, .form-control, input, button, select, textarea, h1, h2, h3, h4, h5, h6 { font-family: var(--lp-font), Arial, Helvetica, sans-serif !important; } /* Einstellbare Überschriftengrößen (als Klassen, damit Bootstrap-Größen nicht global gestört werden). */ .brand-h1 { font-size: var(--lp-h1); line-height: 1.2; } .brand-h2 { font-size: var(--lp-h2); line-height: 1.25; } .brand-h3 { font-size: var(--lp-h3); line-height: 1.3; } /* ── Bootstrap-Neutralfarben auf die Design-Palette mappen ─────── Damit ALLE Farben aus den Design-Einstellungen kommen – auch text-muted, Rahmen, helle Flächen, Info-/Alert-Boxen und Sekundär-Buttons. */ .text-muted, .text-secondary { color: var(--muted) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; } .bg-light { background-color: var(--surface) !important; } .alert-light { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--ink) !important; } .btn-outline-secondary { color: var(--muted) !important; border-color: var(--border) !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary:not(:disabled):not(.disabled):active { background-color: var(--muted) !important; border-color: var(--muted) !important; color: var(--bg) !important; } /* Rohdaten: Bot-/Crawler-Zeilen dezent (Akzentfarbe, leicht) hervorheben */ .brand-row-bot, .brand-row-bot:hover { background-color: color-mix(in srgb, var(--accent) 9%, transparent) !important; } /* Dunkler Tabellenkopf (Rohdaten) aus der Palette */ .brand-thead { background: var(--ink); } .brand-thead th { color: var(--bg); background: var(--ink); border-color: var(--ink) !important; white-space: nowrap; } .brand-thead .pv-sort { cursor: pointer; user-select: none; } /* Weitere Bootstrap-Reste auf die Palette */ .bg-white { background-color: var(--bg) !important; } .btn-outline-danger { color: var(--accent) !important; border-color: var(--accent) !important; } .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger:not(:disabled):not(.disabled):active { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--bg) !important; } /* MDB-Datatable an die Design-Palette anpassen (statt MDB-Blau/-Grau) */ .datatable { --mdb-datatable-color: var(--ink); --mdb-datatable-border-color: var(--border); --mdb-datatable-muted-color: var(--muted); --mdb-datatable-hover-bg: var(--surface); --mdb-datatable-background-color: var(--bg); --mdb-datatable-active-color: color-mix(in srgb, var(--primary) 8%, transparent); } .datatable .datatable-sort-icon { color: var(--primary); } .datatable thead th { color: var(--ink); } /* ── Marken-Schriftzug ───────────────────────────────────────── */ .brand-brand { font-weight: 700; letter-spacing: .3px; line-height: 1.1; } .brand-brand .brand-dot { color: var(--accent); } /* roter Trennpunkt */ .brand-brand--on-primary { color: var(--bg); } .brand-brand--on-primary .brand-dot { color: var(--accent-light); } /* Roter Akzentstrich unter der Login-Überschrift */ .lp-login-heading, .lp-auth-heading { color: var(--primary); } .brand-accent-bar { display: inline-block; width: 46px; height: 4px; background: var(--accent); border-radius: 2px; margin: 4px 0 18px; } /* Sekundär-/Textlink in Rot beim Hover */ .lp-link-muted:hover, .auth-link:hover { color: var(--accent); } /* ── Login-Redesign: LINKS weiß (Logo), RECHTS echtes Blau ──── */ .lp-login-brand { background: var(--bg) !important; /* links weiß für das Logo */ border-right: 1px solid var(--border); color: var(--ink); } .lp-login-card-wrap { background: var(--primary) !important; /* rechts unser Blau */ } .lp-login-card { background: var(--bg); /* weiße Karte auf Blau */ border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); /* neutraler Schatten */ padding: 36px 32px; } /* Hover des Login-Buttons: gleiches Blau, nur leicht abgedunkelt (kein zweiter Farbwert) */ .lp-login-btn:hover, .lp-login-btn:focus { background: var(--primary); border-color: var(--primary); filter: brightness(0.9); } /* Logo-Grafiken */ .brand-login-logo { width: 100%; max-width: 380px; height: auto; } .brand-login-logo-mobile { width: 100%; max-width: 240px; height: auto; } .brand-header-logo { height: 42px; width: auto; display: block; } /* ── Farb-Utilities ────────────────────────────────────────── Templates dürfen KEINE Farbwerte enthalten. Wo im HTML eine Markenfarbe nötig ist, ausschließlich diese Klassen nutzen. */ .brand-text-primary { color: var(--primary); } .brand-text-accent { color: var(--accent); } .brand-brand--primary { color: var(--primary); } /* Schriftzug blau, Punkt bleibt rot */ .brand-brand-lg { font-size: 1.3rem; } /* Öffentliche Rechtstexte (Impressum/Datenschutz) */ .legal-content { line-height: 1.7; } .legal-content h1, .legal-content h2, .legal-content h3 { color: var(--primary); margin-top: 1.4rem; } .legal-content a { color: var(--primary); } .legal-content a:hover { color: var(--accent); } /* ── Statistik ───────────────────────────────────────────── */ .brand-chart { display: flex; align-items: stretch; gap: 3px; height: 170px; padding-top: 8px; } .brand-chart-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; } .brand-chart-bar { width: 100%; max-width: 28px; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; transition: background .15s; } .brand-chart-col:hover .brand-chart-bar { background: var(--accent); } .brand-chart-label { font-size: .6rem; color: var(--muted); margin-top: 4px; white-space: nowrap; } .brand-barlist { list-style: none; margin: 0; padding: 0; } .brand-barrow { margin-bottom: 10px; } .brand-barrow:last-child { margin-bottom: 0; } .brand-bartop { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; margin-bottom: 3px; } .brand-bartop .brand-barlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-bartrack { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .brand-barfill { height: 100%; background: var(--primary); border-radius: 4px; } .brand-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; } .brand-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--primary); line-height: 1; } .brand-kpi-label { font-size: .8rem; color: var(--muted); margin-top: 4px; } /* ── Avatar / Profilbild ─────────────────────────────────── */ .lp-header-avatar img { width: 100%; height: 100%; object-fit: cover; } .brand-avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.5rem; overflow: hidden; } .brand-avatar img { width: 100%; height: 100%; object-fit: cover; } .brand-avatar-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .brand-avatar-sm--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--bg); font-size: .8rem; font-weight: 700; } .brand-preview-bg { background: var(--surface); } /* Reiter (nav-pills/nav-tabs) auf die Palette statt MDB-/Browser-Standard */ .nav-pills .nav-link { color: var(--primary); background-color: transparent; /* Button-Standardhintergrund entfernen */ border: 1px solid var(--border); } .nav-pills .nav-link:hover { background-color: var(--surface); color: var(--primary); } .nav-pills .nav-link.active { background-color: var(--primary) !important; color: var(--bg) !important; border-color: var(--primary); } .nav-tabs .nav-link { color: var(--muted); background-color: transparent; } .nav-tabs .nav-link.active { color: var(--primary); border-bottom-color: var(--primary); } /* ── Badges (nur Palette-Farben) ─────────────────────────── */ .brand-badge { display: inline-block; padding: .3em .6em; font-size: .72rem; font-weight: 700; line-height: 1; border-radius: .4rem; color: var(--bg); white-space: nowrap; } .brand-badge--primary { background: var(--primary); } .brand-badge--accent { background: var(--accent); } .brand-badge--muted { background: var(--muted); } .brand-badge--surface { background: var(--surface); color: var(--ink); } /* ── Fehler-Log-Konsole ──────────────────────────────────── */ .brand-logbox { background: var(--ink); border-radius: 8px; padding: 12px 14px; max-height: 620px; overflow: auto; } .brand-log-line { font-family: monospace; font-size: .78rem; line-height: 1.55; color: var(--surface); white-space: pre-wrap; word-break: break-word; padding: 2px 8px; border-left: 3px solid transparent; } .brand-log-line.is-err { border-left-color: var(--accent); color: var(--accent-light); } .brand-log-line.is-warn { border-left-color: var(--muted); } /* ── Modals über den fixierten Admin-Header/Sidebar legen ── */ .modal-backdrop { z-index: 99990 !important; } .modal { z-index: 100000 !important; } /* ── Medien-Bibliothek ───────────────────────────────────── */ .brand-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .brand-media-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; } .brand-media-thumb { height: 120px; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; } .brand-media-thumb img { width: 100%; height: 100%; object-fit: cover; } .brand-media-thumb i { font-size: 2.4rem; color: var(--muted); } .brand-media-body { padding: 8px 10px; font-size: .78rem; } .brand-media-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-media-meta { color: var(--muted); font-size: .7rem; } .brand-media-actions { display: flex; gap: 4px; padding: 0 10px 10px; } /* ── Sidebar: hell/dunkel (Design-Einstellung via data-sidebar am ) ── Standard = dunkel (Hintergrund = Primärfarbe, helle Schrift, siehe app.css). Variante „hell": weißer Hintergrund, dunkle Schrift. */ [data-sidebar="light"] .lp-sidebar { background: var(--bg); border-right: 1px solid var(--border); } [data-sidebar="light"] .lp-sidebar-section { color: var(--muted); } [data-sidebar="light"] .lp-sidebar-divider { background: var(--border); } [data-sidebar="light"] .lp-sidebar-link { color: var(--ink); } [data-sidebar="light"] .lp-sidebar-link i { opacity: .7; } [data-sidebar="light"] .lp-sidebar-link:hover { background: var(--surface); color: var(--primary); } [data-sidebar="light"] .lp-sidebar-link:hover i { opacity: 1; } [data-sidebar="light"] .lp-sidebar-link--active { background: var(--surface); color: var(--primary); } [data-sidebar="light"] .lp-sidebar-link--active i { opacity: 1; } [data-sidebar="light"] .lp-sidebar::-webkit-scrollbar-thumb { background: var(--border); }