/* ========================================================================== SINOV — Design tokens & component layer "Kelajakka ta'lim" dizayn tizimi: akademik ishonch + matematik grid. Display: Sora · Body: Manrope · Brend: ko'k (#1F4E79) + oltin (#F5A524). Single source of truth for the look. Tailwind (see base.html) references these RGB triplets via rgb(var(--x) / ), so re-theming the whole product = editing the values in :root below. See DESIGN.md for the rationale. ========================================================================== */ :root { /* --- Text (navy-asosli) — space-separated RGB so Tailwind alpha works --- */ --ink: 17 32 58; /* #11203A navy — headings / primary text */ --ink-700: 43 58 85; /* #2B3A55 body text navy */ --ink-600: 40 100 160; /* #2864A0 link / interactive blue */ --ink-400: 133 147 169; /* #8593A9 muted text */ --ink-300: 170 182 200; /* #AAB6C8 faint text / icons */ --paper: 245 248 252; /* #F5F8FC app background (soft blue) */ --surface: 255 255 255; /* #FFFFFF cards */ --line: 228 235 243; /* #E4EBF3 hairline borders */ --line-soft: 238 244 251; /* #EEF4FB faint dividers */ --line-strong: 210 221 233; /* #D2DDE9 field borders */ /* --- Brend ko'k shkalasi ------------------------------------------------ */ --brand: 31 78 121; /* #1F4E79 asosiy quyuq ko'k */ --brand-deep: 21 54 91; /* #15365B footer / eng quyuq */ --brand-800: 26 66 105; /* #1A4269 */ --brand-600: 40 100 160; /* #2864A0 */ --brand-bright: 46 117 182; /* #2E75B6 yorqin ko'k */ --brand-400: 91 151 207; /* #5B97CF */ --brand-200: 196 221 242; /* #C4DDF2 */ --brand-100: 230 240 250; /* #E6F0FA */ --brand-50: 242 247 252; /* #F2F7FC */ /* --- Oltin urg'u (CTA, timer, gamifikatsiya) + semantics ---------------- */ --saffron: 245 165 36; /* #F5A524 gold-500 */ --saffron-soft: 255 190 77; /* #FFBE4D gold-400 */ --saffron-deep: 214 134 10; /* #D6860A gold-600 */ --correct: 46 125 50; /* #2E7D32 right answers — never branding */ --wrong: 192 57 43; /* #C0392B wrong answers — never branding */ --info: 46 117 182; /* shares bright brand blue */ /* --- Radii scale (yumaloq, mehribon) ------------------------------------ */ --r-chip: 999px; /* pill chips */ --r-card: 20px; --r-field: 14px; /* --- Elevation (mayin, qatlamli) ----------------------------------------- */ --shadow-card: 0 2px 8px rgb(var(--ink) / .06); --shadow-pop: 0 18px 48px rgb(var(--ink) / .12); --shadow-brand: 0 12px 30px rgb(var(--brand) / .22); --shadow-gold: 0 10px 26px rgb(var(--saffron-deep) / .28); --ring-focus: 0 0 0 3px rgb(var(--brand-400) / .55); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* --- Test matni shrifti — kursxona qog'ozdagi variant bilan bir xil ko'rinishini so'raydi, shuning uchun savol/variant matni Times New Roman. Interfeys (tugma, menyu, sarlavha) o'z shriftida qoladi. --- */ --font-savol: "Times New Roman", Times, "Liberation Serif", serif; /* Ustki yorug'lik chizig'i (bo'rtma taassurot) — qorong'ida so'ndiriladi */ --emboss: rgb(255 255 255 / .6); color-scheme: light; } /* ========================================================================== QORONG'I REJIM («tungi rejim») YAGONA USUL: yuqoridagi tokenlar QAYTA E'LON QILINADI, komponentlar tegilmaydi. Butun dizayn tizimi (Tailwind utility'lari ham — ular `rgb(var(--x) / )` orqali o'qiydi) shu o'nlab qiymatdan chiqadi, ya'ni `bg-surface`, `text-ink`, `border-line`, `.card`, `.btn`, `.field` — hammasi o'z-o'zidan ag'dariladi. Har bir shablonni qo'lda `dark:` variantlari bilan bezash SHART EMAS va zararli ham bo'lardi: 90 ta shablon bor, bittasi esdan chiqsa oq karta qorong'i sahifada ko'r qiladi. Belgini `` qo'yadi — uni `base.html` ning boshidagi kichkina skript sahifa CHIZILISHIDAN OLDIN yozadi (aks holda qorong'i rejimda har sahifada oq chaqnash ko'rinardi). Skript har doim aniq qiymat yozadi ("light" yoki "dark"), shuning uchun bu yerda `prefers-color-scheme` ni takrorlash shart emas — JS o'chirilgan brauzerda sayt yorug' qoladi (xavfsiz standart). IKKI QOIDA, buzilmasin: 1. `--ink` — bu MATN rangi, «qora» emas. Shuning uchun `bg-ink/8` kabi qatlamlar qorong'i rejimda o'z-o'zidan yorug' pardaga aylanadi va to'g'ri ishlaydi. Yangi qatlam qo'shganda ham `--ink` dan foydalaning, literal qora/oqdan emas. 2. `--brand` — MATN sifatida o'qiladigan rang bo'lishi kerak, shuning uchun qorong'ida u OCHIQ ko'k. Uni FON sifatida ishlatadigan bir nechta komponent (javob varaqasi doirachalari) pastda alohida tuzatilgan — ochiq ko'k fonda oq matn o'qilmaydi. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* --- Matn: oq emas, ko'kimtir och kul — uzoq o'qishda ko'z charchamaydi -- */ --ink: 232 238 247; /* #E8EEF7 sarlavha / asosiy matn */ --ink-700: 198 210 227; /* #C6D2E3 matn */ --ink-600: 127 178 232; /* #7FB2E8 havola */ --ink-400: 132 148 171; /* #8494AB so'nik matn */ --ink-300: 107 123 147; /* #6B7B93 eng so'nik / ikonka */ /* --- Yuzalar: navy tusli qora (sof qora emas — brend ko'kiga yaqin) ----- */ --paper: 13 21 36; /* #0D1524 sahifa foni */ --surface: 21 31 51; /* #151F33 karta */ --line: 37 49 72; /* #253148 chegara */ --line-soft: 28 39 64; /* #1C2740 so'nik ajratgich */ --line-strong: 54 70 97; /* #364661 maydon chegarasi */ /* --- Brend ko'k: 50/100/200 — YORUG' tus emas, QORONG'I tus. Ular fon sifatida ishlatiladi (`.btn-ghost:hover`, `.answer:hover`, `.exam-timer`), demak qorong'ida ham fon bo'lib qolishi kerak. 600/800/bright esa oq matnli tugma gradienti — deyarli o'sha-o'sha, faqat bir oz yorqinroq, chunki qorong'i fonda ko'k so'nib ketadi. -- */ --brand: 124 182 234; /* #7CB6EA MATN uchun ochiq ko'k */ --brand-deep: 10 22 40; /* #0A1628 eng quyuq (footer) */ --brand-800: 31 84 138; /* #1F548A */ --brand-600: 45 109 175; /* #2D6DAF */ --brand-bright: 62 137 214; /* #3E89D6 */ --brand-400: 111 168 220; /* #6FA8DC fokus halqasi */ --brand-200: 45 72 106; /* #2D486A */ --brand-100: 30 47 75; /* #1E2F4B tanlangan holat foni */ --brand-50: 24 38 61; /* #18263D hover foni */ /* --- Oltin: bir oz yorqinroq; `deep` qorong'ida MATN bo'lgani uchun yorug'lashtiriladi (#D6860A qora fonda o'qilmaydi) ---------------- */ --saffron: 247 179 67; /* #F7B343 */ --saffron-soft: 255 200 110; /* #FFC86E */ --saffron-deep: 240 176 74; /* #F0B04A — matn sifatida ishlatiladi */ /* --- To'g'ri/xato: «pullik» panelida allaqachon ishlatilgan qorong'i palitra bilan bir xil (#8BD48F / #FF9C90) — bir tizim, ikki joyda boshqa-boshqa yashil bo'lib ketmasin ------------------------------ */ --correct: 139 212 143; /* #8BD48F */ --wrong: 255 156 144; /* #FF9C90 */ --info: 78 155 224; /* --- Soyalar: `--ink` endi OCHIQ, ya'ni eski formula oq porloq soya yasab qo'yardi. Qorong'ida soya har doim QORA. ------------------- */ --shadow-card: 0 2px 10px rgb(0 0 0 / .45); --shadow-pop: 0 18px 48px rgb(0 0 0 / .60); --shadow-brand: 0 12px 30px rgb(0 0 0 / .50); --shadow-gold: 0 10px 26px rgb(0 0 0 / .45); --emboss: rgb(255 255 255 / .05); } /* Yorug' tokenlarni QAYTA tiklaydigan qobiq — `data-theme` dan qat'i nazar. Kerak bo'ladigan yagona joy: «pullik» paneli (`dashboard/pullik/base.html`). U ataylab `bg-ink text-paper` bilan yasalgan, ya'ni tokenlarni O'ZI ag'daradi; qorong'i rejimda tokenlar yana bir marta ag'darilsa panel YORUG'ga aylanib qolardi. Bu yerda tokenlar yorug' qiymatiga qaytariladi, demak panel har doim o'sha quyuq «boshqaruv pulti» bo'lib qoladi. (Xususiy o'zgaruvchilar meros bo'ladi — pastdagi e'lon yuqoridagini yengadi, xoh `:root[data-theme=dark]` ning aniqligi katta bo'lsin.) */ .tema-yorug { color-scheme: light; --ink: 17 32 58; --ink-700: 43 58 85; --ink-600: 40 100 160; --ink-400: 133 147 169; --ink-300: 170 182 200; --paper: 245 248 252; --surface: 255 255 255; --line: 228 235 243; --line-soft: 238 244 251; --line-strong: 210 221 233; --brand: 31 78 121; --brand-deep: 21 54 91; --brand-800: 26 66 105; --brand-600: 40 100 160; --brand-bright: 46 117 182; --brand-400: 91 151 207; --brand-200: 196 221 242; --brand-100: 230 240 250; --brand-50: 242 247 252; --saffron: 245 165 36; --saffron-soft: 255 190 77; --saffron-deep: 214 134 10; --correct: 46 125 50; --wrong: 192 57 43; --info: 46 117 182; --shadow-card: 0 2px 8px rgb(var(--ink) / .06); --shadow-pop: 0 18px 48px rgb(var(--ink) / .12); --shadow-brand: 0 12px 30px rgb(var(--brand) / .22); --shadow-gold: 0 10px 26px rgb(var(--saffron-deep) / .28); --emboss: rgb(255 255 255 / .6); } /* --- Base ----------------------------------------------------------------- */ [x-cloak] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { background-color: rgb(var(--paper)); color: rgb(var(--ink)); line-height: 1.6; /* site.css body bilan bir xil ritm */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgb(var(--brand-200)); color: rgb(var(--brand-deep)); } /* Sarlavhalar — sayt tipografikasi: Sora, qalin. RANG ATAYIN BERILMAYDI. Ilgari shu yerda `color: rgb(var(--ink))` turardi va u QORONG'I fondagi sarlavhani ko'rinmas qilib qo'yardi: ota elementdagi `text-paper` sarlavhaga MEROS bo'lib o'tadi, meros esa elementning o'ziga tushgan har qanday qoidadan kuchsiz — ya'ni `h1` navy fonda navy bo'lib qolardi (test_intro sahifasining qora bandi, «pullik» panelining butun qobig'i). Yorug' sahifalarda hech narsa o'zgarmaydi: rang `body` dan (`color: rgb(var(--ink))`) baribir meros bo'lib keladi, ya'ni o'sha navy. Boshqa rang kerak bo'lsa — sarlavhaning O'ZIGA utility qo'yiladi. */ h1, h2, h3, h4 { font-family: "Sora", ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.18; } h1 { font-weight: 800; } strong, b { font-weight: 700; } /* "Matematik grid" imzosi — akademik his beruvchi mayin katak fon. Katak o'lchami public saytdagi .hero::before bilan bir xil (30px). */ .paper-grid { background-image: linear-gradient(rgb(var(--brand) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--brand) / .05) 1px, transparent 1px); background-size: 30px 30px; background-position: -1px -1px; } /* Numbers, codes, timers — measured-instrument feel */ .tnum { font-variant-numeric: tabular-nums; } /* --- Focus visibility (accessibility floor) ------------------------------- */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-field); } /* ========================================================================== SIGNATURE: the OMR answer bubble Answer options render as real fillable exam-sheet bubbles. ========================================================================== */ .bubble { /* O'lcham EM da: doiracha o'z matnining o'lchamiga bog'lanadi. 16px matnda 40px — avvalgi qat'iy qiymatning aynan o'zi, lekin endi variant matni kattalashtirilganda (`--opt-size`) doiracha ham u bilan birga o'sadi (qarang: `.answer .bubble` va `.opt-harf`). */ --b: 2.5em; width: var(--b); height: var(--b); display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 2px solid rgb(var(--brand) / .30); color: rgb(var(--brand) / .75); font-family: "Sora", ui-sans-serif, sans-serif; font-weight: 700; background: rgb(var(--surface)); transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .08s ease; user-select: none; } .bubble--filled { /* the "pencil fill" */ background: linear-gradient(135deg, rgb(var(--brand-bright)), rgb(var(--brand-800))); border-color: rgb(var(--brand)); color: #fff; } .bubble--correct { background: rgb(var(--correct)); border-color: rgb(var(--correct)); color: #fff; } .bubble--wrong { background: rgb(var(--wrong)); border-color: rgb(var(--wrong)); color: #fff; } /* A whole answer row that behaves like a tappable bubble target */ .answer { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border: 1.5px solid rgb(var(--line-strong)); border-radius: var(--r-field); background: rgb(var(--surface)); cursor: pointer; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; } .answer:hover { border-color: rgb(var(--brand-400)); background: rgb(var(--brand-50)); } .answer.is-selected { border-color: rgb(var(--brand-600)); background: rgb(var(--brand-50)); box-shadow: inset 0 0 0 1px rgb(var(--brand-600)); } .answer.is-selected .bubble { background: linear-gradient(135deg, rgb(var(--brand-bright)), rgb(var(--brand-800))); border-color: rgb(var(--brand)); color: #fff; } /* Progress strip — a row of bubbles mirroring the answer sheet */ .dot { width: 11px; height: 11px; border-radius: 9999px; border: 1.5px solid rgb(var(--brand) / .35); background: transparent; transition: all .14s ease; } .dot--answered { background: rgb(var(--brand)); border-color: rgb(var(--brand)); } .dot--current { border-color: rgb(var(--saffron)); box-shadow: 0 0 0 3px rgb(var(--saffron) / .25); } /* Editor: a chosen option/answer bubble turns green (toggled by JS, so it's a real class rather than a dynamically-generated Tailwind utility). */ .opt-bubble.opt-correct { background: rgb(var(--correct)); border-color: rgb(var(--correct)); color: #fff; } /* Numbered answer-sheet (bottom of the exam page): answered = brand/filled, unanswered = light, current question = gold ring. */ .sheet-dot { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1.5px solid rgb(var(--brand) / .18); background: rgb(var(--brand) / .05); color: rgb(var(--brand) / .55); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: all .14s ease; } .sheet-dot:hover { border-color: rgb(var(--brand-400)); } .sheet-dot--answered { background: rgb(var(--brand)); border-color: rgb(var(--brand)); color: #fff; } .sheet-dot--current { border-color: rgb(var(--saffron)); box-shadow: 0 0 0 3px rgb(var(--saffron) / .3); } /* O'sha yo'lak natija sahifasida: imtihonda «javob berildimi» edi, tahlilda «to'g'rimi» bo'ladi. Javobsiz qolgani standart (och) ko'rinishda qoladi. Tailwind utility emas — Play CDN kelmasa ham rang ko'rinishi shart, aks holda yo'lak ma'nosiz bir xil doirachalarga aylanadi. */ .sheet-dot--togri { background: rgb(var(--correct)); border-color: rgb(var(--correct)); color: #fff; } .sheet-dot--xato { background: rgb(var(--wrong)); border-color: rgb(var(--wrong)); color: #fff; } /* ========================================================================== Mobile-safe math — a wide KaTeX formula (long fraction, big expression) scrolls inside its own box instead of stretching the card past the screen edge. This is the root fix for "telefonda gorizontal toshib ketadi". ========================================================================== */ /* Aylantiriladigan quti FAQAT haqiqatan keng kontentga qo'yiladi: `mat-keng` sinfini formulalar chizilgach `partials/_katex.html` beradi (o'lchashni faqat brauzer qila oladi). Sabab: aylantiriladigan quti vertikal ham KESADI — baland formula (integral, kasr) yoki kattalashtirilgan matn qirqilib ko'rinardi. Keng bo'lmagan quti endi oddiy element bo'lib qoladi va hech narsa kesilmaydi. overflow-y: hidden — kengaygan qutida ham vertikal aylantirgich (▲▼) chiqmasin; yon bo'shliq esa baland formulaga joy beradi. */ [data-math-inline] { max-width: 100%; } .sinov-opt { min-width: 0; max-width: 100%; font-size: var(--opt-size, 1em); } /* SAVOL MATNI — variant bilan bir xil manbadan o'lcham oladi. Ilgari savol matnining O'Z o'lchami umuman yo'q edi: muharrir kartasida `body` dan 16px, imtihon sahifasida esa `text-lg` dan 18px meros olardi. Word'dan ko'chirilgan `style="font-size:16pt"` esa ELEMENTNING O'ZIDA turgani uchun merosdan kuchli chiqib, o'sha savolni 21px qilardi — ya'ni yonma-yon ikki savol 33% farq bilan ko'rinardi va bu tasodifga bog'liq edi (Word o'lcham qoldirdimi yo'qmi). Endi inline o'lcham saqlanmaydi (`tests.views.strip_font_size`) va o'lchamni faqat shu o'zgaruvchi hal qiladi. `--opt-size` nomi tarixiy — u endi savol matnini ham boshqaradi. */ .sinov-savol { font-size: var(--opt-size, 1em); line-height: 1.45; } [data-math-inline].mat-keng, .sinov-opt.mat-keng { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-block: .25em; } .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; } /* Variant matni O'Z o'lchamiga ega (`--opt-size`), qator balandligi esa atrofdagi Tailwind sinfidan (`text-sm` → `line-height: 1.25rem`) QAT'IY piksel bo'lib meros qolardi: o'lcham 30px ga ko'tarilganda qator baribir 20px bo'lib, harflarning usti va osti («g», «q» dumlari) qirqilardi. Shuning uchun qator balandligi BIRLIKSIZ: elementning o'z font-size'iga nisbatan hisoblanadi va o'lcham bilan birga o'sadi. */ .sinov-opt { line-height: 1.45; } /* ========================================================================== Variant harfi (A/B/C…) — o'lchami VARIANT MATNI bilan proporsional Ilgari harf doirachasi qat'iy edi (`w-6 h-6 text-xs`): matn kattalashsa doiracha o'sha-o'sha qolib, yonidagi so'zdan kichkina bo'lib qolardi. Endi o'lcham `--opt-size` dan hisoblanadi; u berilmagan joyda esa `1em` — ya'ni atrofdagi matnga nisbatan (avvalgi ko'rinish saqlanadi). ========================================================================== */ .opt-harf { font-size: calc(var(--opt-size, 1em) * .86); width: 2em; height: 2em; /* o'z font-size'iga nisbatan */ display: inline-grid; place-items: center; flex: none; border-radius: 9999px; line-height: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* imtihon sahifasidagi javob doirachasi ham shu o'lchamga ergashadi */ .answer .bubble { font-size: var(--opt-size, 1em); } /* a stray-wide formula still can't drag the card past the screen edge */ .q-item, .answer { max-width: 100%; } /* slim, unobtrusive scrollbar for the (horizontal) math overflow */ .mat-keng::-webkit-scrollbar { height: 4px; } .mat-keng::-webkit-scrollbar-thumb { background: rgb(var(--ink) / .18); border-radius: 4px; } /* ========================================================================== Test matni — Times New Roman (savol, variant, javob matni) [data-math-inline] — savol MAZMUNI chiqadigan yagona belgi: imtihon sahifasi, natija tahlili, muharrirdagi savol kartasi va «pullik» ko'rish sahifalari — hammasi shu atributni qo'yadi. Shuning uchun shrift shu yerda bir marta beriladi. `!important` KERAK: Word'dan ko'chirilgan eski savollarda shrift HTML ichida inline `style="font-family: Calibri…"` bo'lib yotibdi va oddiy qoida uni yenga olmaydi. Yangi va tuzatilgan matnlarda bunday inline shrift qolmaydi (`_sanitize_html` uni olib tashlaydi, eskilarini esa `python manage.py times_new_roman --apply` tozalaydi) — bu qoida shunda ham o'z kuchida qoladi, chunki u ko'rinishning yagona manbai. KaTeX ISTISNO: formulalar KaTeX'ning o'z shriftlarida chiziladi (glif metrikasi shunga bog'liq), ularni Times'ga majburlash formulani buzadi — shuning uchun `.katex` va uning ichidagi hamma narsa tegilmaydi. ========================================================================== */ [data-math-inline] { font-family: var(--font-savol) !important; } /* Ichkarisi ALOHIDA qoida: `:not(.katex *)` — Selectors-4 sintaksisi. Uni tushunmaydigan eski brauzer qoidani butunlay tashlab yuboradi; alohida yozilgani uchun tepadagi asosiy qoida baribir ishlaydi. */ [data-math-inline] :not(.katex):not(.katex *) { font-family: var(--font-savol) !important; } /* Muharrirdagi variant/javob maydonlari ham — yozayotgan odam o'quvchi ko'radigan ko'rinishni ko'rib tursin (savol matni TinyMCE ichida allaqachon shu shriftda). Faqat kiritish maydonlari; qolgan interfeys tegilmaydi. */ .opt-input, .written-input, .tp-matn, .bulk-opt { font-family: var(--font-savol); } /* ========================================================================== Navbar profil ikonkasi (partials/_usercard.html — barcha rollar) NEGA SHU YERDA, TAILWIND UTILITY EMAS: ikonka yagona gradientli element edi (`bg-gradient-to-br from-brand-bright to-brand-800`), gradient esa Play CDN brauzerda yasaydigan `--tw-gradient-*` o'zgaruvchilariga tayanadi. O'sha zanjirning bitta bo'g'ini yetib kelmasa — fon umuman chizilmaydi, matn esa oq: tugma oq navbarda KO'RINMAY qoladi (aynan shu xato kuzatilgan). Oddiy CSS gradient hech narsaga tayanmaydi va app.css har doim yuklanadi. ========================================================================== */ .avatar-menu { position: relative; flex-shrink: 0; } .avatar-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-chip); background-image: linear-gradient(135deg, rgb(var(--brand-bright)), rgb(var(--brand-800))); /* Gradientsiz brauzerda ham fon bor. `--brand` EMAS: qorong'i rejimda u ochiq ko'k (matn uchun), ustidagi oq harf esa o'qilmay qolardi. */ background-color: rgb(var(--brand-800)); color: #fff; font-family: "Sora", ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: .92rem; line-height: 1; /* Halqa — navbar foni rangida (qorong'ida oq halqa yorqin dog' bo'lardi) */ box-shadow: 0 0 0 2px rgb(var(--surface)), var(--shadow-card); overflow: hidden; cursor: pointer; } .avatar-btn img { width: 100%; height: 100%; object-fit: cover; } /* navy footer/quyuq fon ustida — oq halqa o'rniga shaffofi */ .avatar-btn--dark { box-shadow: 0 0 0 2px rgb(255 255 255 / .25), var(--shadow-card); } /* ========================================================================== Cards, chips, lock state ========================================================================== */ .card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-card); box-shadow: var(--shadow-card); } /* ko'tariluvchi karta (havola-kartalar templatelarda hover utility bilan ham kuchaytiradi) */ .card-hover { transition: transform .2s var(--ease), box-shadow .25s, border-color .2s; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgb(var(--ink) / .08); border-color: rgb(var(--brand-200)); } .chip { display: inline-flex; align-items: center; gap: .35rem; padding: 5px 11px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; /* site.css .chip bilan mos */ border-radius: var(--r-chip); border: 1px solid transparent; } /* Locked test: embossed, visibly inert — clearly not clickable */ .lock-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: var(--r-chip); background: rgb(var(--ink) / .05); color: rgb(var(--ink) / .55); border: 1px solid rgb(var(--ink) / .10); /* «Bo'rtib chiqqan» taassurot — yuqoridan tushgan yorug'lik chizig'i. Qorong'ida oq chiziq porlab ketadi, shuning uchun rang tokendan (`--emboss`) olinadi va u yerda deyarli ko'rinmas holga tushiriladi. */ box-shadow: inset 0 1px 0 var(--emboss); } .is-locked { position: relative; background: repeating-linear-gradient(135deg, rgb(var(--ink) / .025) 0 10px, transparent 10px 20px), rgb(var(--surface)); border-style: dashed; border-color: rgb(var(--ink) / .16); cursor: not-allowed; } .is-locked .test-title { color: rgb(var(--ink) / .5); } /* ========================================================================== Score ring (echoes the bubble's circular language) — set --p (0..100) ========================================================================== */ .ring { --p: 0; --size: 84px; --t: 8px; width: var(--size); height: var(--size); border-radius: 9999px; display: grid; place-items: center; background: radial-gradient(closest-side, rgb(var(--surface)) calc(100% - var(--t) - 1px), transparent calc(100% - var(--t))), conic-gradient(var(--ring-color, rgb(var(--brand-bright))) calc(var(--p) * 1%), rgb(var(--brand) / .10) 0); } .ring--good { --ring-color: rgb(var(--correct)); } .ring--mid { --ring-color: rgb(var(--saffron)); } .ring--low { --ring-color: rgb(var(--wrong)); } /* ========================================================================== Buttons & fields — pill shakl, gradient, mayin ko'tarilish ========================================================================== */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 22px; border-radius: 999px; /* site.css .btn bilan pixel-mos */ font-family: "Sora", ui-sans-serif, sans-serif; font-weight:600; font-size:.96rem; transition: transform .15s var(--ease), background-color .2s, color .2s, box-shadow .2s, border-color .2s; cursor:pointer; border:1.5px solid transparent; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background-image: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-800))); color: #fff; box-shadow: var(--shadow-brand); } .btn-primary:hover { box-shadow: 0 16px 34px rgb(var(--brand) / .32); color:#fff; } .btn-accent { background-image: linear-gradient(135deg, rgb(var(--saffron-soft)), rgb(var(--saffron-deep))); color: #3a2600; box-shadow: var(--shadow-gold); } .btn-accent:hover { color: #3a2600; } .btn-ghost { background: transparent; color: rgb(var(--ink-700)); border-color: rgb(var(--line-strong)); } .btn-ghost:hover { background: rgb(var(--brand-50)); border-color: rgb(var(--brand-bright)); color: rgb(var(--brand)); } .btn-danger { background: rgb(var(--wrong)); color:#fff; } /* ---------- Savol asboblar qatori (`.q-asbob`) ---------------------------- Savol kartasi va ochiq muharrirning ostidagi yettita tugma: yangi savol · ko'p savol · nusxasini yaratish │ qirqish · nusxa · joylash │ o'chirish. Nega alohida komponent: har bir `.btn-ghost` o'z halqasi va hover'da ko'tarilishi bilan keladi — yettitasi yonma-yon turganda qator halqalar to'plamiga aylanib, kartaning o'zidan ko'proq e'tibor tortardi. Endi ular BITTA yumshoq idish ichida, oraliqlari hairline bilan guruhlangan. `app.css` da, Tailwind utility'lari bilan emas: bu tugmalar orasida O'CHIRISH ham bor, CDN kelmay qolganda ular shaklsiz qatorga aylanib, qaysi biri qaysiligini ajratib bo'lmay qolardi. */ .q-asbob { display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:3px; border-radius:999px; border:1.5px solid rgb(var(--line)); background: rgb(var(--ink) / .02); } .q-asbob form { display:flex; } .q-asbob .btn { padding:7px; border-color:transparent; background:transparent; } .q-asbob .btn:hover { transform:none; background: rgb(var(--brand-50)); border-color:transparent; } .q-asbob .btn:active { transform:none; } .q-asbob-ajr { width:1px; height:18px; margin:0 4px; background: rgb(var(--line-strong)); } /* «Majburiy» — qatordagi yagona ALMASHTIRGICH: qolgan hammasi amal (bosdingiz — biror ish bo'ldi), bu esa savolning HOLATI. Shuning uchun u tugmadek emas, tumblerdek ko'rinadi va yozuvi ham bor: bir vaqtlar bu yerda yalang «✱» turgandi va uning nimaligini hech narsa aytmasdi. Tailwind'ning `peer-checked:` zanjiri bilan emas, shu yerda: qator `.q-asbob` ning o'zi ham shu sababdan `app.css` da (CDN kelmay qolsa tumbler holati ko'rinmay qolsa, «majburiy»mi yoki yo'qmi bilinmaydi). */ .q-switch { display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:5px 12px 5px 8px; border-radius:999px; white-space:nowrap; font-size:.82rem; font-weight:600; color: rgb(var(--ink-700)); user-select:none; } .q-switch:hover { background: rgb(var(--brand-50)); } .q-switch input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .q-switch-ip { position:relative; flex:none; width:36px; height:20px; border-radius:999px; background: rgb(var(--ink) / .2); transition: background-color .2s; } .q-switch-ip::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; } .q-switch input:checked + .q-switch-ip { background: rgb(var(--correct)); } .q-switch input:checked + .q-switch-ip::after { transform: translateX(16px); } .q-switch input:focus-visible + .q-switch-ip { outline:2px solid rgb(var(--brand-bright)); outline-offset:2px; } .q-switch input:disabled + .q-switch-ip { opacity:.55; } /* so'rov ketayotganda */ /* Tor ekranda qator o'raladi — ajratgich satr boshida osilib qolmasin */ @media (max-width: 640px) { .q-asbob-ajr { display:none; } } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* Forma ostidagi amal qatori (Saqlash · Parol · Bekor…). `.btn` da `white-space: nowrap` bor va padding qat'iy — demak tugma qisqarmaydi. Shuning uchun QATOR o'zi o'ralishi shart: aks holda uchinchi tugma tor kartadan (`max-w-lg`) tashqariga chiqib ketadi. Juda tor ekranda tugmalar ustun bo'lib to'liq kenglikka yoyiladi. */ .form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } @media (max-width: 420px) { .form-actions { flex-direction: column; align-items: stretch; } .form-actions > .btn { width: 100%; } } .field { width:100%; padding:12px 15px; background: rgb(var(--paper)); /* site.css input bilan mos */ border:1.5px solid rgb(var(--line-strong)); border-radius: var(--r-field); color: rgb(var(--ink)); font-size:.98rem; transition: border-color .15s, box-shadow .15s, background-color .15s; } .field::placeholder { color: rgb(var(--ink) / .4); } .field:focus { border-color: rgb(var(--brand-bright)); background: rgb(var(--surface)); box-shadow: 0 0 0 4px rgb(var(--brand-100)); outline: none; } .label { display:block; font-family: "Sora", ui-sans-serif, sans-serif; font-size:.82rem; font-weight:600; color: rgb(var(--ink) / .8); margin-bottom:.3rem; } /* --- Fokus rejimi (test yaratish/tahrirlash) ------------------------------ Savol yozish uzoq va diqqat talab qiladigan ish, shuning uchun bu sahifalarda navbar, hero bandi va footer umuman chizilmaydi (qarang: templates/base_focus.html). Sahifa tepasidagi yagona boshqaruv qatori — chapda «Chiqish», markazda sarlavha, o'ngda «Saqlash» va «⋯». NEGA KO'RINISH SHU YERDA: Tailwind Play CDN uslubni BRAUZERDA yasaydi — internet sekin bo'lsa yoki CDN yetib kelmasa `flex`/`hidden` kabi utility'lar umuman qo'llanmaydi. Bu sahifalarda navbar ham yo'q, ya'ni «Chiqish» — chiqishning yagona yo'li; u har qanday holatda ko'rinib turishi shart. Shuning uchun qobiqning tayanch ko'rinishi statik faylda. */ /* Yuqoridagi band — sahifaning ODDIY oqimida, `fixed` EMAS. Ya'ni pastga aylantirilganda band tepada qolib ketadi va foydalanuvchi bilan birga ergashmaydi (xuddi test boshidagi yozuvlar kabi). Bu ATAYIN shunday: ilgari band ekranga yopishib turardi va o'qituvchi buni ortiqcha deb topdi — savol matnini o'qiyotganda ustida doim tugmalar turardi. Shuning uchun «Saqlash» ham shu bandda: uni bosish uchun tepaga qaytiladi. */ .focus-bar { position: relative; /* markazdagi sarlavha shunga nisbatan */ display: flex; align-items: center; gap: 10px; padding: 12px; } .focus-corner { display: flex; align-items: center; gap: 8px; } .focus-corner--right { margin-left: auto; } /* Tugma kontent ustida turadi — foni shaffof qolmasin */ .focus-corner .btn { background-color: rgb(var(--surface)); box-shadow: var(--shadow-card); } .focus-corner .btn-primary { background-image: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-800))); } .focus-corner .btn-accent { background-image: linear-gradient(135deg, rgb(var(--saffron-soft)), rgb(var(--saffron-deep))); } /* Markazdagi jimgina sarlavha — qaysi to'plam tahrirlanayotgani bilinib tursin (tugma emas, bosilmaydi). `absolute` bo'lgani uchun chap va o'ng guruhlarning kengligi har xil bo'lsa ham ekran markazida qoladi; joy tor bo'lsa umuman ko'rsatilmaydi. */ .focus-title { position: absolute; left: 50%; transform: translateX(-50%); max-width: min(42vw, 460px); pointer-events: none; font-size: .82rem; color: rgb(var(--ink) / .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .focus-main { padding: 8px 20px 72px; } .focus-menu-panel { width: 264px; padding: 8px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-card); box-shadow: var(--shadow-pop); } .focus-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-field); background: transparent; text-align: left; cursor: pointer; font-family: inherit; font-size: .875rem; font-weight: 600; color: rgb(var(--ink) / .75); transition: background-color .15s, color .15s; } .focus-item:hover { background: rgb(var(--brand-50)); color: rgb(var(--brand)); } .focus-item--accent { color: rgb(var(--saffron-deep)); } .focus-item--accent:hover { background: rgb(var(--saffron) / .12); color: rgb(var(--saffron-deep)); } .focus-item--danger:hover { background: rgb(var(--wrong) / .08); color: rgb(var(--wrong)); } .focus-item--good:hover { background: rgb(var(--correct) / .08); color: rgb(var(--correct)); } /* `.focus-item` display'i Tailwind'ning `.hidden` ustidan chiqib ketmasin — «Joylash» bandi bufer bo'sh bo'lsa aynan shu klass bilan yashiriladi. */ .focus-item.hidden { display: none; } .focus-sep { height: 1px; margin: 6px 4px; background: rgb(var(--line)); } @media (max-width: 640px) { .focus-title { display: none; } .focus-bar { padding: 10px; } .focus-main { padding: 6px 14px 60px; } } /* --- Imtihon taymeri: ekranda DOIM ---------------------------------------- Sahifaning yuqori bandi pastga ergashmaydi (o'quvchi so'ragan «toza ekran»), shuning uchun taymer alohida suzib turadi: vaqt tugaganda test AVTOMATIK yakunlanadi, ya'ni qolgan vaqtni ko'rmaslik o'quvchiga nohaqlik bo'lardi. Pastki o'ng burchakda — yuqoridagi band bilan hech qachon to'qnashmaydi. Ko'rinish Tailwind utility'lariga tayanmaydi: Play CDN uslubni brauzerda yasaydi, imtihon paytida esa u yetib kelmasligi mumkin. */ .exam-timer { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-chip); background: rgb(var(--brand-100)); color: rgb(var(--brand)); box-shadow: var(--shadow-card); font-family: "Sora", ui-sans-serif, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; } .exam-timer--danger { background: rgb(var(--wrong) / .12); color: rgb(var(--wrong)); animation: exam-timer-puls 1s ease-in-out infinite; } /* «Xato bor» oynasi ochiq — vaqt TO'XTAGAN. Oddiy taymer bilan bir xil ko'rinsa, o'quvchi vaqti yurmayotganiga ishonmay xabarni shoshib yozadi; shuning uchun rangi ham, yozuvi ham boshqacha. Tailwind emas, komponent klass — imtihon o'rtasida CDN yetib kelmasligi mumkin (.exam-timer bilan bir xil sabab). */ .exam-timer--pauza { background: rgb(var(--saffron) / .16); color: rgb(var(--saffron-deep)); } @keyframes exam-timer-puls { 50% { opacity: .55; } } @media (max-width: 640px) { .exam-timer { right: 10px; bottom: 10px; padding: 7px 12px; } } /* --- Toasts --------------------------------------------------------------- */ .toast { box-shadow: var(--shadow-pop); border:1px solid rgb(var(--line)); border-left: 4px solid rgb(var(--brand-bright)); } .toast--success { border-left-color: rgb(var(--correct)); } .toast--error { border-left-color: rgb(var(--wrong)); } .toast--warning { border-left-color: rgb(var(--saffron)); } /* --- Tables (Grid.js / DataTables theming hook) --------------------------- */ .gridjs-wrapper { box-shadow:none !important; border:1px solid rgb(var(--line)) !important; border-radius: var(--r-card) !important; } .gridjs-table { font-family: inherit !important; } .gridjs-th { background: rgb(var(--paper)) !important; color: rgb(var(--ink-400)) !important; text-transform: uppercase; letter-spacing: .06em; font-size: .76rem !important; } .gridjs-tr:hover td { background: rgb(var(--brand-50)) !important; } /* --- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --- Custom scrollbar (quiet) -------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--ink) / .25) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgb(var(--ink) / .22); border-radius: 9999px; border: 3px solid rgb(var(--surface)); } /* ========================================================================== QORONG'I REJIM — tokendan CHIQMAYDIGAN bir nechta joy Yuqoridagi tokenlar ilovaning 95% ini o'zi ag'daradi. Bu yerda faqat shundaylari qoldi: rangni FON sifatida ishlatib, ustiga qat'iy oq matn yozadigan komponentlar. Qorong'ida o'sha fonlar ochiq rangga aylanadi (chunki ular ayni paytda MATN rangi ham) va oq ustiga oq bo'lib qoladi — shuning uchun ularda matn quyuqlashtiriladi. ========================================================================== */ /* Javob varaqasi va progress doirachalari: fon `--brand`/`--correct`/`--wrong` — qorong'ida ular ochiq, demak matn qorong'i bo'lishi kerak. */ :root[data-theme="dark"] .dot--answered, :root[data-theme="dark"] .sheet-dot--answered, :root[data-theme="dark"] .sheet-dot--togri, :root[data-theme="dark"] .sheet-dot--xato, :root[data-theme="dark"] .bubble--correct, :root[data-theme="dark"] .bubble--wrong, :root[data-theme="dark"] .opt-bubble.opt-correct, :root[data-theme="dark"] .btn-danger { color: rgb(var(--paper)); } /* «Majburiy» tumbleri yoqilgan holati — o'sha ochiq yashil, dumaloq oq tugmachasi bilan; tugmacha qorong'i bo'lishi kerak. */ :root[data-theme="dark"] .q-switch input:checked + .q-switch-ip::after { background: rgb(var(--paper)); } /* Tanlash (matnni belgilash) — `--brand-200` endi QUYUQ tus, ya'ni eski juftlik (quyuq fon + quyuq matn) o'qilmas bo'lib qolardi. */ :root[data-theme="dark"] ::selection { background: rgb(var(--brand-600)); color: rgb(var(--ink)); } /* Maydon fokusi: yorug'da yumshoq ko'k halqa (`--brand-100`) edi; qorong'ida o'sha token quyuq bo'lgani uchun halqa umuman ko'rinmay qolardi. */ :root[data-theme="dark"] .field:focus { box-shadow: 0 0 0 4px rgb(var(--brand-400) / .22); } /* Kartaning ko'tarilishi — yorug'da soya quyuqlashardi, qorong'ida esa soya ko'rinmaydi: chegara yorishadi. */ :root[data-theme="dark"] .card-hover:hover { border-color: rgb(var(--brand-400) / .45); box-shadow: 0 6px 22px rgb(0 0 0 / .5); } /* Rasmlar qorong'i sahifada «yonib» ketadi — savol rasmi va yechim rasmi ko'pincha oq fonli skan. Biroz so'ndiriladi, ustiga borilganda esa to'liq ochiladi (o'qish uchun). Matematik formulalarga (KaTeX/SVG emas) tegmaydi. */ :root[data-theme="dark"] .q-item img, :root[data-theme="dark"] .answer img, :root[data-theme="dark"] [data-math-inline] img { filter: brightness(.88) contrast(1.04); transition: filter .18s; } :root[data-theme="dark"] .q-item img:hover, :root[data-theme="dark"] .answer img:hover, :root[data-theme="dark"] [data-math-inline] img:hover { filter: none; } /* --- Imtihon pardasi — HAR IKKI rejimda ham QORONG'I -------------------- Parda oyna fokusdan chiqqanda savollarni yopadi. Uning `bg-ink/95` bo'lishi qorong'i rejimda uni OQ pardaga aylantirardi: imtihon o'rtasida ekran oppoq bo'lib chaqnaydi va bu qorong'i rejimni tanlagan odam uchun eng yomon holat. Shuning uchun parda rangi tokenlarga bog'lanmaydi. */ .exam-parda { background: rgb(9 15 26 / .96); color: #E8EEF7; } .exam-parda .exam-parda-ikkilamchi { color: rgb(232 238 247 / .62); } /* --- SweetAlert2 (barcha tasdiq oynalari `confirmAction` orqali) --------- Kutubxona o'z oq oynasini o'zi chizadi; o'zgaruvchilarni tan olmaydi, shuning uchun sinflari bo'yicha ag'dariladi. O'chirish tasdig'i eng ko'p ishlatiladigan oyna — u oq chaqnab chiqmasin. */ :root[data-theme="dark"] .swal2-popup { background: rgb(var(--surface)); color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); } :root[data-theme="dark"] .swal2-title, :root[data-theme="dark"] .swal2-html-container { color: rgb(var(--ink)); } :root[data-theme="dark"] .swal2-input, :root[data-theme="dark"] .swal2-textarea, :root[data-theme="dark"] .swal2-select { background: rgb(var(--paper)); color: rgb(var(--ink)); border-color: rgb(var(--line-strong)); } :root[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgb(0 0 0 / .6); } /* --- Flatpickr (muddat tanlash — «Ochish» savati) ----------------------- */ :root[data-theme="dark"] .flatpickr-calendar { background: rgb(var(--surface)); color: rgb(var(--ink)); box-shadow: var(--shadow-pop); border: 1px solid rgb(var(--line)); } :root[data-theme="dark"] .flatpickr-months, :root[data-theme="dark"] .flatpickr-weekdays, :root[data-theme="dark"] .flatpickr-weekday, :root[data-theme="dark"] .flatpickr-current-month, :root[data-theme="dark"] .flatpickr-monthDropdown-months { background: transparent; color: rgb(var(--ink)); fill: rgb(var(--ink)); } :root[data-theme="dark"] .flatpickr-day { color: rgb(var(--ink-700)); } :root[data-theme="dark"] .flatpickr-day:hover { background: rgb(var(--brand-50)); border-color: transparent; } :root[data-theme="dark"] .flatpickr-day.flatpickr-disabled, :root[data-theme="dark"] .flatpickr-day.prevMonthDay, :root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: rgb(var(--ink) / .28); } :root[data-theme="dark"] .flatpickr-day.selected, :root[data-theme="dark"] .flatpickr-day.selected:hover { background: rgb(var(--brand-600)); border-color: rgb(var(--brand-600)); color: #fff; } :root[data-theme="dark"] .flatpickr-time input, :root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: rgb(var(--ink)); } :root[data-theme="dark"] .flatpickr-time input:hover, :root[data-theme="dark"] .numInputWrapper:hover { background: rgb(var(--brand-50)); } /* --- MathLive (formula kiritish oynasi) --------------------------------- */ :root[data-theme="dark"] math-field { background: rgb(var(--paper)); color: rgb(var(--ink)); --caret-color: rgb(var(--brand-400)); --selection-background-color: rgb(var(--brand-600)); --contains-highlight-background-color: rgb(var(--brand-100)); } /* --- Grid.js -------------------------------------------------------------- */ :root[data-theme="dark"] .gridjs-table td, :root[data-theme="dark"] .gridjs-table th { background: transparent !important; color: rgb(var(--ink)) !important; } :root[data-theme="dark"] .gridjs-th { background: rgb(var(--paper)) !important; } /* --- «Qorong'i band» — qorong'i rejimda ham QORONG'I qoladi -------------- Saytda `bg-ink text-paper` juftligi bor: qora fon + oq matn (test kirish sahifasining sarlavha bandi, kiosk banneri, video qutisi). Qorong'i rejimda ikkala token ham ag'dariladi, ya'ni juftlik teskari bo'lib — OQ fon + qora matn — chiqadi. Kichkina belgilar uchun bu hatto yaxshi (raqam doirachasi, chat pufagi urg'u bo'lib ko'rinadi), lekin KATTA band qorong'i sahifada ko'zni qamashtiradigan oq blokka aylanadi. Yechim: `.band-qorongi` shu DARAXT uchun ikkita tokenni qayta e'lon qiladi — `--ink` yana quyuq, `--paper` yana ochiq. Shundan keyin band ichidagi HAR BIR utility (`bg-ink`, `text-paper`, `text-paper/55`, `bg-paper/15` — bo'lim chipi) o'z-o'zidan to'g'ri chiqadi va markupga tegilmaydi. Yorug' rejimda bu sinf hech narsa qilmaydi, ya'ni hozirgi ko'rinish piksel-bir xil qoladi. */ :root[data-theme="dark"] .band-qorongi { --ink: 30 43 68; /* #1E2B44 — yuzadan bir oz ochiq navy */ --paper: 232 238 247; /* #E8EEF7 */ } /* --- «Natijalar» jadvali va CHOP ETISH ----------------------------------- Kursxona natijani qog'ozda tarqatadi, ya'ni chop etish — bu sahifaning asosiy mahsuloti, qo'shimcha emas. Shuning uchun qoidalar Tailwind utility'lari emas, komponent sinflari: Play CDN kelmay qolsa ham natija varag'i to'g'ri bosilib chiqishi kerak (xuddi `.focus-*` va `.exam-timer` dagi sabab). `.natija-jadval` — ekran ko'rinishi; `@media print` esa varaqni tozalaydi: navbar/hero/footer, tugmalar va havola tagchizig'i olib tashlanadi, fon oqartiriladi, jadval sarlavhasi har sahifada takrorlanadi va qator sahifalar orasida bo'linmaydi. */ .natija-jadval { width: 100%; border-collapse: collapse; font-size: .875rem; } .natija-jadval th { text-align: left; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--ink) / .45); padding: .6rem .75rem; border-bottom: 1px solid rgb(var(--line)); white-space: nowrap; } .natija-jadval td { padding: .6rem .75rem; border-bottom: 1px solid rgb(var(--line) / .6); vertical-align: middle; } .natija-jadval tbody tr:last-child td { border-bottom: 0; } .natija-jadval tr.natija-qator--qosh td { border-top: 0; } /* takroriy urinish qatori — o'quvchi nomi takrorlanmaydi, chekka chiziq bilan */ .natija-qator--takror td:first-child { border-left: 2px solid rgb(var(--brand) / .35); } .natija-jadval tbody tr:hover { background: rgb(var(--ink) / .03); } @media print { @page { margin: 12mm; } body { background: #fff !important; } /* ilova qobig'i — varaqda keraksiz */ .app-nav, .appnav, nav, footer, .natija-yashir, .btn, button, form { display: none !important; } .natija-varaq, .card { box-shadow: none !important; border-color: #999 !important; } a { text-decoration: none !important; color: #000 !important; } .natija-jadval { font-size: 11pt; } .natija-jadval thead { display: table-header-group; } /* har varaqda sarlavha */ .natija-jadval tr { page-break-inside: avoid; } .natija-bosh { page-break-after: avoid; } } /* ============================================================================ IELTS imtihon sahifasi (.iel-*) — komponent CSS, Tailwind EMAS. Sabab .exam-timer bilan bir xil: Play CDN kelmay qolsa ham imtihon sahifasi O'QILISHI shart. Ranglar token orqali — qorong'i rejim o'zi to'g'ri ishlaydi (tokenlar app.css tepasida qayta e'lon qilinadi). Qolip foydalanuvchi bergan namuna ekrandan olingan: TO'LIQ EKRAN, tepada part sarlavhasi, ostida ikki mustaqil scroll ustun (chapda matn, o'ngda savollar) va orasida tortiladigan tutqich, pastda esa doim ko'rinib turadigan raqamlar palitrasi. ========================================================================= */ /* --- qolip --------------------------------------------------------------- STANDART (tor ekran) — ustunlar ustma-ust, sahifa oddiy scroll bo'ladi. Yonma-yon qolip pastdagi @media ichida: shunda «qachon yonma-yon» degan qoida BITTA joyda turadi va standart holat hech qachon qopqon bo'lmaydi. */ .iel-ekran { min-height: 100dvh; display: flex; flex-direction: column; background: rgb(var(--paper)); } /* Part sarlavhasi — «Part 1 / Read the text and answer questions 1–13.» */ .iel-bosh { flex: 0 0 auto; padding: .55rem 1.1rem; border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--ink) / .035); } .iel-bosh b { display: block; font-weight: 700; color: rgb(var(--ink)); font-size: .95rem; } .iel-bosh span { font-size: .88rem; color: rgb(var(--ink) / .65); } /* Ikki ustun. `--chap` ni tutqich JS'i o'zgartiradi. */ .iel-split { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; --chap: 50%; } .iel-ustun { min-width: 0; padding: 1rem 1rem 1.5rem; } .iel-chap { flex: 0 0 auto; } .iel-ong { border-top: 1px solid rgb(var(--line)); } /* Tutqich — namuna ekrandagi ikki tomonlama o'q tugmasi. Kengligi NOL: tugmaning o'zi ustunlar chegarasiga «minib» turadi, ya'ni hech qanday joy yemaydi. Tor ekranda umuman chizilmaydi. */ .iel-tutqich { display: none; position: relative; width: 0; z-index: 5; } .iel-tutqich-tugma { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 1.55rem; height: 1.55rem; display: grid; place-items: center; cursor: col-resize; border: 1px solid rgb(var(--line-strong)); border-radius: .35rem; background: rgb(var(--surface)); color: rgb(var(--ink) / .5); font-size: .78rem; padding: 0; } .iel-tutqich-tugma:hover { color: rgb(var(--brand)); border-color: rgb(var(--brand)); } /* Tortayotganda ustun matni belgilanib ketmasin */ .iel-tortilmoqda, .iel-tortilmoqda * { user-select: none !important; } .iel-tortilmoqda { cursor: col-resize !important; } /* Tor ekranda palitra pastda yopishib turadi (sahifa scroll bo'lganda) */ .iel-palitra { position: sticky; bottom: 0; } /* YONMA-YON QOLIP — chapda matn, o'ngda savollar, sahifaning o'zi scroll bo'lmaydi (scroll faqat ustun ichida), shu tufayli part sarlavhasi ham, palitra ham hech qachon ko'zdan ketmaydi. CHEGARA 860px, 1024 EMAS — va bu ataylab. Windows noutbukda ekran masshtabi 125–150 % bo'lganda brauzerning CSS eni 910–1000 px ga tushib qoladi (1366px ekran, 150 % → 910px). 1024 chegarasida imtihon sahifasi aynan o'sha mashinalarda ustma-ust tushib qolardi: matn tepada, savollar pastda — ya'ni «matn chapga o'tmadi» degan xato shundan chiqqan edi. BO'Y sharti telefonning YOTIQ holati uchun: eni yetadi (900px), lekin 400px bo'yda ikki ustunni o'qib bo'lmaydi — u yerda ustma-ust yaxshiroq. */ @media (min-width: 860px) and (min-height: 480px) { .iel-ekran { height: 100dvh; overflow: hidden; } .iel-split { flex-direction: row; } .iel-ustun { overflow-y: auto; padding: 1.1rem 1.5rem 2.5rem; } .iel-chap { flex: 0 0 var(--chap); } .iel-ong { flex: 1 1 0; border-left: 1px solid rgb(var(--line)); border-top: 0; } .iel-tutqich { display: block; flex: 0 0 auto; } .iel-palitra { position: static; } } /* --- matn paneli --------------------------------------------------------- */ .iel-passage { line-height: 1.75; color: rgb(var(--ink) / .92); } .iel-passage p { margin: 0 0 .9em; } .iel-passage img { max-width: 100%; height: auto; } /* --- savol paneli -------------------------------------------------------- Ko'rsatma — namuna ekranda YAXLIT xatboshi (kursiv qatorlar emas): kalit so'zlar qalin, so'z chegarasi qizil (qarang: ielts_render). */ .iel-korsatma { color: rgb(var(--ink) / .85); font-size: .95rem; line-height: 1.6; margin-bottom: 1rem; } .iel-korsatma p { margin: 0; } .iel-tana { line-height: 1.9; } .iel-tana p { margin: 0 0 .8em; } .iel-tana table { border-collapse: collapse; margin: .6em 0; width: 100%; } .iel-tana td, .iel-tana th { border: 1px solid rgb(var(--line)); padding: .35em .6em; } /* --- bayonot bloki (TRUE/FALSE/NOT GIVEN) -------------------------------- Namuna ekran: raqam KVADRAT ramkada, bayonot yonida, tanlovlar esa ostida qator bo'lib turadi va tanlangani butun kenglikda ko'k yonadi. */ .iel-bayonot { margin: 0 0 1.15rem; } .iel-bayonot-matn { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .3rem; line-height: 1.55; } /* Savol raqami — BREND rangida: kursxona «har bir savolning tartib raqami ham rangli bo'lsin» dedi, oldin u neytral kulrang ramka edi va uzun ro'yxatda ko'zga tashlanmasdi. Bo'sh joy raqami (`.iel-no--gap`) yashil, bayonot raqami ko'k — ikkalasi ikki xil savol turi ekani shundan bilinadi. */ .iel-qbox { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .25rem; border: 1.5px solid rgb(var(--brand) / .45); border-radius: .3rem; background: rgb(var(--brand) / .1); color: rgb(var(--brand)); font-size: .78rem; font-weight: 700; } .iel-tanlovlar { display: grid; margin-left: 2.1rem; } .iel-tanlov { display: flex; align-items: center; gap: .65rem; padding: .32rem .7rem; border-radius: .3rem; cursor: pointer; } .iel-tanlov:hover { background: rgb(var(--ink) / .05); } .iel-tanlov input { accent-color: rgb(var(--brand)); flex: 0 0 auto; } /* Tanlangan qator butun kenglikda YONADI — namuna ekrandagi asosiy belgi. Rang `--brand-bright` dan: to'q `--brand` shaffoflashganda kul rangga o'xshab qolar va «tanlangan» degani ko'zga tashlanmasdi. */ .iel-tanlov:has(input:checked) { background: rgb(var(--brand-bright) / .24); } /* Muharrir namunasi: o'sha qatorlar, vidjetsiz — to'g'risi yashil belgilangan. Vidjet yo'qligi uchun chap chekka radio o'rnini bo'sh qoldirmaydi. */ .iel-tanlovlar .iel-tanlov--togri { background: rgb(var(--correct) / .12); font-weight: 600; } .iel-tanlovlar .iel-tanlov--togri span { color: rgb(var(--correct)); } .iel-tanlovlar .iel-kalit { justify-self: start; margin-left: .7rem; } /* --- matn ichidagi vidjetlar --------------------------------------------- */ /* raqam belgisi — savolning ko'rinadigan raqami */ .iel-no { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; margin-right: .35rem; border-radius: .5rem; background: rgb(var(--brand)); color: rgb(var(--paper)); font-size: .8rem; font-weight: 700; } :root[data-theme="dark"] .iel-no { color: #0f172a; } /* Bo'sh joy raqami — YASHIL doira */ .iel-no--gap { border-radius: 999px; background: rgb(var(--correct)); } /* raqam + input/select bir butun bo'lib turadi */ .iel-sav { display: inline-flex; align-items: center; white-space: nowrap; margin: 0 .15rem; } .iel-inp { width: 11rem; max-width: 45vw; font: inherit; color: rgb(var(--ink)); border: 1.5px solid rgb(var(--line-strong)); border-radius: 999px; background: rgb(var(--surface)); padding: .3rem .9rem; outline: none; } .iel-inp:focus { border-color: rgb(var(--brand)); } .iel-sel { border: 1.5px solid rgb(var(--line-strong)); background: rgb(var(--surface)); color: rgb(var(--ink)); border-radius: .5rem; padding: .2rem .5rem; font: inherit; max-width: 16rem; } .iel-sel:focus { border-color: rgb(var(--brand)); outline: none; } /* --- radio/checkbox bloklari (MCQ) --------------------------------------- */ .iel-blok { margin: 0 0 1.1rem; } .iel-blok-savol { display: flex; gap: .4rem; align-items: baseline; font-weight: 600; margin: 0 0 .5rem; } .iel-varlar { display: grid; gap: .35rem; } .iel-var { display: flex; align-items: baseline; gap: .5rem; padding: .45rem .6rem; border: 1.5px solid rgb(var(--line)); border-radius: .6rem; cursor: pointer; } .iel-var:hover { border-color: rgb(var(--brand) / .5); } .iel-var input { accent-color: rgb(var(--brand)); transform: translateY(1px); } .iel-harf { font-weight: 700; color: rgb(var(--ink) / .55); min-width: 1.1rem; } /* muharrir namunasi: to'g'ri javob yashil hoshiyada */ .iel-var--togri { border-color: rgb(var(--correct)); background: rgb(var(--correct) / .07); } .iel-kalit { display: inline-block; padding: .1rem .55rem; border-radius: .5rem; background: rgb(var(--correct) / .12); color: rgb(var(--correct)); font-weight: 600; font-size: .9em; } /* --- ixcham bayonot qatori (matching: harf/rim — variant ko'p) ------------ */ .iel-qator { display: flex; align-items: center; gap: .6rem; padding: .45rem .1rem; } .iel-qator-matn { flex: 1; min-width: 0; } .iel-qator .iel-sel { min-width: 5.5rem; } .iel-qator .iel-kalit { flex-shrink: 0; } /* --- T/F/NG · Y/N/NG izoh jadvali ---------------------------------------- Ko'rsatma ostida DOIM turadi (`ielts_render.IZOH_JADVAL`). Haqiqiy imtihonda o'quvchi «NOT GIVEN» bilan «FALSE» ning farqini shu yerdan o'qiydi — bu farq aynan shu ikki turning butun mohiyati. Chapda kalit qalin, o'ngda izoh brend rangida; qatorlar chiziqli kulrang. */ .iel-izoh { margin: .1rem 0 1.1rem; border-radius: .5rem; overflow: hidden; } .iel-izoh-qator { display: flex; gap: 1.25rem; padding: .6rem 1rem; align-items: baseline; } .iel-izoh-qator:nth-child(odd) { background: rgb(var(--ink) / .05); } .iel-izoh-qator:nth-child(even) { background: rgb(var(--ink) / .015); } .iel-izoh-qator b { flex: 0 0 auto; min-width: 6.25rem; font-weight: 700; color: rgb(var(--ink)); } .iel-izoh-qator span { color: rgb(var(--brand)); } /* --- ro'yxat qutisi (List of Headings / xususiyatlar / so'zlar) ----------- */ .iel-quti { margin: .25rem 0 1.1rem; border-radius: .5rem; overflow: hidden; } .iel-quti-sarlavha { font-weight: 700; margin: 0 0 .35rem; color: rgb(var(--ink) / .8); } .iel-quti-qator { display: flex; gap: .75rem; padding: .55rem .9rem; } .iel-quti-qator:nth-child(odd) { background: rgb(var(--ink) / .05); } .iel-quti-qator:nth-child(even) { background: rgb(var(--ink) / .015); } .iel-quti-qator b { min-width: 1.6rem; color: rgb(var(--ink) / .8); } .iel-quti--soz { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem; background: rgb(var(--ink) / .03); } .iel-quti-soz { padding: .15rem .6rem; border: 1px solid rgb(var(--line)); border-radius: .5rem; background: rgb(var(--surface)); } /* Ko'rsatmadagi qizil chegara iborasi */ .iel-qizil { color: rgb(var(--wrong)); } /* Savol guruhining kartasi — turlar bir-biriga qo'shilib ketmasin. Guruhlar orasida faqat bo'sh joy bo'lganda MCQ tugab moslashtirish boshlangani bilinmasdi; chegara «yangi topshiriq» belgisi. */ .iel-guruh { border: 1px solid rgb(var(--line)); border-radius: .8rem; background: rgb(var(--surface)); padding: 1.1rem 1.3rem; margin: 0 0 1.25rem; } .iel-guruh > h3 { margin-top: 0; } /* --- pastki palitra ------------------------------------------------------ Namuna ekran: FAOL part raqam chiplari bilan yoyilgan, qolganlari «Part 2 · 0 of 13» bo'lib yig'ilgan; o'ng chekkada oldingi/keyingi va yakunlash tugmalari. */ .iel-palitra { flex: 0 0 auto; z-index: 30; display: flex; align-items: stretch; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface)); } .iel-part { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .55rem; padding: .5rem .9rem; min-height: 3.1rem; cursor: pointer; border-right: 1px solid rgb(var(--line)); color: rgb(var(--ink) / .7); font-size: .85rem; background: transparent; overflow-x: auto; } .iel-part:hover { background: rgb(var(--ink) / .03); } .iel-part--joriy { flex: 3 1 0; color: rgb(var(--ink)); cursor: default; } .iel-part--joriy:hover { background: transparent; } .iel-part-nomi { font-weight: 700; white-space: nowrap; flex: 0 0 auto; } .iel-part-holat { white-space: nowrap; color: rgb(var(--ink) / .6); } .iel-part-holat b { color: rgb(var(--ink)); font-weight: 700; } .iel-chiplar { display: flex; gap: .2rem; align-items: center; } .iel-chip { flex: 0 0 auto; min-width: 1.75rem; height: 1.75rem; padding: 0 .3rem; border: 1px solid rgb(var(--line-strong)); border-radius: .3rem; background: rgb(var(--surface)); color: rgb(var(--ink) / .7); font-size: .78rem; font-weight: 600; cursor: pointer; } .iel-chip:hover { border-color: rgb(var(--brand)); color: rgb(var(--brand)); } /* javob berilgan */ .iel-chip--bor { background: rgb(var(--brand) / .14); border-color: rgb(var(--brand) / .45); color: rgb(var(--brand)); } /* ekrandagi JORIY savol — to'q ko'k to'ldirilgan kvadrat */ .iel-chip--joriy { background: rgb(var(--brand-deep)); color: #fff; border-color: rgb(var(--brand-deep)); } .iel-chip--joriy:hover { color: #fff; } .iel-nav { flex: 0 0 auto; display: flex; align-items: stretch; } .iel-nav button { width: 3.1rem; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink) / .65); cursor: pointer; } .iel-nav button:hover { background: rgb(var(--ink) / .06); color: rgb(var(--ink)); } .iel-nav button:disabled { opacity: .35; cursor: default; background: rgb(var(--surface)); } .iel-nav-keyingi { background: rgb(var(--ink)) !important; color: rgb(var(--paper)) !important; } .iel-nav-keyingi:hover { background: rgb(var(--ink) / .85) !important; } /* Tor (lekin hamon yonma-yon) ekranda palitra ixchamlashadi: 13 ta chip + ikkita yig'ilgan part + uchta tugma 900px ga sig'ishi kerak. Busiz oxirgi chip va «questions» so'zi qirqilib qolardi. */ @media (max-width: 1200px) { .iel-part { padding: .5rem .55rem; gap: .4rem; font-size: .8rem; } .iel-chip { min-width: 1.6rem; height: 1.6rem; font-size: .72rem; padding: 0 .2rem; } .iel-chiplar { gap: .15rem; } .iel-nav button { width: 2.6rem; } } /* --- IELTS MUHARRIRI: chapda matn, o'ngda savol guruhlari ----------------- Muallif savolni MATNGA qarab yozadi. Ilgari matn yig'ilgan holda savol guruhlarining TEPASIDA turardi va har savol uchun uni ochib-yopish, yoki sahifani u yoq-bu yoqqa aylantirish kerak edi — kursxona buni «juda noqulay» dedi. Endi matn CHAPDA yopishib turadi (o'z scroll'i bilan), guruhlar esa o'ngda qo'shiladi va shu yerda ko'rinib turadi. Chegara imtihon sahifasi bilan BIR XIL (860px + bo'y) — ataylab: muallif ishlaydigan ko'rinish o'quvchi ko'radiganiga imkon qadar yaqin bo'lsin va ikkalasi bitta qoidada o'zgarsin. */ .iel-mux { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 860px) and (min-height: 480px) { .iel-mux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } /* Matn paneli yopishib turadi — o'ngda uzun guruh ro'yxati aylantirilganda ham ko'zdan ketmaydi. O'z ichida ham scroll bo'ladi: matn 700 so'z. */ .iel-mux-chap { position: sticky; top: .5rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto; } } /* Part almashtirgich — imtihondagi palitraning muharrirdagi ko'rinishi */ .iel-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: .6rem; cursor: pointer; border: 1.5px solid rgb(var(--line)); background: transparent; color: rgb(var(--ink) / .7); font-weight: 700; font-size: .85rem; } .iel-tab:hover { border-color: rgb(var(--brand) / .5); color: rgb(var(--brand)); } .iel-tab--joriy { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: rgb(var(--paper)); } .iel-tab--joriy:hover { color: rgb(var(--paper)); border-color: rgb(var(--ink)); } .iel-tab-son { font-weight: 600; font-size: .75rem; opacity: .7; } /* --- LISTENING: audio panel (.iel-player) -------------------------------- CD-IELTS tartibi: yozuv BIR MARTA, pauza yo'q, faqat ±5 s surish (kursxona qarori). Panel doim ko'rinib turadi — Part tasmasi ostida. Ko'rish rejimida (xodim) oddiy erkin