/* * Mobil-birinchi, tashqi kutubxonasiz. Dala sharoiti uchun: katta tugmalar * (qo'lqopda bosiladi), yuqori kontrast (quyoshda ko'rinishi kerak), kichik * bo'lmagan matn. * * v2 — brend dizayn tizimi (2026-09-22). Ranglar WCAG AAA (matn uchun * kamida 7:1) maqsadida tanlangan — pastdagi "Kontrast jadvali"ga qarang. * BITTA ATAYLAB OG'ISH bor: spec'da dark-tema tugma rangi sifatida aniq * `#3B82D6` berilgan edi, lekin oq matn bilan bu FAQAT 3.93:1 beradi * (AAA — 7:1 talab qiladi, hatto AA — 4.5:1'ni ham bermaydi). Shu bir xil * "oila"dagi (ko'k) to'qroq soyaga (`#1E4C86`, oq matn bilan 8.63:1) * almashtirildi — `#3B82D6` (yorug' temada `#469CE7`) esa `--color-brand-accent` * sifatida saqlanib qolgan, FAQAT logo uchun (spec'ning o'z talabi: "faqat * dekorativ"). Diqqat: fokus halqasi/input outline UCHUN bu rang ISHLATILMAYDI * — u ham oq fonda ~2.9:1 (hatto WCAG'ning elementlar uchun past — 3:1 — * chegarasidan ham pastroq), shuning uchun fokus ko'rsatkichi har doim * `--color-primary`ning o'zi (pastda, 8.49:1) bilan chiziladi. */ :root { /* --- Yorug' tema (standart) --- */ --color-bg: #f4f6f9; --color-surface: #ffffff; --color-text: #0f1b2d; --color-muted: #465060; --color-border: #c9cdd2; --color-primary: #154d8c; --color-primary-text: #ffffff; /* Brend ko'k (logodan) — FAQAT dekorativ (logotip o'zi). Matn, tugma foni yoki fokus halqasi sifatida hech qachon ishlatilmaydi — oq fonda 2.9:1, quyoshda o'qib bo'lmaydi (spec'ning o'z talabi). */ --color-brand-accent: #469ce7; --color-danger: #a3122a; --color-danger-bg: #fef0f2; --color-warning-bg: #fff3cd; --color-warning-text: #7a4405; --color-info-bg: #e3edf7; --color-info-text: #154d8c; --color-success: #0a5c36; --color-success-bg: #e6f6ec; /* Navbatdagi doimiy xato (422, tahrirlash kerak) — serverning o'z rad etishidan (--color-danger, qizil) ATAYLAB boshqa rang: sababi ham, tuzatish yo'li ham boshqa, ikkisi bitta ko'rinishda aralashmasin. */ --color-queue-failed: #c2410c; --color-queue-failed-bg: #fde4d0; /* "Юборилмаган" (hali sinxronlanmagan navbat) — queue-failed'dan ATAYLAB boshqa rang (och sariq/amber, kulrang emas — vizual jihatdan "kutilmoqda", xato emas). */ --color-queued: #a67c00; --touch-min: 56px; --color-toast-bg: #16202f; --color-toast-text: #ffffff; --color-toast-error-bg: #7a1120; /* Shrift o'lchamlari — "Шрифт: Катта" (×1.15) `data-font-size="large"` bilan almashtiriladi, pastga qarang. */ --font-size-base: 18px; --font-size-h1: 24px; --font-size-h2: 20px; --font-size-well-number: 36px; --font-size-value: 30px; --font-size-small: 15px; } /* "Шрифт: Катта" — foydalanuvchi menyusidan tanlanadi (localStorage, `ugp_font_scale`), ga qo'yiladi. Butun o'lcham tizimi shu BITTA multiplikator orqali kattalashadi (individual qiymatlarni qo'lda ko'paytirish o'rniga) — yangi elementlar ham avtomatik to'g'ri chiqadi. */ :root[data-font-size="large"] { --font-size-base: 20.7px; --font-size-h1: 27.6px; --font-size-h2: 23px; --font-size-well-number: 41.4px; --font-size-value: 34.5px; --font-size-small: 17.25px; } /* --- Tungi tema --- */ :root[data-theme="dark"] { --color-bg: #0e1624; --color-surface: #17233a; --color-text: #e8eef6; --color-muted: #a8b6c9; --color-border: #2c3c56; --color-primary: #1e4c86; --color-primary-text: #ffffff; --color-brand-accent: #3b82d6; --color-danger: #ff9a92; --color-danger-bg: #3a1620; --color-warning-bg: #3a2e12; --color-warning-text: #f0c169; --color-info-bg: #142b46; --color-info-text: #8fc0f5; --color-success: #6fd39a; --color-success-bg: #0e2f1d; --color-queue-failed: #ffb27a; --color-queue-failed-bg: #3a2410; --color-queued: #e0b34a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-text); font-family: -apple-system, "SF Pro Text", Roboto, "Segoe UI", Arial, sans-serif; font-size: var(--font-size-base); line-height: 1.45; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } [hidden] { display: none !important; } .screen { min-height: 100vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); } .boot-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--color-muted); font-size: var(--font-size-base); text-align: center; } .boot-error { width: 100%; max-width: 100%; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; text-align: left; background: var(--color-danger-bg); color: var(--color-danger); border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--font-size-small); line-height: 1.5; } h1 { font-size: var(--font-size-h1); margin: 0 0 20px; } label { display: block; font-size: var(--font-size-small); color: var(--color-muted); margin-bottom: 6px; } input, select, textarea { width: 100%; min-height: var(--touch-min); padding: 10px 12px; font-size: var(--font-size-base); border: 2px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); } input:focus, select:focus, textarea:focus { outline: 3px solid var(--color-primary); outline-offset: 1px; } .field { margin-bottom: 16px; } /* A.5: kiritish formasidagi 5 ta o'lchov maydoni — "katta maydon", raqamlar aniq o'qilishi uchun (qo'lqopda, quyoshda). */ #entry-p_tubing, #entry-p_annulus, #entry-p_flowline, #entry-temperature, #entry-choke_mm { font-size: var(--font-size-value); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } /* 5-bosqich: ТПАВ soni +/- stepper */ .stepper-row { display: flex; align-items: center; gap: 10px; } .stepper-row input { flex: 1; text-align: center; } .stepper-row button { min-width: var(--touch-min); padding: 12px; } button { min-height: var(--touch-min); padding: 12px 20px; font-size: var(--font-size-base); font-weight: 600; border-radius: 10px; border: none; cursor: pointer; } button.primary { width: 100%; background: var(--color-primary); color: var(--color-primary-text); } button.primary:disabled { opacity: 0.6; } button.secondary { background: var(--color-surface); color: var(--color-text); border: 2px solid var(--color-border); } .banner { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: var(--font-size-small); } .banner--error { background: var(--color-danger-bg); color: var(--color-danger); } .banner--warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .banner--info { background: var(--color-info-bg); color: var(--color-info-text); } /* B.3: "Обход якунланди" banneri. */ .banner--success { background: var(--color-success-bg); color: var(--color-success); } /* §3.2: