/* ========================================================================== carbcam-theme.css - Scoped Override fuer die oeffentlichen CarbCam-Seiten WICHTIG: Diese Datei wird AUSSCHLIESSLICH von templates/carbcam_layout.tpl geladen (per nach theme.css/theme-switcher.css). Sie faerbt NUR die CarbCam-Seiten in die App-Farbpalette um, ohne den Rest der ns.10be.de- Plattform zu beeinflussen. Scoping-Mechanik: - Light-Mode : jede Regel liegt unter "body.cc-app" (cc-app-Klasse wird nur im CarbCam-Layout auf gesetzt). - Dark-Mode : der Theme-Switcher setzt data-theme="dark" auf (document.documentElement). Deshalb lautet der Dark-Scope '[data-theme="dark"] body.cc-app' - so greifen die Overrides nur, wenn BEIDES zutrifft: CarbCam-Seite UND Dark-Mode. Die !important-Deklarationen sind noetig, um die Bootstrap-Utilities aus theme.css (die wir nicht editieren duerfen) zuverlaessig zu uebersteuern. App-Palette: BrandBlue #0E84B0 (hover #2F89BA / dark #0C6F95) AccentGreen #22A862 (hover #1C8F53) AccentCyan #00BCD4 (text #0891B2) BrandInk #2B2A29 Light-bg #F2F2F7 Body-Ink #131A24 ========================================================================== */ /* ---------------------------------------------------------------- LIGHT --- */ /* Body-Text-Ink */ body.cc-app { color: #131A24; } /* Links / Primary */ body.cc-app a { color: #0E84B0; } body.cc-app a:hover { color: #2F89BA; } body.cc-app .text-primary { color: #0E84B0 !important; } body.cc-app .bg-primary { background-color: #0E84B0 !important; } body.cc-app .btn-primary { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #fff !important; } body.cc-app .btn-primary:hover, body.cc-app .btn-primary:focus { background-color: #0C6F95 !important; border-color: #0C6F95 !important; color: #fff !important; } body.cc-app .btn-outline-primary { color: #0E84B0 !important; border-color: #0E84B0 !important; } body.cc-app .btn-outline-primary:hover, body.cc-app .btn-outline-primary:focus { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #fff !important; } /* Success -> AccentGreen */ body.cc-app .text-success { color: #22A862 !important; } body.cc-app .bg-success { background-color: #22A862 !important; } body.cc-app .border-success { border-color: #22A862 !important; } body.cc-app .btn-success { background-color: #22A862 !important; border-color: #22A862 !important; color: #fff !important; } body.cc-app .btn-success:hover, body.cc-app .btn-success:focus { background-color: #1C8F53 !important; border-color: #1C8F53 !important; color: #fff !important; } body.cc-app .btn-outline-success { color: #22A862 !important; border-color: #22A862 !important; } body.cc-app .btn-outline-success:hover, body.cc-app .btn-outline-success:focus { background-color: #22A862 !important; border-color: #22A862 !important; color: #fff !important; } /* Info -> AccentCyan */ body.cc-app .text-info { color: #0891B2 !important; } body.cc-app .bg-info { background-color: #00BCD4 !important; } body.cc-app .btn-info { background-color: #00BCD4 !important; border-color: #00BCD4 !important; color: #fff !important; } body.cc-app .btn-info:hover, body.cc-app .btn-info:focus { background-color: #0891B2 !important; border-color: #0891B2 !important; color: #fff !important; } /* Secondary -> BrandInk */ body.cc-app .bg-secondary { background-color: #2B2A29 !important; } body.cc-app .btn-secondary { background-color: #2B2A29 !important; border-color: #2B2A29 !important; color: #fff !important; } body.cc-app .btn-secondary:hover, body.cc-app .btn-secondary:focus { background-color: #131A24 !important; border-color: #131A24 !important; color: #fff !important; } /* Light-Surface */ body.cc-app .bg-light { background-color: #F2F2F7 !important; } /* ------------------------------------------------------- ABSCHNITTS-HEADER */ /* Vorher hatten die Abschnitts-Kopfzeilen einen bunten Mix aus Bootstrap- Utilities (bg-warning amber, bg-danger rot, bg-secondary grau, bg-dark schwarz, bg-success gruen) - das wirkte chaotisch. Hier werden ALLE .card-header auf den CarbCam-Seiten zu einer einheitlichen BrandBlue-Leiste mit weisser Schrift vereinheitlicht. Hohe Spezifitaet + !important sind noetig, um die Bootstrap-.bg-*-Utilities zu uebersteuern. */ body.cc-app .card-header { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #ffffff !important; } /* Saemtliche Texte/Icons/Links innerhalb der Kopfzeile weiss - schlaegt .text-dark / .text-white (Bootstrap !important) zuverlaessig. */ body.cc-app .card-header h1, body.cc-app .card-header h2, body.cc-app .card-header h3, body.cc-app .card-header h4, body.cc-app .card-header h5, body.cc-app .card-header h6, body.cc-app .card-header a, body.cc-app .card-header i, body.cc-app .card-header .text-dark, body.cc-app .card-header .text-white { color: #ffffff !important; } /* ------------------------------------------- EIGENSTAENDIGE FARB-HEADINGS */ /* Einzelne Abschnitts-Ueberschriften, die NICHT in einer .card-header liegen, aber dennoch eingefaerbt sind (z.B. die gruenen FAQ-Titel in carbcam_pricing.tpl oder die roten Troubleshooting-Titel in carbcam_help.tpl). Nur die Heading-Tags selbst werden auf BrandBlue gezogen - das generische .text-success / .text-danger fuer Flaechentext, Haken und Icons bleibt unveraendert. */ body.cc-app h1.text-success, body.cc-app h2.text-success, body.cc-app h3.text-success, body.cc-app h4.text-success, body.cc-app h5.text-success, body.cc-app h6.text-success, body.cc-app h1.text-danger, body.cc-app h2.text-danger, body.cc-app h3.text-danger, body.cc-app h4.text-danger, body.cc-app h5.text-danger, body.cc-app h6.text-danger, body.cc-app h1.text-info, body.cc-app h2.text-info, body.cc-app h3.text-info, body.cc-app h4.text-info, body.cc-app h5.text-info, body.cc-app h6.text-info, body.cc-app h1.text-warning, body.cc-app h2.text-warning, body.cc-app h3.text-warning, body.cc-app h4.text-warning, body.cc-app h5.text-warning, body.cc-app h6.text-warning { color: #0E84B0 !important; } /* ----------------------------------------------------------------- DARK --- */ /* data-theme=dark sitzt auf , cc-app auf -> kombinierter Scope. */ [data-theme="dark"] body.cc-app { background-color: #0B0F1A !important; color: #F1F4F8 !important; } /* Flaechen / Cards / Surfaces */ [data-theme="dark"] body.cc-app .card, [data-theme="dark"] body.cc-app .card-body, [data-theme="dark"] body.cc-app .card-header, [data-theme="dark"] body.cc-app .hero-section, [data-theme="dark"] body.cc-app section { background-color: #131923 !important; color: #F1F4F8 !important; } [data-theme="dark"] body.cc-app .bg-light { background-color: #131923 !important; } [data-theme="dark"] body.cc-app .bg-white { background-color: #131923 !important; } /* Borders */ [data-theme="dark"] body.cc-app .card, [data-theme="dark"] body.cc-app .border-top, [data-theme="dark"] body.cc-app .border-bottom, [data-theme="dark"] body.cc-app hr { border-color: #1F2733 !important; } /* Links -> AccentCyan */ [data-theme="dark"] body.cc-app a { color: #00BCD4 !important; } [data-theme="dark"] body.cc-app a:hover { color: #2F89BA !important; } [data-theme="dark"] body.cc-app .text-info { color: #00BCD4 !important; } /* Success -> helleres Gruen fuer Kontrast auf dunklem Grund */ [data-theme="dark"] body.cc-app .text-success { color: #2BCE7B !important; } [data-theme="dark"] body.cc-app .bg-success { background-color: #2BCE7B !important; } [data-theme="dark"] body.cc-app .border-success { border-color: #2BCE7B !important; } [data-theme="dark"] body.cc-app .btn-success { background-color: #2BCE7B !important; border-color: #2BCE7B !important; color: #0B0F1A !important; } /* Info -> AccentCyan */ [data-theme="dark"] body.cc-app .bg-info { background-color: #00BCD4 !important; } [data-theme="dark"] body.cc-app .btn-info { background-color: #00BCD4 !important; border-color: #00BCD4 !important; color: #0B0F1A !important; } /* Primary -> BrandBlue */ [data-theme="dark"] body.cc-app .text-primary { color: #0E84B0 !important; } [data-theme="dark"] body.cc-app .bg-primary { background-color: #0E84B0 !important; } [data-theme="dark"] body.cc-app .btn-primary { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #fff !important; } [data-theme="dark"] body.cc-app .btn-primary:hover, [data-theme="dark"] body.cc-app .btn-primary:focus { background-color: #0C6F95 !important; border-color: #0C6F95 !important; color: #fff !important; } /* ----------------------------------------- ABSCHNITTS-HEADER (Dark-Mode) -- */ /* Auch im Dark-Mode bleibt die Header-Leiste BrandBlue mit weisser Schrift - sie ueberschreibt den generischen dunklen .card-header-Flaechen-Override oben (gleicher Scope, hoehere Spezifitaet durch die Utility-Selektoren). */ [data-theme="dark"] body.cc-app .card-header { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #ffffff !important; } [data-theme="dark"] body.cc-app .card-header h1, [data-theme="dark"] body.cc-app .card-header h2, [data-theme="dark"] body.cc-app .card-header h3, [data-theme="dark"] body.cc-app .card-header h4, [data-theme="dark"] body.cc-app .card-header h5, [data-theme="dark"] body.cc-app .card-header h6, [data-theme="dark"] body.cc-app .card-header a, [data-theme="dark"] body.cc-app .card-header i, [data-theme="dark"] body.cc-app .card-header .text-dark, [data-theme="dark"] body.cc-app .card-header .text-white { color: #ffffff !important; } /* ----------------------------------------------------------- MODAL-HEADER */ /* Das Karten-Popup auf carbcam-map.tpl nutzt 'modal-header bg-success' (gruen) mit weisser Modal-Title-Schrift. Zur Konsistenz mit den .card-header-Leisten wird auch der Modal-Header auf BrandBlue mit weisser Schrift gezogen. Scope bleibt body.cc-app: Bootstrap kann das Modal zwar per JS ans umhaengen, das Modal liegt aber weiterhin innerhalb des cc-app-, daher greift 'body.cc-app .modal-header' zuverlaessig. */ body.cc-app .modal-header { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #ffffff !important; } body.cc-app .modal-header .modal-title, body.cc-app .modal-header h1, body.cc-app .modal-header h2, body.cc-app .modal-header h3, body.cc-app .modal-header h4, body.cc-app .modal-header h5, body.cc-app .modal-header .text-white, body.cc-app .modal-header a, body.cc-app .modal-header button.close, body.cc-app .modal-header .close { color: #ffffff !important; } /* Auch im Dark-Mode bleibt der Modal-Header BrandBlue. */ [data-theme="dark"] body.cc-app .modal-header { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #ffffff !important; } /* ------------------------------------------------------------ BTN-DARK --- */ /* Der App-Store-Button im Footer nutzt btn-dark (grau). body.cc-app a faerbte dessen Schrift blau auf grau = unleserlich. Wie im Menue (btn-primary): BrandBlue-Hintergrund mit weisser Schrift, in Light- und Dark-Mode. */ body.cc-app .btn-dark { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #ffffff !important; } body.cc-app .btn-dark:hover, body.cc-app .btn-dark:focus { background-color: #0C6F95 !important; border-color: #0C6F95 !important; color: #ffffff !important; } [data-theme="dark"] body.cc-app .btn-dark { background-color: #0E84B0 !important; border-color: #0E84B0 !important; color: #ffffff !important; }