/* A DESIGN NYELVE — minden érték egy helyen. * * Ez a fájl nem öltöztet semmit: neveket ad az értékeknek. A többi stíluslap * kizárólag ezekre hivatkozik, ezért egy arculatváltás ITT történik, nem * százhúsz helyen. * * Ha egy színt vagy méretet keresel: itt van. Ha egy LAP kinézetét keresed: * lásd docs/CSS-TERKEP.md. */ :root { /* --- SZÍNEK --------------------------------------------------------- * Szerep szerint nevezve, nem árnyalat szerint: a "halk szöveg" akkor is * halk szöveg marad, ha egyszer más szürkére váltunk. */ /* Szöveg, a leghangsúlyosabbtól a leghalványabbig */ --szin-szoveg: #0f172a; --szin-szoveg-kozep: #475569; --szin-szoveg-halk: #64748b; --szin-szoveg-halvany: #94a3b8; /* Felületek */ --szin-lap: #fff; /* kártyák, sorok háttere */ --szin-hatter-halk: var(--alap-hatter-halk); /* enyhén kiemelt sáv */ --szin-hatter-kiemelt: #f1f5f9; /* fejlécsor, jelölőcímke */ /* Vonalak */ --szin-keret: #cbd5e1; /* kártya- és dobozkeret */ --szin-keret-halk: #e2e8f0; /* belső elválasztó */ --szin-valaszto: #eef2f7; /* sorok közti hajszálvonal */ /* Jelentés: mit mond a szín */ --szin-hivatkozas: #2563eb; --szin-veszely: #dc2626; --szin-veszely-sotet: var(--alap-veszely-sotet); --szin-veszely-halk: #fee2e2; --szin-rendben: #16a34a; --szin-rendben-sotet: #15803d; --szin-rendben-halk: #dcfce7; --szin-rendben-elenk: #22c55e; /* ejtés és felvillanás jelzése */ --szin-figyelem: #b45309; --szin-figyelem-halk: #fef3c7; --szin-kivansag: #a16207; /* utaskívánság szövege */ --szin-kivansag-lap: #FEFCE8; /* a hozzá tartozó buborék */ --szin-kivansag-keret: #FACC15; /* Egyedi árnyalatok, amiket egy-egy helyen használunk */ --szin-szoveg-sotet: #334155; /* időpontok, hangsúlyos adat */ --szin-veszely-lap: #fef2f2; /* túltöltött autó sora */ --szin-kuldetes: #166534; /* külön küldetés felirata */ --szin-sav-halvany: #fbfdff; /* váltakozó sorháttér */ --szin-hiany-lap: #fffbeb; /* hiányzó adat kiemelése */ --szin-as-lap: #e0e7ff; /* "After Sessions" jelölő */ --szin-as-szoveg: #3730a3; --szin-sav-kezd: #f59e0b; /* beosztási sáv: alig van kész */ --szin-sav-fele: #3b82f6; /* beosztási sáv: félúton */ --szin-uj-lap: #f0fdf4; /* frissen felvett sor háttere */ --szin-jelzes: #fbbf24; /* a "v2" címke a sávban */ --szin-uj-ertek: #065f46; /* a naplóban az új érték */ --szin-foto-arnyek: rgb(0 0 0 / 25%); /* igazolványkép lebegő árnyéka */ /* A felső sáv: sötét háttér, rajta halványabb szövegek. A sáv színe * korábban a v1 stíluslapjában lakott (--color-nav), és a v1 törlésekor * deklarálatlanul maradt - a háttér ettől lett átlátszó. */ --szin-sav: #232742; /* a fejléc sávjának háttere */ --szin-sav-aktiv: var(--alap-elsodleges); /* az aktív fül alatti vonal */ --szin-sav-szoveg: #cdd0e6; --szin-sav-halk: #9aa0c0; /* A forduló állapotai az utaslistákon. Ezt a hármat a szervező szeme * kereste meg először, ezért külön néven él. */ --szin-jovahagyva: #C6D4C5; /* lezárt forduló utasai */ --szin-ertesitve: #DCE7DB; /* akinek már ment értesítés */ --szin-fuggo: #F7F0FF; /* még javaslat */ /* A terhelés-sáv, ha az autónak nincs saját színe. Ezekre a HTML-t * előállító kód hivatkozik, inline style-ban - de innen jönnek. */ --szin-flotta-minta: var(--szin-keret-halk); /* színminta szín nélküli autónál */ --szin-flotta-sav: var(--szin-szoveg-halvany); /* a terhelés sávja ugyanígy */ /* --- AZ ALAPRÉTEG PALETTÁJA --------------------------------------- * A lap, a gombok, a táblázatok és a jelvények színei. Külön csoport, * mert ez a "keret", amiben a lapok élnek - a fentiek pedig a lapokon * belüli tartalom színei. A kettő egyszer összevonható; addig is egy * arculatváltás mindkettőt itt találja. */ --alap-lap-hatter: #f1f3f8; /* a böngészőablak háttere */ --alap-lap: #ffffff; /* a tartalmi doboz */ --alap-szoveg: #1e2433; --alap-szoveg-halk: #667085; --alap-keret: #e2e6ef; --alap-hatter-halk: #f8fafc; --alap-elsodleges: #4338ca; /* gomb, fókusz, aktív fül */ --alap-elsodleges-sotet: #312e81; --alap-elsodleges-vilagos: #5647d9; --alap-fokusz-halo: #eef0ff; --alap-veszely: #b91c1c; --alap-veszely-sotet: #7f1d1d; --alap-veszely-vilagos: #cc2323; --alap-jelveny: #eceef3; --alap-jelveny-szoveg:#4b5563; --alap-gomb-el: #c7ccd9; /* a gomb alsó éle */ --alap-gomb-el-sotet: #b7bdcc; /* Az üzenetdobozok (hiba, figyelmeztetés, siker) saját árnyalatai */ --alap-uzenet-hiba-keret: #fecaca; --alap-uzenet-figy-szoveg: #92400e; --alap-uzenet-figy-keret: #fde68a; --alap-uzenet-siker-lap: #ecfdf5; --alap-uzenet-siker-keret: #a7f3d0; --alap-jelveny-piros: #991b1b; --alap-betu: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --alap-arny-lap: 0 16px 42px rgba(16,24,40,.18); --alap-arny-kartya: 0 8px 22px rgba(16,24,40,.13); --alap-arny-gomb: 0 1px 2px rgba(16,24,40,.08); /* Alig látható szemcse a nagy fehér felületeken: a tartalmi doboz és a * kártyák így nem laposan világítanak. Egy beágyazott SVG-zaj, 0.035 * áttetszőséggel - hálózati kérés nélkül. */ --alap-szemcse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* --- BETŰMÉRETEK ---------------------------------------------------- * Nyolc lépcső, szerep szerint. Az értékek a mostaniak: az arculatváltás * ezeket írja át, nem a szabályokat. */ --betu-apro: 9.5px; /* táblázat-oszlopfejléc, nagybetűs jelölés */ --betu-jelolo: 10.5px; /* mezőcímke, lábjegyzet */ --betu-kicsi: 11.5px; /* kiegészítő adat a sorban */ --betu-alap: 12px; /* sorok, kártyák alapszövege */ --betu-urlap: 13px; /* beviteli mező, fül, gomb */ --betu-kiemelt: 14px; /* kiemelt szám, belépőmező */ --betu-cim: 15px; /* márkanév, lapcím */ --betu-fejezet: 18px; /* a belépőkártya címe */ /* A TÉRKÖZÖK SZÁNDÉKOSAN NEM TOKENEK. * * Volt itt egy kilencfokú lépcsősor, de a stíluslapok 223 térköze közül * összesen hatot használt - aki ránézett, joggal hitte, hogy a térközök * egy helyről állíthatók, holott nem. A fél megoldás rosszabb, mint a * semmi: a térköz mostantól ott áll, ahol hat, a témalapban. * * Amit érdemes egy helyről állítani - szín, betűméret, sarok, árnyék -, * az itt van fent. Ha egyszer a térköz is idekerül, akkor MIND kerüljön. */ /* --- SAROKKEREKÍTÉS ------------------------------------------------- */ --ker-apro: 4px; /* jelölő, kis gomb */ --ker-kicsi: 6px; /* sor, mező */ --ker-alap: 8px; /* kártya, doboz */ --ker-nagy: 12px; /* lappanel */ --ker-teljes: 999px; /* pirula alakú jelölő */ /* --- ÁRNYÉKOK ------------------------------------------------------- * Magasság szerint: minél feljebb van egy elem, annál lágyabb és nagyobb. */ --arny-sav: 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(15,23,42,.18); --arny-buborek: 0 6px 18px rgba(15,23,42,.18); --arny-szerkeszto: 0 6px 16px rgba(15,23,42,.12); /* sor alatt nyíló panel */ --arny-panel: 0 8px 22px rgba(15,23,42,.16); --arny-lebego: 0 10px 24px rgba(15,23,42,.18); --arny-belepes: 0 10px 30px rgba(15,23,42,.12); --arny-ertesites: 0 8px 22px rgba(15,23,42,.28); --arny-foto: 0 8px 24px var(--szin-foto-arnyek); /* A három nézet töréspontjai NEM tokenek: a @media szabály nem fogad el * var()-t, így a szám úgyis a 99-nezetek.css-ben állna. Ott is van, egy * példányban, a fájl fejlécében leírva - ide másolva csak elcsúszhatna. */ }