/* ------------------------------------------------------- Places — Light/Dark téma Bootstrap 5-höz (klasszikus sticky footer mintával) - Footer: absolute + fix 60px, body margin-bottom: 60px - Téma: --------------------------------------------------------*/ /* Tipográfia skála (meghagyva) */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } /* Fókusz stílus (meghagyva) */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } /* ---------- Sticky footer – a „jó” minta szerint ---------- */ html { position: relative; min-height: 100%; } body { margin-bottom: 60px; /* UGYANANNYI, mint a .footer height */ } /* Fix, alul lévő footer (60px magas) */ .footer { position: absolute; bottom: 0; width: 100%; height: 60px; /* fix magasság */ line-height: 60px; /* vertikális középre igazítás egysoros tartalomnál */ background: var(--bg-elev, #f8f9fa); border-top: 1px solid var(--border, #dee2e6); color: var(--muted, #6c757d); z-index: 10; /* hogy tartalom ne fedje le véletlenül */ } /* ---------- Téma változók ---------- */ :root { --brand-h: 210; --brand-s: 100%; --brand-l: 45%; --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l)); --brand-600: hsl(var(--brand-h) 95% 40%); --brand-700: hsl(var(--brand-h) 90% 34%); --bg: #f7f9fc; --bg-elev: #ffffff; --text: #0f172a; --muted: #667085; --border: #e6e8ee; --success: #16a34a; --warning: #f59e0b; --danger: #ef4444; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 8px 24px rgba(15,23,42,.08); --ring: 0 0 0 3px rgba(59,130,246,.25); --card-radius: 1rem; --btn-radius: .75rem; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #0b1220; --bg-elev: #121a2a; --text: #e6edf7; --muted: #9aa6bf; --border: #22304b; color-scheme: dark; } } /* Explicit override (kézi váltó miatt) */ html[data-theme="dark"] { --bg: #0b1220; --bg-elev: #121a2a; --text: #e6edf7; --muted: #9aa6bf; --border: #22304b; color-scheme: dark; } html[data-theme="light"] { --bg: #f7f9fc; --bg-elev: #ffffff; --text: #0f172a; --muted: #667085; --border: #e6e8ee; color-scheme: light; } /* Alap háttér/szín (NEM nyúl a sticky footer logikához) */ body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color .25s ease, color .25s ease; } /* Linkek */ a, .link-primary { color: var(--brand-600); text-decoration: none; } a:hover, .link-primary:hover { color: var(--brand-700); text-decoration: underline; } /* NavBar */ .navbar { backdrop-filter: saturate(160%) blur(6px); border-bottom: 1px solid var(--border); transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .navbar-light, .navbar[data-bs-theme="light"] { background-color: rgba(255,255,255,.85); } /* Sötét navbar háttér (egyszerű, hibamentes) */ html[data-theme="dark"] .navbar, .navbar[data-bs-theme="dark"] { background-color: rgba(10,15,25,.7); } .navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text); } .navbar-brand img { height: 32px; width: auto; display: block; } /* Téma váltó gomb */ .theme-toggle-btn { border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); padding: .375rem .75rem; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: .5rem; transition: background-color .2s ease, border-color .2s ease, transform .06s ease; } .theme-toggle-btn:active { transform: translateY(1px); } .theme-toggle-icon { width: 1.1rem; height: 1.1rem; display: inline-block; } .theme-toggle-label { font-size: .9rem; color: var(--muted); } /* Kártyák */ .card { border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; } .card:hover { box-shadow: var(--shadow-md); } /* Gombok */ .btn { border-radius: var(--btn-radius); } .btn-primary { background: var(--brand); border-color: var(--brand); } .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); } .btn-outline-primary { color: var(--brand-600); border-color: var(--brand-600); } .btn-outline-primary:hover { background: var(--brand-600); border-color: var(--brand-600); } /* Form elemek */ .form-control, .form-select { background: var(--bg-elev); color: var(--text); border-color: var(--border); transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; } .form-control:focus, .form-select:focus { border-color: var(--brand-600); box-shadow: var(--ring); } /* Táblázatok */ .table { --bs-table-color: var(--text); --bs-table-bg: var(--bg-elev); --bs-table-border-color: var(--border); border-color: var(--border); } .table thead th { border-bottom-color: var(--border) !important; font-weight: 600; color: var(--muted); } /* Badge-ek */ .badge.bg-primary { background: var(--brand-600) !important; } .badge.bg-success { background: var(--success) !important; } .badge.bg-warning { background: var(--warning) !important; color: #111 !important; } .badge.bg-danger { background: var(--danger) !important; } /* Segédek */ .shadow-soft { box-shadow: var(--shadow-sm) !important; } .rounded-2xl { border-radius: 1.25rem !important; } .text-muted-2 { color: var(--muted) !important; } .border-subtle { border-color: var(--border) !important; } .hover-elevate:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .offcanvas, .dropdown-menu, .modal-content { background: var(--bg-elev); color: var(--text); border-color: var(--border); } .progress { background: color-mix(in oklab, var(--bg) 80%, var(--border) 20%); } .list-group-item { background: var(--bg-elev); color: var(--text); border-color: var(--border); } ::selection { background: color-mix(in oklab, var(--brand) 20%, transparent); } /* --- Sötét mód kontraszt boost a navbárhoz és gombokhoz --- */ .navbar[data-bs-theme="dark"] .navbar-brand, .navbar[data-bs-theme="dark"] .nav-link { color: #e6edf7 !important; } .navbar[data-bs-theme="dark"] .nav-link:hover, .navbar[data-bs-theme="dark"] .nav-link:focus { color: #ffffff !important; } .navbar[data-bs-theme="dark"] .nav-link.disabled, .navbar[data-bs-theme="dark"] .dropdown-item.disabled { color: #9aa6bf !important; } .navbar[data-bs-theme="dark"] .btn-link { color: #e6edf7 !important; } .navbar[data-bs-theme="dark"] .btn-link:hover, .navbar[data-bs-theme="dark"] .btn-link:focus { color: #ffffff !important; text-decoration: underline; } .navbar[data-bs-theme="dark"] { border-bottom: 1px solid #22304b !important; } .navbar[data-bs-theme="dark"] .navbar-toggler { border-color: #3b4a6b; } .navbar[data-bs-theme="dark"] .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(147,197,253,.25); } .navbar[data-bs-theme="dark"] .dropdown-menu { background: var(--bg-elev); color: var(--text); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.35); } .navbar[data-bs-theme="dark"] .dropdown-item { color: var(--text); } .navbar[data-bs-theme="dark"] .dropdown-item:hover, .navbar[data-bs-theme="dark"] .dropdown-item:focus { background: #1b2540; color: #ffffff; } /* Sötét gombok */ html[data-theme="dark"] .btn-primary { background: var(--brand-600); border-color: var(--brand-600); } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus { background: var(--brand-700); border-color: var(--brand-700); } html[data-theme="dark"] .btn-light { background: #334162; border-color: #41527a; color: #e6edf7; } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-light:focus { background: #3c4d76; border-color: #4b5f92; color: #fff; } html[data-theme="dark"] .btn-secondary { background: #2b3858; border-color: #3a4a6f; color: #e6edf7; } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-secondary:focus { background: #35446a; border-color: #4b5f92; } /* Outline gombok */ html[data-theme="dark"] .btn-outline-primary { color: var(--brand-600); border-color: var(--brand-600); } html[data-theme="dark"] .btn-outline-primary:hover, html[data-theme="dark"] .btn-outline-primary:focus { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } html[data-theme="dark"] .btn-outline-light { color: #e6edf7; border-color: #9aa6bf; } html[data-theme="dark"] .btn-outline-light:hover, html[data-theme="dark"] .btn-outline-light:focus { background: #e6edf7; color: #0b1220; } /* Footer sötét színei */ html[data-theme="dark"] .footer { background: var(--bg-elev); border-top-color: var(--border); color: var(--muted); } /* ===== Táblázatok sötét mód javítás ===== */ html[data-theme="dark"] .table { --bs-table-color: var(--text); --bs-table-bg: var(--bg-elev); --bs-table-border-color: var(--border); } html[data-theme="dark"] .table thead, html[data-theme="dark"] .table thead tr, html[data-theme="dark"] .table thead th { background-color: #1b2540 !important; color: #e6edf7 !important; border-color: var(--border); } html[data-theme="dark"] .table tbody tr { background-color: #121a2a; color: var(--text); } html[data-theme="dark"] .table tbody tr:hover { background-color: #1b2540; } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-color-state: #ffffff; --bs-table-bg-state: #1b2540; } /* --- Navbar toggler ikon (hamburger) javítás data-bs-theme-hez --- */ .navbar[data-bs-theme="light"] { --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(0,0,0,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar[data-bs-theme="dark"] { --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(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* opcionális: vékonyabb keret és fókusz a gombon */ .navbar .navbar-toggler { border-color: rgba(128, 145, 180, 0.5); } .navbar .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(147,197,253,.35); } .spinner-border.logo-color { color: #258cfb; /* a logó színe */ }