/* ========================================================================= almanach-admin — a Django admin LEKEPEZESE az Almanach design systemre ------------------------------------------------------------------------- ⛔⛔ EZ A FAJL NEM DESIGN-FORRAS. Egyetlen szint, meretet vagy betut sem definial: kizarolag a Django admin sajat osztalyait koti hozza a design system TOKENJEIHEZ (`almanach-tokens.css`). A design system szabalya (almanach-design-system/CLAUDE.md 2.): "Uj szin / tavolsag / tipografia / komponens SOHA nem a fogyasztó repoban keletkezik." ⚠️ Ezert itt MINDEN ertek `var(--token)`. Ha valamihez nincs token, az nem ide kerul kitalalt ertekkent, hanem a design systembe — kulon feladatkent. Betoltesi sorrend (kotott): almanach-tokens.css -> almanach-components.css -> EZ A FAJL A `` a PRODUCT modot kapcsolja be (sarok + sienna szoveg). ⭐ Ket szabaly a design systembol, ami itt is all: 1. a hatterszin MINDIG `background-color`, soha a `background` rovidites (az torolne a papir-texturat); 2. nincs arnyek es nincs szinatmenet (`--shadow: none`). ========================================================================= */ /* ========================================================================= 1. A DJANGO ADMIN SAJAT VALTOZOI -> ALMANACH TOKENEK ------------------------------------------------------------------------- ⭐⭐ EZ A REGISZTER LEGFONTOSABB RESZE, es szerkezeti okbol az: A Django admin 4/5 CSS-VALTOZO alapu. Ha a valtozokat kotjuk a tokenekhez, akkor MINDEN admin-szabaly magatol a helyes szint kapja — a sajat CSS-unkben nem kell szelektoronkent versenyezni. ⛔ MERVE (2026-09-10), miert NEM eleg a szelektor-alapu felulirás: a lapon a CSS-ek IGY toltodnek be — base.css -> dark_mode.css -> nav_sidebar.css -> [A MI CSS-UNK] -> changelists.css -> responsive.css ...vagyis a Django KET fajlja A MIENK UTAN jon (a `change_list.html` sajat `extrastyle` blokkot definial). Azonos specificitasnal tehat OK nyernek. Egy konkret aldozat: `#nav-sidebar caption a` -> `rgb(255,255,204)` (halvanysarga a vilagos hatteren), amit a `caption`-re irt szabalyunk nem ert el. ⚠️ A `dark_mode.css` ugyanezeket a valtozokat irja felul sotet modban. A rendszernek EGY felulete van, ezert a `prefers-color-scheme: dark` agban is UGYANEZT allitjuk be — kulonben a felhasznalo gepenek beallitasa donthetne el, hogy milyen az arculat. ========================================================================= */ :root, html[data-theme="light"], html[data-theme="dark"] { /* ⚠️ NEVUTKOZES: a Django admin ES a design system is `--accent`-et hasznal. Ezert itt a PALETTA-retegre (`--sienna`) hivatkozunk, ami egyedi. */ --primary: var(--sienna); --secondary: var(--app-shell); --accent: var(--sienna); --primary-fg: var(--text-on-accent); --body-fg: var(--text-primary); --body-bg: var(--app-page); /* ⚠️ MERVE (2026-09-10, kontraszt-kapu): a `--text-muted` (`--ink-3`, #7A6E5C) a papir hatteren 4.35:1 — a WCAG AA 4.5-ot kiván. ⭐ A design system EROL MAGA GONDOSKODIK: az `--ink-3-aa` "az Ink 3 sotetebb valtozata, HA AA KELL". */ --body-quiet-color: var(--ink-3-aa); --body-medium-color: var(--text-secondary); --body-loud-color: var(--text-primary); --header-color: var(--text-secondary); --header-branding-color: var(--text-primary); --header-bg: var(--app-shell); --header-link-color: var(--text-primary); --breadcrumbs-fg: var(--ink-3-aa); --breadcrumbs-link-fg: var(--text-secondary); --breadcrumbs-bg: var(--app-fill); /* ⚠️ MERVE (2026-09-10): a `--link-selected-fg` `var(--sienna)` volt — a PALETTA akcentusa (#A85A2A), ami SZOVEGKENT csak 4.4:1. A design system kimondja: "akcentus szovegben: `--sienna-text` (5.4:1)". A `--sienna` FOLTNAK valo (gomb-hatter), nem kis szovegnek. */ --link-fg: var(--sienna-text); --link-hover-color: var(--sienna-text); --link-selected-fg: var(--sienna-text); --hairline-color: var(--app-line-soft); --border-color: var(--app-line); --error-fg: var(--bordeaux); --message-success-bg: var(--app-raised); --message-warning-bg: var(--app-raised); --message-error-bg: var(--app-raised); --darkened-bg: var(--app-fill); --selected-bg: var(--app-fill); --selected-row: var(--surface-alt); --button-fg: var(--text-on-accent); --button-bg: var(--sienna); --button-hover-bg: var(--sienna-text); --default-button-bg: var(--sienna); --default-button-hover-bg: var(--sienna-text); --close-button-bg: var(--ink-3-aa); --close-button-hover-bg: var(--text-secondary); --delete-button-bg: var(--bordeaux); --delete-button-hover-bg: var(--bordeaux); --object-tools-fg: var(--text-on-accent); --object-tools-bg: var(--sienna); --object-tools-hover-bg: var(--sienna-text); --font-family-primary: var(--font-serif); --font-family-monospace: var(--font-mono); } /* ⚠️ A rendszernek EGY felulete van: a bongeszo sotet beallitasa NEM valthat arculatot. A `dark_mode.css` ugyanezeket a valtozokat irja at — visszaallitjuk. */ @media (prefers-color-scheme: dark) { :root { --body-fg: var(--text-primary); --body-bg: var(--app-page); --body-quiet-color: var(--text-muted); --body-medium-color: var(--text-secondary); --body-loud-color: var(--text-primary); --header-color: var(--text-secondary); --header-bg: var(--app-shell); --header-link-color: var(--text-primary); --header-branding-color: var(--text-primary); --breadcrumbs-fg: var(--text-muted); --breadcrumbs-bg: var(--app-fill); --link-fg: var(--sienna-text); --hairline-color: var(--app-line-soft); --border-color: var(--app-line); --darkened-bg: var(--app-fill); --selected-bg: var(--app-fill); --selected-row: var(--surface-alt); } } html { color-scheme: light; } /* --- alap felulet -------------------------------------------------------- */ body { background-color: var(--app-page); color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-small); line-height: var(--lh-small); } /* A Django admin sajat linkszinei -> a rendszer akcentusa. */ a:link, a:visited { color: var(--link); } a:focus, a:hover { color: var(--accent); } /* --- fejlec -------------------------------------------------------------- */ #header { background-color: var(--app-shell); color: var(--text-primary); border-bottom: var(--hairline) solid var(--border-hairline); padding: var(--space-3) var(--space-5); } #header a:link, #header a:visited { color: var(--text-secondary); } #header a:hover { color: var(--accent); } #branding h1 { font-family: var(--font-serif); font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: normal; /* ⛔ a rendszer nem visel verzal azonositot */ margin: 0; } #branding h1 a:link, #branding h1 a:visited { color: var(--text-primary); } /* ⭐ A gepi informacio monospace — ez a rendszer egyik ismertetojele. */ #user-tools { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--lh-label); letter-spacing: normal; text-transform: none; /* ⛔ verzal azonosito tiltott */ color: var(--text-secondary); } /* ⛔ MERVE (2026-09-10): a kijelentkezes gomb `color: rgb(255,255,255)` volt ATLATSZO hatteren — vagyis FEHER SZOVEG a vilagos fejlecen, olvashatatlanul. A Django 5-ben ez egy