/* ═══════════════════════════════════════════════════════════════════════ GEONAZORAT SRM — BELGILAR QATLAMI (design tokens) ═══════════════════════════════════════════════════════════════════════ Bu fayl HAR sahifada `uslub.css` dan OLDIN ulanadi. Undagi `:root` bloki o'chirilmagan — u endi shu yerdagi belgilarga havola qiluvchi alias qatlami. Shu tufayli mavjud 12 sahifadagi hech bir qoida buzilmaydi, lekin qiymatlar bitta joydan boshqariladi. NIMA UCHUN KERAK BO'LDI ─────────────────────── Tizim o'lchandi va uchta muammo topildi: • 39 xil `font-size` (10.4 · 10.5 · 10.6 · 11.2 · 11.3 · 11.4 · 11.5 …). Ikki matn 11.3 va 11.5 px bo'lsa, farq ko'rinmaydi — ierarxiya ham sezilmaydi. Ko'z qayerga qarashni bilmaydi. • 16 xil `border-radius`, asosiysi 15px — bu iste'mol ilovasi radiusi. 40px balandlikdagi qatorda burchak balandlikning 37% ini yeydi. • Soya 3-4% shaffoflikda — sezish chegarasidan past, idoradagi monitorlarda umuman ko'rinmaydi, kartalar tekis to'rtburchakka aylanadi. QOIDA: yangi qiymat kerak bo'lsa, avval shu fayldan qidiring. Bu yerda yo'q bo'lsa — qo'shing, sahifaga qattiq yozmang. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── NEYTRAL SHKALA ──────────────────────────────────────────────── Och mavzu uchun 0 (eng oq) dan 9 (eng to'q) gacha. Har qadam ko'rinadigan farq beradi — oraliq qiymat qo'shish taqiqlanmaydi, lekin avval shu zinadan foydalanib ko'ring. */ --n0:#FFFFFF; /* karta yuzasi, modal fon */ --n1:#F7F8FA; /* sahifa foni */ --n2:#EFF1F5; /* ikkilamchi yuza, jadval sarlavhasi */ --n3:#E3E7ED; /* chegara, ajratuvchi chiziq */ --n4:#CBD2DC; /* faol chegara, scrollbar */ --n5:#9AA5B4; /* o'chirilgan matn, joy egallovchi */ --n6:#6A7585; /* ikkilamchi matn */ --n7:#49525F; /* uchinchi darajali sarlavha */ --n8:#2B333D; /* asosiy matn */ --n9:#151A21; /* eng to'q sarlavha */ /* ── TO'Q YUZA (2-bosqichda sputnik va jonli sahnasi uchun) ──────── Hozir ishlatilmaydi, lekin bir joyda turishi kerak: keyin sahna maydonini to'q qilganda rang qayerdan olinishi ma'lum bo'lsin. */ --t0:#050D18; --t1:#07162B; --t2:#0C1F38; --t3:#112E54; --t4:#1B3D68; /* ── ASOSIY RANG ─────────────────────────────────────────────────── Ko'k #325ECD (Ant Design primary) my.soliq.uz palitrasidan olingan edi. U dunyodagi eng ko'p ishlatilgan admin ko'ki — mustaqil nazorat organi interfeysi boshqa idoraning qo'shimchasidek o'qiladi. Yangi asos to'qroq va sovuqroq: davlat hujjati ohangi, ekranda kamroq «yorqin plastik». Kontrast oq fonda 7.1:1 (WCAG AAA). */ --asos:#1F4B99; --asos-toq:#163A79; --asos-och:#E8EEF8; /* fon sifatida — tanlangan qator, chip */ --asos-och2:#F4F7FC; /* eng yengil fon */ /* ── OLTIN — FAQAT UCH JOYDA ─────────────────────────────────────── Tanlangan element · fokus halqasi · xaritadagi litsenziya chegarasi. Jiddiylik shkalasiga KIRMAYDI va och fonda matn rangi sifatida ishlatilmaydi (oq fonda kontrast 1.9:1 — WCAG dan uzoq). Sabab: agar oltin ham brend, ham fokus, ham xavf darajasi bo'lsa, u hech narsani bildirmay qoladi. */ --oltin:#F7B524; --oltin-toq:#8A6410; /* och fonda matn kerak bo'lsa — SHU ishlatiladi */ /* ── JIDDIYLIK: 4 pog'ona + 1 sifat holati ───────────────────────── Hozir tizimda 5 xil sputnik bahosi bor, lekin ular 3 rangga siqilgan va ikkitasi bir xil qizil. Natijada nazoratchi qaysi ishni birinchi olishni rangdan bilmaydi. Har pog'onaga rangdan TASHQARI shakl ham biriktiriladi (2-bosqich) — erkaklarning ~8% i qizil-yashilni ajratmaydi. */ --kritik:#C4283C; /* KENG_VA_CHIQQAN — kengaygan va chegaradan chiqqan */ --kritik-bg:#FDECEF; --jiddiy:#B45309; /* CHIQQAN — chegaradan chiqqan */ --jiddiy-bg:#FEF3E2; --kuzatuv:#1F6FB2; /* KENG — kengaygan, chegara ichida */ --kuzatuv-bg:#E8F2FA; --norma:#11803A; /* TOGRI — nomuvofiqlik yo'q */ --norma-bg:#E8F7EE; --olchanmadi:#6A7585; /* ANIQLAB_BOLMADI — sifat holati, jiddiylik emas */ --olchanmadi-bg:#EFF1F5; /* ── ORALIQ: 4px to'ri ───────────────────────────────────────────── Hozir kartalarda 8 xil ichki oraliq bor (18/20, 16/18, 15/17, 14/16, 13/15, 11/16, 12/14, 10/16). Yonma-yon turgan ikki karta ichidagi matn bir chiziqda boshlanmaydi va sahifa «yig'ilmagan» ko'rinadi. */ --o1:4px; --o2:8px; --o3:12px; --o4:16px; --o5:20px; --o6:24px; --o7:32px; --o8:48px; /* ── RADIUS: to'liq zina ─────────────────────────────────────────── 0 — jadval, to'liq kenglikdagi blok 2 — chip, teg, nishon 4 — tugma, input, karta (asosiy) 8 — modal oyna 99 — faqat holat nuqtasi va avatar (doira) */ --r0:0; --r1:2px; --r2:4px; --r3:8px; --r-doira:99px; /* ── SOYA ────────────────────────────────────────────────────────── Avvalgi qiymatlar 4% va 3% edi — sezish chegarasidan past. Yangi: 8% va 6%, rang neytral-sovuq (7,22,43) — sof qora soya och fonda kulrang dog' bo'lib ko'rinadi. */ --soya1:0 1px 2px rgba(7,22,43,.08), 0 1px 3px rgba(7,22,43,.06); --soya2:0 4px 12px rgba(7,22,43,.10); --soya3:0 12px 32px rgba(7,22,43,.16); /* modal */ /* ── TIPOGRAFIKA ─────────────────────────────────────────────────── Shkala: har qadam ko'rinadigan farq beradi (≈1.15 nisbat). 39 xil o'lchamdan 8 taga tushiriladi. */ --k1:11px; /* yorliq, manba, ikkinchi darajali izoh */ --k2:12px; /* jadval katagi, chip */ --k3:13px; /* asosiy matn */ --k4:15px; /* karta sarlavhasi, muhim matn */ --k5:18px; /* bo'lim sarlavhasi */ --k6:22px; /* sahifa sarlavhasi */ --k7:28px; /* KPI raqami */ --k8:36px; /* eng katta ko'rsatkich */ /* Og'irliklar: shrift haqiqatan ega bo'lgan qiymatlar. Avval 650/750/550 ishlatilgan (61 marta) — ular mavjud emas va brauzer ularni 400 yoki 700 ga yaxlitlaydi, ya'ni o'ylangan 4 pog'onali ierarxiya amalda 2 pog'onaga siqilgan. */ --qalin-o:500; /* o'rta — yorliq, ikkinchi darajali sarlavha */ --qalin-y:600; /* yarim qalin — karta sarlavhasi, tugma */ --qalin-t:700; /* to'liq — raqam, asosiy sarlavha */ --qator-zich:1.35; /* jadval, ro'yxat */ --qator-oddiy:1.55; /* matn */ /* ── HARAKAT ─────────────────────────────────────────────────────── Faqat holat o'zgarishi uchun (hover, focus, ochilish). Ma'lumot paydo bo'lishi ANIMATSIYA QILINMAYDI: nazoratchi filtrni kuniga o'nlab marta o'zgartiradi va har safar 10 ta karta suzib chiqsa, e'tibor ma'lumotdan olinadi. Grafik ustuni ham sakraydi, suzmaydi — silliq harakat oraliq qiymatlar mavjuddek yolg'on taassurot beradi. */ --tez:.12s ease; --sekin:.2s ease; /* ── VAQT TIZIMI ─────────────────────────────────────────────────── Bu qiymatlar `harakat.js` dagi `V` va `EGRI` obyektlari bilan BIR XIL bo'lishi shart: bitta harakat ko'pincha JS (Web Animations) va CSS tomonidan birga chiziladi. Ilgari ular ikki joyda qo'lda takrorlangan edi va JS izohi mavjud bo'lmagan `harakat.css` ga havola qilardi — bittasi o'zgarsa ikkinchisi jimgina orqada qolardi. ENDI: CSS tomon shu belgilarni, JS tomon `V`/`EGRI` ni o'qiydi; birini o'zgartirsang, ikkinchisini SHU YERDA ko'rib qo'y. */ --v-holat:120ms; /* hover, fokus — sezilsin, kutdirmasin */ --v-joy:300ms; /* rels, tab siljishi */ --v-otish:420ms; /* sahifa/ko'rinish almashuvi */ --v-diafragma:300ms; /* modal ochilishi */ --v-kamera:700ms; /* xarita parvozi */ --egri-uch:cubic-bezier(.2,.75,.2,1); /* element joyiga uchadi */ --egri-otish:cubic-bezier(.22,.61,.36,1); /* sahna almashuvi */ --egri-diafragma:cubic-bezier(.4,0,.15,1); /* ochilish/yopilish */ --egri-qatiy:cubic-bezier(.4,0,1,1); /* mexanik qulflash */ } /* ═══ FOKUS ═════════════════════════════════════════════════════════ Klaviatura bilan ishlaydigan operator uchun majburiy. `:focus-visible` sichqoncha bosganda chiqmaydi, faqat Tab bilan. */ *:focus-visible{ outline:2px solid var(--oltin); outline-offset:2px; border-radius:var(--r1); } /* ═══ RAQAMLAR ══════════════════════════════════════════════════════ Bu tizimda raqam — asosiy dalil. Proporsional shriftda 1 va 7 turli kenglikda bo'ladi, ustun qatorma-qator siljiydi va filtr o'zgarganda son «sakraydi» — nazoratchi ustunni ko'z bilan solishtira olmaydi. */ .raqam, .num, .val, .v, .son, td.num, th.num, .kpi .v, .kb .val, .bog .s, .o-son{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ═══ HARAKATNI KAMAYTIRISH ═════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }