/* ========================================================= Dyslexia Trainer – App theme (Bootstrap 5.3) Három téma: light / dark / pastel A téma váltása: ========================================================= */ /* --- helyi fontok (marad) --- */ @font-face { font-family: "OpenDyslexic"; src: url("/static/fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/Atkinson-Hyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* --- Olvasási (feladat) font + skála – CSAK .reading-area alatt érvényes --- */ :root { --reading-scale: 1; } body[data-reading-font="dyslexic"] { --reading-font: "OpenDyslexic","Atkinson Hyperlegible",Arial,sans-serif; } body[data-reading-font="atkinson"] { --reading-font: "Atkinson Hyperlegible",Arial,sans-serif; } body[data-reading-font="system"] { --reading-font: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; } .reading-area { font-family: var(--reading-font, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif); font-size: calc(1rem * var(--reading-scale)); /* A−/A+ csak itt hat */ line-height: 1.6; letter-spacing: 0.01em; } /* ========================================================= THEME TOKENS - A Bootstrap komponensek ezeket a változókat használják. - Light/Dark: közel a Bootstrap alaphoz (jó kontraszt). - Pastel: kímélő hátterek, megőrzött kontraszt linkeknél/btn-eknél. ========================================================= */ /* ========================================================= THEME TOKENS - HUEMINT MAGAZINE PALETTE Palette: #f6cb4d #ede7eb #352665 #c84a5b ========================================================= */ /* ---------- LIGHT (alap) ---------- */ :root[data-bs-theme="light"]{ /* Alap */ --bs-body-bg: #ffffff; --bs-body-color: #212529; --bs-border-color: #dee2e6; /* Színek – Bootstrap default (megtartjuk) */ --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; /* Linkek */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #0b5ed7; /* Felületek */ --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-navbar-color: rgba(33,37,41,.75); --bs-navbar-hover-color: rgba(33,37,41,.9); --bs-navbar-active-color: #212529; } /* ---------- DARK ---------- */ :root[data-bs-theme="dark"]{ --bs-body-bg: #121417; --bs-body-color: #e6e8eb; --bs-border-color: #2a2f36; /* Színek – sötét háttéren */ --bs-primary: #6ea8fe; --bs-secondary: #a1a7ac; --bs-success: #75b798; --bs-info: #66d3e9; --bs-warning: #ffd24d; --bs-danger: #ff6b6b; --bs-link-color: var(--bs-primary); --bs-link-hover-color: #9cc0ff; --bs-card-bg: #1a1f24; --bs-dropdown-bg: #1a1f24; --bs-navbar-color: rgba(230,232,235,.8); --bs-navbar-hover-color: #ffffff; --bs-navbar-active-color: #ffffff; } /* ---------- PASTEL (HUEMINT MAGAZINE) ---------- */ :root[data-bs-theme="pastel"]{ /* Alap színek a palettából */ --bs-body-bg: #ede7eb; /* Világos lila-alapú háttér */ --bs-body-color: #352665; /* Sötét indigó szöveg */ --bs-border-color: #d1c4d9; /* Enyhén sötétebb lila */ /* Fő színek a palettából */ --bs-primary: #352665; /* Indigó - elsődleges */ --bs-secondary: #c84a5b; /* Vörös-rózsaszín - másodlagos */ --bs-success: #2e7d32; /* Zöld - success (megtartjuk) */ --bs-info: #0288d1; /* Kék - info (megtartjuk) */ --bs-warning: #f6cb4d; /* Arany - warning */ --bs-danger: #c84a5b; /* Vörös-rózsaszín - danger */ /* Linkek */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #2a1e51; /* Felületek */ --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-navbar-color: #352665; --bs-navbar-hover-color: #2a1e51; --bs-navbar-active-color: #1f153d; } /* ---------- MAGAZINE (Új téma a palettából) ---------- */ :root[data-bs-theme="magazine"]{ /* Alap színek */ --bs-body-bg: #f6cb4d; /* Arany háttér */ --bs-body-color: #352665; /* Indigó szöveg */ --bs-border-color: #e5b83d; /* Sötétebb arany */ /* Színek */ --bs-primary: #352665; /* Indigó */ --bs-secondary: #c84a5b; /* Vörös-rózsaszín */ --bs-success: #2e7d32; /* Zöld */ --bs-info: #0288d1; /* Kék */ --bs-warning: #c84a5b; /* Vörös-rózsaszín */ --bs-danger: #b03a4a; /* Sötétebb vörös */ /* Linkek */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #2a1e51; /* Felületek */ --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-navbar-color: #352665; --bs-navbar-hover-color: #2a1e51; --bs-navbar-active-color: #1f153d; } /* ---------- GREEN (Zöld természetes) ---------- */ :root[data-bs-theme="green"]{ /* Alap színek */ --bs-body-bg: #e0e3e1; /* Világos zöldes-szürke háttér */ --bs-body-color: #000100; /* Majdnem fekete szöveg */ --bs-border-color: #c8ccc9; /* Enyhén sötétebb szürke */ /* Fő színek a palettából */ --bs-primary: #004224; /* Sötét zöld - elsődleges */ --bs-secondary: #77bf07; /* Élénk zöld - másodlagos */ --bs-success: #004224; /* Sötét zöld - success */ --bs-info: #0066cc; /* Kék - info */ --bs-warning: #ff9800; /* Narancs - warning */ --bs-danger: #dc3545; /* Piros - danger */ /* Linkek */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #002612; /* Felületek */ --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-navbar-color: #000100; --bs-navbar-hover-color: #004224; --bs-navbar-active-color: #002612; } /* ---------- GOLD (Arany-barna elegáns) ---------- */ :root[data-bs-theme="gold"]{ /* Alap színek */ --bs-body-bg: #fffbef; /* Világos arany-krém háttér */ --bs-body-color: #08082f; /* Sötét kék szöveg - kiváló kontraszt */ --bs-border-color: #e8dfc4; /* Aranyos keret */ /* Fő színek a palettából */ --bs-primary: #08082f; /* Sötét kék - elsődleges */ --bs-secondary: #483131; /* Borda-barna - másodlagos */ --bs-success: #2e7d32; /* Zöld - success */ --bs-info: #0288d1; /* Kék - info */ --bs-warning: #f49e3b; /* Arany - warning */ --bs-danger: #c84a5b; /* Vörös - danger */ /* Linkek */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: #05051f; /* Felületek */ --bs-card-bg: #ffffff; --bs-dropdown-bg: #ffffff; --bs-navbar-color: #08082f; --bs-navbar-hover-color: #f49e3b; --bs-navbar-active-color: #e8912e; } /* ========================================================= EGYSÉGES FEJ/NYELV – NAVBAR & MENÜ ========================================================= */ .navbar .btn, .navbar .dropdown-toggle, .navbar .nav-link { font-size: 1rem; padding: .5rem .75rem; } .dropdown-menu { /* a Bootstrap kezeli a láthatóságot; csak vizuális finomhang */ border-color: var(--bs-border-color); } /* Kisegítő fókuszgyűrű */ :focus-visible { outline: 3px solid rgba(13,110,253,.5); outline-offset: 2px; } /* „Segítség” gyűrű kiemeléshez */ .ring { box-shadow: 0 0 0 .15rem rgba(13,110,253,.35); border-radius: .25rem; } /* Kártyák közti kontraszt */ .card { background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); } /* Olvashatóbb táblázat-sor elválasztás */ .table > :not(caption) > * > * { border-color: var(--bs-border-color); } /* Linkek árnyalt állapotai */ a { text-decoration: none; } a:hover { text-decoration: underline; } /* Kis, de egységes badge/btn méretek */ .btn { border-radius: .5rem; } /* Alert-ek: a pastel/dark/light színekhez igazodva jól olvasható kontraszt */ .alert-primary { color:#0a3f9e; background:color-mix(in oklab, var(--bs-primary) 15%, #fff); border-color:color-mix(in oklab, var(--bs-primary) 35%, #fff); } .alert-success { color:#0f5132; background:color-mix(in oklab, var(--bs-success) 15%, #fff); border-color:color-mix(in oklab, var(--bs-success) 35%, #fff); } .alert-info { color:#055160; background:color-mix(in oklab, var(--bs-info) 15%, #fff); border-color:color-mix(in oklab, var(--bs-info) 35%, #fff); } .alert-warning { color:#664d03; background:color-mix(in oklab, var(--bs-warning) 18%, #fff); border-color:color-mix(in oklab, var(--bs-warning) 40%, #fff); } .alert-danger { color:#842029; background:color-mix(in oklab, var(--bs-danger) 15%, #fff); border-color:color-mix(in oklab, var(--bs-danger) 35%, #fff); } /* Dark témában az alert hátterek kicsit erősebbek legyenek */ :root[data-bs-theme="dark"] .alert-primary { color:#dbe7ff; background:color-mix(in oklab, var(--bs-primary) 25%, #0b0e12); border-color:color-mix(in oklab, var(--bs-primary) 55%, #0b0e12); } :root[data-bs-theme="dark"] .alert-success { color:#d9f3e6; background:color-mix(in oklab, var(--bs-success) 25%, #0b0e12); border-color:color-mix(in oklab, var(--bs-success) 55%, #0b0e12); } :root[data-bs-theme="dark"] .alert-info { color:#dbf7fc; background:color-mix(in oklab, var(--bs-info) 25%, #0b0e12); border-color:color-mix(in oklab, var(--bs-info) 55%, #0b0e12); } :root[data-bs-theme="dark"] .alert-warning { color:#fff1c2; background:color-mix(in oklab, var(--bs-warning) 28%, #0b0e12); border-color:color-mix(in oklab, var(--bs-warning) 58%, #0b0e12); } :root[data-bs-theme="dark"] .alert-danger { color:#ffd6db; background:color-mix(in oklab, var(--bs-danger) 25%, #0b0e12); border-color:color-mix(in oklab, var(--bs-danger) 55%, #0b0e12); } /* Menüben a kis ikon/link közök egységesek */ .navbar .nav-link > i { margin-right: .25rem; } /* Külön: olvasófeladatok gombjai legyenek kényelmesen kattinthatók */ .reading-area .btn { min-height: 2.5rem; padding: .5rem .75rem; } /* Kis „kártya-cím” sorköz */ .card .card-title, .card .card-header { margin-bottom: .25rem; } /* Általános „kattintható felület” nagyítás (tap target) */ .btn, .form-control { touch-action: manipulation; } /* ===== NAVBAR (sötét) – dropdown olvashatóság fix ===== */ .navbar[data-bs-theme="dark"] .dropdown-menu{ /* háttér és keret */ --bs-dropdown-bg: #212529; border-color: rgba(255,255,255,.15); } .navbar[data-bs-theme="dark"] .dropdown-item{ /* normál linkszín */ color: #f8f9fa; } .navbar[data-bs-theme="dark"] .dropdown-item:hover, .navbar[data-bs-theme="dark"] .dropdown-item:focus{ /* hover kontraszt */ color: #ffffff; background-color: rgba(255,255,255,.08); } .navbar[data-bs-theme="dark"] .dropdown-item.active, .navbar[data-bs-theme="dark"] .dropdown-item:active{ color: #ffffff; background-color: rgba(255,255,255,.15); } /* Olvasási (feladat) font + skála – CSAK .reading-area alatt érvényes */ :root { --reading-scale: 1; } html { --reading-scale: 1; } /* WebKit/Safari fix */ body[data-reading-font="dyslexic"] { --reading-font: "OpenDyslexic","Atkinson Hyperlegible",Arial,sans-serif; } body[data-reading-font="atkinson"] { --reading-font: "Atkinson Hyperlegible",Arial,sans-serif; } body[data-reading-font="system"] { --reading-font: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; } .reading-area { font-family: var(--reading-font, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif); font-size: calc(1rem * var(--reading-scale, 1)) !important; /* <-- fallback + erősebb specifikáció */ line-height: 1.6; letter-spacing: 0.01em; } /* ====== Olvasási (feladat) font + skála ====== */ :root{ --reading-scale: 1; } html { --reading-scale: 1; } /* Safari/WebKit fix */ body[data-reading-font="dyslexic"] { --reading-font: "OpenDyslexic","Atkinson Hyperlegible",Arial,sans-serif; } body[data-reading-font="atkinson"] { --reading-font: "Atkinson Hyperlegible",Arial,sans-serif; } body[data-reading-font="system"] { --reading-font: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; } .reading-area{ font-family: var(--reading-font, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif); font-size: calc(1rem * var(--reading-scale, 1)) !important; line-height: 1.6; letter-spacing: .01em; } /* A .reading-area-ban NE írják felül a méretet a Bootstrap utilok */ .reading-area [class^="fs-"], .reading-area [class*=" fs-"], .reading-area .display-1, .reading-area .display-2, .reading-area .display-3, .reading-area .display-4, .reading-area .display-5, .reading-area .display-6 { font-size: inherit !important; } /* Sötét navbar dropdown – kontraszt fix minden témán */ .navbar[data-bs-theme="dark"] .dropdown-menu{ --bs-dropdown-bg: #212529; --bs-dropdown-link-color: rgba(255,255,255,.9); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: #2a2f36; --bs-dropdown-border-color: #343a40; color: var(--bs-dropdown-link-color); } /* A .reading-area legyen a "buborék", ahol a betűcsalád és a skála érvényes */ .reading-area { font-family: var(--reading-font, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif); font-size: calc(1rem * var(--reading-scale)); line-height: 1.6; letter-spacing: 0.01em; } /* Minden gyakori elem örökölje a skálát a reading-area-ban */ .reading-area :is(p, span, li, button, .btn, label, input, textarea, select) { font-size: inherit; } /* Ne verjék szét a skálát a Bootstrap méret-utilok */ .reading-area .lead, .reading-area [class^="fs-"], .reading-area [class*=" fs-"] { font-size: inherit !important; } /* Biztos ami biztos: az opció/gomb feliratok is örököljenek */ .reading-area .option, .reading-area .choice-option { font-size: inherit; } /* ===== Egységes olvasási tipó a feladatokhoz ===== */ :root { --reading-scale: 1; } /* A-/A+ ezt állítja a prefs.js */ .reading-area{ font-family: var(--reading-font, system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif); letter-spacing: .01em; line-height: 1.6; } /* Skálázható méretosztályok – minden feladat EZEKET használja */ .fs-reading-xs { font-size: calc(clamp(14px, 1.0vw, 16px) * var(--reading-scale)); line-height: 1.45; } .fs-reading-sm { font-size: calc(clamp(16px, 1.2vw, 18px) * var(--reading-scale)); line-height: 1.5; } .fs-reading-md { font-size: calc(clamp(18px, 1.4vw, 22px) * var(--reading-scale)); line-height: 1.5; } .fs-reading-lg { font-size: calc(clamp(22px, 2.0vw, 32px) * var(--reading-scale)); line-height: 1.35; } .fs-reading-xl { font-size: calc(clamp(28px, 3.0vw, 48px) * var(--reading-scale)); line-height: 1.2; } /* Kényelmes gombok a reading zónában */ .reading-area .btn { padding: .6rem 1rem; } .reading-area .btn-sm { padding: .45rem .8rem; } .reading-area .btn-lg { padding: .75rem 1.15rem; } /* ========================================================= NAVBAR FIX - MINDHÁROM TÉMÁRA ========================================================= */ /* Alap navbar stílusok minden témához */ .navbar { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border-bottom: 1px solid var(--bs-border-color) !important; } /* Navbar linkek - világos és pasztell témákhoz */ :root[data-bs-theme="light"] .navbar .nav-link, :root[data-bs-theme="pastel"] .navbar .nav-link { color: rgba(33, 37, 41, 0.75) !important; } :root[data-bs-theme="light"] .navbar .nav-link:hover, :root[data-bs-theme="pastel"] .navbar .nav-link:hover { color: rgba(33, 37, 41, 0.9) !important; } :root[data-bs-theme="light"] .navbar .nav-link.active, :root[data-bs-theme="pastel"] .navbar .nav-link.active { color: #212529 !important; } /* Navbar brand - világos és pasztell témákhoz */ :root[data-bs-theme="light"] .navbar-brand, :root[data-bs-theme="pastel"] .navbar-brand { color: #212529 !important; } :root[data-bs-theme="light"] .navbar-brand:hover, :root[data-bs-theme="pastel"] .navbar-brand:hover { color: #1a1e21 !important; } /* Navbar text - világos és pasztell témákhoz */ :root[data-bs-theme="light"] .navbar-text, :root[data-bs-theme="pastel"] .navbar-text { color: rgba(33, 37, 41, 0.75) !important; } /* Sötét téma navbar fix */ :root[data-bs-theme="dark"] .navbar .nav-link { color: rgba(230, 232, 235, 0.8) !important; } :root[data-bs-theme="dark"] .navbar .nav-link:hover { color: #ffffff !important; } :root[data-bs-theme="dark"] .navbar .nav-link.active { color: #ffffff !important; } :root[data-bs-theme="dark"] .navbar-brand { color: #e6e8eb !important; } :root[data-bs-theme="dark"] .navbar-brand:hover { color: #ffffff !important; } :root[data-bs-theme="dark"] .navbar-text { color: rgba(230, 232, 235, 0.8) !important; } /* Dropdown menük minden témában */ .navbar .dropdown-menu { background-color: var(--bs-dropdown-bg) !important; border-color: var(--bs-border-color) !important; } .navbar .dropdown-item { color: var(--bs-body-color) !important; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: color-mix(in oklab, var(--bs-primary) 10%, var(--bs-body-bg)) !important; color: var(--bs-body-color) !important; } /* Toggler ikon minden témában */ .navbar-toggler { border-color: var(--bs-border-color) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } :root[data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(230,232,235,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* ========================================================= BUTTON SYSTEM – egységes méret, forma, színek, animáció ========================================================= */ :root{ /* Alap knobok */ --btn-radius: .6rem; --btn-fw: 600; --btn-h-sm: 2.1rem; --btn-h-md: 2.6rem; --btn-h-lg: 3.1rem; --btn-pad-y: .5rem; --btn-pad-x: .9rem; --btn-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.05); --btn-shadow-hover: 0 3px 8px rgba(0,0,0,.10); } /* Témafinomságok: árnyék/kontraszt */ :root[data-bs-theme="dark"]{ --btn-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.35); --btn-shadow-hover: 0 4px 14px rgba(0,0,0,.45); } :root[data-bs-theme="pastel"]{ --btn-shadow: 0 1px 2px rgba(31,41,55,.05), 0 2px 6px rgba(31,41,55,.06); --btn-shadow-hover: 0 3px 10px rgba(31,41,55,.10); } /* Alap gomb (minden variánsra érvényes) */ .btn{ border-radius: var(--btn-radius); font-weight: var(--btn-fw); min-height: var(--btn-h-md); padding: var(--btn-pad-y) var(--btn-pad-x); line-height: 1.2; transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease; box-shadow: var(--btn-shadow); will-change: transform; } .btn:hover{ transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); } .btn:active{ transform: translateY(0); box-shadow: var(--btn-shadow); } /* Fókusz – akadálymentes gyűrű, témához igazítva */ .btn:focus-visible{ outline: 0; box-shadow: 0 0 0 .22rem color-mix(in oklab, var(--bs-primary) 35%, transparent), var(--btn-shadow-hover); } /* Méretek: Bootstrap-hez igazítva, de egységesen */ .btn-sm{ min-height: var(--btn-h-sm); padding: .35rem .6rem; font-size: .95rem; } .btn-lg{ min-height: var(--btn-h-lg); padding: .75rem 1.1rem; font-size: 1.1rem; } /* Szövegszín-konszolidáció a SOLID variánsokra (jó kontraszt minden témában) */ .btn-primary, .btn-secondary, .btn-success, .btn-danger{ --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } /* A „világos” árnyalatokhoz sötét szöveg olvashatóbb */ .btn-warning, .btn-info{ --bs-btn-color: #111827; /* nagyon sötét szürke */ --bs-btn-hover-color: #111827; --bs-btn-active-color: #111827; } /* OUTLINE variánsok: hover-re mindig SOLID + kontrasztos szöveg */ .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info{ --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } /* „Soft” gomb (kiegészítő variáns — opcionális) Használat: .btn .btn-soft-primary / -success / -warning / stb. */ .btn-soft-primary{ background: color-mix(in oklab, var(--bs-primary) 14%, transparent); color: var(--bs-primary); border-color: color-mix(in oklab, var(--bs-primary) 35%, transparent); } .btn-soft-primary:hover{ background: color-mix(in oklab, var(--bs-primary) 22%, transparent); } .btn-soft-success{ background: color-mix(in oklab, var(--bs-success) 14%, transparent); color: var(--bs-success); border-color: color-mix(in oklab, var(--bs-success) 35%, transparent); } .btn-soft-success:hover{ background: color-mix(in oklab, var(--bs-success) 22%, transparent); } .btn-soft-warning{ background: color-mix(in oklab, var(--bs-warning) 18%, transparent); color: #111827; border-color: color-mix(in oklab, var(--bs-warning) 40%, transparent); } .btn-soft-warning:hover{ background: color-mix(in oklab, var(--bs-warning) 26%, transparent); } .btn-soft-info{ background: color-mix(in oklab, var(--bs-info) 16%, transparent); color: var(--bs-info); border-color: color-mix(in oklab, var(--bs-info) 38%, transparent); } .btn-soft-info:hover{ background: color-mix(in oklab, var(--bs-info) 24%, transparent); } .btn-soft-danger{ background: color-mix(in oklab, var(--bs-danger) 16%, transparent); color: var(--bs-danger); border-color: color-mix(in oklab, var(--bs-danger) 38%, transparent); } .btn-soft-danger:hover{ background: color-mix(in oklab, var(--bs-danger) 24%, transparent); } /* Link gomb konzisztens „tap target”-tel */ .btn-link{ font-weight: 600; text-underline-offset: .2em; border-radius: var(--btn-radius); padding: .25rem .35rem; } .btn-link:hover{ text-decoration-thickness: .12em; transform: translateY(-1px); } /* Olvasási feladatok: egységes tap/line-height — csak ott */ .reading-area .btn{ min-height: calc(2.4rem * var(--reading-scale)); padding: .45em .7em; line-height: 1.35; font-size: calc(1rem * var(--reading-scale)); } /* (opcionális) Ha a feladat sablonokban .fs-scaled-et használsz, ez egységesíti az A-/A+ skálát a reading-area scope alatt: */ :root{ --fs-scale: 1; } /* alap */ .reading-area, .fs-reading-scope{ --fs-scale: var(--reading-scale); } .fs-scaled{ font-size: calc(var(--base-fs) * var(--fs-scale)); } /* ========================================================= MAGAZINE TÉMA KOMPONENSEK ========================================================= */ /* Magazine téma gombok */ :root[data-bs-theme="magazine"] .btn-primary { background-color: #352665; border-color: #352665; color: #ffffff; } :root[data-bs-theme="magazine"] .btn-primary:hover { background-color: #2a1e51; border-color: #2a1e51; } :root[data-bs-theme="magazine"] .btn-secondary { background-color: #c84a5b; border-color: #c84a5b; color: #ffffff; } :root[data-bs-theme="magazine"] .btn-secondary:hover { background-color: #b03a4a; border-color: #b03a4a; } :root[data-bs-theme="magazine"] .btn-warning { background-color: #f6cb4d; border-color: #f6cb4d; color: #352665; } :root[data-bs-theme="magazine"] .btn-warning:hover { background-color: #e5b83d; border-color: #e5b83d; color: #352665; } /* Magazine kártyák */ :root[data-bs-theme="magazine"] .card { background-color: #ffffff; border: 1px solid #e5b83d; box-shadow: 0 2px 8px rgba(53, 38, 101, 0.1); } /* Pastel téma finomhangolás */ :root[data-bs-theme="pastel"] .btn-primary { background-color: #352665; border-color: #352665; } :root[data-bs-theme="pastel"] .btn-primary:hover { background-color: #2a1e51; border-color: #2a1e51; } :root[data-bs-theme="pastel"] .btn-secondary { background-color: #c84a5b; border-color: #c84a5b; } :root[data-bs-theme="pastel"] .btn-secondary:hover { background-color: #b03a4a; border-color: #b03a4a; } /* ========================================================= GREEN TÉMA KOMPONENSEK ========================================================= */ /* Green téma gombok */ :root[data-bs-theme="green"] .btn-primary { background-color: #004224; border-color: #004224; color: #ffffff; } :root[data-bs-theme="green"] .btn-primary:hover { background-color: #002612; border-color: #002612; } :root[data-bs-theme="green"] .btn-secondary { background-color: #77bf07; border-color: #77bf07; color: #000100; } :root[data-bs-theme="green"] .btn-secondary:hover { background-color: #69a906; border-color: #69a906; } :root[data-bs-theme="green"] .btn-success { background-color: #004224; border-color: #004224; color: #ffffff; } /* Green kártyák */ :root[data-bs-theme="green"] .card { background-color: #ffffff; border: 1px solid #c8ccc9; box-shadow: 0 2px 8px rgba(0, 66, 36, 0.1); } /* Green navbar finomhangolás */ :root[data-bs-theme="green"] .navbar { background-color: #004224 !important; color: #ffffff !important; } :root[data-bs-theme="green"] .navbar .nav-link { color: rgba(255, 255, 255, 0.8) !important; } :root[data-bs-theme="green"] .navbar .nav-link:hover { color: #ffffff !important; } :root[data-bs-theme="green"] .navbar-brand { color: #ffffff !important; } /* ========================================================= GOLD TÉMA KOMPONENSEK ========================================================= */ /* Gold téma gombok */ :root[data-bs-theme="gold"] .btn-primary { background-color: #08082f; border-color: #08082f; color: #ffffff; } :root[data-bs-theme="gold"] .btn-primary:hover { background-color: #05051f; border-color: #05051f; } :root[data-bs-theme="gold"] .btn-secondary { background-color: #483131; border-color: #483131; color: #ffffff; } :root[data-bs-theme="gold"] .btn-secondary:hover { background-color: #3a2727; border-color: #3a2727; } :root[data-bs-theme="gold"] .btn-warning { background-color: #f49e3b; border-color: #f49e3b; color: #08082f; } :root[data-bs-theme="gold"] .btn-warning:hover { background-color: #e8912e; border-color: #e8912e; color: #08082f; } /* Gold kártyák */ :root[data-bs-theme="gold"] .card { background-color: #ffffff; border: 1px solid #e8dfc4; box-shadow: 0 2px 8px rgba(8, 8, 47, 0.1); } /* Gold navbar finomhangolás */ :root[data-bs-theme="gold"] .navbar { background-color: #08082f !important; color: #ffffff !important; } :root[data-bs-theme="gold"] .navbar .nav-link { color: rgba(255, 255, 255, 0.9) !important; } :root[data-bs-theme="gold"] .navbar .nav-link:hover { color: #f49e3b !important; } :root[data-bs-theme="gold"] .navbar-brand { color: #ffffff !important; } :root[data-bs-theme="gold"] .navbar-brand:hover { color: #f49e3b !important; } /* Reward overlay */ #rewardOverlay{ position: fixed; inset: 0; display: grid; place-items: center; background: color-mix(in oklab, var(--bs-body-bg, #000) 20%, transparent); backdrop-filter: blur(2px); z-index: 1080; } #rewardOverlay[hidden]{ display: none; } #rewardOverlay .reward-box{ display: flex; flex-direction: column; /* szöveg az animáció ALATT */ align-items: center; gap: 10px; /* kért 10px rés */ padding: 20px; border-radius: 16px; background: color-mix(in oklab, #fff 85%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.25); } /* 2× méret – rugalmas alapértékből számolva */ #rewardOverlay .reward-box video{ --reward-base: clamp(160px, 30vmin, 260px); width: calc(var(--reward-base) * 2); /* 2× */ height: auto; display: block; border-radius: 12px; } #rewardOverlay .reward-text{ font-weight: 800; line-height: 1.1; text-align: center; font-size: clamp(22px, 3.2vmin, 36px); color: var(--bs-body-color, #111); } :root[data-bs-theme="dark"] #rewardOverlay .reward-box{ background: color-mix(in oklab, #0b0e12 70%, transparent); } :root[data-bs-theme="dark"] #rewardOverlay .reward-text{ color: #fff; } /* --------------------------------------------------------- Tipográfia: enyhe simítás, de nem írjuk felül a Bootstrap-et --------------------------------------------------------- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }