/* ========================================================= Fischereiverein Theme — Dark Mode Overrides (Bootstrap 5.3.3) Toggle via: This file MUST be loaded together with assets/styles.css (light). Scope: everything visual is under [data-bs-theme="dark"] to avoid bleeding into light mode. ========================================================= */ /* ---------------------------------------------------------------------------- Non-theme structural fixes (apply in both themes) ---------------------------------------------------------------------------- */ /* Dropdown above content (stacking contexts) */ .fv-header, .fv-navbar { position: relative; z-index: 1050; } .dropdown-menu { z-index: 2000; } /* Desktop Navbar Height Fix */ .fv-navbar { padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; } .fv-navbar .navbar-nav .nav-link { padding-top: .35rem; padding-bottom: .35rem; line-height: 1.1; } @media (min-width: 992px) { .fv-navbar .navbar-collapse { min-height: auto; } } /* Mobile menu: open from TOP and cover full screen */ #mobileMenu.offcanvas-top { height: 100vh !important; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } #mobileMenu .offcanvas-body { overflow-y: auto; padding-bottom: 1.25rem; } #mobileMenu .offcanvas-header { position: sticky; top: 0; z-index: 3; background: inherit; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } #mobileMenu .offcanvas-header .btn-close { margin-left: auto; } /* Hide header when mobile menu is open (optional class set by JS if you use it) */ body.fv-offcanvas-open .fv-header { opacity: 0; visibility: hidden; pointer-events: none; } /* iOS/Android safe-area padding (offcanvas-top) */ @supports (padding-top: env(safe-area-inset-top)) { .offcanvas { padding-top: env(safe-area-inset-top); } .offcanvas-header { padding-top: calc(1rem + env(safe-area-inset-top)); } } /* Logo sizing (defensive only) */ header img, .navbar-brand img, .site-logo img { width: auto !important; height: auto !important; max-width: 100%; object-fit: contain; max-height: 120px; } @media (max-width: 575.98px) { header img, .navbar-brand img, .site-logo img { max-height: 50px; } } /* Specific header fish image sizing (applies regardless of theme) */ header.fv-header img.header-fish { width: 500px !important; height: 155px !important; max-width: none !important; max-height: none !important; flex: 0 0 500px !important; flex-shrink: 0 !important; object-fit: cover !important; object-position: right center !important; display: block; } /* ---------------------------------------------------------------------------- Dark mode: tokens + Bootstrap variable overrides ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --accent-mint: #4fbfa8; /* emerald / mint (dark mode refined - less neon) */ --brand-50: #064e3b; --brand-100: #065f46; --brand-200: #047857; --brand-300: #059669; /* deeper emerald */ --brand-500: #10b981; /* primary emerald */ --brand-600: #34d399; /* lighter accent */ --brand-700: #059669; --brand-800: #065f46; --ink: #e6edf7; /* text */ --muted: rgba(230, 237, 247, .72); /* secondary text */ --border: rgba(255, 255, 255, .12); /* borders */ --bg: #0b1220; /* app background */ --surface: #0f1a2e; /* cards/sections */ --surface-2: #101f38; --shadow-sm: 0 10px 26px rgba(0, 0, 0, .35); --shadow-md: 0 18px 44px rgba(0, 0, 0, .45); --radius-xl: 1rem; /* Bootstrap variable overrides (colors only) */ --bs-primary: var(--brand-600); --bs-link-color: var(--brand-300); --bs-link-hover-color: var(--brand-200); --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-border-color: var(--border); } /* ---------------------------------------------------------------------------- Dark mode: base + typography ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] .fv-body { background: var(--bg) !important; color: var(--ink); } [data-bs-theme="dark"] ::selection { background: rgba(156, 192, 255, .30); } /* Links */ [data-bs-theme="dark"] a { text-decoration: none; } [data-bs-theme="dark"] a:hover { text-decoration: underline; } /* Bootstrap “dark” helpers should not force dark text in dark mode */ [data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-dark a, [data-bs-theme="dark"] .link-dark { color: var(--ink) !important; } [data-bs-theme="dark"] .text-dark a:hover, [data-bs-theme="dark"] .link-dark:hover { color: var(--bs-link-hover-color) !important; } /* Secondary text */ [data-bs-theme="dark"] .text-secondary, [data-bs-theme="dark"] .text-muted { color: var(--muted) !important; } /* Headings */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4 { color: var(--ink); letter-spacing: -0.02em; } [data-bs-theme="dark"] .section-title, [data-bs-theme="dark"] .page-title { color: var(--bs-link-color) !important; } /* ---------------------------------------------------------------------------- Dark mode: header / navbar / dropdown ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] .fv-header { background: linear-gradient(180deg, rgba(15, 26, 46, .92) 0%, rgba(11, 18, 32, .92) 70%); } [data-bs-theme="dark"] .fv-navbar { background: rgba(15, 26, 46, .82) !important; backdrop-filter: blur(10px); } [data-bs-theme="dark"] .fv-navbar .navbar-nav .nav-link { color: var(--ink); border-radius: 999px; padding: .48rem .78rem; line-height: 1.1; } [data-bs-theme="dark"] .fv-navbar .navbar-nav .nav-link:hover { background: rgba(47, 111, 218, .18); color: var(--ink); } [data-bs-theme="dark"] .fv-navbar .navbar-nav .nav-link.is-active, [data-bs-theme="dark"] .fv-navbar .navbar-nav .nav-link.active { background: rgba(47, 111, 218, .24); color: var(--ink); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(156, 192, 255, .28); } /* Dropdown */ [data-bs-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); } [data-bs-theme="dark"] .dropdown-item { color: var(--ink); border-radius: 10px; } [data-bs-theme="dark"] .dropdown-item:hover { background: rgba(47, 111, 218, .18); color: var(--ink); } [data-bs-theme="dark"] .dropdown-item.active, [data-bs-theme="dark"] .dropdown-item:active, [data-bs-theme="dark"] .dropdown-item.is-active { background: rgba(47, 111, 218, .24); color: var(--ink); font-weight: 600; } /* ---------------------------------------------------------------------------- Dark mode: surfaces / cards / borders ---------------------------------------------------------------------------- */ /* Common panel pattern in your markup: .border.rounded-4.bg-white */ [data-bs-theme="dark"] .border.rounded-4 { border-color: var(--border) !important; } [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light, [data-bs-theme="dark"] .bg-body, [data-bs-theme="dark"] .bg-body-tertiary, [data-bs-theme="dark"] .text-bg-light { background-color: var(--surface) !important; } /* Big panels */ [data-bs-theme="dark"] .border.rounded-4.bg-white { color: var(--ink); background: radial-gradient(900px 260px at 0% 0%, rgba(47, 111, 218, .14), rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* Header rows inside panels */ [data-bs-theme="dark"] .border.rounded-4.bg-white>.d-flex.border-bottom { background: linear-gradient(90deg, rgba(47, 111, 218, .16), rgba(0, 0, 0, 0) 55%) !important; border-bottom-color: rgba(156, 192, 255, .18) !important; } /* Inner article cards */ [data-bs-theme="dark"] article.border.rounded-4.bg-white { position: relative; overflow: hidden; background: var(--surface) !important; border-color: rgba(156, 192, 255, .22) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } [data-bs-theme="dark"] article.border.rounded-4.bg-white::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--brand-200), var(--brand-600)); opacity: 0; transition: opacity .15s ease; } [data-bs-theme="dark"] article.border.rounded-4.bg-white:hover::before { opacity: 1; } [data-bs-theme="dark"] article.border.rounded-4.bg-white:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .35) !important; border-color: rgba(156, 192, 255, .35) !important; } /* Card titles underline accent */ [data-bs-theme="dark"] .border.rounded-4.bg-white h3, [data-bs-theme="dark"] .border.rounded-4.bg-white h4 { position: relative; } [data-bs-theme="dark"] .border.rounded-4.bg-white h3::after, [data-bs-theme="dark"] .border.rounded-4.bg-white h4::after { content: ""; display: block; width: 44px; height: 3px; margin-top: .35rem; border-radius: 999px; background: linear-gradient(90deg, var(--brand-300), var(--brand-600)); opacity: .9; } /* Borders */ [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom { border-color: var(--border) !important; } /* ---------------------------------------------------------------------------- Dark mode: buttons / badges / lists / tables / forms ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] .btn-primary { color: #fff; --bs-btn-bg: var(--brand-500); --bs-btn-border-color: var(--brand-500); --bs-btn-hover-bg: #059669; /* Slightly deeper on hover */ --bs-btn-hover-border-color: #059669; --bs-btn-active-bg: #047857; --bs-btn-active-border-color: #047857; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); } [data-bs-theme="dark"] .btn-outline-dark { color: var(--ink); border-color: rgba(156, 192, 255, .35); background: rgba(255, 255, 255, .04); } [data-bs-theme="dark"] .btn-outline-dark:hover { background: rgba(47, 111, 218, .18); border-color: rgba(156, 192, 255, .45); } /* Date badges */ [data-bs-theme="dark"] .badge.text-bg-light.border { background: rgba(47, 111, 218, .14) !important; border-color: rgba(156, 192, 255, .28) !important; color: var(--ink) !important; font-weight: 600; } /* Lists */ [data-bs-theme="dark"] .list-group, [data-bs-theme="dark"] .list-group-item { border-color: var(--border) !important; } [data-bs-theme="dark"] .list-group-item { background: transparent; color: var(--ink); } [data-bs-theme="dark"] .list-group-item:hover { background: rgba(47, 111, 218, .12); } /* Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: rgba(255, 255, 255, .04); color: var(--ink); border-color: var(--border); border-radius: 12px; } [data-bs-theme="dark"] .form-control::placeholder { color: rgba(230, 237, 247, .55); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: rgba(156, 192, 255, .35); box-shadow: 0 0 0 .25rem rgba(47, 111, 218, .25); } /* Tables */ [data-bs-theme="dark"] .table { color: var(--ink); } [data-bs-theme="dark"] .table { --bs-table-border-color: var(--border); } [data-bs-theme="dark"] .table-hover tbody tr:hover { background: rgba(47, 111, 218, .10); } /* ---------------------------------------------------------------------------- Dark mode: offcanvas (mobile menu) + icons ---------------------------------------------------------------------------- */ [data-bs-theme="dark"] .offcanvas { background: linear-gradient(180deg, rgba(15, 26, 46, .96), rgba(11, 18, 32, .96)); border-left: 1px solid var(--border); } [data-bs-theme="dark"] .offcanvas-header { border-bottom: 1px solid var(--border); } [data-bs-theme="dark"] .offcanvas .nav-link { border-radius: 14px; padding: .78rem .95rem; margin: .16rem 0; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--ink); } [data-bs-theme="dark"] .offcanvas .nav-link:hover { background: rgba(47, 111, 218, .18); border-color: rgba(156, 192, 255, .28); color: var(--ink); } [data-bs-theme="dark"] .offcanvas .nav-link.is-active, [data-bs-theme="dark"] .offcanvas .nav-link.active { background: rgba(47, 111, 218, .24); border-color: rgba(156, 192, 255, .35); color: var(--ink); font-weight: 650; } /* Navbar toggler (Hamburger) + close (X) */ [data-bs-theme="dark"] .navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-bs-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, .35) !important; } [data-bs-theme="dark"] .btn-close { filter: invert(1) brightness(1.6); opacity: .9; } [data-bs-theme="dark"] .btn-close:hover { opacity: 1; } /* ---------------------------------------------------------------------------- Dark mode: footer ---------------------------------------------------------------------------- */ /* Footer */ [data-bs-theme="dark"] footer { background: radial-gradient(900px 260px at 0% 0%, rgba(47, 111, 218, .14), rgba(0, 0, 0, 0) 55%), linear-gradient(180deg, rgba(15, 26, 46, .92) 0%, rgba(11, 18, 32, .92) 70%) !important; color: var(--ink); border-top: 1px solid var(--border); } [data-bs-theme="dark"] footer a { color: var(--bs-link-color); } [data-bs-theme="dark"] footer a:hover { color: var(--bs-link-hover-color); } /* ========================================================= Dark Mode Fix: Chrome/Edge Autofill (gelb/grün) entfernen ========================================================= */ [data-bs-theme="dark"] input:-webkit-autofill, [data-bs-theme="dark"] textarea:-webkit-autofill, [data-bs-theme="dark"] select:-webkit-autofill { -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink) !important; /* übermalt das gelbe Autofill-Background */ -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .04) inset !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, .04) inset !important; /* verhindert “Flash” beim Focus */ transition: background-color 9999s ease-out 0s; } [data-bs-theme="dark"] input:-webkit-autofill:focus, [data-bs-theme="dark"] textarea:-webkit-autofill:focus, [data-bs-theme="dark"] select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .06) inset !important; box-shadow: 0 0 0 1000px rgba(255, 255, 255, .06) inset !important; } /* ---------- Termine Anmelden & Admin (Glass Overrides) ---------- */ [data-bs-theme="dark"] { --event-bg: rgba(30, 41, 59, 0.7); --event-border: rgba(255, 255, 255, 0.1); --event-hover-bg: rgba(51, 65, 85, 0.8); --event-hover-border: rgba(255, 255, 255, 0.2); --event-title-color: #ffffff; --event-detail-color: rgba(255, 255, 255, 0.7); --badge-bg: rgba(255, 255, 255, 0.1); --badge-border: rgba(255, 255, 255, 0.1); --badge-text: #ffffff; --badge-sub-text: rgba(255, 255, 255, 0.6); --section-bg: rgba(255, 255, 255, 0.04); --section-border: rgba(255, 255, 255, 0.1); --header-bg: rgba(255, 255, 255, 0.05); --header-border: rgba(255, 255, 255, 0.1); } /* Theme Switch Core Fixes (robust hiding of the checkbox) */ [data-bs-theme="dark"] .theme-switch .switch input { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; pointer-events: none !important; appearance: none !important; -webkit-appearance: none !important; } [data-bs-theme="dark"] .theme-switch .slider { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3) !important; display: block !important; } [data-bs-theme="dark"] .theme-switch .slider:before { background: #fff !important; } [data-bs-theme="dark"] .theme-switch input:checked+.slider { background: var(--brand-500) !important; border-color: var(--brand-500) !important; } [data-bs-theme="dark"] .theme-switch .label { color: var(--ink) !important; opacity: 1 !important; } /* Search Field & Inputs Glass Polish */ [data-bs-theme="dark"] #memberSearch, [data-bs-theme="dark"] .input-group-text { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: var(--ink) !important; backdrop-filter: blur(8px); } [data-bs-theme="dark"] #memberSearch::placeholder { color: rgba(230, 237, 247, 0.45); } [data-bs-theme="dark"] #memberSearch:focus { background-color: rgba(255, 255, 255, 0.08) !important; border-color: var(--brand-300) !important; box-shadow: 0 0 0 0.25rem rgba(52, 211, 153, 0.2); }