/* ============================================================ HomeCenter Design-Tokens & Theme (HCUI) ------------------------------------------------------------ Systemweiter Hell-/Dunkel-Modus über data-bs-theme am . Design "Dark Prime": Header, Hauptmenü, Glocken-Panel und Tab-Bar bleiben in beiden Modi dunkel (Chrome-Tokens), nur der Inhaltsbereich wechselt (Flächen-Tokens). Regel für alle Templates: KEINE hartcodierten Farben mehr – immer var(--hc-…) verwenden. ============================================================ */ :root, [data-bs-theme="light"] { /* Inhaltsflächen */ --hc-bg: #f4f5f7; /* Seitenhintergrund */ --hc-card: #ffffff; /* Karten */ --hc-card-2: #f6f7f9; /* abgesetzte Flächen in Karten (Listen, Code, Zitate) */ --hc-ink: #212529; /* Text */ --hc-muted: #6c757d; /* Sekundärtext */ --hc-line: #e6e8eb; /* Trennlinien / Rahmen */ --hc-hover: rgba(0, 0, 0, .05); /* Hover-Fläche auf hellem Grund */ --hc-shadow: 0 4px 20px rgba(0, 0, 0, .08); --hc-shadow-lg: 0 10px 34px rgba(0, 0, 0, .14); /* Akzent: HomeCenter-Rot */ --hc-accent: #dc3545; --hc-accent-hover: #bb2d3b; --hc-accent-ink: #c22232; /* Rot als Textfarbe (Links, aktive Einträge) */ --hc-accent-soft: rgba(220, 53, 69, .10); /* Social-/Chat-/Mail-Welt: Lila */ --hc-social: #6f42c1; --hc-social-hover: #5a32a3; --hc-social-ink: #6f42c1; --hc-social-soft: rgba(111, 66, 193, .10); } [data-bs-theme="dark"] { --hc-bg: #131418; --hc-card: #1d2025; --hc-card-2: #24272d; --hc-ink: #e9eaec; --hc-muted: #9aa0a6; --hc-line: #2b2e33; --hc-hover: rgba(255, 255, 255, .08); --hc-shadow: 0 4px 20px rgba(0, 0, 0, .35); --hc-shadow-lg: 0 10px 34px rgba(0, 0, 0, .5); --hc-accent: #dc3545; --hc-accent-hover: #e35d6a; --hc-accent-ink: #f1737f; --hc-accent-soft: rgba(227, 93, 106, .16); --hc-social: #6f42c1; --hc-social-hover: #8250df; --hc-social-ink: #a98eda; --hc-social-soft: rgba(139, 105, 205, .18); } /* Chrome (Header/Menü/Glocke/Tab-Bar): themenunabhängig dunkel */ :root { --hc-chrome: #16181c; /* Header, Tab-Bar */ --hc-chrome-2: #1c1f24; /* Menü, Panels */ --hc-chrome-3: #26292f; /* Flächen im Chrome (Icons, Chips) */ --hc-chrome-ink: #f1f2f4; --hc-chrome-mut: #8d939a; --hc-chrome-line: #2b2e33; --hc-chrome-hover: rgba(255, 255, 255, .10); --hc-chrome-active: rgba(255, 255, 255, .14); } /* Bootstrap-Semantik auf die HC-Tokens mappen, damit bg-body-secondary, Formularfelder, Modals usw. automatisch zur Token-Palette passen. */ [data-bs-theme="light"], :root { --bs-body-color: var(--hc-ink); --bs-secondary-bg: var(--hc-card-2); --bs-tertiary-bg: var(--hc-bg); --bs-border-color: var(--hc-line); /* Textlinks: HomeCenter-Rot statt Bootstrap-Blau */ --bs-link-color: var(--hc-accent-ink); --bs-link-hover-color: var(--hc-accent-hover); --bs-link-color-rgb: 194, 34, 50; --bs-link-hover-color-rgb: 187, 45, 59; } [data-bs-theme="dark"] { --bs-body-color: var(--hc-ink); --bs-body-bg: var(--hc-card); --bs-secondary-bg: var(--hc-card-2); --bs-tertiary-bg: var(--hc-bg); --bs-border-color: var(--hc-line); --bs-link-color: var(--hc-accent-ink); --bs-link-hover-color: var(--hc-accent-hover); --bs-link-color-rgb: 241, 115, 127; --bs-link-hover-color-rgb: 227, 93, 106; } /* Verstreute bg-white/bg-light-Utilities dunkeltauglich machen, ohne jedes Template anzufassen. */ [data-bs-theme="dark"] .bg-white { background-color: var(--hc-card) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--hc-card-2) !important; } /* ============================================================ Basis ============================================================ */ body { background: var(--hc-bg); color: var(--hc-ink); } main { background: var(--hc-bg); min-height: 100vh; } /* ============================================================ Header (Design B: immer dunkel, rote Signaturlinie) ============================================================ */ .hc-header { background: var(--hc-chrome); border-top: 3px solid var(--hc-accent); border-bottom: 1px solid var(--hc-chrome-line); } .hc-header-inner { display: flex; align-items: center; gap: .5rem; max-width: 1400px; margin: 0 auto; padding: .55rem 1rem; min-height: 56px; } .hc-header-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: 0; border-radius: 10px; background: transparent; color: var(--hc-chrome-ink); font-size: 1.3rem; cursor: pointer; text-decoration: none; transition: background-color .2s ease; } .hc-header-btn:hover, .hc-header-btn:focus-visible { background: var(--hc-chrome-hover); color: #fff; } .hc-header-logo { display: flex; align-items: center; margin-left: .25rem; margin-right: auto; } .hc-header-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--hc-chrome-3); flex-shrink: 0; cursor: pointer; position: relative; display: block; } .hc-header-avatar img { width: 100%; height: 100%; object-fit: cover; } .hc-avatar-wrap { position: relative; flex-shrink: 0; } .hc-avatar-wrap .notif-dot { position: absolute; top: 0; right: 0; width: 12px; height: 12px; border: 2px solid var(--hc-chrome); transform: translate(25%, -25%); } /* Profil-Dropdown am Avatar: Konto-Aktionen im Chrome-Stil (dunkel wie Glocken-Panel und Hauptmenü) */ .hc-profile-menu { --bs-dropdown-bg: var(--hc-chrome-2); --bs-dropdown-color: var(--hc-chrome-ink); --bs-dropdown-link-color: var(--hc-chrome-ink); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: var(--hc-chrome-hover); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--hc-chrome-active); --bs-dropdown-border-color: var(--hc-chrome-line); --bs-dropdown-divider-bg: var(--hc-chrome-line); min-width: 235px; border-radius: 14px; padding: .45rem; margin-top: .65rem; box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45) !important; } .hc-profile-menu .dropdown-item { display: flex; align-items: center; gap: 11px; border-radius: 8px; padding: .5rem .65rem; font-size: .92rem; } .hc-profile-menu .dropdown-item i { width: 1.25rem; text-align: center; font-size: 1.05rem; flex-shrink: 0; } .hc-pm-head { padding: .3rem .65rem .4rem; } .hc-pm-role { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 9px; background: var(--hc-chrome-3); color: var(--hc-chrome-mut); font-size: .7rem; font-weight: 600; } /* Abmelden: rote Signalfarbe (Chrome ist immer dunkel → helles Rot) */ .hc-pm-logout { color: #f1737f; } .hc-pm-logout:hover, .hc-pm-logout:focus { color: #ff9aa4; } /* ============================================================ Hauptmenü (Offcanvas): immer dunkel ============================================================ */ .hc-menu.offcanvas { background: var(--hc-chrome-2); color: var(--hc-chrome-ink); width: 340px; max-width: 85%; } .hc-menu .offcanvas-header { border-bottom: 1px solid var(--hc-chrome-line); } .hc-menu-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--hc-chrome-mut); padding: 12px 10px 4px; } .hc-menu-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--hc-chrome-ink); text-decoration: none; font-size: .95rem; transition: background-color .2s ease; } .hc-menu-link i { font-size: 1.15rem; width: 1.3rem; text-align: center; flex-shrink: 0; } .hc-menu-link:hover { background: var(--hc-chrome-hover); color: #fff; } .hc-menu-link.active { background: var(--hc-chrome-active); color: #fff; box-shadow: inset 3px 0 0 var(--hc-accent); } /* Icon-Button in der Menü-Kopfzeile (z.B. "Über HomeCenter") */ .hc-icon-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--hc-chrome-mut); text-decoration: none; font-size: 1rem; } .hc-icon-btn:hover { background: var(--hc-chrome-hover); color: #fff; } .hc-menu-foot { border-top: 1px solid var(--hc-chrome-line); } /* Theme-Schalter (Hell / System / Dunkel) im Menü-Fußbereich */ .hc-theme-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .07); } .hc-theme-seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--hc-chrome-mut); font-size: .78rem; font-weight: 600; padding: 6px 2px; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .hc-theme-seg button:hover { color: var(--hc-chrome-ink); } .hc-theme-seg button.active { background: var(--hc-chrome-3); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } /* ============================================================ Mobile Bottom-Tab-Bar: immer dunkel ============================================================ */ .hc-tab-bar { background: var(--hc-chrome); border-top: 1px solid var(--hc-chrome-line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); } .hc-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--hc-chrome-mut); text-decoration: none; font-size: .7rem; min-width: 0; } .hc-tab:hover, .hc-tab:focus { color: #fff; } .hc-tab-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 26px; border-radius: 13px; } .hc-tab-icon i { font-size: 1.15rem; line-height: 1; } .hc-tab.active { color: #fff; } .hc-tab.active .hc-tab-icon { background: var(--hc-chrome-3); } .hc-tab-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: var(--hc-chrome-3); } /* ============================================================ Gemeinsame Inhalts-Komponenten ============================================================ */ .card { background: var(--hc-card); color: var(--hc-ink); border: 1px solid var(--hc-line); border-radius: 16px; box-shadow: var(--hc-shadow); } /* Einheitlicher Seitentitel */ .hc-page-title { font-size: 1.6rem; font-weight: 600; color: var(--hc-ink); margin-bottom: 1rem; } /* Dev-Modus-Hinweis */ .hc-dev-banner { background: var(--hc-card); color: var(--hc-ink); border: 1px solid var(--hc-line); border-left: 4px solid #fd7e14; border-radius: 10px; padding: .5rem 1rem; } /* Notification-Dot (pulsierend) */ .notif-dot { background: var(--hc-accent); border-radius: 50%; animation: notif-pulse 2s ease-in-out infinite; } @keyframes notif-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } /* Icon-Hover (Header-Icons) */ .icon-hover { display: inline-block; transition: transform .25s cubic-bezier(.25, 1, .5, 1), color .25s ease; } .icon-hover:hover { transform: scale(1.2); } /* "Über HomeCenter"-Box */ .hc-about { background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 16px; overflow: hidden; color: var(--hc-ink); box-shadow: var(--hc-shadow-lg); } .hc-about-head { background: var(--hc-chrome); border-top: 3px solid var(--hc-accent); padding: 26px 24px 22px; text-align: center; } .hc-about-ver { margin-top: 10px; font-size: .8rem; color: var(--hc-chrome-mut); } .hc-about-rows { padding: 14px 24px 4px; } .hc-about-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hc-line); font-size: .85rem; } .hc-about-row:last-child { border-bottom: none; } .hc-about-row .k { color: var(--hc-muted); } .hc-about-foot { padding: 18px 24px 22px; text-align: center; } .hc-about-copy { color: var(--hc-muted); font-size: .75rem; margin-top: 8px; } /* Theme-abhängige Sichtbarkeit (z.B. helles/dunkles Logo) */ .hc-dark-only { display: none !important; } [data-bs-theme="dark"] .hc-dark-only { display: inline-block !important; } [data-bs-theme="dark"] .hc-light-only { display: none !important; } /* Kontrast-Button: heute überall btn-dark – im Dunkel-Modus wäre er unsichtbar, daher dort automatisch als heller Button rendern. */ [data-bs-theme="dark"] .btn-dark { --bs-btn-bg: #f1f2f4; --bs-btn-border-color: #f1f2f4; --bs-btn-color: #16181c; --bs-btn-hover-bg: #d9dbde; --bs-btn-hover-border-color: #d9dbde; --bs-btn-hover-color: #16181c; --bs-btn-active-bg: #c9cbce; --bs-btn-active-border-color: #c9cbce; --bs-btn-active-color: #16181c; --bs-btn-disabled-bg: #3a3d42; --bs-btn-disabled-border-color: #3a3d42; --bs-btn-disabled-color: #8d939a; } [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #e9eaec; --bs-btn-border-color: #6c757d; --bs-btn-hover-bg: #f1f2f4; --bs-btn-hover-border-color: #f1f2f4; --bs-btn-hover-color: #16181c; --bs-btn-active-bg: #f1f2f4; --bs-btn-active-border-color: #f1f2f4; --bs-btn-active-color: #16181c; } @media (prefers-reduced-motion: reduce) { .notif-dot, .icon-hover { animation: none; transition: none; } }