/* ══════════════════════════════════════════════════════════════ weblockai — AZ „A” ARCULAT MINTÁJA (2026-09-29) /assets/arculat-a.css A user a három irányból az A-t választotta (Higgsfield-irány), világos móddal és Higgsfield-féle lekerekítéssel („kerekítsük le a széleket”). CSAK AKKOR töltődik, ha a `wlai_arculat=a` süti él (`?arculat=a`, kikapcsolás `?arculat=0`). Mindenki más a mostani felületet látja. 🔑 A SÁVOK (bal, jobb, felső) MINDKÉT MÓDBAN FEKETÉK: a világos tartalmat erős fekete keret fogja össze, ahogy eddig a navy. 🔑 VILÁGOSBAN a „tinta” a fekete: a lime csak fekete tömbön jelenik meg (fehéren elsápadna). A kijelölés fekete blokk lime felirattal. 🔑 A komponens-szabályok `:root`-tal kezdődnek, mert a lapok saját stílusa (pl. a filmtervezőé) később töltődik; így ez nyer. ══════════════════════════════════════════════════════════════ */ /* ── Közös: betű, sarok, sávok ── */ :root{ --font-fo: 'Anton', 'Inter', system-ui, sans-serif; /* 2026-10-24, a user: „a dobozok sarkai az egész felületen kicsit nagyobb rádiusszal, csak egy picit” (16 → 20, 18 → 22) */ --r: 10px; --r-lg: 12px; --r-xl: 22px; --doboz-sarok: 20px; --hej-1: var(--m-fekete); --hej-2: var(--m-fekete); --hej-lap: var(--m-sotet-doboz); --hej-vonal: rgba(var(--m-feher-rgb),.08); --hej-vonal-2: rgba(var(--m-feher-rgb),.16); --hej-szoveg: var(--m-feher-tort); --hej-halk: var(--m-szurke-halk); --hej-halk-2: var(--m-szurke-kozep); --fej-bg: var(--m-fekete); --fej-bg-hover: var(--m-szurke-hover); } /* ── SÖTÉT ── */ :root[data-theme="dark"]{ --bg: var(--m-fekete); --bg-card: var(--m-sotet-doboz); --bg-card-hover: var(--m-szurke-felulet); --bg-sunken: var(--m-sotet-sav); --bg-elevated: #1b1e21; --bg-blur: rgba(var(--m-fekete-rgb),.88); --border: #1f242d; --border-strong: var(--m-sotet-vonal); --field-border: var(--m-sotet-vonal); --card-ring: transparent; --text: var(--m-feher-tort); --text-muted: var(--m-szurke-csendes); --text-dim: var(--m-szurke-halk); --accent-ink: var(--m-lime); --accent-line: var(--m-lime); --accent-soft: rgba(var(--m-lime-rgb),.10); --accent-edge: rgba(var(--m-lime-rgb),.35); --doboz-keret: var(--m-sotet-aktiv); } /* ── VILÁGOS: papír alap, fekete tinta ── */ :root[data-theme="light"]{ --bg: var(--m-feher-tort); --bg-card: var(--m-feher); --bg-card-hover: #fafaf7; --bg-sunken: var(--m-vilagos-sav); --bg-elevated: #f7f7f3; --bg-blur: rgba(242,242,238,.9); --border: #e0e0d8; --border-strong: #cfcfc7; --field-border: #cfcfc7; --card-ring: transparent; --text: var(--m-fekete-mely); --text-muted: #55565c; --text-dim: #66676d; --accent-ink: var(--m-fekete-mely); --accent-line: var(--m-fekete-mely); --accent-soft: var(--m-vilagos-sav); --accent-edge: var(--m-fekete-mely); --doboz-keret: var(--m-vilagos-vonal); } /* a lap sarkaiban lévő halvány fény: világosban kivesszük, a papír tiszta */ :root[data-theme="light"] body::before{ background: none; } /* ── Címek: Anton, csupa nagybetű (a logó betűje) ── */ :root :is(h1, .head h1, .lapcim, .md-lap > h2, .dont-cim){ font-family: 'Anton', 'Inter', system-ui, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .01em; } /* ── A BAL SÁV ── */ :root .wh-menu .sav-pont{ color: var(--m-szurke-halk); border-radius: var(--r-lg); } :root .wh-menu .sav-pont .lep-ikon{ color: var(--m-szurke-halk); } :root .wh-menu .sav-pont:hover{ background: var(--m-szurke-hover); color: var(--m-feher); } :root .wh-menu .sav-pont:hover .lep-ikon{ color: var(--m-feher); } :root .wh-menu .sav-pont.itt{ background: var(--m-lime); border-color: var(--m-lime); color: var(--m-fekete); font-weight: 700; border-radius: var(--r-lg); } :root .wh-menu .sav-pont.itt .lep-ikon, :root .wh-menu .sav-pont.itt .lep-jel{ color: var(--m-fekete); } /* ── A JOBB SÁV ── */ :root .jobbsav .wh-sav-gomb, :root .jobbsav .rb-gomb{ border-radius: var(--r-lg); } /* ── GOMBOK ── */ :root .btn{ border-radius: var(--r-lg); } :root[data-theme="light"] .btn--lime{ box-shadow: inset 0 0 0 2px var(--m-fekete-mely); } /* ── KIJELÖLÉS: sötétben lime tömb, világosban fekete tömb lime felirattal ── */ :root :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt){ background: var(--m-lime) !important; color: var(--m-fekete) !important; border-color: var(--m-lime) !important; box-shadow: none !important; } :root :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt) :is(small, span, b, .i, .esz-abra){ color: var(--m-fekete) !important; stroke: currentColor; } :root[data-theme="light"] :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt){ background: var(--m-fekete-mely) !important; color: var(--m-lime) !important; border-color: var(--m-fekete-mely) !important; } :root[data-theme="light"] :is(.md-lepesek button.itt, .md-blokk.itt, .mf-valaszt.itt, .nz-pont.itt) :is(small, span, b, .i, .esz-abra){ color: var(--m-lime) !important; } /* A lépés ikon-köre a kijelölt lépésen: a tömb ellentéte (különben lime ikon lime körön). */ :root .md-lepesek button.itt .jel{ background: var(--m-fekete) !important; } :root .md-lepesek button.itt .jel, :root .md-lepesek button.itt .jel .i{ color: var(--m-lime) !important; } :root[data-theme="light"] .md-lepesek button.itt .jel{ background: var(--m-lime) !important; } :root[data-theme="light"] .md-lepesek button.itt .jel, :root[data-theme="light"] .md-lepesek button.itt .jel .i{ color: var(--m-fekete-mely) !important; } /* A „most itt tartasz” doboz: világosban fekete keret, lime-os címke fekete alapon. */ :root[data-theme="light"] .md-most-cimke{ display: inline-block; justify-self: start; background: var(--m-fekete-mely); color: var(--m-lime); padding: 2px 8px; border-radius: 6px; } /* ── DOBOZOK és KÁRTYÁK: Higgsfield-sarok ── */ :root :is(.sec, .md-lap, .um-snitt, .um-lepes, .mf-blokk, .md-blokk, .md-most, .um-prompt, .mf-prompt > div){ border-radius: var(--doboz-sarok); } :root :is(.um-lepes, .um-prompt, .mf-prompt > div){ border-radius: var(--r-lg); } /* ══ 2. KÖR (2026-09-29, a user: „ékezet, üres tér, faltól falig, szellősebb”) ══ */ /* ── 1. ÉKEZETEK: az Anton alap-latin készletében nincs ő és ű → a latin-ext készlet is saját szerverről. A böngésző a unicode-range alapján csak akkor tölti le, ha a lapon van ilyen betű. ── */ @font-face{ font-family: 'Anton'; src: url('/assets/fonts/anton-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 3. SZELLŐSEBB: kisebb szövegek nagyobbak, térközök másfélszer ── */ :root{ --fs-meta: 14.5px; --fs-label: 12.5px; --t-0: 12.5px; --t-1: 14px; --t-2: 15.5px; --t-3: 17px; --s3: 14px; --s4: 22px; --s5: 30px; --s6: 40px; --s7: 52px; } body{ line-height: 1.6; } :root .md-app{ gap: 20px; } :root .md-lepesek{ gap: 10px; } :root .md-lepesek button{ padding: 10px 14px; min-height: 52px; } :root .md-munka{ padding: clamp(18px, 2.2vw, 32px); } :root .md-oldal{ gap: 16px; } :root .md-doboz, :root .md-most{ padding: 18px 20px; gap: 12px; } :root .md-lap > p.md-mit{ margin-bottom: var(--s5); } /* ── 2. TELJES KÉP (d): nem a képernyő magasságához igazodik, hanem a tartalomhoz; „A teljes film” idővonal FELÜLRE, a lépések alá, teljes szélességben. ── */ :root .md-app[data-nezet="d"]{ height: auto !important; min-height: 0; grid-template-rows: auto auto auto; grid-template-areas: "fej fej" "ido ido" "munka oldal"; } :root .md-app[data-nezet="d"] :is(.md-munka, .md-oldal){ overflow: visible; } :root .md-app[data-nezet="d"] .md-oldal{ position: sticky; top: calc(var(--fent, var(--hej-magas, 52px)) + 16px); align-self: start; } /* 🔴 2026-10-07 (a user: „legörgetésnél megáll félúton”, majd „a jobb menü így gördülőben még rosszabb. Vedd kisebbre vagy húzd össze, ha nem fér el”): saját görgetés NINCS. Az `arculat-a.js` méri: ha nem fér el, `md-szuk` (összehúzva); ha úgy sem, a `top` negatív lesz, így a hasáb az oldallal gördül, és az ALJÁNÁL áll meg. */ :root .md-app[data-nezet="d"] .md-oldal.md-szuk{ gap: 10px; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk :is(.md-doboz, .md-most){ padding: 12px 14px; gap: 6px; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-most h3{ font-size: var(--b-xl, 1.125rem); line-height: 1.2; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-most p{ line-height: 1.4; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-szamlalo{ gap: 2px 10px; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-szamlalo i{ margin-bottom: 2px; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk .mf-mikell summary{ padding: 8px 14px; } :root .md-app[data-nezet="d"] .md-oldal.md-szuk .md-claude-link{ display: none; } /* az idővonal laposabb, kevesebb légüres rész a kockákban */ :root .md-ido{ padding: 16px 20px 18px; } :root .md-blokk{ height: 48px; padding: 3px 4px 10px; border-radius: var(--r); } :root .md-savok{ gap: 8px 12px; } @media (max-width: 1023px){ :root .md-app[data-nezet="d"]{ grid-template-areas: "fej" "ido" "munka" "oldal"; } :root .md-app[data-nezet="d"] .md-oldal{ position: static; } } /* ══ SNITT-LAP: 3 ELRENDEZÉS-MINTA (2026-09-29) ═════════════════════════ A user: „ez így szar” (a teljes hosszú prompt + nagy margó). Három formájában eltérő elrendezés, a lap sarkában lévő kapcsolóval váltva (`html[data-snitt-minta="1|2|3"]`, az `arculat-a.js` állítja). Mindháromban közös: normál betűs snitt-cím, faltól falig érő idővonal. */ /* közös: a snitt címe nem csupa nagybetűs Anton, hanem félkövér Inter */ :root .um-snitt-fej h3{ font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: var(--b-2xl, 1.375rem) !important; } /* közös: „A teljes film” faltól falig (kilóg a lap belső margójába), keret nélkül */ :root .md-blokk{ height: 52px; } /* a kapcsoló a lap bal alsó sarkában (csak ahol snitt van) */ .am-minta{ position: fixed; right: calc(var(--jsav-w, 56px) + 16px); bottom: 80px; z-index: 60; display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 14px; background: var(--m-fekete); box-shadow: 0 8px 24px rgba(var(--m-fekete-tiszta-rgb),.35); font: 600 14px 'Inter', sans-serif; color: var(--m-szurke-halk); } .am-minta span{ padding: 0 8px; } .am-minta button{ min-width: 44px; min-height: 44px; border-radius: var(--r); border: 0; background: var(--m-szurke-hover); color: var(--m-feher-tort); font: 700 15px 'Inter', sans-serif; cursor: pointer; } .am-minta button[aria-pressed="true"]{ background: var(--m-lime); color: var(--m-fekete); } @media (max-width: 1023px){ .am-minta{ right: 12px; bottom: 80px; } } /* a „Teljes prompt” lenyitó (1 és 2) */ .am-teljes{ display: none; align-self: flex-start; margin-top: -4px; min-height: 44px; padding: 0 4px; border: 0; background: none; font: 700 14px 'Inter', sans-serif; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .am-fulek{ display: none; } /* ── 1 · EGYMÁS ALATT: teljes szélesség, 6 sornyi prompt, gombok egy sorban ── */ html[data-snitt-minta="1"] .md-app .um-ket-lepes{ grid-template-columns: minmax(0, 1fr) !important; gap: 18px; align-items: start; } html[data-snitt-minta="1"] .md-app .um-nyil{ display: none; } html[data-snitt-minta="1"] .md-app .um-lepes{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 12px; padding: 20px 22px; } html[data-snitt-minta="1"] .md-app .um-lepes > :is(.um-lepes-fej, .um-prompt, .um-beall, .ft-ref-hint, .um-miert, .um-halk, .ft-lipsync, .am-teljes){ flex: 1 1 100%; } html[data-snitt-minta="1"] .md-app .um-lepes > .um-lepes-lab{ display: contents; } html[data-snitt-minta="1"] .md-app .md-lap.um-snitt .um-prompt:not(.am-nyitva){ max-height: 9.9em; overflow: hidden; } html[data-snitt-minta="1"] .md-app .am-teljes.kell{ display: inline-block; flex: 0 0 auto; } /* a fő gomb külön sorban, alatta a kisebbek együtt (különben a „Kép feltöltése” egyedül marad) */ html[data-snitt-minta="1"] .md-app .um-lepes > .um-nyit, html[data-snitt-minta="3"] .md-app .um-lepes > .um-nyit{ flex: 0 0 auto; max-width: 100%; margin-right: 100%; } /* ── 2 · KÉT OSZLOP, EGYFORMA: a hosszú prompt elhalványul, a gombok alul egy vonalban ── */ html[data-snitt-minta="2"] .md-app .um-ket-lepes{ align-items: stretch; } html[data-snitt-minta="2"] .md-app .um-lepes{ padding: 20px 22px; gap: 12px; } html[data-snitt-minta="2"] .md-app .md-lap.um-snitt .um-prompt:not(.am-nyitva){ max-height: 14em; overflow: hidden; -webkit-mask-image: linear-gradient(var(--m-fekete-tiszta) 70%, transparent); mask-image: linear-gradient(var(--m-fekete-tiszta) 70%, transparent); } /* a „Kép feltöltése” teljes szélességű, szaggatott „ide húzhatod” sáv (így nem marad egyedül egy sorban) */ html[data-snitt-minta="2"] .md-app .um-lepes > .um-feltolt{ align-self: stretch; justify-content: center; min-height: 52px; } html[data-snitt-minta="2"] .md-app .am-teljes.kell{ display: inline-block; } /* ── 3 · FÜLEK: egyszerre egy lépés, teljes szélességben ── */ html[data-snitt-minta="3"] .md-app .um-ket-lepes{ grid-template-columns: minmax(0, 1fr) !important; gap: 0; } html[data-snitt-minta="3"] .md-app .um-nyil{ display: none; } html[data-snitt-minta="3"] .md-app .am-fulek{ display: flex; gap: 6px; margin-bottom: 14px; } html[data-snitt-minta="3"] .md-app .am-fulek button{ min-height: 48px; padding: 0 20px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); font: 700 15px 'Inter', sans-serif; cursor: pointer; } html[data-snitt-minta="3"] .md-app .am-fulek button[aria-selected="true"]{ background: var(--m-fekete); color: var(--m-lime); border-color: var(--m-fekete); } :root[data-theme="dark"][data-snitt-minta="3"] .md-app .am-fulek button[aria-selected="true"]{ background: var(--m-lime); color: var(--m-fekete); border-color: var(--m-lime); } html[data-snitt-minta="3"] .md-app .um-lepes.am-rejt{ display: none; } html[data-snitt-minta="3"] .md-app .um-lepes{ padding: 22px 24px; gap: 14px; } html[data-snitt-minta="3"] .md-app .md-lap.um-snitt .um-prompt{ max-height: none; overflow: visible; font-size: var(--b-m, .875rem); line-height: 1.7; } html[data-snitt-minta="3"] .md-app .um-lepes{ flex-direction: row; flex-wrap: wrap; align-items: center; } html[data-snitt-minta="3"] .md-app .um-lepes > :is(.um-lepes-fej, .um-prompt, .um-beall, .ft-ref-hint, .um-miert, .um-halk, .ft-lipsync){ flex: 1 1 100%; } html[data-snitt-minta="3"] .md-app .um-lepes > .um-lepes-lab{ display: contents; } /* ══ 4. KÖR (2026-09-29, a user a 3-as mintát választotta, és 4 hibát jelzett) ══ */ /* a kisebb címek normál félkövér betűvel; a címben lévő szürke kiegészítő szöveg sosem Anton */ :root :is(h2, h3, h4) :is(span, small, em){ font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; } :root :is(h2, h3, h4):not(.md-lap > h2){ font-family: 'Inter', system-ui, sans-serif !important; text-transform: none !important; letter-spacing: -0.01em !important; font-weight: 700 !important; } /* a Hollywood Box dobozcímei (10-04): a `--font-fo` itt Anton, ami kicsiben, kisbetűvel, műfélkövérrel olvashatatlan */ :root .hb-doboz-fej b{ font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; } /* a snitt-fejléc: a cím széles helyet kap, a kártya teteje levegőt */ :root .md-lap.um-snitt, :root .um-snitt{ padding: 24px 26px; } :root .um-snitt-fej{ gap: 10px 16px; align-items: center; } :root .um-snitt-fej h3{ flex: 1 1 22rem !important; min-width: 0; line-height: 1.3; } /* „A teljes film”: rendes, lekerekített doboz, kompakt */ :root .md-ido{ border: 1px solid var(--border-strong); border-radius: var(--doboz-sarok) !important; padding: 14px 18px 16px !important; background: var(--bg-card); } :root .md-blokk{ height: 46px; } /* alul kevesebb üres tér */ :root .mf-lap{ padding-bottom: 24px !important; } :root .app-jogi{ margin-top: 24px !important; } :root :is(.nz-lapoz, .md-lab){ margin-top: var(--s4) !important; padding-top: var(--s3) !important; } /* a plán-ikon és felirata egyforma széles helyet kap → a snittcímek egy vonalban kezdődnek */ :root .um-snitt-fej .um-plan small{ display: block; line-height: 1.2; } /* A SNITT-FEJLÉC RÁCSBAN: minden snittnél ugyanott a sorszám, a plán, a cím és jobbra az idő + haladás. (Laza sortöréssel hol a cím, hol az idő csúszott új sorba, és a címek nem egy vonalban kezdődtek.) */ :root .um-snitt-fej{ display: grid !important; grid-template-columns: 2.25rem 6rem minmax(0, 1fr) auto; grid-template-areas: "szam plan cim cim" "szam plan mp halad"; align-items: center; column-gap: 16px; row-gap: 2px; } :root .um-snitt-fej > .um-szam{ grid-area: szam; justify-self: center; } :root .um-snitt-fej > .um-plan{ grid-area: plan; justify-self: center; text-align: center; } :root .um-snitt-fej > h3{ grid-area: cim; flex: none !important; align-self: end; } :root .um-snitt-fej > .um-cimke:not(.um-halad){ grid-area: mp; align-self: start; justify-self: start; white-space: nowrap; } :root .um-snitt-fej > .um-halad{ grid-area: halad; align-self: start; white-space: nowrap; } @media (max-width: 599px){ :root .um-snitt-fej{ grid-template-columns: 2.25rem 4.5rem minmax(0, 1fr) auto; column-gap: 10px; } } /* ══ 5. KÖR: a rendszeres átnézés hibái (mérő: árva elem, kontraszt, érintési méret) ══ */ /* „A teljes film” sávnevei: a színes felirat fehéren olvashatatlan volt (2,0–3,5) → a szöveg a lap színe, csak az ikon színes */ :root .md-savnev{ color: var(--text) !important; } /* a legördülők legalább 44 px (érinthető) */ :root .md-app select{ min-height: 44px; } /* „Milyen hosszú lett…” sor: a gomb ne maradjon egyedül → a szöveg kitölti a sort, a gomb mellette */ :root .ft-igazit > .ft-igazit-mezo{ flex: 1 1 100%; } :root .ft-igazit > span{ flex: 1 1 10rem; } :root .ft-igazit > .btn{ flex: 0 0 auto; } /* a mentési sáv „Forrás” sora szándékosan saját sort kap */ :root .mf-spec > .mf-ell{ flex: 1 1 100%; margin: 0; } /* telefonon a kis adatsávok (beállítás, mentési adatok) két oszlopos rácsban; páratlan számnál az utolsó teljes széles */ @media (max-width: 599px){ /* 🔴 2026-09-30: `:not([hidden])` nélkül a `display: grid !important` a REJTETT adatlapokat is megjelenítette: telefonon az Ötlet lapon mind a 9 platform adatlapja egyszerre látszott. */ :root :is(.mf-beall, .mf-spec):not([hidden]){ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; } :root :is(.mf-beall, .mf-spec) > :last-child:nth-child(odd){ grid-column: 1 / -1; } :root .mf-spec > .mf-ell{ grid-column: 1 / -1; } } /* telefonon: ne maradjon egyedül elem a sorokban (mérve 375 px, Teljes kép nézet) */ @media (max-width: 599px){ :root .mf-meglista li > a{ flex: 1 1 100%; } :root .mf-sor:has(> :nth-child(3):last-child){ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); } :root .mf-fogomb > *{ flex: 1 1 100%; justify-content: center; } :root .md-ido-fej .md-jelmagy{ flex: 1 1 100%; margin-left: 0; } } :root .um-miert{ overflow-wrap: anywhere; min-width: 0; } /* a kis adatsávok 600 px fölött: az elemek kitöltik a sorukat */ @media (min-width: 600px){ /* tördelődhet, de minden elem kitölti a sora maradékát → a hosszú érték saját sort kap, a rövid nem marad árván */ :root .mf-beall > *{ flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } } /* telefonon a snitt-fejléc ideje törhet (különben kilóg) */ @media (max-width: 599px){ :root .um-snitt-fej > .um-cimke{ white-space: normal !important; } } /* ══ 6. KÖR: A TÖBBI LAP (Műhely-eszközök, Fiók, Superadmin), 2026-09-30 ══ Ugyanazzal a mérővel: kontraszt, árva elem, tört rácssor, kilógás, 44 px, 5 szélesség × világos/sötét. 10-24 óta a Hollywood Box is. */ /* ── Szakaszfejléc a kártyán belül: a fekete sávra szabott fehér eszközök (kereső, „mind ki”, darabszám) világosban a lap színeit kapják ── */ :root[data-theme="light"] .sec > .sec-label :is(.sec-mini, .sec-keres){ background: var(--bg-sunken); color: var(--text); border-color: var(--border-strong); } :root[data-theme="light"] .sec > .sec-label .sec-mini:hover{ background: var(--m-fekete-mely); color: var(--m-lime); border-color: var(--m-fekete-mely); } :root[data-theme="light"] .sec > .sec-label .sec-keres::placeholder{ color: var(--text-dim); } :root[data-theme="light"] .sec > .sec-label :is(.sec-count, .sec-osszegzes){ color: var(--text-dim); } /* ── A kimeneti doboz (kész prompt): világosban a címke fekete, a felső csík fekete ── */ :root[data-theme="light"] .out-head b{ color: var(--text) !important; } :root[data-theme="light"] .out::before{ background: var(--m-fekete-mely); } /* ── Magenta: szövegként világosban mélyebb árnyalat (fehéren olvasható), gombon mélyebb alap, hogy a fehér felirat olvasható legyen. A sávok (logó „ai”, felső Hollywood Box gomb) a
-en kívül vannak, azok maradnak. ── */ :root[data-theme="light"] main{ --accent2: var(--m-magenta-gomb); } :root main .btn--magenta{ background: var(--m-magenta-mely); border-color: var(--m-magenta-mely); } /* ── Kész jelvény: lime tömb fekete felirattal mindkét módban ── */ :root .badge--kesz{ background: var(--m-lime) !important; border-color: var(--m-lime) !important; color: var(--m-fekete) !important; } /* ── Kis gombok és választók legalább 44 px (érinthető) ── */ :root :is(.mh-mod-gomb, .auk-form select, .fiok-sor input, .mh-plafon input, .mh-kod, .mh-link, .wh-al-elem){ height: auto; min-height: 44px; } /* ── „A teljes film” idővonal (a user, 09-30: „egymáson van minden”): a sávnév 78 px-es oszlopa kicsi volt („NARRÁCIÓ” belelógott a sávba), a kockák közt 2 px, a sorok közt 4 px volt a rés. ── */ :root .md-savok{ grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; row-gap: 12px; } :root .md-savnev{ text-transform: none; letter-spacing: 0; font-size: var(--b-m, .875rem); font-weight: 600; gap: 8px; white-space: nowrap; } :root .md-savnev .i{ width: 16px; height: 16px; flex: none; } :root .md-sor{ gap: 6px; } :root .md-blokk{ border-radius: 8px; } :root .md-hsav{ border-radius: 4px; } @media (max-width: 760px){ :root .md-savok{ grid-template-columns: 6.5rem auto; column-gap: 10px; } :root .md-sor{ width: calc(var(--db) * 54px); } } /* ── Snitt-kártya (a user, 09-30: „a cím fel van ragasztva, minden oldalon”): a nézetek `.md-lap + .md-lap { padding-top: 0 }` szabálya (0,4,0) elvette a kártya felső térközét → a pontosabb szabály visszaadja. A sorszám a rácsban keskeny csíkká szűkült → fix méretű, a kijelölés színeivel. ── */ :root .md-app[data-nezet] .md-lap.um-snitt{ padding-top: 24px; } :root .um-snitt-fej > .um-szam{ width: 2.25rem; height: 2.25rem; flex: none; align-self: center; border-radius: var(--r); background: var(--m-fekete); color: var(--m-lime); font-size: var(--b-l, 1rem); } :root[data-theme="dark"] .um-snitt-fej > .um-szam{ background: var(--m-lime); color: var(--m-fekete); } /* ── A logó a bal sávban (a user, 09-30: „a logó és a szöveg el van csúszva”): a csapó a név + verziószám blokkjának KÖZEPÉHEZ igazodott, így lejjebb ült a feliratnál. Most a név sorához igazodik. ── */ :root .wh-fej .sav-brand{ align-items: flex-start; } :root .wh-fej .sav-brand::before{ margin-top: 0.02em; } :root .wh-fej .wh-logo-nev{ line-height: 1.05; } /* telefonon a konnektor-sor: a szöveg teljes szélességben, a „Bontás” gomb alatta (148 px-re szorult) */ @media (max-width: 599px){ :root .pkap-sor.lk-kapcs{ grid-template-columns: minmax(0, 1fr); } :root .pkap-sor.lk-kapcs form{ grid-row: auto; grid-column: auto; } } /* a Meta-szabálykönyv táblázata szűk helyen egymás alá tördel (768 px-en 175 px-es oszlop lett) */ @media (max-width: 900px){ :root .ms-doc .md-tabla :is(table, tbody, tr, td){ display: block; width: auto; } :root .ms-doc .md-tabla thead{ display: none; } :root .ms-doc .md-tabla tr{ padding: 10px 0; border-bottom: 1px solid var(--border); } } /* ── Tördelő sorok: az utolsó elem kitölti a sora maradékát, így nem marad egyedül, félszélesen (szövegfelhő-jellegű szűrőcímkéknél nem kell) ── */ :root :is(.auk-muveletek, .adm-szuro, .mh-mod-gombok, .mh-plafon, .mh-tetel-fo, .lv-valtok, .bgk-gombok, .stp-masol, .ut-szakaszok) > :last-child{ flex-grow: 1; } :root :is(.mh-mod-gombok, .bgk-gombok, .stp-masol) > :is(button, a){ justify-content: center; text-align: center; } :root .adm-szuro > .adm-szuro-db{ text-align: right; } /* a projektsor: a dátum a sor végére, kitölti a helyét */ :root .proj-sor > .proj-meta:last-child{ flex-grow: 1; text-align: right; } /* ── TELI SOROK a számkártyákban és adatrácsokban: az oszlopszám az elemszámból ── Telefonon 2 oszlop (páratlannál az utolsó széles), közepes szélességen 3-as egység (a maradék elemek szélesebbek), nagy kijelzőn egy sor. */ :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > *{ grid-column: span 2 !important; } :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs):has(> :nth-child(4):last-child) > *{ grid-column: span 3 !important; } :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs):has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2){ grid-column: span 3 !important; } :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs):has(> :nth-child(3n+4):last-child):not(:has(> :nth-child(4):last-child)) > :last-child, :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > :only-child{ grid-column: span 6 !important; } @media (min-width: 1024px){ :root .adm-szamok:has(> :nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } :root .adm-szamok:has(> :nth-child(4):last-child){ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } :root .adm-szamok:has(> :nth-child(5):last-child){ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } :root .adm-szamok:has(> :nth-child(6):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } :root:root:root .adm-szamok.adm-szamok:not(:has(> :nth-child(7))) > *{ grid-column: auto !important; } } @media (max-width: 599px){ :root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs){ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* (a :root ismétlése a fenti :has()-os szabályok pontosságát üti) */ :root:root:root:root:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > *{ grid-column: auto !important; } :root:root:root:root:root :is(.adm-szamok, .mh-tetel-adat, .mh-urlap .mezo-racs) > :last-child:nth-child(odd){ grid-column: 1 / -1 !important; } } /* ══ 7. KÖR (2026-09-30): a teljes átnézés telefonos és tabletes hibái ══ */ /* ── A lépés-sáv. A 3. kör szellősebb térköze (10 px rés, 14 px párna) telefonon felülírta a lap saját szűk szabályát → az öt gomb nem fért el, a lap 375 px-en 12 px-szel oldalra csúszott, és a menüben a pipák, az avatar, a bezáró X is levágódott. Telefonon vissza a szűk méret. ── */ /* Az ötödik felirat („5. Összevágás”) a leghosszabb: az az oszlop szélesebb, különben kilógott a gombjából (mérve: 375 px-en 6, 320-on 17 px). */ @media (max-width: 1100px){ :root .md-lepesek{ grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); } } @media (max-width: 760px){ :root .md-lepesek{ gap: 4px; } :root .md-lepesek button{ padding: 8px 2px; } :root .md-lepesek .nev{ line-height: 1.25; text-align: center; } } @media (max-width: 420px){ :root .md-lepesek .nev{ font-size: var(--b-xs, .6875rem); letter-spacing: -0.01em; } } /* Tableten (mérve 768 px) a felirat és az állapot egymásra csúszott („3. Hang” és „most ez”), az ötödik gomb felirata kilógott: az állapot a név ALÁ kerül. */ @media (min-width: 761px) and (max-width: 1100px){ :root .md-lepesek{ gap: 6px; } :root .md-lepesek button{ grid-template-columns: 26px minmax(0, 1fr); padding: 8px 10px; row-gap: 1px; } :root .md-lepesek button .jel{ grid-row: span 2; } :root .md-lepesek button small{ grid-column: 2; justify-self: start; } } /* ── „Prompt másolása és megnyitás” gomb: a gombok sormagassága 1, ezért a több sorba törő felirat egymásra és a keretre tapadt. Telefonon a gomb teljes szélességű (a `margin-right: 100%` fogás ott a legszűkebb szélességre nyomta össze, abból lett a három sor). ── */ :root .um-nyit:is(.btn, .wg){ height: auto; line-height: 1.3; padding-top: 9px; padding-bottom: 9px; overflow-wrap: anywhere; } @media (max-width: 599px){ html[data-snitt-minta] .md-app .um-lepes > .um-nyit{ flex: 1 1 100%; margin-right: 0; justify-content: flex-start; } } /* ── 8. KÖR (2026-09-30, a teljes újramérés után) ── A snitt-fejléc keskeny telefonon (mérve 320 px): a cím 97 px-es oszlopba szorult (5 sorba tört), az idő és a haladás egymásra csúszott. 480 px alatt a cím saját, teljes sort kap; fölötte a sorszám, a plán és a haladás, alatta az idő. */ @media (max-width: 480px){ :root .md-lap.um-snitt, :root .um-snitt{ padding: 20px 16px; } :root .um-snitt-fej{ grid-template-columns: 2.25rem auto minmax(0, 1fr); grid-template-areas: "szam plan halad" "cim cim cim" "mp mp mp"; row-gap: 8px; } :root .um-snitt-fej > .um-halad{ justify-self: end; align-self: center; } :root .um-snitt-fej > h3{ align-self: start; } } /* ══ FEHÉR BETŰ MINDEN GOMBON (2026-10-05, a user: „gombokon mindig fehér betűk legyenek az egész projektben”) ══════════════════════════════════════════════════════════════ Ugyanaz, mint a nyilvános lapokon (`plakat.css`): a lime gomb fekete lett lime kerettel, mert fehér a lime-on nem olvasható (1,1:1). Világos témában a fehér hátterű gomb is fekete, különben a fehér felirat eltűnne. A törlés gomb sötét magenta (fehérrel 5,9:1), a figyelmeztető gomb sötét borostyán. A lap saját