/* =========================================================================== Skaitītāju rādījumi Dizaina nostādnes: DESIGN_VARIANCE 3 / MOTION_INTENSITY 2 / VISUAL_DENSITY 4. Zemas vērtības ir apzinātas. Galvenais lietotājs ir īrnieks, bieži vecāka gadagājuma cilvēks, kas telefonā ievada vienu skaitli mēnesī, nereti tumšā kāpņu telpā. Asimetrija, ritināšanas animācijas un dekoratīvi efekti šeit traucētu, nevis palīdzētu. Fonts ir apzināti sistēmas fonts: nulle lejupielādes, nav satura nobīdes (CLS), pilnībā atveido latviešu diakritiku (daudziem bezmaksas fontiem trūkst ķ ļ ņ ģ), un ievēro operētājsistēmas teksta izmēra iestatījumu, ko vājredzīgi lietotāji patiešām izmanto. Formas: viena noapaļojuma sistēma, dokumentēta zemāk (--r-sm ievadlaukiem un pogām, --r-md kartītēm, --r-lg lielām virsmām). Viens akcents: zils. =========================================================================== */ :root { /* Virsmas */ --bg: #f2f4f6; --surface: #ffffff; --surface-2: #f6f8fa; --border: #d9dee4; --border-strong: #7f8994; /* 3.55:1 pret baltu, WCAG 1.4.11 */ /* Teksts */ --text: #17191c; --text-dim: #565f69; /* Akcents: 7.88:1 ar baltu tekstu (WCAG AAA) */ --accent: #14538f; --accent-hover: #0f4176; --accent-soft: #e7f0fa; --accent-line: #a9c8e8; --on-accent: #ffffff; /* Statusi */ --danger: #a81f1f; --danger-soft: #fdeceb; --ok: #17673a; --ok-soft: #e4f3ea; --warn: #794d00; --warn-soft: #fcf2e0; /* Skaitītāju identitāte */ --el: #8a5200; --el-soft: #fcf1de; --ud: #15557f; --ud-soft: #e5f1f8; /* Forma un dziļums */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --shadow: 0 1px 2px rgb(23 25 28 / .06), 0 2px 6px rgb(23 25 28 / .05); --ring: 0 0 0 3px rgb(20 83 143 / .32); /* Pieskāriena zona: 48px ir minimums pirkstam */ --touch: 48px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #101316; --surface: #191d21; --surface-2: #21262b; --border: #333b43; --border-strong: #6f7a85; /* 3.25:1 pret tumšo virsmu */ --text: #e9ecef; --text-dim: #a4aeb8; --accent: #8ec0f7; --accent-hover: #b0d3fa; --accent-soft: #16283a; --accent-line: #2f4d6b; --on-accent: #0d1117; --danger: #f39b9b; --danger-soft: #38201f; --ok: #79d3a2; --ok-soft: #14301f; --warn: #e5bc72; --warn-soft: #2f2611; --el: #e8b874; --el-soft: #2d2412; --ud: #8cc2e4; --ud-soft: #152733; --shadow: 0 1px 2px rgb(0 0 0 / .5); --ring: 0 0 0 3px rgb(142 192 247 / .4); } } /* Tas pats tumšais režīms, ko var piespiest ar data-theme="dark" uz . Noder pārbaudei un ļauj vēlāk pievienot manuālu pārslēgu bez CSS izmaiņām. */ :root[data-theme="dark"] { --bg: #101316; --surface: #191d21; --surface-2: #21262b; --border: #333b43; --border-strong: #6f7a85; --text: #e9ecef; --text-dim: #a4aeb8; --accent: #8ec0f7; --accent-hover: #b0d3fa; --accent-soft: #16283a; --accent-line: #2f4d6b; --on-accent: #0d1117; --danger: #f39b9b; --danger-soft: #38201f; --ok: #79d3a2; --ok-soft: #14301f; --warn: #e5bc72; --warn-soft: #2f2611; --el: #e8b874; --el-soft: #2d2412; --ud: #8cc2e4; --ud-soft: #152733; --shadow: 0 1px 2px rgb(0 0 0 / .5); --ring: 0 0 0 3px rgb(142 192 247 / .4); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Visi skaitļi tabulāri, lai kolonnas nelīgojas */ .num, td.num, .stat-value, .meter-input, .reading-value, table { font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; } .icon-lg { width: 1.75em; height: 1.75em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ karkass */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar-inner { max-width: 1120px; margin: 0 auto; padding: 10px 16px; min-height: 64px; display: flex; align-items: center; gap: 16px; } .brand { font-weight: 640; font-size: 16px; color: var(--text); text-decoration: none; letter-spacing: -.01em; line-height: 1.25; } .brand:hover { text-decoration: none; color: var(--accent); } /* Navigācija vienā rindā, arī telefonā: uz maziem ekrāniem paliek ikonas */ .nav { display: flex; gap: 2px; margin-left: auto; align-items: center; } .nav a, .nav button { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 15px; padding: 10px 12px; min-height: 44px; border-radius: var(--r-sm); color: var(--text-dim); border: none; background: none; cursor: pointer; text-decoration: none; white-space: nowrap; } .nav a:hover, .nav button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } @media (max-width: 640px) { .nav a, .nav button { padding: 9px 10px; } .nav .nav-text { display: none; } .nav .icon { width: 1.45em; height: 1.45em; } .brand { font-size: 15px; } } .wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 72px; } .wrap-form { max-width: 620px; margin: 0 auto; padding: 28px 16px 96px; } .wrap-narrow { max-width: 430px; margin: 0 auto; padding: 44px 16px 72px; } /* ------------------------------------------------------------------- teksts */ h1 { font-size: clamp(23px, 5.2vw, 28px); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 6px; } h2 { font-size: 18px; font-weight: 620; letter-spacing: -.012em; line-height: 1.3; margin: 0 0 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; } .sub { color: var(--text-dim); font-size: 16px; margin: 0 0 24px; max-width: 62ch; } .sub strong { color: var(--text); font-weight: 600; } .hint { font-size: 15px; color: var(--text-dim); font-weight: 400; margin: 7px 0 0; } .muted { color: var(--text-dim); } /* ---------------------------------------------------------------- kartītes */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow); } .card > :last-child { margin-bottom: 0; } .grid { display: grid; gap: 18px; } @media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; } .stat-value { font-size: 28px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; } .stat-label { font-size: 15px; color: var(--text-dim); margin-top: 3px; } /* ------------------------------------------------------------------- formas */ label { display: block; font-size: 16px; font-weight: 570; margin-bottom: 7px; } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], select, textarea { width: 100%; min-height: var(--touch); padding: 12px 13px; font: inherit; color: var(--text); background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); appearance: none; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23565f69'%3E%3Cpath d='M4.2 6.2a1 1 0 0 1 1.4 0L8 8.6l2.4-2.4a1 1 0 1 1 1.4 1.4l-3.1 3.1a1 1 0 0 1-1.4 0L4.2 7.6a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 18px; padding-right: 38px; } input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: .78; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); } input[aria-invalid=true] { border-color: var(--danger); } textarea { min-height: 84px; resize: vertical; line-height: 1.5; } .field { margin-bottom: 18px; } .row { display: flex; gap: 14px; flex-wrap: wrap; } .row > * { flex: 1 1 180px; } .check { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 450; margin-bottom: 4px; padding: 9px 0; min-height: 44px; cursor: pointer; } .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--touch); padding: 12px 22px; font: inherit; font-size: 17px; font-weight: 570; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; text-align: center; } .btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .62; cursor: default; } .btn[disabled]:active { transform: none; } .btn-block { width: 100%; } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--border-strong); } .btn-danger:hover { background: var(--danger-soft); color: var(--danger); } .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 15px; } /* ---------------------------------------------------------------- ziņojumi */ .notice { display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border-radius: var(--r-sm); font-size: 16px; margin-bottom: 20px; border: 1px solid; border-left-width: 4px; } .notice .icon { margin-top: .15em; } .notice-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .notice-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); } .notice-info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .notice-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .notice a { color: inherit; } .notice code { font-size: .9em; background: rgb(0 0 0 / .07); padding: 1px 5px; border-radius: 4px; } .field-error { display: flex; align-items: flex-start; gap: 7px; color: var(--danger); font-size: 15px; font-weight: 500; margin: 8px 0 0; } /* ---------------------------------------------------------------- tabulas */ .table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; } table { width: 100%; border-collapse: collapse; font-size: 16px; } th { text-align: left; font-size: 14px; font-weight: 620; color: var(--text-dim); padding: 10px; border-bottom: 1.5px solid var(--border-strong); white-space: nowrap; } td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; } .empty { color: var(--text-dim); font-size: 16px; padding: 26px 0; text-align: center; } .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 570; padding: 3px 9px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); white-space: nowrap; } .tag-el { background: var(--el-soft); color: var(--el); border-color: transparent; } .tag-ud { background: var(--ud-soft); color: var(--ud); border-color: transparent; } .tag-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .tag-off { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .tag-count { background: var(--surface-2); color: var(--text-dim); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------- skaitītāji */ /* Īrnieka ievades kartīte. Bilde ir redzama uzreiz, nevis paslēpta zem izvēlnes: tas ir visas lapas galvenais uzdevums. */ .meter { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-bottom: 20px; box-shadow: var(--shadow); } .meter-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); } .meter-head .icon-lg { color: var(--mcolor, var(--text-dim)); } .meter-title { font-weight: 620; font-size: 18px; letter-spacing: -.01em; } .meter-unit { color: var(--text-dim); font-size: 16px; } .meter-head .tag { margin-left: auto; } .meter-el { --mcolor: var(--el); } .meter-ud { --mcolor: var(--ud); } .meter-photo-wrap { position: relative; background: var(--surface-2); border-bottom: 1px solid var(--border); } /* Bilde tiek rādīta pilnībā, bez apgriešanas: īrniekam der redzēt visu kadru, lai saprot, kur mājā skaitītāji atrodas. */ .meter-photo { display: block; width: 100%; height: auto; } .meter-caption { padding: 11px 18px; font-size: 15px; color: var(--text-dim); background: var(--surface-2); border-bottom: 1px solid var(--border); } .meter-body { padding: 18px; } .meter-prev { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 16px; margin-bottom: 16px; } .meter-prev .reading-value { font-weight: 620; } /* Liels ievadlauks ar mērvienību iekšpusē */ .meter-input-wrap { position: relative; } .meter-input { font-size: 26px; font-weight: 600; letter-spacing: .01em; min-height: 62px; padding: 12px 74px 12px 15px; text-align: left; } .meter-input-unit { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 17px; font-weight: 550; pointer-events: none; } /* ---------------------------------------------------------- citi elementi */ details { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; background: var(--surface); } summary { cursor: pointer; font-weight: 570; font-size: 16px; /* Pieskāriena zona vismaz 44px, tāpēc paplašinām pašu summary uz kartītes malām */ min-height: 44px; margin: -14px -16px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-radius: var(--r-md); } summary::marker { color: var(--text-dim); } details > *:not(summary) { margin-top: 16px; } details[open] summary { margin-bottom: 0; } figure { margin: 0 0 18px; } figcaption { font-size: 15px; color: var(--text-dim); margin-top: 9px; } .photo { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); } .steps { margin: 0; padding: 0; list-style: none; counter-reset: step; } .steps li { position: relative; counter-increment: step; padding: 0 0 16px 42px; font-size: 16px; } .steps li:last-child { padding-bottom: 0; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 640; font-variant-numeric: tabular-nums; } .breadcrumb { font-size: 15px; color: var(--text-dim); margin: 0 0 12px; } .breadcrumb a { color: var(--text-dim); } .inline-form { display: inline; } .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; } .toolbar > * { margin: 0; } .toolbar label { margin-bottom: 5px; font-size: 15px; } .log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; } .log td { padding: 8px 10px; } .spacer { height: 10px; } .right { margin-left: auto; } /* Telefonā iesniegšanas poga paliek redzama ekrāna apakšā */ .submit-bar { margin-top: 24px; } @media (max-width: 759px) { .submit-bar { position: sticky; bottom: 0; margin: 24px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgb(23 25 28 / .07); } .table-scroll { margin: 0 -20px; } .card { padding: 17px; } .stat-value { font-size: 25px; } } /* --------------------------------------------------------- kustība un druka */ /* MOTION_INTENSITY 2: tikai stāvokļu pārejas, nekādas dekoratīvas animācijas */ @media (prefers-reduced-motion: no-preference) { .btn, .nav a, .nav button, input, select, textarea, .tag { transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease; } .btn:active { transition: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } @media (prefers-contrast: more) { :root { --border: #7b848e; --border-strong: #464f59; --text-dim: #3c444d; } } /* Pārvaldnieks rādījumu sarakstus reizēm izdrukā */ @media print { .topbar, .toolbar, .btn, .submit-bar, details, .notice { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .wrap, .wrap-form, .wrap-narrow { max-width: none; padding: 0; } .card { border: none; box-shadow: none; padding: 0; margin: 0 0 18pt; break-inside: avoid; } .table-scroll { overflow: visible; margin: 0; padding: 0; } table { font-size: 10pt; } th, td { border-bottom: 1px solid #999; } a { text-decoration: none; color: #000; } } /* =================================================== pieslēgšanās ekrāni == Fona bilde ir Rīgas panorāma saulrietā. Bildes gaišums ir vienmērīgi vidējs (~88/255), tāpēc ne balts, ne melns teksts tieši uz tās nebūtu droši salasāms. Risinājums ir vienkāršs: viss teksts atrodas necaurspīdīgā kartītē, un uz bildes nekas nepeld. Tā formas kontrasts paliek tieši tāds pats kā pārējās lapās, neatkarīgi no bildes. ======================================================================== */ .auth-page { /* Krāsa zem bildes, lai lapa izskatās pabeigta arī pirms tās ielādes */ background-color: #2b1a1d; /* Aptumšojums ir viegls: uz bildes nav neviena teksta, tāpēc tas kalpo tikai kompozīcijai, nevis kontrastam. Stiprāks nogalinātu saulrieta krāsas. */ background-image: linear-gradient(rgb(26 12 14 / .12), rgb(26 12 14 / .34)), url("/images/fons.jpg"); background-size: cover, cover; background-position: center 30%, center 30%; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; min-height: 100dvh; } /* Telefonos background-attachment: fixed ir lēns un iOS Safari to ignorē */ @media (max-width: 759px) { .auth-page { background-attachment: scroll, scroll; } } /* Augšjosla uz bildes: caurspīdīga, lai kompozīcija nav sagriezta divās daļās */ .auth-page .topbar { background: transparent; border-bottom: none; position: static; } .auth-page .brand { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .55); } .auth-page .brand:hover { color: #fff; } /* Kartīte paliek necaurspīdīga: nekāda caurspīdīga stikla efekta, jo tas sabojātu teksta kontrastu uz mainīga fona. */ .auth-page .card { box-shadow: 0 4px 12px rgb(0 0 0 / .18), 0 16px 48px rgb(0 0 0 / .28); border-color: rgb(255 255 255 / .16); } .auth-page .wrap-narrow { padding-top: 24px; } /* Palīgteksts pieslēgšanās kartītes apakšā, atdalīts ar līniju. Agrāk tas peldēja zem kartītes, kas uz fona bildes nebūtu salasāms. */ .card-foot { margin: 20px -20px -20px; padding: 15px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); font-size: 15px; color: var(--text-dim); } .card-foot p { margin: 0; } .card-foot p + p { margin-top: 9px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-page { background-image: linear-gradient(rgb(10 6 8 / .42), rgb(10 6 8 / .62)), url("/images/fons.jpg"); } } :root[data-theme="dark"] .auth-page { background-image: linear-gradient(rgb(10 6 8 / .42), rgb(10 6 8 / .62)), url("/images/fons.jpg"); } /* Ja lietotājs prasa lielāku kontrastu, bilde tiek noņemta pilnībā */ @media (prefers-contrast: more) { .auth-page { background-image: none; background-color: var(--bg); } .auth-page .brand { color: var(--text); text-shadow: none; } .auth-page .topbar { background: var(--surface); border-bottom: 1px solid var(--border); } } /* ========================================================== patēriņa grafiks Krāsas ir pārbaudītas ar dataviz validatoru: gaišajā režīmā zilā pret sarkano ΔE 27.1, tumšajā 27.3 (normālai redzei), un visi krāsu neredzības testi iztur. Sākotnēji stabiņi bija dzintara krāsā (kā elektrības zīmītes), bet dzintars pret sarkano deva ΔE 11.3, kas ir zem sliekšņa, tāpēc parastie mēneši ir neitrāli un sarkans ir rezervēts tikai novirzei. ======================================================================== */ :root { --chart-bar: #14538f; --chart-neg: #a81f1f; --chart-grid: #dde2e7; --chart-zero: #9aa5b1; --chart-hatch: #8d99a6; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-bar: #4e9ae0; --chart-neg: #e05c5c; --chart-grid: #2d343b; --chart-zero: #5b6670; --chart-hatch: #6f7a85; } } :root[data-theme="dark"] { --chart-bar: #4e9ae0; --chart-neg: #e05c5c; --chart-grid: #2d343b; --chart-zero: #5b6670; --chart-hatch: #6f7a85; } .chart { margin: 0 0 18px; } .chart-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .chart-title { font-weight: 620; font-size: 16px; letter-spacing: -.01em; } .chart-unit { font-size: 15px; color: var(--text-dim); } .chart-svg { display: block; width: 100%; height: auto; overflow: visible; } .chart-bar { fill: var(--chart-bar); } .chart-bar-neg { fill: var(--chart-neg); } .chart-bar-reset { stroke: var(--chart-hatch); stroke-width: 1; } .chart-hatch-line { stroke: var(--chart-hatch); stroke-width: 1.6; } .chart-grid { stroke: var(--chart-grid); stroke-width: 1; } .chart-zero { stroke: var(--chart-zero); stroke-width: 1.5; } .chart-axis, .chart-label { fill: var(--text-dim); font-size: 12px; font-family: inherit; } .chart-value { fill: var(--text); font-size: 12px; font-weight: 600; font-family: inherit; font-variant-numeric: tabular-nums; } /* Peldošie paskaidrojumi nāk no ; kursors parāda, ka tur ir kas lasāms */ .chart-svg g:hover .chart-bar { fill: var(--accent-hover); } .chart-svg g { cursor: help; } .chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font-size: 15px; color: var(--text-dim); } .chart-key { display: inline-flex; align-items: center; gap: 7px; } .chart-swatch { width: 13px; height: 13px; border-radius: 3px; flex: none; } .chart-swatch-neg { background: var(--chart-neg); } .chart-swatch-reset { background: repeating-linear-gradient(45deg, var(--chart-hatch) 0 2px, transparent 2px 5px); border: 1px solid var(--chart-hatch); } .chart-summary { margin: 12px 0 0; font-size: 15px; color: var(--text-dim); } .chart-summary strong { color: var(--text); } .chart-note { fill: var(--text-dim); font-size: 11px; font-family: inherit; } .chart-empty { padding: 22px 0; text-align: center; color: var(--text-dim); font-size: 15px; } @media (max-width: 560px) { .chart-value { display: none; } /* šaurā ekrānā vērtības saplūst */ } @media print { .chart-svg g:hover .chart-bar { fill: var(--chart-bar); } } /* Testa OTP kods: liels un viegli nolasāms, lai var pārrakstīt telefonā */ .otp-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 19px; font-weight: 600; letter-spacing: .12em; background: var(--accent-soft); color: var(--accent); padding: 3px 10px; border-radius: var(--r-sm); user-select: all; }