/* ========================================================================== ⚠ AVTOMATIK YIG'ILGAN FAYL — QO'LDA TAHRIRLAMANG. Manba: packages/tokens/ekassam-tokens.css packages/motion/ek-motion.css packages/ui/ek-components.css e-kassam-main/landing.css ← landing uslublari shu yerda Qayta yig'ish: pwsh -File packages/sync-tokens.ps1 Nega bitta fayl: @import zanjiri deploy'da uzilsa (masalan styles/ papkasi commit qilinmasa) sahifa butunlay ranglarsiz va shriftsiz qoladi. Bitta fayl bunday xatoni imkonsiz qiladi va uchta render-blocking so'rovni yo'qotadi. ========================================================================== */ /* ═══ 1/6 — TOKENLAR ═══════════════════════════════════════════════ */ /* ========================================================================== ⚠ 1–215 QATORLAR — BREND TO'PLAMIDAN O'ZGARISHSIZ OLINGAN. Brend to'plami yangilanganda shu qism butunlay almashtiriladi, shuning uchun bu yerga hech narsa qo'shilmaydi. Loyihaga kerak bo'lgan qo'shimcha aliaslar fayl OXIRIDAGI "LOYIHA KENGAYTMASI" bo'limida. ========================================================================== */ /* ========================================================================== e-Kassam Design System — Tokens v1.0 Yagona manba (single source of truth): web, mobil va desktop uchun. Import: @import url("ekassam-tokens.css"); ========================================================================== */ /* --- 1. FONTLAR ---------------------------------------------------------- Manrope → sarlavhalar, brend Inter → interfeys matni (eng zich ma'lumot uchun eng o'qiluvchan) JetBrains Mono → PUL, MIQDOR, BARKOD, CHEK, VAQT (tabular figures) ⚠ GOOGLE FONTS `@import` I OLIB TASHLANDI (2026-09-22). U eng yomon shaklda edi: `@import` CSS ICHIDA turadi, ya'ni brauzer avval shu faylni yuklab, o'qib, KEYIN yangi domenga boradi va u yerdan yana shrift fayllarini so'raydi — uchta ketma-ket sayohat, har biri o'z DNS va TLS si bilan. ⚠ O'ZGARUVCHAN SHRIFT: bitta fayl butun vazn oralig'ini beradi. Ilgari har vazn alohida fayl edi (latin uchun 8 ta, 296 KB), endi uchta (108 KB). Ko'rinish o'zgarmaydi — shuning uchun aynan shu yo'l tanlandi, vaznlarni tashlash emas. ⚠ FAQAT `latin` VA `cyrillic`. `latin-ext` tashlandi: u ikki barobar katta va markaziy Yevropa harflari uchun. O'zbekchaning `oʻ`/`gʻ` belgilari (U+02BB–02BC) `latin` kesimida — TEKSHIRILDI. Bu yerdagi eski izoh «Lotin Ext = o'zbekcha OK» deb noto'g'ri aytardi. ⚠ Fayllar har ilovaning `public/fonts/` ida. Yangi ilova qo'shilsa, ularni ham ko'chirish kerak — aks holda shrift tizimnikiga tushadi. -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-var-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/jetbrains-mono-var-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/jetbrains-mono-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-var-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ===== BRAND: E-Kassam Blue (asosiy) ===== */ --ek-blue-50: #EAF2FE; --ek-blue-100: #D3E4FD; --ek-blue-200: #A9C9FA; --ek-blue-300: #77A9F5; --ek-blue-400: #4187EB; --ek-blue-500: #1F6FE0; --ek-blue-600: #1663D8; /* BRAND PRIMARY — #1663D8 */ --ek-blue-700: #0F4EB3; --ek-blue-800: #0E3F92; --ek-blue-900: #103676; --ek-blue-950: #0A2049; /* ===== ACCENT: Som Gold (pul, jami, muhim urgʻu) ===== */ --ek-green-50: #E9F9EF; --ek-green-100: #CDF1DA; --ek-green-200: #9EE3B8; --ek-green-300: #63D08F; --ek-green-400: #35C863; /* ACCENT */ --ek-green-500: #23B851; --ek-green-600: #1FAE4C; --ek-green-700: #16883A; /* ===== NEUTRAL: Ink (sovuq kulrang — maʼlumot zich UI uchun) ===== */ --ek-ink-0: #FFFFFF; --ek-ink-25: #FBFCFE; --ek-ink-50: #F6F8FB; --ek-ink-100: #EDF0F5; --ek-ink-200: #DDE2EB; --ek-ink-300: #C3CBD9; --ek-ink-400: #93A0B5; --ek-ink-500: #6A788F; --ek-ink-600: #4E5B71; --ek-ink-700: #3A4557; --ek-ink-800: #212C3D; --ek-ink-900: #131D2C; --ek-ink-950: #0B1524; /* INK — brendning qora rangi */ /* ===== SEMANTIC ===== */ --ek-success-50: #E9F9EF; --ek-success-500: #23B851; --ek-success-600: #1FAE4C; --ek-success-700: #16883A; /* ⚠ 800 — YOZUV uchun. 700 (#16883A) o'zining yorug' foni (#E9F9EF) ustida 4.17 beradi, talab esa 4.5. Smena belgisidagi raqam aynan shu juftlikda chiqadi va o'qilishi qiyin edi. 800 o'sha fonda 5.0, oq fonda 5.45 — ikkalasida ham zaxira bilan. */ --ek-success-800: #117A31; --ek-danger-50: #FEF3F2; --ek-danger-500: #F04438; --ek-danger-600: #D92D20; --ek-danger-700: #B42318; --ek-warning-50: #FFF4ED; --ek-warning-500: #FB7A2A; --ek-warning-600: #F76B15; --ek-warning-700: #C4500A; /* ⚠ 800 — MAYDA YOZUV uchun (V75). `700` och sariq fonda 4.32 beradi, talab esa 4.5: 11px qalin nishon yozuvi chegaradan sal past qolardi. `800` da 5.63. Katta yozuvda `700` yetadi va u tegilmagan — ranglar sonini oshirish o'rniga aniq bir vazifaga bitta qadam qo'shildi. */ --ek-warning-800: #A84208; --ek-info-50: #EAF6FE; --ek-info-500: #17A0E8; --ek-info-600: #0B84D6; --ek-info-700: #0764A8; /* ===== ROL RANGLARI (Egasi / Admin / Kassir / Omborchi / Superadmin) ===== */ --ek-role-owner: #B44F06; --ek-role-owner-bg: #FFF8EB; --ek-role-admin: #0F4EB3; --ek-role-admin-bg: #EEF1FF; --ek-role-cashier: #0E6F86; --ek-role-cashier-bg: #E6F7F8; --ek-role-stock: #6E3FC4; --ek-role-stock-bg: #F2ECFD; --ek-role-superadmin: #B42318; --ek-role-superadmin-bg: #FEF3F2; /* ===== TOʻLOV USULI RANGLARI ===== */ --ek-pay-cash: #16883A; /* Naqd */ --ek-pay-card: #1663D8; /* Karta */ --ek-pay-mixed: #F5A524; /* Aralash */ --ek-pay-debt: #D92D20; /* Qarz */ /* ===== SEMANTIC ALIASES — LIGHT (default) ===== */ --bg-canvas: var(--ek-ink-50); --bg-surface: var(--ek-ink-0); --bg-surface-alt: var(--ek-ink-25); --bg-sunken: var(--ek-ink-100); --bg-inverse: var(--ek-ink-950); --bg-brand: var(--ek-blue-600); --bg-brand-soft: var(--ek-blue-50); --fg-primary: var(--ek-ink-950); --fg-secondary: var(--ek-ink-600); --fg-tertiary: var(--ek-ink-400); --fg-inverse: var(--ek-ink-0); --fg-brand: var(--ek-blue-600); --fg-on-brand: #FFFFFF; --border-subtle: var(--ek-ink-200); --border-strong: var(--ek-ink-300); --border-brand: var(--ek-blue-600); --focus-ring: 0 0 0 3px rgba(22, 99, 216, .30); /* ===== TIPOGRAFIYA ===== */ --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-display-2xl: 700 3rem/1.06 var(--font-display); --text-display-xl: 700 2.25rem/1.15 var(--font-display); --text-display-lg: 700 1.75rem/1.25 var(--font-display); --text-display-md: 700 1.375rem/1.3 var(--font-display); --text-title-lg: 600 1.125rem/1.45 var(--font-sans); --text-title-md: 600 1rem/1.5 var(--font-sans); --text-body-lg: 400 1rem/1.55 var(--font-sans); --text-body-md: 400 .875rem/1.5 var(--font-sans); --text-body-sm: 400 .8125rem/1.45 var(--font-sans); --text-label: 600 .6875rem/1.2 var(--font-sans); --tracking-display: -.028em; --tracking-label: .06em; /* ===== FAZO (4px baza) ===== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ===== RADIUS ===== */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-full: 999px; /* ===== SOYA (ink tusli, neytral kulrang emas) ===== */ --sh-xs: 0 1px 2px rgba(11,21,36,.06); --sh-sm: 0 1px 3px rgba(11,21,36,.08), 0 1px 2px rgba(11,21,36,.04); --sh-md: 0 4px 12px rgba(11,21,36,.08), 0 1px 3px rgba(11,21,36,.05); --sh-lg: 0 12px 28px rgba(11,21,36,.10), 0 2px 6px rgba(11,21,36,.05); --sh-xl: 0 24px 56px rgba(11,21,36,.14); --sh-brand: 0 6px 18px rgba(22,99,216,.30); /* ===== TEGISH NISHONLARI (POS terminal / mobil) ===== */ --touch-min: 44px; /* WCAG minimal */ --touch-pos: 56px; /* kassir tugmalari */ --touch-keypad: 64px; /* raqamli klaviatura */ /* ===== HARAKAT ===== */ --ease: cubic-bezier(.2,.8,.2,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; /* ===== Z-QATLAM ===== */ --z-sticky: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; } /* --- QORONGʻI REJIM ------------------------------------------------------ Kassir smenasi 8–12 soat davom etadi. Qorongʻi rejim — hashamat emas, ergonomika. Toza qora ishlatilmaydi: ko'z toliqishini oshiradi. -------------------------------------------------------------------------- */ [data-theme="dark"] { --bg-canvas: #08111D; --bg-surface: #0F1B2B; --bg-surface-alt: #142339; --bg-sunken: #0A1523; --bg-inverse: var(--ek-ink-0); --bg-brand: var(--ek-blue-500); --bg-brand-soft: rgba(22,99,216,.18); --fg-primary: #EDF1F7; --fg-secondary: #9CAABF; --fg-tertiary: #64748B; --fg-inverse: var(--ek-ink-950); --fg-brand: #77A9F5; --fg-on-brand: #FFFFFF; --border-subtle: #1E2E44; --border-strong: #2C4059; --focus-ring: 0 0 0 3px rgba(119,169,245,.38); --ek-role-owner-bg: rgba(31,174,76,.16); --ek-role-admin-bg: rgba(22,99,216,.18); --ek-role-cashier-bg: rgba(14,124,134,.20); --ek-role-stock-bg: rgba(110,63,196,.20); --ek-role-superadmin-bg: rgba(217,45,32,.16); --ek-role-owner: #FFC94A; --ek-role-admin: #77A9F5; --ek-role-cashier: #4CD4DE; --ek-role-stock: #B79BF5; --ek-role-superadmin: #FF8A80; --sh-sm: 0 1px 3px rgba(0,0,0,.5); --sh-md: 0 4px 14px rgba(0,0,0,.45); --sh-lg: 0 14px 32px rgba(0,0,0,.5); --sh-xl: 0 28px 64px rgba(0,0,0,.6); } /* --- YUQORI KONTRAST (yorugʻ do'kon, quyosh tushadigan peshtaxta) --------- */ [data-contrast="high"] { --border-subtle: var(--ek-ink-400); --fg-secondary: var(--ek-ink-800); } /* --- ASOSIY QOIDALAR ------------------------------------------------------ */ html { -webkit-text-size-adjust: 100%; } body { font: var(--text-body-md); color: var(--fg-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; } /* PUL VA RAQAM — har doim mono + tabular. Ustunlar chekdek tekislanadi. */ .ek-num, .ek-money, td[data-num], input[inputmode="numeric"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -.01em; } /* Fokus — klaviatura bilan ishlaydigan kassir uchun majburiy. ⚠ `border-radius` bu yerda BERILMAYDI. Ilgari u `--r-sm` (6px) qo'yardi va fokusdagi HAR QANDAY maydonning burchagini o'zgartirardi: `.form-input` va `.search-bar` 10px edi, fokusda esa 6px bo'lib qolardi. Natijada maydon ichida boshqacha yumaloqlangan ikkinchi ramka paydo bo'lardi — "input ichida yana kichik input" bo'lib ko'rinardi. Fokus ko'rsatkichi elementning SHAKLINI o'zgartirmasligi kerak. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ⚠ IDISH ichidagi maydon o'z halqasini olmaydi: `.search-bar` va `.bc-field` fokusni `:focus-within` bilan O'ZI ko'rsatadi, ichkarida yana bitta halqa chizilsa u "ikkinchi input" bo'lib ko'rinardi. */ .search-bar input:focus-visible, .bc-field input:focus-visible { box-shadow: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== LOYIHA KENGAYTMASI — brend to'plamida yo'q, lekin kodda kerak bo'lgan aliaslar. Hammasi yuqoridagi XOM qiymatlardan olinadi; yangi rang O'YLAB TOPILMAYDI. Bu bo'lim ikki ishni bajaradi: 1. Brend nomlariga sinonim beradi (--focus-ring → --ring-brand va h.k.), shunda ikkala nom bilan yozilgan kod ham ishlaydi; 2. Brendda ko'rsatilmagan holat ranglarini (muvaffaqiyat/xato/ogohlantirish foni va chegarasi) semantik qiymatlarga bog'laydi. ========================================================================== */ :root { /* ── Brend nomlariga sinonimlar ─────────────────────────────────────── */ --bg-brand-subtle: var(--bg-brand-soft); /* Hover foni — ko'kning eng och ottenkasi (V68 izohi pastda). */ --bg-hover: var(--bg-brand-subtle); --bg-elevated: var(--bg-surface); --fg-on-inverse: var(--fg-inverse); --ring-brand: var(--focus-ring); --hit-sm: 32px; --hit-md: 40px; --hit-min: var(--touch-min); --hit-lg: 48px; --hit-pos: var(--touch-pos); --hit-keypad: var(--touch-keypad); /* ── Holat ranglari (brenddagi semantic shkalalardan) ───────────────── */ --bg-success: var(--ek-success-600); --bg-success-subtle: var(--ek-success-50); --fg-success: var(--ek-success-800); --border-success: var(--ek-green-200); --bg-danger: var(--ek-danger-600); --bg-danger-subtle: var(--ek-danger-50); /* ⚠ `-700`, `-600` EMAS — success/warning bilan bir xil qoida. 600 ochiq qizil fonda (`--bg-danger-subtle`) 4.44:1 berardi — xato toast'i axe'dan o'tmasdi. 700 esa 6.2:1. */ --fg-danger: var(--ek-danger-700); /* Eng yengil qizil — "e'tibor ber", lekin "shoshilinch" emas. Ombordagi kam qoldiq qatori shu fonda: muddati o'tgan tovar bilan bir xil ko'rinmasligi kerak (09-CHETLANISHLAR §10ń). */ --bg-danger-faint: #FEF9F8; --bg-danger-hover: #FDE6E3; --border-danger: #FDA29B; --ring-danger: 0 0 0 3px rgba(217, 45, 32, .24); --bg-warning: var(--ek-warning-500); --bg-warning-subtle: var(--ek-warning-50); --bg-warning-hover: #FFE6D5; --fg-warning: var(--ek-warning-700); /* ⚠ MAYDA YOZUV uchun sariq (V75). Yorug' temada u QORONG'I, qorong'ida esa OCH bo'lishi kerak: bitta qat'iy rang ikkala temada ishlamaydi — biri fonda yo'qoladi. `--fg-warning` katta yozuv uchun qoladi va tegilmagan. */ --fg-warning-strong: var(--ek-warning-800); --border-warning: #FDBE8C; --bg-brand-hover: var(--ek-blue-700); /* Modal/drawer ortidagi qorayish */ --scrim: rgba(11, 21, 36, .42); /* ── Eski nomlar (kodda hali uchraydi) ──────────────────────────────── */ /* Brendda ogohlantirish — to'q sariq (#FB7A2A). Oldingi amber shkalasi "aralash to'lov" belgisida qolgan, shuning uchun saqlanadi. */ --ek-amber-500: var(--ek-pay-mixed); --ek-amber-50: var(--ek-warning-50); --ek-amber-200: #FDBE8C; --ek-amber-700: var(--ek-warning-700); --ek-amber-800: var(--ek-warning-800); --ek-red-50: var(--ek-danger-50); --ek-red-200: #FDA29B; --ek-red-500: var(--ek-danger-500); --ek-red-600: var(--ek-danger-600); --ek-red-700: var(--ek-danger-700); --ek-violet-500: var(--ek-role-stock); --ek-cyan-500: var(--ek-role-cashier); /* ── Shrift o'lchamlari ─────────────────────────────────────────────── */ --fs-2xs: .6875rem; /* 11 */ --fs-xs: .75rem; /* 12 */ --fs-sm: .8125rem; /* 13 */ --fs-md: .875rem; /* 14 — asosiy */ --fs-lg: 1rem; /* 16 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 2rem; /* 32 */ /* ── Qatlamlar (brendda yo'q ikkitasi) ──────────────────────────────── */ --z-sidebar: var(--z-drawer); --z-overlay: 250; } [data-theme="dark"] { --bg-success-subtle: rgba(53, 200, 99, .12); --bg-danger-subtle: rgba(240, 68, 56, .12); --bg-danger-faint: rgba(240, 68, 56, .06); --bg-danger-hover: rgba(240, 68, 56, .19); --bg-warning-subtle: rgba(251, 122, 42, .12); --bg-warning-hover: rgba(251, 122, 42, .19); --fg-success: var(--ek-green-400); --fg-danger: #FF8A80; --fg-warning: var(--ek-warning-500); --fg-warning-strong: var(--ek-amber-200); --border-success: rgba(53, 200, 99, .34); --border-danger: rgba(240, 68, 56, .38); --border-warning: rgba(251, 122, 42, .38); --bg-brand-hover: var(--ek-blue-400); --scrim: rgba(2, 8, 16, .68); color-scheme: dark; } /* ── Faqat ekran o'quvchi uchun ──────────────────────────────────────── */ .ek-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; } /* ══════════════════════════════════════════════════════════════════════════ HOVER FONI — KULRANG EMAS, KO'K (V68) Do'kon egasi: «hover bo'lganda kulrang bo'lyapti, bu yoqimsiz — barcha shunaqa hover elementlarni dizaynga mos ko'k rangda qilish kerak». ⚠ BITTA TOKEN, uchala ilovada bir xil. Ilgari har joyda `var(--bg-sunken)` yozilardi — u «cho'kkan sirt» rangi, ya'ni BOSHQA maqsad uchun (maydon foni, ichki panel). Hoverni o'sha rangga bog'lash ikkalasini ajratib bo'lmas qilib qo'ygan edi: sirt rangini o'zgartirsangiz hover ham o'zgarardi va aksincha. ⚠ XAVFLI amallar (o'chirish) BUNGA KIRMAYDI: ular qizil hoverni saqlaydi — rang ogohlantirishning bir qismi. ══════════════════════════════════════════════════════════════════════════ */ /* ═══ 2/6 — ANIMATSIYA ═════════════════════════════════════════════ */ /* ========================================================================== e-Kassam Motion v1.0 Import: @import "ek-motion.css"; (tokens fayldan KEYIN) Qoida: faqat transform va opacity animatsiya qilinadi. MANBA FAYL — `sync-tokens.ps1` bilan ilovalarga ko'chiriladi. 1–12 bo'limlar redesign to'plamidan o'zgarishsiz olingan. 13+ bo'limlar shu loyihaga qo'shilgan (chek qirrasi, countup, tugma bosilishi). ========================================================================== */ /* ⚠ Brend to'plamidagi tokens fayli ham --dur-fast/base/slow ni belgilaydi (120/180/260ms). Bu fayl tokenlardan KEYIN ulangani uchun quyidagi qiymatlar ustun keladi. Ular 03-MOTION.md dagi jadvaldan olingan va animatsiya katalogi shu vaqtlarga qurilgan (masalan drawer 320ms, stagger 60ms). Brend qiymatlariga qaytish kerak bo'lsa, hujjat ham yangilanishi shart. */ :root { --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-story: 520ms; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.4,0,1,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-linear: linear; --stagger: 60ms; } /* --- 0. BARCHA ANIMATSIYALAR USTIDAN — birinchi qoida --------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .ek-carousel { --autoplay: none; } } /* --- 1. SCROLL OCHILISHI -------------------------------------------------- */ .ek-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-story) var(--ease-out), transform var(--dur-story) var(--ease-out); transition-delay: var(--d, 0ms); } .ek-reveal.is-in { opacity: 1; transform: none; } /* guruh ichida ketma-ketlik */ .ek-stagger > * { transition-delay: calc(var(--stagger) * var(--i, 0)); } /* --- 2. KIRISH ANIMATSIYALARI --------------------------------------------- */ @keyframes ek-fade-up { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } } @keyframes ek-fade-in { from { opacity:0 } to { opacity:1 } } @keyframes ek-scale-in { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:none } } @keyframes ek-slide-down{ from { opacity:0; transform:translateY(-100%) } to { opacity:1; transform:none } } @keyframes ek-slide-left{ from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } } .ek-in-up { animation: ek-fade-up var(--dur-story) var(--ease-out) both; } .ek-in-fade { animation: ek-fade-in var(--dur-base) var(--ease-out) both; } .ek-in-scale { animation: ek-scale-in var(--dur-base) var(--ease-out) both; } .ek-in-down { animation: ek-slide-down var(--dur-slow) var(--ease-out) both; } /* --- 3. CHEK CHOP ETISH YUKLOVCHISI --------------------------------------- */ .ek-printing { --w: 96px; width: var(--w); } .ek-printing__slot { height: 8px; border-radius: 4px; background: var(--fg-tertiary, #93A0B5); opacity: .35; } .ek-printing__paper { overflow: hidden; animation: ek-paper 2.2s var(--ease-out) infinite; } @keyframes ek-paper { 0% { max-height: 0; opacity: 0 } 12% { opacity: 1 } 55%, 80% { max-height: 96px; opacity: 1 } 100% { max-height: 96px; opacity: 0 } } .ek-printing__line { height: 5px; border-radius: 3px; margin: 7px 8px 0; background: var(--border-subtle, #DDE2EB); animation: ek-line 2.2s var(--ease-out) infinite; opacity: 0; } .ek-printing__line:nth-child(1) { animation-delay: .22s; width: 72% } .ek-printing__line:nth-child(2) { animation-delay: .40s; width: 54% } .ek-printing__line:nth-child(3) { animation-delay: .58s; width: 82% } .ek-printing__line:nth-child(4) { animation-delay: .76s; width: 40%; background: var(--ek-green-400, #35C863); height: 7px } @keyframes ek-line { 0%,8% {opacity:0; transform:translateY(-4px)} 20%,88% {opacity:1;transform:none} 100%{opacity:0} } /* --- 4. SKELETON ---------------------------------------------------------- */ .ek-skeleton { position: relative; overflow: hidden; background: var(--bg-sunken, #EDF0F5); border-radius: var(--r-sm, 6px); } .ek-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent); animation: ek-shimmer 1.4s var(--ease-linear) infinite; } [data-theme="dark"] .ek-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); } @keyframes ek-shimmer { to { transform: translateX(100%) } } /* --- 5. SPINNER (faqat kichik, inline) ------------------------------------ */ .ek-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: ek-spin .7s var(--ease-linear) infinite; display: inline-block; } @keyframes ek-spin { to { transform: rotate(360deg) } } /* --- 6. MIKRO-O'ZARO TA'SIRLAR -------------------------------------------- */ .ek-press { transition: transform var(--dur-instant) var(--ease-out) } .ek-press:active { transform: scale(.97) } @keyframes ek-pop { 0%{transform:scale(1)} 45%{transform:scale(1.045)} 100%{transform:scale(1)} } .ek-pop { animation: ek-pop 320ms var(--ease-spring) } @keyframes ek-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} } .ek-shake { animation: ek-shake 320ms var(--ease-out) } /* bir marta, takrorlanmaydi */ @keyframes ek-row-in { from { opacity:0; transform:translateY(-10px) } to { opacity:1; transform:none } } .ek-row-in { animation: ek-row-in 240ms var(--ease-out) both } /* --- 7. TASDIQ BELGISI CHIZILISHI ----------------------------------------- */ .ek-check-draw { stroke-dasharray: 20; stroke-dashoffset: 20; animation: ek-draw 420ms var(--ease-out) forwards; } @keyframes ek-draw { to { stroke-dashoffset: 0 } } /* --- 8. MODAL / DRAWER ---------------------------------------------------- */ .ek-overlay { animation: ek-fade-in var(--dur-base) var(--ease-out) both } .ek-dialog { animation: ek-dialog var(--dur-base) var(--ease-out) both } @keyframes ek-dialog { from { opacity:0; transform:scale(.96) translateY(8px) } to { opacity:1; transform:none } } .ek-drawer-right { animation: ek-drawer-r var(--dur-slow) var(--ease-out) both } @keyframes ek-drawer-r { from { transform: translateX(100%) } to { transform: none } } .ek-drawer-bottom { animation: ek-drawer-b var(--dur-slow) var(--ease-out) both } @keyframes ek-drawer-b { from { transform: translateY(100%) } to { transform: none } } /* --- 9. TOAST ------------------------------------------------------------- */ .ek-toast-in { animation: ek-toast-in 280ms var(--ease-spring) both } .ek-toast-out { animation: ek-toast-out 180ms var(--ease-in) both } @keyframes ek-toast-in { from { opacity:0; transform:translateY(16px) scale(.96) } to { opacity:1; transform:none } } @keyframes ek-toast-out { to { opacity:0; transform:translateY(8px) scale(.98) } } /* --- 10. KARUSEL ---------------------------------------------------------- */ .ek-carousel { position: relative; overflow: hidden } .ek-carousel__track { display: flex; transition: transform 420ms var(--ease-out); will-change: transform; } .ek-carousel__slide { flex: 0 0 100%; min-width: 0 } .ek-carousel__dots { display: flex; gap: 6px; justify-content: center } .ek-carousel__dot { width: 7px; height: 7px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--border-strong, #C3CBD9); transition: width var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .ek-carousel__dot[aria-selected="true"] { width: 22px; background: var(--bg-brand, #1663D8) } /* --- 11. OFLAYN TASMASI --------------------------------------------------- */ .ek-offline-bar { animation: ek-slide-down var(--dur-slow) var(--ease-out) both } /* --- 12. BREND INTROSI — vaqtlar JS bilan boshqariladi -------------------- */ .ek-intro__back { animation: ek-slide-left 460ms var(--ease-out) both; animation-delay: 0ms } .ek-intro__front { animation: ek-scale-in 460ms var(--ease-spring) both; animation-delay: 140ms } .ek-intro__ln { animation: ek-wipe 300ms var(--ease-out) both } .ek-intro__ln:nth-of-type(1) { animation-delay: 380ms } .ek-intro__ln:nth-of-type(2) { animation-delay: 460ms } @keyframes ek-wipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } } .ek-intro__chk { stroke-dasharray: 20; stroke-dashoffset: 20; animation: ek-draw 420ms var(--ease-out) 620ms forwards } .ek-intro__char { animation: ek-fade-up 360ms var(--ease-out) both } /* ========================================================================== 13+ — LOYIHAGA QO'SHILGANLAR ========================================================================== */ /* --- 13. CHEK QIRRASI (brend imzosi) -------------------------------------- */ /* Yirtilgan qog'oz qirrasi. Landing yakuniy CTA, login o'ng panel, chek bloki. */ .ek-tear { --tear: 9px; position: relative; } .ek-tear::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--tear) * -1); height: var(--tear); background: inherit; -webkit-mask-image: radial-gradient(var(--tear) at var(--tear) 0, transparent 99%, #000 100%); mask-image: radial-gradient(var(--tear) at var(--tear) 0, transparent 99%, #000 100%); -webkit-mask-size: calc(var(--tear) * 2) 100%; mask-size: calc(var(--tear) * 2) 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; } /* --- 14. TAB INDIKATORI --------------------------------------------------- */ /* 03-MOTION.md: ostidagi indikator siljiydi (transform), kontent opacity bilan. */ .ek-tab-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--bg-brand); transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); } /* --- 15. SAHIFA O'TISHI --------------------------------------------------- */ /* Faqat opacity, 140ms. Siljish YO'Q — POS'da chalg'itadi. */ .ek-page-in { animation: ek-fade-in var(--dur-fast) var(--ease-out) both } /* --- 16. KAM QOLDIQ PULSATSIYASI ----------------------------------------- */ /* Bir marta, miltillash yo'q. */ @keyframes ek-pulse-once { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} } .ek-pulse-once { animation: ek-pulse-once 420ms var(--ease-spring) } /* --- 17. RAQAM SANASH ----------------------------------------------------- */ /* JS qiymatni yangilaydi; CSS faqat kenglik sakramasligini kafolatlaydi. */ .ek-countup { font-variant-numeric: tabular-nums } /* ═══ 3/6 — UMUMIY KOMPONENTLAR ════════════════════════════════════ */ /* ========================================================================== e-Kassam — umumiy komponent uslublari `packages/ui/components/*.jsx` shu fayldagi klasslarga tayanadi. Import tartibi: tokens → motion → ek-components → ilovaning o'z stili. MANBA FAYL — sync-tokens.ps1 ilovalarga tarqatadi. ========================================================================== */ /* ── KPI kartochkasi (07-ADMIN.md, "Bosh sahifa") ────────────────────────── */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); box-shadow: var(--sh-sm); } .kpi__label { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-secondary); } .kpi__value { /* Tabular figures majburiy — sanash paytida kenglik sakramasligi uchun */ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; color: var(--fg-primary); } .kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; } .kpi__delta[data-dir="up"] { color: var(--fg-success); } .kpi__delta[data-dir="down"] { color: var(--fg-danger); } .kpi__delta[data-dir="flat"] { color: var(--fg-tertiary); } /* ── "E'tibor talab qiladi" — panelning yuragi ───────────────────────────── */ .attn__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--hit-min); padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg-primary); transition: background var(--dur-fast) var(--ease-out); } .attn__row:last-child { border-bottom: 0; } .attn__row:hover { background: var(--bg-hover); } .attn__icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-md); font-size: 13px; } .attn__icon[data-tone="danger"] { background: var(--bg-danger-subtle); color: var(--fg-danger); } .attn__icon[data-tone="warning"] { background: var(--bg-warning-subtle); color: var(--fg-warning); } .attn__icon[data-tone="info"] { background: var(--bg-brand-subtle); color: var(--fg-brand); } /* ⚠ `flex-shrink: 0` + `nowrap` — satrning o'ng chetida endi soni emas, SUMMA turishi mumkin ("1 250 000"). Ular yo'q edi va telefon ekranida uzun summa o'rtadagi matn bilan bir-birini siqib, ikkalasi ham o'qib bo'lmas holga kelardi. Matn o'ralsin — raqam butun qolsin. */ .attn__count { margin-left: auto; font-weight: 700; flex-shrink: 0; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .attn__empty { padding: 30px 20px; text-align: center; color: var(--fg-secondary); font-size: var(--fs-sm); } .attn__empty i { display: block; margin-bottom: 10px; font-size: 26px; color: var(--fg-success); } /* ── Jadval shaklidagi skeleton ────────────────────────────────────────── Spinner emas: skeleton kelajakdagi kontentning aniq shaklida bo'ladi, aks holda ma'lumot kelganda layout sakraydi (03-MOTION.md #3). */ .ek-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } .ek-skel-row > span { height: 12px; border-radius: var(--r-sm); } .ek-skel-row > span:nth-child(1) { flex: 2 } .ek-skel-row > span:nth-child(2) { flex: 3 } .ek-skel-row > span:nth-child(3) { flex: 1 } /* ── Jadval standarti (07-ADMIN.md) ────────────────────────────────────── Qator 44px · sarlavha yopishqoq · summalar o'ngga, monoshriftda */ th { position: sticky; top: 0; z-index: 2; } tbody td { height: var(--hit-min); } td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════════════ TEMA TANLAGICHI ══════════════════════════════════════════════════════════════════════════ */ .ek-theme-select { display: inline-flex; align-items: center; gap: 7px; min-height: var(--hit-md); padding: 0 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-surface); color: var(--fg-secondary); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out); } .ek-theme-select:hover { border-color: var(--border-strong); } .ek-theme-select:focus-within { border-color: var(--border-brand); box-shadow: var(--focus-ring); } .ek-theme-select > i { font-size: 13px; flex-shrink: 0; } .ek-theme-select select { border: 0; background: none; outline: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; color: inherit; min-width: 0; } /* Yig'ilgan yon menyuda faqat ikonka ko'rinadi */ .ek-theme-select.is-compact { padding: 0; width: var(--hit-md); justify-content: center; } .ek-theme-select.is-compact select { position: absolute; opacity: 0; width: var(--hit-md); height: var(--hit-md); cursor: pointer; } /* Yon menyu ichida — u o'z fon va matn rangiga ega */ .sb-foot .ek-theme-select, .sb-footer .ek-theme-select { width: 100%; background: var(--sb-control-bg, transparent); border-color: var(--sb-control-border, transparent); color: var(--sb-control-fg, inherit); } .sb-foot .ek-theme-select:hover, .sb-footer .ek-theme-select:hover { background: var(--sb-hover, rgba(255,255,255,.09)); } .sb-foot .ek-theme-select select, .sb-footer .ek-theme-select select { flex: 1; } /* Ochilgan ro'yxat OS chizadi — u har doim o'qiladigan bo'lishi uchun variantlarga aniq rang beramiz (qorong'i menyuda oq matn qora ro'yxatda ko'rinmay qolardi). */ .ek-theme-select option { background: var(--bg-surface); color: var(--fg-primary); } /* ══════════════════════════════════════════════════════════════════════════ SOZLAMALAR SAHIFASI Barcha sozlamalar (tema, til, interfeys) shu bitta ekranda. Ilgari tema yon menyu tagida turardi va uni topish uchun menyuni ochish kerak edi. Qatorlar bir ustunda: chapda nom + izoh, o'ngda boshqaruv. 640px dan torda ustma-ust tushadi — boshqaruv siqilib ketmasin. ══════════════════════════════════════════════════════════════════════════ */ .set-page { display: flex; flex-direction: column; gap: 14px; max-width: 760px; } .set-card__hint { margin: 0; padding: 0 18px 4px; font-size: 12.5px; color: var(--fg-secondary); line-height: 1.5; } .set-list { padding: 4px 18px 16px; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--hit-min); padding: 12px 0; border-bottom: 1px solid var(--border-subtle); } .set-row:last-child { border-bottom: none; } .set-row__text { min-width: 0; } .set-row__label { font-size: 13.5px; font-weight: 700; color: var(--fg-primary); } /* Izoh `--fg-secondary` — `--fg-tertiary` oq fonda 2.65:1 beradi va o'qiladigan matnga yaramaydi (09-CHETLANISHLAR.md §1k). */ .set-row__hint { margin-top: 3px; font-size: 12px; color: var(--fg-secondary); line-height: 1.45; } .set-row__control { flex-shrink: 0; } .set-value { font-size: 13.5px; font-weight: 700; color: var(--fg-primary); } @media (max-width: 640px) { .set-row { flex-direction: column; align-items: stretch; } .set-row__control { width: 100%; } } /* ── Ikki holatli tugma (switch) ──────────────────────────────────────── Faqat HOLAT IKKITA bo'lganda. Uch holatli narsa (tema) uchun `Select` ishlatiladi — tugma "Tizim" ni ifodalay olmaydi. */ .ek-switch { display: inline-flex; align-items: center; gap: 9px; min-height: var(--hit-min); padding: 6px 12px 6px 6px; border: 1.5px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface); color: var(--fg-secondary); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ek-switch__knob { width: 34px; height: 20px; border-radius: 999px; background: var(--bg-sunken); position: relative; flex-shrink: 0; transition: background var(--dur-fast) var(--ease-out); } .ek-switch__knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-out); } .ek-switch.on { border-color: var(--border-brand); /* ⚠ `--fg-brand` (ko'k) oq fonda 3.5:1 — 12.5px matn uchun YETARLI EMAS (axe: color-contrast). To'q variant olinadi; qorong'i temada esa `--fg-brand` allaqachon yorug' ko'k va u to'g'ri. */ color: var(--ek-blue-700); } [data-theme="dark"] .ek-switch.on { color: var(--fg-brand); } .ek-switch.on .ek-switch__knob { background: var(--bg-brand); } .ek-switch.on .ek-switch__knob::after { transform: translateX(14px); } .ek-switch:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; } /* Harakat kamaytirilgan bo'lsa — siljish yo'q, faqat rang (CLAUDE.md #4) */ @media (prefers-reduced-motion: reduce) { .ek-switch, .ek-switch__knob, .ek-switch__knob::after { transition: none; } } /* ── Ogohlantirish/ma'lumot bloki ─────────────────────────────────────── Ilgari har sahifada inline `#fffbeb` / `#fcd34d` / `#92400e` yozilardi. Ular qorong'i rejimda o'qib bo'lmas darajada och sariq bo'lib chiqardi (CLAUDE.md #1: kodda rang yozilmaydi). ⚠ BU YAGONA TA'RIF (2026-09-22). Kassa ilovasining `styles.css` ida ikkinchisi turardi — ko'k asos va `--warn` nomli variant bilan — va u KEYIN yuklanib g'olib chiqardi. Oqibati: oddiy `.ek-note` kassada ko'k, superadmin panelida kulrang chizilardi; `--warning` kassada, `--warn` esa adminda O'LIK edi. Mos qoida topilmagan klass hech qayerda xato bermaydi — element asosiy uslubda qolaveradi, xolos. Batafsil: `docs/09-CHETLANISHLAR.md` §10ŭ. ⚠ ASOS NEYTRAL, KO'K EMAS. Rang — signal (CLAUDE.md #6), shuning uchun u ATAYLAB tanlanishi kerak: `--info` yozilmasa, blok «ma'lumot» deb da'vo qilmaydi. Ilgari kassada asosning o'zi ko'k edi va har qanday izoh brend rangida chiqardi. Lug'at: `--info` (ko'k) · `--warning` (sariq) · `--danger` (qizil). */ .ek-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border-subtle); background: var(--bg-sunken); color: var(--fg-secondary); font-size: 12.5px; font-weight: 700; line-height: 1.5; margin-bottom: 14px; } .ek-note i { margin-top: 2px; flex-shrink: 0; } .ek-note--warning { background: var(--bg-warning-subtle); border-color: var(--border-warning); color: var(--fg-warning); } .ek-note--info { background: var(--bg-brand-subtle); border-color: var(--border-brand); color: var(--fg-brand); } .ek-note--danger { background: var(--bg-danger-subtle); border-color: var(--border-danger); color: var(--fg-danger); } /* ── Ariza xabari jadval katakchasida ─────────────────────────────────── Xabar uzun bo'lishi mumkin, lekin qator balandligi 44px bo'lib qolishi kerak — aks holda jadval o'qilmaydi. Ikki qatorga qisqartiriladi va bosilganda to'liq matn modalda ochiladi. */ .req-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; border: none; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .req-msg:hover { color: var(--fg-brand); } .req-msg:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; border-radius: var(--r-sm); } /* KPI izohi — yorliq ostida, raqamdan keyin. `--fg-secondary`, chunki bu o'qilishi kerak bo'lgan matn (09-CHETLANISHLAR.md §1k). */ .kpi__hint { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--fg-secondary); line-height: 1.35; } /* ── Toast dastasi ──────────────────────────────────────────────────────── Ekranning YUQORI O'RTASIDA. Kartochkalar bir-birining USTIDA turadi: eng yangisi to'liq ko'rinadi, oldingilari ortidan pastdan mo'ralaydi. ⚠ Nechta xabar bo'lsa ham dasta BIR XIL joy egallaydi. Ilgari ular ustun bo'lib terilardi va oltita bir xil xato ekranni yuqoridan pastgacha yopib qo'yardi. Shu sababli kartochkalar `absolute` — o'ram balandligi ularga bog'liq emas. Chuqurlik `--depth` orqali keladi (0 — oldingi kartochka). */ .ek-toast-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); width: min(440px, calc(100vw - 32px)); /* Fon bo'sh joyi bosishni yutmasin — kartochkalar o'zi qaytarib oladi. */ pointer-events: none; } .ek-toast-slot { pointer-events: auto; /* ⚠ `bottom center` ATAYLAB. `top` bo'lsa, kichraytirish kartochkaning PASTKI qirrasini yuqoriga tortadi va mo'ralash yo'qoladi. Pastdan kichraytirilganda pastki qirra joyida qoladi, ya'ni ko'rinadigan bo'lak faqat siljishdan hosil bo'ladi va u aniq: har qatlam 8px. */ transform-origin: bottom center; transform: translateY(calc(var(--depth, 0) * 8px)) scale(calc(1 - var(--depth, 0) * 0.04)); opacity: calc(1 - var(--depth, 0) * 0.3); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } /* Oldingi kartochka OQIMDA — dastaning balandligini aynan u belgilaydi. */ .ek-toast-slot--lead { position: relative; } /* Ortdagilar oldingisining o'lchamiga tortiladi. ⚠ Busiz ular o'z balandligicha qolardi: oldingisi ikki qatorli bo'lsa, bir qatorli ortdagi kartochka uning ostida BUTUNLAY berkilib ketardi — aynan shu sababli dasta ko'rinmay qolgan edi. */ .ek-toast-slot--back { position: absolute; inset: 0; } .ek-toast-slot--back .ek-toast-card { height: 100%; } .ek-toast-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid transparent; /* rangi turiga qarab JSX dan keladi */ border-radius: var(--r-lg); box-shadow: var(--sh-lg); } .ek-toast-card > i { font-size: 16px; margin-top: 1px; flex-shrink: 0; } /* Oldingi kartochkani TEPAGA surib yopish mumkin. `touch-action: none` busiz sensorli ekranda brauzer sahifani aylantirib yuborardi va surish umuman ishlamasdi. */ .ek-toast-card--grab { position: relative; cursor: grab; touch-action: none; user-select: none; } .ek-toast-card--grab:active { cursor: grabbing; } /* Surish mumkinligining ishorasi — tepadagi kichik dastak. `absolute`, chunki flex qatorini surib yubormasligi kerak. */ .ek-toast-card--grab::before { content: ""; position: absolute; top: 5px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 999px; background: currentColor; opacity: .28; } .ek-toast-msg { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.45; } /* Takrorlangan xabar hisoblagichi — «×3». */ .ek-toast-count { flex-shrink: 0; padding: 1px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; } .ek-toast-x { flex-shrink: 0; border: none; background: none; padding: 0; font-size: 14px; line-height: 1; opacity: .6; cursor: pointer; } .ek-toast-x:hover { opacity: 1; } /* Harakatni kamaytirish so'ralganda dasta siljimaydi — faqat shaffoflik. */ @media (prefers-reduced-motion: reduce) { .ek-toast-slot { transition: opacity var(--dur-fast) linear; } } /* ═══ 4/6 — YUKLANISH TIZIMI ═══════════════════════════════════════ */ /* ========================================================================== e-Kassam — YUKLANISH TIZIMI 03-MOTION.md #2 (chek chop etish), #3 (skeleton), "Nima qilinmaydi" Beshta a'zo, har biri ANIQ bir vazifa uchun. Tanlash qoidasi: ┌ Nima kutilmoqda? → Qaysi a'zo │ Shakli MA'LUM kontent (jadval, → SKELETON — kelajakdagi shaklda │ ro'yxat, kartochka, forma) │ Ekranda kontent BOR, yangilanmoqda → PROGRESS — yuqorida ingichka chiziq │ Mahsulotga xos uzun amal (sotuv, → CHEK — brendning o'z tili │ hisobot, eksport) │ Ilova birinchi ko'tarilishi → BREND BELGISI │ Tugma ichida → SPINNER (faqat inline, 16px) └ Umumiy spinner bilan butun sahifani qoplash TAQIQLANADI: u hech narsa aytmaydi, kontent kelganda esa layout sakraydi. MANBA FAYL — packages/ui/ da tahrirlanadi, sync-tokens.ps1 tarqatadi. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ 1. SKELETON — kelajakdagi kontentning ANIQ shaklida ══════════════════════════════════════════════════════════════════════════ */ .ek-sk { position: relative; overflow: hidden; display: block; background: var(--bg-sunken); border-radius: var(--r-sm); /* Kontent kelganda o'lcham o'zgarmasligi uchun balandlik doim beriladi */ height: 12px; } .ek-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-surface) 70%, transparent), transparent); animation: ek-sk-shimmer 1.4s linear infinite; } [data-theme="dark"] .ek-sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); } @keyframes ek-sk-shimmer { to { transform: translateX(100%) } } /* Yorug'lik to'lqini harakat — reduced-motion da u o'chadi va statik tus qoladi. Skeletonning O'ZI qolishi shart: u kontent shaklini bildiradi, bezak emas. */ @media (prefers-reduced-motion: reduce) { .ek-sk::after { animation: none; opacity: .5; } } /* Variantlar — balandlik va shakl */ .ek-sk--text { height: 12px; } .ek-sk--title { height: 18px; } .ek-sk--num { height: 24px; } .ek-sk--line { height: 10px; } .ek-sk--circle { border-radius: 50%; } .ek-sk--pill { border-radius: var(--r-full); height: 22px; } .ek-sk--block { border-radius: var(--r-md); } /* Guruhda to'lqin ketma-ket ketadi — bir vaqtda yonib-o'chish g'alati ko'rinadi */ .ek-sk-group > *:nth-child(2) .ek-sk::after, .ek-sk-group > *:nth-child(2) > .ek-sk::after { animation-delay: .12s; } .ek-sk-group > *:nth-child(3) .ek-sk::after, .ek-sk-group > *:nth-child(3) > .ek-sk::after { animation-delay: .24s; } .ek-sk-group > *:nth-child(4) .ek-sk::after, .ek-sk-group > *:nth-child(4) > .ek-sk::after { animation-delay: .36s; } .ek-sk-group > *:nth-child(n+5) .ek-sk::after { animation-delay: .48s; } /* ── Jadval skeleti ──────────────────────────────────────────────────────── Qator balandligi haqiqiy jadvalniki bilan BIR XIL (44px) — aks holda ma'lumot kelganda sahifa sakraydi. */ .ek-sk-table { width: 100%; } .ek-sk-tr { display: flex; align-items: center; gap: 14px; height: var(--hit-min); padding: 0 14px; border-bottom: 1px solid var(--border-subtle); } .ek-sk-tr:last-child { border-bottom: 0; } .ek-sk-tr > * { flex: 1 1 0; min-width: 0; } .ek-sk-tr > .is-narrow { flex: 0 0 44px; } .ek-sk-tr > .is-wide { flex: 2 1 0; } /* Summalar ustuni o'ngga tekislangan — haqiqiy jadvaldagidek */ .ek-sk-tr > .is-num .ek-sk { margin-left: auto; width: 62%; } /* ── Kartochka skeleti ─────────────────────────────────────────────────── */ .ek-sk-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); } /* ── Ro'yxat satri (avatar + ikki qator matn) ──────────────────────────── */ .ek-sk-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); } .ek-sk-row:last-child { border-bottom: 0; } .ek-sk-row__body { flex: 1; display: grid; gap: 7px; } /* ── Kassir katakchalari ───────────────────────────────────────────────── */ .ek-sk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; padding: 12px; } .ek-sk-tile { display: flex; flex-direction: column; gap: 7px; min-height: var(--hit-pos); padding: 12px; border: 1.5px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); } /* ── Forma maydonlari ──────────────────────────────────────────────────── */ .ek-sk-form { display: grid; gap: 14px; } .ek-sk-field { display: grid; gap: 6px; } /* ══════════════════════════════════════════════════════════════════════════ 2. PROGRESS — ekranda kontent BOR, u yangilanmoqda Sahifani qoplamaydi, layoutni surmaydi: `position: fixed`, 2px. ══════════════════════════════════════════════════════════════════════════ */ .ek-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: var(--z-toast); background: var(--bg-brand-soft); overflow: hidden; pointer-events: none; } .ek-progress__bar { position: absolute; inset: 0; background: var(--bg-brand); transform-origin: 0 50%; animation: ek-progress 1.15s var(--ease-out) infinite; } /* Ikkita bosqich: tez chiqadi, so'ng sekin cho'ziladi — "ish ketyapti" hissi beradi, lekin yolg'on foiz ko'rsatmaydi. */ @keyframes ek-progress { 0% { transform: translateX(-100%) scaleX(.35); } 55% { transform: translateX(20%) scaleX(.55); } 100% { transform: translateX(110%) scaleX(.35); } } @media (prefers-reduced-motion: reduce) { .ek-progress__bar { animation: none; transform: none; opacity: .7; } } /* Panel ichida (yon menyu hisobga olingan holda) */ .ek-progress--inset { left: var(--current-sw, 0); } /* ══════════════════════════════════════════════════════════════════════════ 3. CHEK CHOP ETISH — mahsulotning o'z tili Sotuv yakunlash, hisobot generatsiyasi, eksport. ══════════════════════════════════════════════════════════════════════════ */ .ek-printing { --w: 96px; width: var(--w); } .ek-printing__slot { height: 8px; border-radius: 4px; background: var(--fg-tertiary); opacity: .35; } .ek-printing__paper { overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); animation: ek-paper 2.2s var(--ease-out) infinite; } @keyframes ek-paper { 0% { max-height: 0; opacity: 0 } 12% { opacity: 1 } 55%, 80% { max-height: 96px; opacity: 1 } 100% { max-height: 96px; opacity: 0 } } .ek-printing__line { height: 5px; border-radius: 3px; margin: 7px 8px 0; background: var(--border-subtle); animation: ek-line 2.2s var(--ease-out) infinite; opacity: 0; } .ek-printing__line:nth-child(1) { animation-delay: .22s; width: 72% } .ek-printing__line:nth-child(2) { animation-delay: .40s; width: 54% } .ek-printing__line:nth-child(3) { animation-delay: .58s; width: 82% } .ek-printing__line:nth-child(4) { animation-delay: .76s; width: 40%; background: var(--ek-green-400); height: 7px } @keyframes ek-line { 0%,8% { opacity: 0; transform: translateY(-4px) } 20%,88% { opacity: 1; transform: none } 100% { opacity: 0 } } @media (prefers-reduced-motion: reduce) { .ek-printing__paper, .ek-printing__line { animation: none; opacity: 1; max-height: none; } } /* ══════════════════════════════════════════════════════════════════════════ 4. BREND BELGISI — ilova birinchi ko'tarilishi Belgi chizmasi bir tekis "nafas oladi", ✓ esa qayta-qayta chiziladi. Bu yerda spinner bo'lishi mumkin edi, lekin birinchi ekran — brend bilan birinchi uchrashuv. ══════════════════════════════════════════════════════════════════════════ */ .ek-boot { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; gap: 18px; align-content: center; background: var(--bg-canvas); } .ek-boot__mark { width: 72px; height: 72px; overflow: visible; } .ek-boot__mark .paper { transform-origin: 50% 60%; animation: ek-boot-breathe 1.8s var(--ease-out) infinite; } @keyframes ek-boot-breathe { 0%, 100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.04); opacity: 1 } } .ek-boot__mark .check { stroke-dasharray: 22; stroke-dashoffset: 22; animation: ek-boot-draw 1.8s var(--ease-out) infinite; } @keyframes ek-boot-draw { 0% { stroke-dashoffset: 22 } 45%, 75% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 0; opacity: 0 } } .ek-boot__text { font-size: var(--fs-sm); color: var(--fg-secondary); letter-spacing: .04em; } @media (prefers-reduced-motion: reduce) { .ek-boot__mark .paper { animation: none; } .ek-boot__mark .check { animation: none; stroke-dashoffset: 0; } } /* ══════════════════════════════════════════════════════════════════════════ 5. INLINE SPINNER — FAQAT tugma yoki matn ichida ══════════════════════════════════════════════════════════════════════════ */ .ek-spinner { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: ek-spin .7s linear infinite; vertical-align: -3px; } .ek-spinner--sm { width: 13px; height: 13px; border-width: 1.5px; } @keyframes ek-spin { to { transform: rotate(360deg) } } /* reduced-motion da aylanish sekinlashadi, lekin QOLADI: u yagona "ish ketyapti" signali va uni yo'qotish holatni yashiradi. */ @media (prefers-reduced-motion: reduce) { .ek-spinner { animation-duration: 2.4s; } } /* ── Tugma yuklanish holati ──────────────────────────────────────────────── Kenglik O'ZGARMAYDI: matn o'rnini spinner egallaydi (02-DESIGN-SYSTEM.md). `[data-loading]` bo'lgan tugma bosilmaydi va o'quvchiga `aria-busy` beradi. */ [data-loading="true"] { pointer-events: none; position: relative; } [data-loading="true"] > * { visibility: hidden; } [data-loading="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ek-spin .7s linear infinite; } /* ══════════════════════════════════════════════════════════════════════════ Umumiy: yuklanish maydoni ══════════════════════════════════════════════════════════════════════════ */ /* Ekran o'quvchi uchun holat matni — ko'z bilan ko'rinmaydi */ .ek-loading-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ═══ 5/6 — SELECT ═════════════════════════════════════════════════ */ /* ========================================================================== e-Kassam — SELECT Nega o'zimizniki: brauzerning `