/* ============================================================ COSMOS — IT Shaharcha umumiy dizayn qatlami Barcha panellarda oxirgi bo'lib ulanadi. IKKI MAVZU: [data-theme="blue"] — ko'k → binafsha (standart) [data-theme="green"] — neon turkuaz-yashil Mavzuni theme.js da o'rnatadi (flesh bo'lmasligi uchun), almashtirish tugmasini cosmos.js header'ga joylaydi. MUHIM: bu yerda qat'iy rang YOZILMAYDI — hammasi token orqali. Aks holda mavzu almashganda ba'zi joylar eski rangda qolib ketadi. ============================================================ */ /* ============================================================ TOKENLAR — KO'K MAVZU (standart) ============================================================ */ :root, :root[data-theme="blue"] { --c1: #4F7CFF; --c2: #7B5CFF; --accent: #5B7FFF; --accent-soft: #8AA6FF; --accent2: #3D5FD9; --accent3: #9DB4FF; --accent-rgb: 91, 127, 255; --c2-rgb: 123, 92, 255; /* Fon gradienti */ --bg-a: #0A1020; --bg-b: #080D1A; --bg-c: #060A14; /* Kartochka gradienti (rgb uchligi — alfa ishlatilgan joyda qo'shiladi) */ --surf-a-rgb: 22, 33, 64; --surf-b-rgb: 17, 26, 51; --surf-c-rgb: 14, 22, 44; --form-bg: #0B1226; --input-bg: #0C1224; /* Matn */ --text: #EAF0FF; --label: #D6DEF2; --text-muted: #93A0C0; --placeholder: #5E688B; --tab-text: #C3CEE8; /* Yulduz va meteor */ --star-rgb: 140, 170, 255; --meteor-rgb: 91, 127, 255; --meteor2-rgb: 138, 92, 255; } /* ============================================================ TOKENLAR — YASHIL MAVZU ============================================================ */ :root[data-theme="green"] { --c1: #00E5A0; --c2: #00A878; --accent: #00E5A0; --accent-soft: #5CFFC8; --accent2: #00815E; --accent3: #7DFFD4; --accent-rgb: 0, 229, 160; --c2-rgb: 0, 168, 120; --bg-a: #08130F; --bg-b: #060F0C; --bg-c: #050D0B; --surf-a-rgb: 16, 38, 30; --surf-b-rgb: 12, 26, 22; --surf-c-rgb: 9, 20, 17; --form-bg: #0A1512; --input-bg: #0B1815; --text: #EAF3F0; --label: #D8E4E0; --text-muted: #8FA39D; --placeholder: #5E706B; --tab-text: #C8D6D2; --star-rgb: 120, 255, 210; --meteor-rgb: 0, 229, 160; --meteor2-rgb: 130, 255, 220; } /* ============================================================ IKKALA MAVZUDA BIR XIL ============================================================ */ :root { --grad: linear-gradient(135deg, var(--c1), var(--c2)); --line: rgba(var(--accent-rgb), 0.22); --line-2: rgba(var(--accent-rgb), 0.16); --glow: 0 0 30px rgba(var(--accent-rgb), 0.35); /* Semantik — mavzudan qat'i nazar o'zgarmaydi */ --success: #00E5A0; --success-dim: rgba(0, 229, 160, 0.15); --gold: #ffc93c; --warning: #ffb020; --danger: #ff4d6a; --border: rgba(var(--accent-rgb), 0.22); --bg: var(--bg-c); --surface: rgba(var(--surf-b-rgb), 0.82); --surface1: rgba(var(--accent-rgb), 0.05); --surface2: rgba(var(--surf-a-rgb), 0.78); --radius-card: 16px; --radius-input: 10px; --ease: cubic-bezier(.2, .8, .3, 1); } /* Mavzu almashganda rang o'tishi silliq bo'lsin */ html, body { transition: background-color .35s var(--ease); } /* ============================================================ 1) FON — yulduzli osmon ============================================================ */ html { background: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 55%, var(--bg-c) 100%) fixed !important; } body::before { background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(var(--accent-rgb), 0.13) 0%, transparent 70%), radial-gradient(circle at 82% 22%, rgba(var(--c2-rgb), 0.08) 0%, transparent 55%), rgba(0, 0, 0, 0.22) !important; } body::after { background-image: radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1px), radial-gradient(rgba(var(--star-rgb), 0.75) 1px, transparent 1px) !important; } /* ============================================================ 2) UCHUVCHI YULDUZLAR (meteorlar) ============================================================ */ .cos-sky { position: fixed; inset: 0; /* z-index: -1 — butun kontent ortida. Shu sababli hech qaysi panelning stacking tartibiga (sticky header, fixed sidebar) tegmaydi. */ z-index: -1; pointer-events: none; overflow: hidden; } .cos-meteor { position: absolute; display: block; border-radius: 99px; transform-origin: left center; animation-name: cosShoot; animation-timing-function: cubic-bezier(0.25, 0.45, 0.35, 1); animation-iteration-count: 1; animation-fill-mode: forwards; will-change: transform, opacity; } .cos-white { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.95) 100%); box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.55); } .cos-green { background: linear-gradient(90deg, rgba(var(--meteor-rgb), 0) 0%, rgba(var(--meteor-rgb), 0.45) 45%, rgba(235, 245, 255, 0.98) 100%); box-shadow: 0 0 12px 1px rgba(var(--meteor-rgb), 0.6); } .cos-cyan { background: linear-gradient(90deg, rgba(var(--meteor2-rgb), 0) 0%, rgba(var(--meteor2-rgb), 0.45) 45%, rgba(240, 245, 255, 0.98) 100%); box-shadow: 0 0 12px 1px rgba(var(--meteor2-rgb), 0.55); } @keyframes cosShoot { 0% { opacity: 0; transform: rotate(var(--cos-angle, 35deg)) translate3d(0,0,0) scaleX(0.15); } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--cos-angle, 35deg)) translate3d(var(--cos-travel, 90vh), 0, 0) scaleX(1); } } @media (prefers-reduced-motion: reduce) { .cos-meteor { display: none; } } /* ============================================================ 3) KARTOCHKALAR — yengil blur, yorqin shisha ============================================================ */ .stat-card, .info-card, .video-card, .game-card, .game-big-card, .game-modal-box, .admin-modal-box, .splash-box, .tp-subject-card, .tp-test-header, .tp-question-card, .tp-result-card, .admin-card, .student-card, .dstat-card, .gr-podium-card, .toast, .emp-job-card, .emp-chat-box { background-color: transparent !important; background-image: linear-gradient(158deg, rgba(var(--surf-a-rgb), 0.86) 0%, rgba(var(--surf-b-rgb), 0.80) 55%, rgba(var(--surf-c-rgb), 0.78) 100%) !important; border: 1px solid rgba(var(--accent-rgb), 0.22) !important; border-radius: var(--radius-card) !important; -webkit-backdrop-filter: blur(3px) saturate(160%) brightness(1.06); backdrop-filter: blur(3px) saturate(160%) brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 40px rgba(var(--accent-rgb), 0.05), 0 6px 22px rgba(0, 0, 0, 0.40); transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .stat-card:hover, .info-card:hover, .game-big-card:hover, .tp-subject-card:hover, .admin-card:hover, .student-card:hover, .dstat-card:hover, .emp-job-card:hover, .video-card:hover, .game-card:hover { border-color: rgba(var(--accent-rgb), 0.45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 28px rgba(var(--accent-rgb), 0.35); } /* ============================================================ 4) TABLAR va PILL'LAR ============================================================ */ .nav-btn, .sidebar-btn, .day-chip, .gr-page-btn, .tp-lesson-card { background: transparent !important; border: 1px solid var(--line) !important; color: var(--tab-text) !important; border-radius: 12px !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); } .nav-btn:hover, .sidebar-btn:hover, .day-chip:hover, .gr-page-btn:hover, .tp-lesson-card:hover { border-color: rgba(var(--accent-rgb), 0.55) !important; color: var(--accent-soft) !important; box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25) !important; } .nav-btn.active-tab, .sidebar-btn.active, .day-chip.active, .gr-page-btn.active, .tp-lesson-card.active, .mobile-nav-drawer .nav-btn.active-tab { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.4) !important; } .nav-btn.active-tab *, .sidebar-btn.active *, .tp-lesson-card.active * { color: #fff !important; } .tp-lesson-card.active strong { -webkit-text-fill-color: #fff !important; background: none !important; } /* Nav tugmalari: matn ichida ikki qatorga bo'linib sig'adi — bu asl xatti-harakat. white-space: nowrap QO'YMANG: u tugmalarni keskin kengaytirib, logo va soat ustiga chiqarib yuboradi. */ .main-nav { min-width: 0; flex-wrap: nowrap; gap: 4px; } .nav-btn { padding: 7px 10px !important; font-size: 12.5px !important; gap: 6px !important; } /* Mavzu almashtirgichi header'da ~64px joy oladi, shuning uchun siqilish bosqichlari kengaytirildi: avval nav ikonkalari, keyin soat, so'ng logo yozuvi va sessiya taymeri yashiriladi. */ @media (max-width: 1400px) { .main-nav .nav-btn svg { display: none; } .nav-btn { padding: 6px 9px !important; font-size: 12px !important; } .header-time { display: none !important; } } @media (max-width: 1240px) { .logo-text { display: none; } .nav-btn { padding: 5px 7px !important; font-size: 11.5px !important; } } @media (max-width: 1080px) { .header-session-info { display: none !important; } .nav-btn { padding: 5px 6px !important; font-size: 11px !important; } } /* ============================================================ 5) TUGMALAR ============================================================ */ .btn-primary, .tp-btn-primary, .game-play-btn, .game-tag, .btn-submit, .btn-save, .btn-add, .form-btn, button[type="submit"], .splash-btn, .bt-btn-primary { background: var(--grad) !important; color: #fff !important; font-weight: 700; border: none !important; border-radius: var(--radius-input) !important; box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.32); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .btn-primary:hover, .tp-btn-primary:hover, .game-play-btn:hover, .btn-submit:hover, .btn-save:hover, .btn-add:hover, .form-btn:hover, button[type="submit"]:hover, .splash-btn:hover, .game-big-card:hover .game-tag { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(var(--accent-rgb), 0.45); } .btn-secondary, .btn-view-site, .ss-refresh-btn, .btn-back, .tp-back-btn { background: rgba(var(--accent-rgb), 0.10) !important; border: 1px solid var(--line) !important; color: var(--accent-soft) !important; border-radius: var(--radius-input); } .btn-secondary:hover, .btn-view-site:hover, .ss-refresh-btn:hover, .btn-back:hover, .tp-back-btn:hover { background: rgba(var(--accent-rgb), 0.20) !important; box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28) !important; } .btn-logout-top, .btn-logout { background: rgba(255, 77, 106, 0.10) !important; border: 1px solid rgba(255, 77, 106, 0.32) !important; color: var(--danger) !important; } /* ============================================================ 6) FORMA va INPUTLAR ============================================================ */ .form-block, .file-upload-area, .tp-form { background: var(--form-bg); border: 1px solid var(--line-2); border-radius: var(--radius-card); } input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], select, textarea, .form-input, .form-group input, .form-group select, .form-group textarea { /* background-color (background emas!) — qisqartma `background` select'ning strelka rasmini (background-image) o'chirib yuborardi. */ background-color: var(--input-bg) !important; border: 1px solid rgba(var(--accent-rgb), 0.20) !important; border-radius: var(--radius-input) !important; color: var(--text) !important; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } input::placeholder, textarea::placeholder { color: var(--placeholder) !important; opacity: 1; } input:focus, select:focus, textarea:focus, .form-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), 0 0 20px rgba(var(--accent-rgb), 0.22) !important; outline: none !important; } .form-group label, .form-label { color: var(--label) !important; } /* ============================================================ 7) MATN va RAQAMLAR ============================================================ */ .stat-number, .mini-stat-num, .dstat-num, .dstat-card strong { color: var(--accent) !important; text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5); } .stat-label, .dstat-label { color: var(--text-muted) !important; } .card-header h3, .card-title-row h3, .page-header h2, .video-info h4, .admin-card h3 { color: var(--text); letter-spacing: -0.2px; } .page-header p, .games-sub, .video-info p, .game-info p { color: var(--text-muted); } /* ============================================================ 8) HEADER / SIDEBAR / MODAL / JADVAL ============================================================ */ .admin-sidebar, .admin-header, .site-header { -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); } .admin-sidebar { background: linear-gradient(180deg, rgba(var(--surf-b-rgb), 0.92), rgba(var(--surf-c-rgb), 0.88)) !important; border-right: 1px solid var(--line-2) !important; } .admin-header, .site-header { background: linear-gradient(to bottom, rgba(var(--surf-a-rgb), 0.94), rgba(var(--surf-b-rgb), 0.88)) !important; border-bottom: 1px solid var(--line) !important; } .game-modal, .admin-modal-overlay { background: rgba(0, 0, 0, 0.72) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .data-table thead th { background: rgba(var(--surf-b-rgb), 0.9); color: var(--label); border-bottom: 1px solid var(--line); } .data-table tbody tr:hover { background: rgba(var(--accent-rgb), 0.08); } .badge, .upcoming { background: rgba(var(--accent-rgb), 0.14) !important; color: var(--accent3) !important; border: 1px solid rgba(var(--accent-rgb), 0.28); } .today-badge { background: var(--grad); color: #fff; font-weight: 700; } /* ============================================================ 9) SEMANTIK YASHIL — mavzudan qat'i nazar ============================================================ */ .notif-success, .done, .active-stu, .toast.success, .tp-option.correct, .bt-opt.correct, .correct { border-color: var(--success) !important; color: var(--success) !important; } .done, .active-stu { background: var(--success-dim) !important; } .tp-option.correct { background: rgba(0, 229, 160, 0.22) !important; box-shadow: 0 0 32px rgba(0, 229, 160, 0.55) !important; } .card-dot, .pulse-dot, .status-online { background: var(--success) !important; box-shadow: 0 0 10px rgba(0, 229, 160, 0.6); } .progress-bar, .tp-progress-track { background: rgba(var(--surf-c-rgb), 0.9) !important; border-color: var(--line-2) !important; } .progress-fill, #tp-progress-fill { background: linear-gradient(90deg, var(--c1), var(--success)) !important; box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45); } /* Brend logotipi — mavzuga ergashadi */ .logo-text { background: linear-gradient(90deg, var(--accent), var(--accent-soft)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5)); } .logo-img-real, .admin-logo-img { border-color: rgba(var(--accent-rgb), 0.45) !important; box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4) !important; } /* ============================================================ 10) MAVZU ALMASHTIRGICH (cosmos.js joylaydi) ============================================================ */ .cos-theme-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 99px; background: rgba(var(--surf-c-rgb), 0.85); border: 1px solid var(--line); flex-shrink: 0; line-height: 0; } .cos-theme-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } .cos-theme-btn[data-set="blue"] { background: linear-gradient(135deg, #4F7CFF, #7B5CFF); } .cos-theme-btn[data-set="green"] { background: linear-gradient(135deg, #00E5A0, #00A878); } .cos-theme-btn:hover { transform: scale(1.12); } .cos-theme-btn[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.45); } .cos-theme-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 520px) { .cos-theme-btn { width: 22px; height: 22px; } } /* ============================================================ 11) JOYLASHUV — bir xil ritm, tekis grid ============================================================ */ .info-card, .admin-card { padding: 22px 24px !important; } .stat-card, .dstat-card { padding: 18px 20px !important; } .stats-row, .dstat-grid, .students-grid, .video-grid, .games-grid, .tp-subjects-grid { gap: 18px !important; align-items: stretch; } .stats-row > *, .dstat-grid > *, .students-grid > *, .video-grid > *, .games-grid > *, .tp-subjects-grid > * { min-width: 0; } /* Kartochka ichida kontent tik tarqaladi — tugmalar bir chiziqda tugaydi */ .game-big-card, .video-card, .tp-subject-card { display: flex; flex-direction: column; } .game-big-info, .video-info { display: flex; flex-direction: column; flex: 1; } .game-big-info .game-tag, .video-info .btn-primary { margin-top: auto; align-self: flex-start; } .card-header, .card-title-row { min-height: 32px; margin-bottom: 18px !important; padding-bottom: 12px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.12); } .admin-card { margin-bottom: 18px !important; } .page-header { margin-bottom: 24px !important; } .form-actions, .btn-row, .card-actions, .modal-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; } .form-actions > button, .btn-row > button, .card-actions > button, .modal-actions > button { padding: 10px 18px !important; font-size: 13.5px !important; line-height: 1.2; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .data-table th, .data-table td { padding: 12px 14px !important; } .data-table tbody tr { border-bottom: 1px solid rgba(var(--accent-rgb), 0.08); } .admin-card svg { display: block; } @media (max-width: 640px) { .info-card, .admin-card { padding: 18px 16px !important; } .stats-row, .dstat-grid, .students-grid, .video-grid, .games-grid, .tp-subjects-grid { gap: 14px !important; } } /* ============================================================ 12) SAYQAL — fokus, tanlash, skrollbar, header pill'lari ============================================================ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } ::selection { background: rgba(var(--accent-rgb), 0.32); color: #fff; } * { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(var(--surf-c-rgb), 0.6); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.4), rgba(var(--c2-rgb), 0.55)); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.65), rgba(var(--c2-rgb), 0.8)); background-clip: padding-box; } /* Header pill'lari qisqarmasin (aks holda "⭐ 10 ball" ikki qatorga bo'linadi) */ #my-points-badge, #my-work-rating, .header-session-info, .header-time, .btn-logout-top { white-space: nowrap; flex-shrink: 0; } #my-points-badge { background: rgba(255, 201, 60, 0.12) !important; border: 1px solid rgba(255, 201, 60, 0.32) !important; color: var(--gold) !important; } #my-work-rating { background: rgba(var(--c2-rgb), 0.14) !important; border: 1px solid rgba(var(--c2-rgb), 0.32) !important; color: var(--accent3) !important; } .stat-card, .info-card, .game-card, .game-big-card, .tp-subject-card, .tp-test-header, .tp-question-card, .tp-result-card, .admin-card, .student-card, .dstat-card, .gr-podium-card, .emp-job-card { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .logo-text, .hero-title, .hero-title span, .tp-lesson-card strong, [class*="gradient"] { text-shadow: none !important; } @media (prefers-reduced-motion: reduce) { .stat-card, .info-card, .game-big-card, .tp-subject-card, .tp-lesson-card, .admin-card, .student-card, .dstat-card, .emp-job-card, .btn-primary, .tp-btn-primary, .game-play-btn, .nav-btn, .sidebar-btn, .cos-theme-btn { transition: none; } html, body { transition: none; } } /* ============================================================ 12) FORMA ELEMENTLARI — SELECT va SANA/OY TANLAGICH ------------------------------------------------------------ Saytdagi BARCHA elementining o'zi DOM da qoladi — mavjud kodlar (value, onchange) o'zgarishsiz ishlayveradi. ============================================================ */ .sel-panel { position: fixed; /* Modallardan (9999) ham yuqorida bo'lishi shart */ z-index: 100000; box-sizing: border-box; padding: 6px; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; background: var(--form-bg); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px rgba(var(--accent-rgb), 0.16); font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.35; color: var(--text); /* MUHIM: boshlang'ich holat opacity:0 QILINMAYDI. Panel display:none dan block ga o'tadi, transition esa display:none dan boshlanmaydi — ba'zi holatlarda panel ko'rinmay qolardi. Shuning uchun chiqish effekti @keyframes bilan beriladi: animatsiya ishlamasa ham panel to'liq ko'rinadi. */ } .sel-panel.is-open { animation: selPanelIn 0.15s var(--ease); } .sel-panel.is-up.is-open { animation: selPanelInUp 0.15s var(--ease); } @keyframes selPanelIn { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes selPanelInUp { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } } /* Yuqoriga ochilganda soya ham teskari tomonga tushadi */ .sel-panel.is-up { box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px rgba(var(--accent-rgb), 0.16); } /* ---- Ro'yxat bandi ---- */ .sel-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; cursor: pointer; /* Matn HAR DOIM ko'rinadigan rangda */ color: var(--text); background: transparent; white-space: normal; overflow-wrap: anywhere; transition: background .12s var(--ease), color .12s var(--ease); /* Barmoq bilan bosishga qulay */ min-height: 42px; -webkit-tap-highlight-color: transparent; } .sel-opt + .sel-opt { margin-top: 2px; } /* Sichqoncha ostidagi / klaviatura bilan belgilangan band */ .sel-opt.is-active { background: rgba(var(--accent-rgb), 0.16); color: #fff; } /* Hozir tanlangan band — chapida belgi chizig'i va belgisi */ .sel-opt.is-selected { background: rgba(var(--accent-rgb), 0.12); font-weight: 700; position: relative; padding-left: 30px; } .sel-opt.is-selected::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 10px; margin-top: -6px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(42deg); } .sel-opt.is-selected.is-active { background: rgba(var(--accent-rgb), 0.24); } .sel-opt.is-disabled { color: var(--placeholder); cursor: not-allowed; opacity: 0.7; } .sel-opt.is-disabled.is-active { background: transparent; color: var(--placeholder); } /* optgroup sarlavhasi */ .sel-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); } /* Panel ichidagi scroll chizig'i */ .sel-panel::-webkit-scrollbar { width: 10px; } .sel-panel::-webkit-scrollbar-track { background: transparent; } .sel-panel::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } .sel-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.5); background-clip: content-box; } /* Panel ochiq turganda select "faol" ko'rinadi va strelkasi teskari */ select.sel-active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16) !important; } /* ---- Xulq ro'yxati: har bir band o'z rangida ---- */ .sel-opt[data-xulq] { color: var(--xq, var(--text)); font-weight: 700; } .sel-opt[data-xulq]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-left: auto; background: var(--xq, var(--text-muted)); box-shadow: 0 0 8px var(--xq, transparent); flex-shrink: 0; } .sel-opt[data-xulq=""] { color: var(--text-muted); font-weight: 500; } .sel-opt[data-xulq].is-active { background: rgba(var(--xq-rgb, var(--accent-rgb)), 0.18); color: var(--xq, #fff); } .sel-opt[data-xulq].is-selected { background: rgba(var(--xq-rgb, var(--accent-rgb)), 0.14); } .sel-opt[data-xulq].is-selected::before { border-color: var(--xq, var(--accent)); } @media (prefers-reduced-motion: reduce) { .sel-panel.is-open, .sel-panel.is-up.is-open { animation: none; } } /* ============================================================ 16) MATN KO'RINUVCHANLIGI ------------------------------------------------------------ Hech bir joyda yozuv fon bilan qo'shilib ketmasligi kerak. ============================================================ */ /* Brauzer ro'yxati baribir ochilib qolsa (JS o'chirilgan bo'lsa) yozuvlar o'qilarli bo'lsin — oq fonda oq matn chiqmasin. */ select option, select optgroup { background-color: var(--form-bg) !important; color: var(--text) !important; } /* Tanlanmagan holat: xira, LEKIN o'qilarli. Ilgari --placeholder (#5E688B) ishlatilardi — fon bilan kontrasti past edi. --text-muted aniqroq ko'rinadi. */ select:has(option[value=""]:checked), select.is-empty { color: var(--text-muted) !important; } /* Kiritish maydonlarining placeholder matni ham juda xira bo'lmasin */ input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 0.85 !important; } /* Ba'zi brauzerlar disabled maydonlarni deyarli ko'rinmas qiladi */ input:disabled, select:disabled, textarea:disabled { -webkit-text-fill-color: var(--text-muted); color: var(--text-muted) !important; opacity: 0.75; } /* Avtoto'ldirish (Chrome) — oq fon + qora matnni bosib o'tadi */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important; caret-color: var(--text); }