/* * innovaLIS — megosztott WebAwesome téma-felülírás. * Minden zóna a /_shared/theme.css-ként tölti (a deploy bemásolja minden zónába). * A -en: class="wa-cloak wa-theme-awesome wa-palette-bright wa-brand-purple"; * a -n: data-fa-kit-code. (A téma/paletta osztályok :root-on KELLENEK a variants.css miatt.) */ :root { --wa-color-neutral-05: #121212; --wa-color-neutral-10: #1e1e1e; --wa-color-neutral-20: #323232; --wa-color-neutral-30: #454545; --wa-color-neutral-40: #595959; --wa-color-neutral-50: #757575; --wa-color-neutral-60: #959595; --wa-color-neutral-70: #aeaeae; --wa-color-neutral-80: #c9c9c9; --wa-color-neutral-90: #e5e5e5; --wa-color-neutral-95: #f2f2f2; --wa-font-family-body: Quicksand, sans-serif; --wa-font-family-heading: Quicksand, sans-serif; --wa-font-family-code: ui-monospace, monospace; --wa-font-family-longform: "Crimson Pro", serif; --wa-font-weight-body: 500; --wa-font-weight-heading: 700; --wa-font-weight-code: 500; --wa-font-weight-longform: 500; --wa-border-radius-scale: 1.5; --wa-border-width-scale: 2; --wa-space-scale: 0.75; } /* Téma-toggle ikonpár (minden zónában): az aktuális sémához illő ikon látszik. A gomb bekötése a /_shared/js/color-scheme.js-ben (.theme-toggle). */ html.wa-dark .only-light { display: none; } html:not(.wa-dark) .only-dark { display: none; } /* Márka-háttér (.brand-backdrop): döntött lila gradiens + kémcső/Erlenmeyer minta (saját rajzolású outline-glifek, data-URI SVG — a smarty2 main-content háttér-mintája nyomán). A hex színek itt MÁRKA-GRAFIKA részei (mint egy logó), nem UI-tokenek — ez a dokumentált kivétel. Light: levendula, lila glifekkel; dark: mély lila gradiens, halvány glifekkel. Forrás/generátor: a dizájn-kör mockup-szkriptje (kémcső+lombik path-ok, 140px csempe, 27° gradiens). */ :root { --innovalis-backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(27,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23f4effd'/%3E%3Cstop offset='1' stop-color='%23e3d8f8'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='140' height='140' patternUnits='userSpaceOnUse'%3E%3Cg transform='translate(35,35) rotate(-11) scale(1)' fill='none' stroke='%236d3ee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6.5,-16 h13'/%3E%0A%3Cpath d='M-4.5,-16 v21 a4.5,4.5 0 0 0 9,0 v-21'/%3E%0A%3Cpath d='M-4.5,-2 h9'/%3E%3C/g%3E%3Cg transform='translate(105,105) rotate(9.35) scale(1)' fill='none' stroke='%236d3ee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-4,-16 h8'/%3E%0A%3Cpath d='M-2,-16 v6.5 l-6.6,13.5 a2.2,2.2 0 0 0 2,3.2 h13.2 a2.2,2.2 0 0 0 2,-3.2 l-6.6,-13.5 v-6.5'/%3E%0A%3Cpath d='M-6.2,0.5 h12.4'/%3E%0A%3Ccircle cx='1.5' cy='-3.5' r='1'/%3E%3C/g%3E%3Cg transform='translate(105,35) rotate(-7.699999999999999) scale(0.62)' fill='none' stroke='%236d3ee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-4,-16 h8'/%3E%0A%3Cpath d='M-2,-16 v6.5 l-6.6,13.5 a2.2,2.2 0 0 0 2,3.2 h13.2 a2.2,2.2 0 0 0 2,-3.2 l-6.6,-13.5 v-6.5'/%3E%0A%3Cpath d='M-6.2,0.5 h12.4'/%3E%0A%3Ccircle cx='1.5' cy='-3.5' r='1'/%3E%3C/g%3E%3Cg transform='translate(35,105) rotate(13.2) scale(0.62)' fill='none' stroke='%236d3ee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-6.5,-16 h13'/%3E%0A%3Cpath d='M-4.5,-16 v21 a4.5,4.5 0 0 0 9,0 v-21'/%3E%0A%3Cpath d='M-4.5,-2 h9'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p)' fill-opacity='0.115'/%3E%3C/svg%3E"); } html.wa-dark { --innovalis-backdrop: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3Cdefs%3E%3ClinearGradient%20id='a'%20x1='0'%20x2='0'%20y1='0'%20y2='1'%20gradientTransform='rotate(27,0.5,0.5)'%3E%3Cstop%20offset='0'%20stop-color='%233b2270'/%3E%3Cstop%20offset='1'%20stop-color='%231a1030'/%3E%3C/linearGradient%3E%3Cpattern%20id='p'%20width='140'%20height='140'%20patternUnits='userSpaceOnUse'%3E%3Cg%20transform='translate(35,35)%20rotate(-12)%20scale(1.0)'%20fill='none'%20stroke='%23c9b8ff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M-6.5,-16%20h13'/%3E%3Cpath%20d='M-4.5,-16%20v21%20a4.5,4.5%200%200%200%209,0%20v-21'/%3E%3Cpath%20d='M-4.5,-2%20h9'/%3E%3C/g%3E%3Cg%20transform='translate(105,105)%20rotate(10)%20scale(1.0)'%20fill='none'%20stroke='%23c9b8ff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M-4,-16%20h8'/%3E%3Cpath%20d='M-2,-16%20v6.5%20l-6.6,13.5%20a2.2,2.2%200%200%200%202,3.2%20h13.2%20a2.2,2.2%200%200%200%202,-3.2%20l-6.6,-13.5%20v-6.5'/%3E%3Cpath%20d='M-6.2,0.5%20h12.4'/%3E%3Ccircle%20cx='1.5'%20cy='-3.5'%20r='1.0'/%3E%3C/g%3E%3Cg%20transform='translate(105,35)%20rotate(-8)%20scale(0.62)'%20fill='none'%20stroke='%23c9b8ff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M-4,-16%20h8'/%3E%3Cpath%20d='M-2,-16%20v6.5%20l-6.6,13.5%20a2.2,2.2%200%200%200%202,3.2%20h13.2%20a2.2,2.2%200%200%200%202,-3.2%20l-6.6,-13.5%20v-6.5'/%3E%3Cpath%20d='M-6.2,0.5%20h12.4'/%3E%3Ccircle%20cx='1.5'%20cy='-3.5'%20r='1.0'/%3E%3C/g%3E%3Cg%20transform='translate(35,105)%20rotate(14)%20scale(0.62)'%20fill='none'%20stroke='%23c9b8ff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M-6.5,-16%20h13'/%3E%3Cpath%20d='M-4.5,-16%20v21%20a4.5,4.5%200%200%200%209,0%20v-21'/%3E%3Cpath%20d='M-4.5,-2%20h9'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect%20width='100%25'%20height='100%25'%20fill='url(%23a)'/%3E%3Crect%20width='100%25'%20height='100%25'%20fill='url(%23p)'%20fill-opacity='0.06'/%3E%3C/svg%3E"); } /* Teljes képernyős kapu-oldalak (auth, app-gate) — a public a wa-page main-content partjára ugyanezt a változót teszi (lásd public/index.html). */ .brand-backdrop { background-image: var(--innovalis-backdrop); background-attachment: fixed; background-size: cover; } /* ── Oldal-lábléc (copyright-szekció, minden zóna — /_shared/js/site-footer.js) ── Három egyenlő "harmad": © · verzió · RNDM; mindegyik teljes szélességében kattintható, alulról nyíló wa-drawerrel. */ /* A [hidden] attribútum győzzön a wa-* utility display-szabályai felett is (zóna-független — az auth.css/app.css lokális szabályának globális párja). */ [hidden] { display: none !important; } /* A lábléc-konténer teljes szélességű akkor is, ha a szülője flex. */ #site-footer { width: 100%; } .site-foot-racs { display: grid; /* Három egyenlő harmad — DE csak amíg tényleg elférnek. A leghosszabb felirat („made with by [RNDM]") kb. 12rem-t kér; három fix `1fr` sávban telefonon (390px) ez nem fér el, és mivel a grid-elemek alapértelmezett `min-width: auto`-ja nem engedi összenyomni őket, a lábléc KIFELÉ feszítette az oldalt — vízszintes görgetés lett az egész dokumentumon, minden zónában. Az `auto-fit` + `minmax` elég széles nézetben ugyanazt a harmadolást adja, keskenyben viszont magától egymás alá rendezi a három gombot. (A 14rem tartalomszélesség: a WA-nak erre nincs tokene, lásd lentebb a .foot-drawer-tartalom 46rem-jét.) */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: center; width: 100%; } .site-foot-racs .foot-gomb { width: 100%; min-width: 0; } .site-foot-racs .foot-gomb::part(base) { width: 100%; color: var(--wa-color-text-quiet); font-weight: var(--wa-font-weight-normal); font-size: var(--wa-font-size-xs); } .site-foot-racs .foot-bal::part(base) { justify-content: flex-start; } .site-foot-racs .foot-kozep::part(base) { justify-content: center; } .site-foot-racs .foot-jobb::part(base) { justify-content: flex-end; } /* Tartalomszélesség: a WA-nak nincs szélesség-tokenje — a 46rem a fiók-oldali .account-col-lal egyező olvasási szélesség. */ .foot-drawer-tartalom { max-width: 46rem; margin-inline: auto; width: 100%; } .foot-drawer-tartalom p { margin: 0; } .foot-halk { color: var(--wa-color-text-quiet); } .foot-cl-body { white-space: pre-line; font-size: var(--wa-font-size-s); } /* ── BÉRLŐ-JEL (tartalék-arculat) — /_shared/js/tenant-brand.js ─────────────── Egyetlen négyzetes jel, amiben a labor logója, az operátor által választott ikonja VAGY a nevének monogramja ül (a sorrendet a JS dönti el). Cél: két logótlan labor SE nézzen ki egyformán — a szín a bérlő uid-jéből származik, tehát beállítás nélkül is egyedi és állandó. A színek a `--wa-color-<árnyalat>-` paletta-tokenekből jönnek, nem nyers hexből: így palettaváltáskor is helyesek maradnak. A világos/sötét pár azért van kézzel megadva, mert a paletta-lépcsők ABSZOLÚTAK (a 90 mindig világos), tehát sötét témában a kitöltés/tinta lépcsőt cserél. */ .tenant-brand { --tb-meret: var(--wa-font-size-xl); --tb-fill: var(--wa-color-neutral-90); --tb-ink: var(--wa-color-neutral-30); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var(--tb-meret); block-size: var(--tb-meret); border-radius: var(--wa-border-radius-s); background-color: var(--tb-fill); color: var(--tb-ink); overflow: hidden; user-select: none; } .tenant-brand-s { --tb-meret: var(--wa-font-size-l); } .tenant-brand-l { --tb-meret: var(--wa-font-size-3xl); } /* A monogram a címsor-betűtípussal, a dobozhoz arányosítva (a WA-nak nincs „a szülő X%-a" méret-tokene, ezért `calc` a doboz saját méretén). */ .tenant-brand-mono { font-family: var(--wa-font-family-heading); font-weight: var(--wa-font-weight-heading); font-size: calc(var(--tb-meret) * 0.44); line-height: 1; letter-spacing: 0; } .tenant-brand wa-icon { font-size: calc(var(--tb-meret) * 0.58); } /* Feltöltött logónál nincs színes háttér: a labor SAJÁT arculata ne kapjon idegen tintát — a kép a maga színeivel, arányt tartva ül a dobozban. */ .tenant-brand[data-logo] { --tb-fill: transparent; } .tenant-brand img { inline-size: 100%; block-size: 100%; object-fit: contain; } .tenant-brand[data-brand="red"] { --tb-fill: var(--wa-color-red-90); --tb-ink: var(--wa-color-red-30); } .tenant-brand[data-brand="orange"] { --tb-fill: var(--wa-color-orange-90); --tb-ink: var(--wa-color-orange-30); } .tenant-brand[data-brand="yellow"] { --tb-fill: var(--wa-color-yellow-90); --tb-ink: var(--wa-color-yellow-30); } .tenant-brand[data-brand="green"] { --tb-fill: var(--wa-color-green-90); --tb-ink: var(--wa-color-green-30); } .tenant-brand[data-brand="cyan"] { --tb-fill: var(--wa-color-cyan-90); --tb-ink: var(--wa-color-cyan-30); } .tenant-brand[data-brand="blue"] { --tb-fill: var(--wa-color-blue-90); --tb-ink: var(--wa-color-blue-30); } .tenant-brand[data-brand="indigo"] { --tb-fill: var(--wa-color-indigo-90); --tb-ink: var(--wa-color-indigo-30); } .tenant-brand[data-brand="purple"] { --tb-fill: var(--wa-color-purple-90); --tb-ink: var(--wa-color-purple-30); } .tenant-brand[data-brand="pink"] { --tb-fill: var(--wa-color-pink-90); --tb-ink: var(--wa-color-pink-30); } html.wa-dark .tenant-brand { --tb-fill: var(--wa-color-neutral-20); --tb-ink: var(--wa-color-neutral-80); } html.wa-dark .tenant-brand[data-brand="red"] { --tb-fill: var(--wa-color-red-20); --tb-ink: var(--wa-color-red-80); } html.wa-dark .tenant-brand[data-brand="orange"] { --tb-fill: var(--wa-color-orange-20); --tb-ink: var(--wa-color-orange-80); } html.wa-dark .tenant-brand[data-brand="yellow"] { --tb-fill: var(--wa-color-yellow-20); --tb-ink: var(--wa-color-yellow-80); } html.wa-dark .tenant-brand[data-brand="green"] { --tb-fill: var(--wa-color-green-20); --tb-ink: var(--wa-color-green-80); } html.wa-dark .tenant-brand[data-brand="cyan"] { --tb-fill: var(--wa-color-cyan-20); --tb-ink: var(--wa-color-cyan-80); } html.wa-dark .tenant-brand[data-brand="blue"] { --tb-fill: var(--wa-color-blue-20); --tb-ink: var(--wa-color-blue-80); } html.wa-dark .tenant-brand[data-brand="indigo"] { --tb-fill: var(--wa-color-indigo-20); --tb-ink: var(--wa-color-indigo-80); } html.wa-dark .tenant-brand[data-brand="purple"] { --tb-fill: var(--wa-color-purple-20); --tb-ink: var(--wa-color-purple-80); } html.wa-dark .tenant-brand[data-brand="pink"] { --tb-fill: var(--wa-color-pink-20); --tb-ink: var(--wa-color-pink-80); } html.wa-dark .tenant-brand[data-logo] { --tb-fill: transparent; }