/* ========================================================= 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"]{ /* calm / dezent blau */ --brand-50: #eef5ff; --brand-100: #dbeaff; --brand-200: #bcd6ff; --brand-300: #9cc0ff; --brand-500: #3b82f6; --brand-600: #2f6fda; /* primary (dezent) */ --brand-700: #245bb8; --brand-800: #1e4a9a; --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; } [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; } /* Hamburger icon + close (X) */ [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; } /* Accordion chevron visibility */ [data-bs-theme="dark"] .accordion-button::after{ filter: invert(1) grayscale(100%); opacity: .9; } [data-bs-theme="dark"] .accordion-button, [data-bs-theme="dark"] .accordion-button:not(.collapsed){ color: var(--ink); } /* ---------------------------------------------------------------------------- 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; }