/* ============================================================ ÉJKÉK — Cassiopeia gyermeksablon (Joomla 6) Sötét, szemkímélő téma + nagy kontrasztú KIVETÍTŐ MÓD A módot a media/js/user.js kapcsolja a attribútummal; a választás localStorage-ban megmarad. ============================================================ */ /* ---------- 1) SZÍNPALETTA — sötét (alapértelmezett) ---------- */ :root { --ejkek-bg: #0f1520; /* oldal háttér */ --ejkek-bg2: #151d2b; /* másodlagos háttér */ --ejkek-surface: #1a2434; /* kártyák, panelek */ --ejkek-border: #2a3850; /* keretek */ --ejkek-text: #e6edf5; /* fő szöveg */ --ejkek-text2: #9fb0c3; /* halványabb szöveg */ --ejkek-accent: #4db8ff; /* kiemelő szín */ --ejkek-accent-text: #04263d; /* szöveg a kiemelő színen */ --ejkek-link: #7ccbff; /* linkek */ --ejkek-nav: #0a0f18; /* fejléc / lábléc sáv */ --ejkek-fw: 400; --ejkek-shadow: 0 6px 24px rgba(0, 0, 0, .35); /* Cassiopeia saját változóinak átszínezése */ --cassiopeia-color-primary: var(--ejkek-nav); --cassiopeia-color-link: var(--ejkek-link); --link-color: var(--ejkek-link); --link-color-rgb: 124, 203, 255; --cassiopeia-color-hover: var(--ejkek-accent); --link-hover-color: var(--ejkek-accent); --link-hover-color-rgb: 77, 184, 255; --template-bg-light: var(--ejkek-bg2); --template-text-dark: var(--ejkek-text); --template-special-color: var(--ejkek-bg2); } /* ---------- 2) KIVETÍTŐ MÓD — világos, nagy kontraszt ---------- Kivetítőn a sötét háttér kimosódik, ezért órán ez a mód megy: fehér alap, sötét, kissé vastagabb és nagyobb betű. */ html[data-ejkek-mode="kivetito"] { --ejkek-bg: #ffffff; --ejkek-bg2: #f2f4f8; --ejkek-surface: #ffffff; --ejkek-border: #b9bfc9; --ejkek-text: #0c0e12; --ejkek-text2: #343b45; --ejkek-accent: #0063b8; --ejkek-accent-text: #ffffff; --ejkek-link: #004f94; --ejkek-nav: #ffffff; --ejkek-fw: 500; --ejkek-shadow: 0 3px 12px rgba(0, 0, 0, .12); --link-color-rgb: 0, 79, 148; --link-hover-color-rgb: 0, 99, 184; } /* ---------- 3) ALAP: folyékony tipográfia (reszponzív) ---------- */ html { font-size: clamp(16px, 15px + 0.35vw, 18.5px); } html[data-ejkek-mode="kivetito"] { font-size: clamp(17px, 15.5px + 0.5vw, 21px); } body.site { background-color: var(--ejkek-bg); color: var(--ejkek-text); font-weight: var(--ejkek-fw); line-height: 1.65; transition: background-color .3s ease, color .3s ease; } h1, h2, h3, h4, h5, h6, .page-header h1, .page-header h2 { color: var(--ejkek-text); } .text-muted, .small, small, .article-info.muted { color: var(--ejkek-text2) !important; } /* ---------- 4) FEJLÉC + FELSŐ MENÜ ---------- */ .container-header { background-image: none; border-bottom: 1px solid var(--ejkek-border); box-shadow: var(--ejkek-shadow); } html[data-ejkek-mode="kivetito"] .container-header .navbar-brand, html[data-ejkek-mode="kivetito"] .container-header .navbar-brand a, html[data-ejkek-mode="kivetito"] .container-header .site-description, html[data-ejkek-mode="kivetito"] .container-header .mod-menu, html[data-ejkek-mode="kivetito"] .container-header .mod-menu a, html[data-ejkek-mode="kivetito"] .container-header .mod-menu button { color: var(--ejkek-text); } .container-header .mod-menu .metismenu-item > a, .container-header .mod-menu .metismenu-item > button, .container-header .mod-menu .metismenu-item > span { border-radius: .5rem; } .container-header .mod-menu .metismenu-item.active > a, .container-header .mod-menu .metismenu-item > a:hover, .container-header .mod-menu .metismenu-item > button:hover { color: var(--ejkek-accent); text-decoration-color: var(--ejkek-accent); text-underline-offset: .35em; } /* Legördülő almenük */ .container-header .metismenu.mod-menu .mm-collapse, .container-header .mod-menu .mod-menu__sub, .container-header .metismenu-item > ul { background: var(--ejkek-surface) !important; border: 1px solid var(--ejkek-border); border-radius: .5rem; box-shadow: var(--ejkek-shadow); } /* Almenü szövegszíne — a Cassiopeia fixen sötétszürkét ad neki (fehér panelhez tervezve), ezt a saját témaszínünkre cseréljük */ .container-header .mod-menu .parent > ul { color: var(--ejkek-text); } .container-header .mod-menu .mod-menu__sub a, .container-header .mod-menu .mod-menu__sub span, .container-header .metismenu .mm-collapse a, .container-header .metismenu .mm-collapse span { color: var(--ejkek-text); } .container-header .mod-menu .mod-menu__sub a:hover, .container-header .mod-menu .mod-menu__sub .active > a, .container-header .metismenu .mm-collapse a:hover, .container-header .metismenu .mm-collapse .active > a { color: var(--ejkek-accent); } /* Almenü automatikus kinyílása egérrávitelre (csak asztali gépen, egeres eszközön — érintőképernyőn és mobilon marad a kattintás) */ @media (min-width: 992px) and (hover: hover) { .container-header .metismenu .parent:hover > ul, .container-header .metismenu .parent:focus-within > ul, .container-header .mod-menu .parent:hover > .mod-menu__sub, .container-header .mod-menu .parent:focus-within > .mod-menu__sub { display: block !important; } /* a nyíl-gombok elrejtése — hover-nyitás mellett feleslegesek (mobilon megmaradnak, ott érintéssel ez nyitja az almenüt) */ .container-header .metismenu button.mm-toggler { display: none !important; } .container-header .metismenu .mm-toggler-nolink::after { display: none !important; } } /* Logó + Kivetítő gomb: egy sorban, balra igazítva, azonos magassággal */ :root { --ejkek-ctrl-h: 40px; } /* a gomb és a logó közös magassága */ .container-header .navbar-brand img { height: var(--ejkek-ctrl-h); width: auto; max-width: none; border-radius: 0; } .container-header .navbar-brand { display: inline-flex; align-items: center; padding: 0; font-size: 1.5rem; /* szöveges site-title esetén se nőjön a sor fölé */ } /* A user.js ezt az osztályt teszi a logó sorára, és ide szúrja be a gombot */ .container-header .ejkek-brand-row { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; } /* ---------- 5) TARTALOM: kártyák, panelek ---------- */ .card { --bs-card-bg: var(--ejkek-surface); --card-bg: var(--ejkek-surface); /* Joomla előtag nélküli változata */ --bs-card-color: var(--ejkek-text); --card-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-card-border-color: var(--ejkek-border); --card-border-color: var(--ejkek-border); /* Joomla előtag nélküli változata */ --bs-card-cap-bg: var(--ejkek-bg2); --card-cap-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-card-cap-color: var(--ejkek-text); --card-cap-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ border-radius: .75rem; } .list-group { --bs-list-group-bg: var(--ejkek-surface); --list-group-bg: var(--ejkek-surface); /* Joomla előtag nélküli változata */ --bs-list-group-color: var(--ejkek-text); --list-group-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-list-group-border-color: var(--ejkek-border); --list-group-border-color: var(--ejkek-border); /* Joomla előtag nélküli változata */ --bs-list-group-action-hover-bg: var(--ejkek-bg2); --list-group-action-hover-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-list-group-action-hover-color: var(--ejkek-text); --list-group-action-hover-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-list-group-action-active-bg: var(--ejkek-bg2); --list-group-action-active-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ } .accordion { --bs-accordion-bg: var(--ejkek-surface); --accordion-bg: var(--ejkek-surface); /* Joomla előtag nélküli változata */ --bs-accordion-color: var(--ejkek-text); --accordion-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-accordion-border-color: var(--ejkek-border); --accordion-border-color: var(--ejkek-border); /* Joomla előtag nélküli változata */ --bs-accordion-btn-color: var(--ejkek-text); --accordion-btn-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-accordion-active-bg: var(--ejkek-bg2); --accordion-active-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-accordion-active-color: var(--ejkek-accent); --accordion-active-color: var(--ejkek-accent); /* Joomla előtag nélküli változata */ } /* Olvasósáv sötét módban: a tartalom max. 75rem (~1200px) széles, középre zárva — kivetítő módban marad a teljes kifutás */ html:not([data-ejkek-mode="kivetito"]) .site-grid .container-component, html:not([data-ejkek-mode="kivetito"]) .site-grid .container-top-a, html:not([data-ejkek-mode="kivetito"]) .site-grid .container-top-b, html:not([data-ejkek-mode="kivetito"]) .site-grid .container-bottom-a, html:not([data-ejkek-mode="kivetito"]) .site-grid .container-bottom-b { max-width: 75rem; width: 100%; margin-inline: auto; } /* Cikk címe és törzse között nagyobb térköz — minden nézetben (kiemelt/főoldali nézet: .item-title; blog-nézet és cikkoldal: .page-header), mindkét módban */ h1.item-title, h2.item-title, .com-content .page-header, .item-page .page-header, .blog-item .page-header { margin-bottom: 2rem; } .com-content .page-header h1, .com-content .page-header h2 { margin-bottom: 0; /* a térközt egységesen a blokk adja, ne a címsor */ } /* ha a cím alatt cikkadatok (szerző, dátum) is látszanak, azok után is legyen levegő */ .com-content .article-info { margin-bottom: 1.5rem; } blockquote, .blockquote { border-left: 4px solid var(--ejkek-accent); background: var(--ejkek-bg2); padding: .8em 1.2em; border-radius: 0 .6rem .6rem 0; color: var(--ejkek-text2); } hr { border-color: var(--ejkek-border); opacity: 1; } code, pre { color: #8fd3ff; background: var(--ejkek-bg2); border-radius: .35rem; } pre { padding: 1em; border: 1px solid var(--ejkek-border); } html[data-ejkek-mode="kivetito"] code, html[data-ejkek-mode="kivetito"] pre { color: #003f76; } /* ---------- 6) ŰRLAPOK, KERESŐ ---------- */ .form-control, .form-select, .form-check-input { background-color: var(--ejkek-bg2); color: var(--ejkek-text); border-color: var(--ejkek-border); } .form-control:focus, .form-select:focus { background-color: var(--ejkek-bg2); color: var(--ejkek-text); border-color: var(--ejkek-accent); box-shadow: 0 0 0 .2rem rgba(var(--link-hover-color-rgb), .25); } .form-control::placeholder { color: var(--ejkek-text2); } /* Lenyíló mezők: a Cassiopeia világos SVG-hátterét saját, témához illő nyílra cseréljük (sötétben világos, kivetítőben sötét) */ .form-select, .custom-select { background-color: var(--ejkek-bg2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239fb0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"), var(--form-select-bg-icon, none); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem, 1.5rem; color: var(--ejkek-text); border-color: var(--ejkek-border); } html[data-ejkek-mode="kivetito"] .form-select, html[data-ejkek-mode="kivetito"] .custom-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"), var(--form-select-bg-icon, none); } .btn-primary { --bs-btn-bg: var(--ejkek-accent); --btn-bg: var(--ejkek-accent); /* Joomla előtag nélküli változata */ --bs-btn-border-color: var(--ejkek-accent); --btn-border-color: var(--ejkek-accent); /* Joomla előtag nélküli változata */ --bs-btn-color: var(--ejkek-accent-text); --btn-color: var(--ejkek-accent-text); /* Joomla előtag nélküli változata */ --bs-btn-hover-bg: var(--ejkek-link); --btn-hover-bg: var(--ejkek-link); /* Joomla előtag nélküli változata */ --bs-btn-hover-border-color: var(--ejkek-link); --btn-hover-border-color: var(--ejkek-link); /* Joomla előtag nélküli változata */ --bs-btn-hover-color: var(--ejkek-accent-text); --btn-hover-color: var(--ejkek-accent-text); /* Joomla előtag nélküli változata */ --bs-btn-active-bg: var(--ejkek-link); --btn-active-bg: var(--ejkek-link); /* Joomla előtag nélküli változata */ --bs-btn-active-color: var(--ejkek-accent-text); --btn-active-color: var(--ejkek-accent-text); /* Joomla előtag nélküli változata */ font-weight: 600; } /* ---------- 7) TÁBLÁZAT, LAPOZÓ, MORZSAMENÜ, CÍMKÉK ---------- */ .table { --bs-table-bg: transparent; --table-bg: transparent; /* Joomla előtag nélküli változata */ --bs-table-color: var(--ejkek-text); --table-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-table-border-color: var(--ejkek-border); --table-border-color: var(--ejkek-border); /* Joomla előtag nélküli változata */ --bs-table-striped-bg: var(--ejkek-bg2); --table-striped-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-table-striped-color: var(--ejkek-text); --table-striped-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ --bs-table-hover-bg: var(--ejkek-bg2); --table-hover-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-table-hover-color: var(--ejkek-text); --table-hover-color: var(--ejkek-text); /* Joomla előtag nélküli változata */ } .pagination { --bs-pagination-bg: var(--ejkek-surface); --pagination-bg: var(--ejkek-surface); /* Joomla előtag nélküli változata */ --bs-pagination-color: var(--ejkek-link); --pagination-color: var(--ejkek-link); /* Joomla előtag nélküli változata */ --bs-pagination-border-color: var(--ejkek-border); --pagination-border-color: var(--ejkek-border); /* Joomla előtag nélküli változata */ --bs-pagination-hover-bg: var(--ejkek-bg2); --pagination-hover-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-pagination-hover-color: var(--ejkek-accent); --pagination-hover-color: var(--ejkek-accent); /* Joomla előtag nélküli változata */ --bs-pagination-active-bg: var(--ejkek-accent); --pagination-active-bg: var(--ejkek-accent); /* Joomla előtag nélküli változata */ --bs-pagination-active-border-color: var(--ejkek-accent); --pagination-active-border-color: var(--ejkek-accent); /* Joomla előtag nélküli változata */ --bs-pagination-active-color: var(--ejkek-accent-text); --pagination-active-color: var(--ejkek-accent-text); /* Joomla előtag nélküli változata */ --bs-pagination-disabled-bg: var(--ejkek-bg2); --pagination-disabled-bg: var(--ejkek-bg2); /* Joomla előtag nélküli változata */ --bs-pagination-disabled-color: var(--ejkek-text2); --pagination-disabled-color: var(--ejkek-text2); /* Joomla előtag nélküli változata */ --bs-pagination-disabled-border-color: var(--ejkek-border); --pagination-disabled-border-color: var(--ejkek-border); /* Joomla előtag nélküli változata */ } .breadcrumb { --bs-breadcrumb-bg: transparent; --breadcrumb-bg: transparent; /* Joomla előtag nélküli változata */ --bs-breadcrumb-divider-color: var(--ejkek-text2); --breadcrumb-divider-color: var(--ejkek-text2); /* Joomla előtag nélküli változata */ --bs-breadcrumb-item-active-color: var(--ejkek-text2); --breadcrumb-item-active-color: var(--ejkek-text2); /* Joomla előtag nélküli változata */ } .badge.bg-primary, .tag-list .badge { background-color: var(--ejkek-accent) !important; color: var(--ejkek-accent-text) !important; } /* ---------- 8) LÁBLÉC, VISSZA A TETEJÉRE ---------- */ .footer { background-image: none; border-top: 1px solid var(--ejkek-border); } html[data-ejkek-mode="kivetito"] .footer, html[data-ejkek-mode="kivetito"] .footer a:not(.btn) { color: var(--ejkek-text); } .back-to-top-link { background-color: var(--ejkek-accent) !important; color: var(--ejkek-accent-text) !important; } /* ---------- 9) MÓDVÁLTÓ GOMB (user.js szúrja be) ---------- */ .ejkek-mode-btn { display: inline-flex; align-items: center; gap: .45em; height: var(--ejkek-ctrl-h); padding: 0 1em; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ejkek-text); background: var(--ejkek-surface); border: 1.5px solid var(--ejkek-border); border-radius: .6rem; cursor: pointer; transition: border-color .2s, background .2s; } .ejkek-mode-btn:hover, .ejkek-mode-btn:focus-visible { border-color: var(--ejkek-accent); color: var(--ejkek-accent); } .container-header .container-nav .ejkek-mode-btn { align-self: center; margin-block: .25rem; margin-inline-start: auto; /* felső menü esetén a menüsor jobb szélén */ } /* Tableten és telefonon (992px alatt) nincs logó és nincs módváltó gomb — csak teljes (asztali) képernyőn jelennek meg */ @media (max-width: 991.98px) { .container-header .navbar-brand, .container-header .site-description, .container-header > .grid-child:has(.navbar-brand), .container-header .ejkek-brand-row, .ejkek-mode-btn { display: none !important; } } /* ---------- EGYSOROS FEJLÉC nagy képernyőn: logó · menü · gomb ---------- A Cassiopeia alapból külön sorba teszi a márkasort és a menüsort; lg (992px) fölött egy vízszintes sorba rendezzük őket. */ @media (min-width: 992px) { .container-header { display: flex; align-items: center; flex-wrap: wrap; column-gap: 1.5rem; /* a tartalom 82.5rem-es (xxl) rácsához igazítva */ padding-inline: max(calc((100% - 82.5rem) / 2 + .75rem), 1rem); } /* topbar / below-top modulok maradjanak teljes szélességű sorok */ .container-header > .container-topbar, .container-header > .container-below-top { flex: 1 1 100%; } .container-header > .grid-child { width: auto; max-width: none; margin: 0; padding: .75rem 0; } /* a logós blokk csak akkora, amekkora a tartalma */ .container-header > .grid-child:has(.navbar-brand) { flex: 0 0 auto; } /* a menüsáv tölti ki a maradék helyet */ .container-header > .container-nav { flex: 1 1 auto; padding-bottom: .75rem; } .container-header .container-nav nav { margin-top: 0; } /* a menü ne kényszerítse új sorba a gombot */ .container-header .container-nav .mod-menu { flex: 1 1 auto; } } /* ---------- 10) FINOMHANGOLÁS ---------- */ ::selection { background: var(--ejkek-accent); color: var(--ejkek-accent-text); } img { border-radius: .4rem; } a { text-underline-offset: .18em; } /* Kivetítő módban vastagabb, kontrasztosabb hivatkozás */ html[data-ejkek-mode="kivetito"] a { font-weight: 600; } /* Finom átmenet módváltáskor */ .container-header, .footer, .card, .form-control, .form-select { transition: background-color .3s ease, border-color .3s ease, color .3s ease; } /* Nyomtatásnál mindig világos */ @media print { body.site { background: #fff !important; color: #000 !important; } .ejkek-mode-btn { display: none !important; } }