/* HiADM — sistemos stiliai (portalas ir administravimas). * * Tik tai, kas kartojasi KELIUOSE puslapiuose ir ko biblioteka (hiltus-ui) neturi. * Spalvos, tarpai, šriftas ir komponentai — iš bibliotekos tokenų. Vienintelė * tiesioginė spalva — baltas tekstas ant firminės juostos (`hi-brandbar` yra navy * abiem temomis). Bibliotekos komponentai neperrašomi, tik papildomi. * Prefiksas `ha-`: iš klasės vardo matyti, kur ieškoti stiliaus — `hi-` * biblioteka, `ha-` šis failas, kita — puslapis. Tas pats susitarimas kaip * HiCON `hc-`. * * Pakeitė senąjį `style.css` (2026-10-09): jis turėjo savo paletę su `#14adb6`, * Helvetica vietoj Work Sans ir `border-radius: 0 !important` visiems elementams. */ /* ---- Puslapio antraštė ir ritmas ---------------------------------------- */ .hi-page > .hi-pagehead { margin-block-end: var(--sp-4); } .hi-page > .hi-alert { margin-block: 0 var(--sp-3); } /* Veiksmų eilė: antraštėje dešinėje, lentelės langelyje. */ .ha-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; } .ha-acts > form { margin: 0; } .ha-acts--end { justify-content: flex-end; } @media (max-width: 639px) { .ha-acts--end { justify-content: flex-start; } } /* Vienos eilės forma: laukai ir mygtukas greta. */ .ha-inline { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0; } /* Laukų tinklelis: eilė susispaudžia pati, laukai lygiuojami apačia. */ .ha-form { display: grid; gap: var(--sp-4); margin: 0; } .ha-narrow { max-width: 26rem; } .ha-form__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } /* Prigesinta pastaba po antrašte ar po lauku. */ .ha-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); } /* Žymimasis langelis su tekstu. `accent-color` — tamsesnė žydra: firminė ant balto (2,8:1) neatitinka 3:1 valdiklio ribai. */ .ha-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; } .ha-check input { margin: 0; inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--accent-text); cursor: pointer; } /* ---- Lentelės ----------------------------------------------------------- */ /* `.hi-table th/td { text-align: left }` stipresnis už bazinį `.hi-num`. */ .hi-table :is(th, td).hi-num { text-align: right; } /* Centruotas stulpelis — prieigos varnelės. */ .hi-table :is(th, td).ha-c { text-align: center; } /* Lentelė su valdikliais eilutėse: langeliai per vidurį, kitaip 32 px laukas ir dviejų eilučių vardas „šokinėja“. */ .ha-mid td { vertical-align: middle; } /* Data ar laikas: skaitmenys lygiuojasi, bet stulpelis lieka kairėje. */ .ha-date { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Išjungtas įrašas — prigesintas, bet skaitomas. */ .ha-off :is(td, td strong, td a) { color: var(--muted); } /* Plati lentelė slenka savo dėžėje, ne visas puslapis. */ .ha-tablebox { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } @media (max-width: 639px) { .ha-tablebox { border: 0; background: none; } } /* Vartotojas langelyje: avataras + dvi eilutės. */ .ha-user { display: flex; align-items: center; gap: var(--sp-2); } .ha-user .hi-cell-2 { min-width: 0; } /* Slaptažodžio nustatymas: suskleista, kol nereikia. */ .ha-pw > summary { cursor: pointer; font-size: var(--fs-xs); color: var(--accent-text); list-style: none; white-space: nowrap; } .ha-pw > summary::-webkit-details-marker { display: none; } .ha-pw[open] > summary { margin-bottom: var(--sp-1); } .ha-pw .hi-input { width: 11rem; } /* ---- Avataras ----------------------------------------------------------- */ .avatar { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: .65rem; font-weight: var(--fw-bold); text-transform: uppercase; } /* ---- Šoninis bėgis ------------------------------------------------------ */ /* base.css `svg { max-width: 100% }` sutraukia smeigtuko ikoną iki 0 pločio. */ .hi-nav__toggle svg { max-width: none; } .hi-nav__ico svg { display: block; margin-inline: auto; } .hi-nav__foot form { margin: 0; } /* Vartotojo eilutė — informacija, ne nuoroda. */ .hi-nav__user:hover { background: none; color: var(--muted); } /* ---- Portalo pradžia ---------------------------------------------------- */ /* Firminė juosta: vienintelė vieta portale, kur gyvena 45° grafinis elementas. Fonas, ne herojus — aukštis pagal turinį, ne `vh`. */ .ha-hero { padding: var(--sp-6) var(--sp-5); margin-block-end: var(--sp-5); } .ha-hero h1 { color: #fff; font-size: var(--fs-2xl); } .ha-hero p { margin: var(--sp-1) 0 0; color: rgb(255 255 255 / 78%); font-weight: var(--fw-light); max-width: 56ch; } /* Žydra ant navy — 5,07:1, tinka tekstui. */ .ha-hero .ha-hero__kicker { margin: 0 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--hiltus-cyan); } .ha-hero .hi-shape--cyan { right: 6%; top: -90px; } .ha-hero .hi-shape--green { right: 18%; top: 20px; opacity: .7; } .ha-hero .hi-chevron { right: -30px; bottom: -70px; color: var(--hiltus-cyan); } /* Sistemų plytelės. Plytelė yra atskiras objektas (paspaudimo taikinys), tad rėmelis čia pateisintas. Eilė susispaudžia pati (`auto-fill`). */ .ha-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } .ha-tile { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-2); min-height: 9.5rem; height: 100%; padding: var(--sp-4); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; } /* Sistemos spalva (hiltus-ui 0.9.0, `data-sys` ant plytelės): viršutinė juostelė visada jos spalvos, kad sistemos skirtųsi iš pirmo žvilgsnio — taip pat, kaip suskleisto bėgio „Hi“ kvadratas toje sistemoje. Be žinomos sistemos — įprasta linija ir akcentas. */ .ha-tile[data-sys] { border-top-color: var(--sys, var(--line)); } .ha-tile:hover, .ha-tile:focus-visible { border-color: var(--accent-border); border-top-color: var(--sys, var(--accent)); box-shadow: var(--sh-lift); text-decoration: none; } /* Sistemos ženklas — toks pat kaip išskleistame jos bėgio logotipe, kad žmogus atpažintų, kur pateks: „Hi“ įprasto storio, sistemos dalis pusjuodė jos spalva (`--sys-text`, ≥4,5:1 abiejose temose). */ .ha-tile__mark { font-size: var(--fs-xl); font-weight: var(--fw-normal); letter-spacing: -.03em; line-height: 1; } .ha-tile__mark span { color: var(--sys-text, var(--accent-text)); font-weight: var(--fw-bold); } /* Sistemos vardas tekste ir lentelėse: tas pats svorių skirstymas, be spalvos. */ .ha-name { font-weight: var(--fw-normal); } .ha-name span { font-weight: var(--fw-bold); } .ha-tile__desc { color: var(--muted); font-size: var(--fs-sm); } .ha-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .ha-tile__go { display: inline-flex; color: var(--line-strong); transition: transform .12s ease, color .12s ease; } .ha-tile:hover .ha-tile__go, .ha-tile:focus-visible .ha-tile__go { color: var(--accent-text); transform: translateX(3px); } /* Telefone plytelės viena po kita — minimalus aukštis ten tik tuščia vieta. */ @media (max-width: 639px) { .ha-tile { min-height: 0; } } /* Administravimo plytelė: ta pati forma, kita rolė — punktyrinė riba sako „čia valdymas, ne darbo sistema“. */ .ha-tile--admin { border-style: dashed; border-top-style: solid; } /* ---- Prisijungimas ------------------------------------------------------ */ /* Du stulpeliai darbalaukyje: firminė juosta kairėje, forma dešinėje. Telefone juosta virsta žema viršutine juosta. */ .ha-auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--bg); } .ha-auth__brand { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-1); min-height: 10rem; border-radius: 0; } .ha-auth__logo { font-size: 3rem; font-weight: var(--fw-normal); letter-spacing: -.04em; line-height: 1; color: #fff; } .ha-auth__brand p { margin: 0; color: rgb(255 255 255 / 78%); font-weight: var(--fw-light); } .ha-auth__brand .hi-shape--cyan { right: 12%; top: -110px; } .ha-auth__brand .hi-shape--green { right: 30%; top: -40px; opacity: .7; } .ha-auth__brand .hi-chevron { right: -40px; bottom: -60px; color: var(--hiltus-cyan); } .ha-auth__main { display: grid; place-items: start center; padding: var(--sp-5) var(--gutter); } .ha-auth__box { width: 100%; max-width: 22rem; display: flex; flex-direction: column; gap: var(--sp-4); } .ha-auth__box h1 { font-size: var(--fs-xl); } .ha-auth__box .ha-form .hi-btn { width: 100%; } .ha-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-xs); } .ha-or::before, .ha-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); } @media (min-width: 900px) { .ha-auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; } .ha-auth__main { place-items: center; } .ha-auth__brand { padding: var(--sp-7); } .ha-auth__logo { font-size: 4.5rem; } .ha-auth__brand .hi-shape--cyan { top: 12%; right: 22%; } .ha-auth__brand .hi-shape--green { top: 30%; right: 8%; } .ha-auth__brand .hi-chevron { bottom: 18%; right: -30px; } } /* ---- Smulkūs pločiai ---------------------------------------------------- */ .ha-pad { padding: var(--sp-5); } .ha-w-date { max-width: 12rem; } /* Sekcijos antraštė su ženklais ir veiksmu dešinėje. */ .ha-sectitle { display: flex; align-items: center; gap: var(--sp-2); } .ha-sectitle__end { margin: 0 0 0 auto; } /* Išlaidos prieš limitą: skaičius ir plona juosta po juo. Spalva — tik artėjant prie ribos (≥ 90 %), kitaip juosta neutrali. */ .ha-lim { display: grid; gap: 3px; min-width: 9rem; } .ha-lim__track { display: block; height: 4px; background: var(--surface-2); border-radius: var(--r-sm); } .ha-lim__fill { --v: 0%; display: block; height: 100%; width: var(--v); background: var(--line-strong); border-radius: var(--r-sm); } .ha-lim__fill--over { background: var(--danger); } /* Grafiko duomenų