/* ═══════════════════════════════════════════════════════════════════════ hb-tokens.css — Bittada HRM yagona dizayn tokenlari Manba: TZ_UNIFIED_DESIGN_SYSTEM.md §3 + "Bittada HRM.dc.html" prototipi (client_erp/redesign.css'dan meros, hb- nomlash bilan). 2026-07-29. Bu fayl FAQAT o'zgaruvchilar/global reset — komponent klasslari hb-components.css'da. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ /* ── QORONG'I (default) ── 2026-08-09, ikkinchi iteratsiya: buyurtmachi laym-sariq rangning yumshatilgan varianti ("zaytun-laym") ni ham yoqtirmadi — butunlay boshqa rang oilasiga o'tildi. Ko'k/binafsha ("AI-standart" gradient — dizayn-did qoidalariga ko'ra generik hisoblanadi) va laym ikkalasi ham chetlab o'tildi; o'rniga zamonaviy, tanish-lekin-klishe bo'lmagan zumrad-firuza (teal/emerald) tanlandi — Linear/Stripe/Supabase kabi zamonaviy SaaS mahsulotlarida keng tanilgan, professional va "arzon" emas. Fon o'tgan safargidek iliq to'q kulrang bo'lib qoladi. */ --hb-bg:#17161C; --hb-bg2:#1D1C23; --hb-sfc:#24232B; --hb-sfc2:#2E2D36; --hb-txt:#F0EFF2; --hb-mut:#A3A1AC; --hb-brd:rgba(255,255,255,.09); --hb-brd2:rgba(255,255,255,.16); --hb-acc:#24C29A; --hb-acc-d:#1FA884; --hb-acc-ink:#0B1F19; --hb-acc-text:#3BDCB3; --hb-acc-rgb:36,194,154; --hb-danger:#F58B8B; --hb-ok:#3BDCB3; --hb-warning:#F5C56B; --hb-info:#8FB8E8; --hb-violet:#C9B6F5; --hb-radius:22px; --hb-radius-md:18px; --hb-radius-sm:14px; --hb-pill:999px; /* 2026-08-19 kechqurun: ikki-bosqichli sidebar (icon rail + flyout) — #hbSidebar kengligi shu o'zgaruvchidan (static/shared/hb-components.css), shu bois joylashuv hisob-kitoblarida (masalan kelajakda boshqa sahifada rail chetidan boshlanadigan narsa) bitta manbadan olinadi. */ /* 2026-08-20 "zumrad yon panel" redizayni — IKKI kenglik: --hb-side-w KENG (default): bo'lim sarlavhalari + matn yorliqlari, guruh JOYIDA (inline) ochiladi. --hb-rail-w TOR (`#hbSidebar.slim`, yig'ilgan rejim): 2026-08-19 dagi ikonka-rail, guruh suzuvchi flyout bo'lib ochiladi. 82 → 72px (yangi spetsifikatsiya). Flyout shu kenglikdan +8px da ochiladi (hb-ui.js:: hbPositionRailFlyout → left:80px). */ /* 2026-09-07 (buyurtmachi: "standart kenglikni kamaytir") — 220 → 190px. 110px (aynan yarmi) SINOVDAN O'TMADI: pastki bandlar ("Jarima / e'tirof") 3 qatorga sinib, brend nomi ikki qatorga tushdi (buyurtmachi skrinshoti: "yopishib qoldi"). 190px — eng uzun yorliq ("Nizom va Qoidalar") hali sig'adigan eng tor kenglik; undan torini foydalanuvchi tortib olishi mumkin (hb-ui.js, min 160), yozuvlar "…" bilan qisqaradi (hb-components.css nowrap/ellipsis). Faqat ikonka kerak bo'lsa — yig'ish tugmasi (`--hb-rail-w`). Foydalanuvchi saqlagan kenglik (localStorage `hb_side_w`) baribir ustun. */ /* 2026-09-07, yakuniy: buyurtmachi "280 qil" — 190 → 300 → 280px. */ --hb-side-w:280px; --hb-rail-w:72px; /* 2026-08-24 — Yon panel/navbar BURCHAK radiusi, HAR BIR burchak alohida — "Ranglar" varag'idagi accent bilan BIR XIL DARAJA (sof localStorage, hb-ui.js::hbApplySidebarRadius/hbApplyNavbarRadius). Standart qiymatlar joriy qattiq-kodlangan burchaklar bilan AYNAN bir xil — shu bois inline override yo'q sahifalarda HECH NARSA o'zgarmaydi. Tartib CSS border-radius shorthand'iga mos: TL TR BR BL. Sidebar chapga yopishgan → FAQAT o'ng burchaklar dumaloq edi (#hbSidebar{border-radius:0 24px 24px 0}, hb-components.css). Navbar tepaga yopishgan → FAQAT past burchaklar dumaloq edi (.hbk-glass-bar{border-radius:0 0 24px 24px}, 2026-08-22, ui/components/glass.css). */ --hb-side-rad-tl:0px; --hb-side-rad-tr:24px; --hb-side-rad-br:24px; --hb-side-rad-bl:0px; --hb-top-rad-tl:0px; --hb-top-rad-tr:0px; --hb-top-rad-br:24px; --hb-top-rad-bl:24px; /* 2026-08-24 (buyurtmachi: "pastki navbarni ham ... burchagini aylana qil") — mobil pastki panel EKRANNING PASTIDA yopishgan → navbarning TESKARISI: FAQAT YUQORI ikkita burchak dumaloq (.hb-bottomnav, hb-components.css, faqat <=860px media ichida ishlatiladi). */ --hb-bnav-rad-tl:24px; --hb-bnav-rad-tr:24px; --hb-bnav-rad-br:0px; --hb-bnav-rad-bl:0px; /* ── Zumrad dok (2026-08-20) — ATAYLAB temaga BOG'LIQ EMAS ──────────── Yon panel Slack/Discord uslubidagi "chrome": yorug'/qorong'i tema tanlovidan QAT'IY NAZAR doim to'q zumrad bo'lib qoladi (buyurtmachi bergan namunada yorug' kontent yonida to'q yashil panel turibdi). Shu bois bu qiymatlar :root[data-theme=...] bloklarida QAYTA BELGILANMAYDI — aynan shu ularning maqsadi. Qolgan butun sahifa avvalgidek --hb-bg/--hb-sfc/... tokenlariga ergashadi. */ --hb-dock-bg:#064e3b; --hb-dock-acc:#10b981; /* 2026-08-24 — RGB uch birlik (`R,G,B`) `rgba(var(--hb-dock-acc-rgb),alpha)` shaklida ishlatish uchun (masalan .hb-navsub-item.active foni, hbk-brand-tile soyasi, hb-components.css). Sozlamalar tortmasidagi "Ranglar" varag'i (hb-settings-drawer.js::hbSetRenderColorsPane) FAQAT shu ikkala o'zgaruvchini (--hb-dock-acc + --hb-dock-acc-rgb) #hbSidebar elementiga INLINE style bilan qayta belgilaydi — standart holatda bu qiymat --hb-dock-acc bilan bir xil (16,185,129), shu bois hech qanday vizual o'zgarish YO'Q hozircha o'zgartirilmagan sahifalarda. */ --hb-dock-acc-rgb:16,185,129; --hb-dock-dot:#34d399; --hb-dock-ink:rgba(255,255,255,.7); --hb-dock-ink-on:#fff; --hb-dock-hover:rgba(255,255,255,.08); --hb-dock-brd:rgba(255,255,255,.08); --hb-shadow:0 14px 30px rgba(0,0,0,.40); --hb-shadow-sm:0 6px 14px rgba(0,0,0,.28); /* 2026-08-19: "Tizim sozlamalari" tortmasi uchun — boshqa --hb-shadow-* dan kattaroq, butun ekran balandligidagi suzuvchi panel (360px) ostiga. */ --hb-shadow-xl:0 30px 70px rgba(0,0,0,.50); --hb-glow:0 10px 24px rgba(0,0,0,.30); /* 2026-09-07 (buyurtmachi: "butun sahifa tungi rejimda qora bo'lib qolyapti, sidebar yashil-yu tanasi qora — xuddi rasmdagidek ochiq yashil gradient tarqalib tursin") — ASOSIY KONTENT foni (`.hb-shell`, hb-components.css) endi tekis --hb-bg emas, ustiga bir nechta juda xira (8-12%), keng yoyilgan --hb-acc/--hb-violet radial-gradient "yog'du"lari qo'shilgan — YANGI rang O'YLAB TOPILMAGAN, mavjud accent tokenlaridan. FAQAT qorong'i temada (pastda [data-theme= "light"] va tizim-yorug' fallback'ida `none`ga qaytariladi — yorug' temada bu effekt SO'RALMAGAN). `.hb-sidebar` o'zining alohida TEKIS --hb-bg2 foniga ega (opak) — shu bois bu gradient FAQAT asosiy kontent maydonida ko'rinadi, sidebar uni yashiradi (qatlamlanish tasodifiy emas, .hb-shell butun panjaraga chizilib, sidebar ustidan bosib turadi). */ /* 2026-09-07, 2-tur (buyurtmachi skrinshoti: "hali ham qora") — birinchi variant (8-13%) deyarli sezilmasdi. Endi: (1) butun fonga yengil yashil TUS (pastki linear qatlam, bg'ga 7% acc aralashmasi) — "qora" emas, "to'q yashil-kulrang"; (2) uchta radial "yog'du" ancha kuchliroq (28/20/14%) va kattaroq — kartalar orasidagi bo'shliqlarda ham ko'rinsin. */ --hb-shell-bg-image: radial-gradient(ellipse 1100px 720px at 80% -8%, color-mix(in srgb, var(--hb-acc) 28%, transparent), transparent 62%), radial-gradient(ellipse 900px 640px at -10% 60%, color-mix(in srgb, var(--hb-acc) 20%, transparent), transparent 64%), radial-gradient(ellipse 900px 700px at 100% 100%, color-mix(in srgb, var(--hb-acc) 14%, transparent), transparent 66%), linear-gradient(180deg, color-mix(in srgb, var(--hb-acc) 9%, var(--hb-bg)), color-mix(in srgb, var(--hb-acc) 5%, var(--hb-bg))); --hb-font:'Plus Jakarta Sans','Inter',system-ui,sans-serif; /* ── NATIVE BOSHQARUVLAR (2026-08-20, QA #9) ─────────────────────────── `color-scheme` — brauzerning O'ZI chizadigan qismlarini (select'ning ochiluvchi ro'yxati, kalendar oynasi va uning ikonkasi, checkbox/radio, number spinner, progress, scrollbar, autofill foni) qaysi temada chizishini AYTADIGAN YAGONA usul — bu qismlar DOM'da yo'q, shu bois ularga hech qanday CSS qoidasi yetib bormaydi. ⚠️ HOLAT: bu deklaratsiya avval FAQAT to'rtta ilova shablonining ICHIDA (surveys/fines/staff/attendance `hb_extra_head` bloklarida) bor edi — qolgan HAMMA sahifada (CMS, Kalendar, Akademiya, Loyihalar, Muloqot, Boshqaruv paneli…) `color-scheme` e'lon qilinmagani uchun brauzer YORUG' sxemani ishlatardi: qorong'i temada ochilgan select ro'yxati/kalendar oynasi oppoq-kulrang bo'lib "yonib" turardi. Endi qoida QOBIQ DARAJASIDA — o'sha to'rtta ilovadagi mahalliy nusxalar bir xil qiymatni beradi, ular zararsiz (bir xil natija). */ color-scheme: dark; } :root[data-theme="light"]{ color-scheme: light; --hb-bg:#FFFFFF; --hb-bg2:#EFEFEC; --hb-sfc:#FFFFFF; --hb-sfc2:#F1EFE8; --hb-txt:#1B1A20; --hb-mut:#6E6C76; --hb-brd:rgba(0,0,0,.14); --hb-brd2:rgba(0,0,0,.2); /* 2026-08-09: teal ko'chirilganda bu qator o'tkazib yuborilgan edi — hali ham eski zaytun-laym (#5C8A0C) qiymatida qolgan bo'lib, hattoki O'SHA ranglar ostida ham AA'ni qondirmasdi (3.65:1, --hb-bg fonida, 4.5 kerak). Teal oilasidan #16745C tanlandi: --hb-bg (#F3F1EA) ustida 5.04:1, --hb-sfc (#FFFFFF) ustida 5.70:1 — ikkalasi ham margin bilan AA'dan o'tadi. */ --hb-acc-text:#16745C; --hb-danger:#DC5B5B; --hb-ok:#16745C; --hb-warning:#B8792A; --hb-info:#2E7D8F; --hb-violet:#6F4FC9; --hb-shadow:0 14px 30px rgba(90,80,60,.14); --hb-shadow-sm:0 6px 14px rgba(90,80,60,.10); --hb-shadow-xl:0 30px 70px rgba(60,50,30,.22); --hb-glow:0 10px 24px rgba(120,140,40,.22); /* 2026-09-07 (2-tur, buyurtmachi: "kunduzgi rejimda ham bilinar-bilinmas och yashil gradient qo'shib yubor") — yorug' temada juda yengil (9/6%) och yashil yog'du + 2% tus; matn kontrastiga ta'sir qilmaydi. */ --hb-shell-bg-image: radial-gradient(ellipse 1100px 720px at 80% -8%, color-mix(in srgb, var(--hb-acc) 9%, transparent), transparent 62%), radial-gradient(ellipse 900px 640px at -10% 60%, color-mix(in srgb, var(--hb-acc) 6%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--hb-acc) 3%, var(--hb-bg)), var(--hb-bg)); } /* Foydalanuvchi hali tanlamagan bo'lsa — tizim mavzusiga ergashadi (birinchi kirish) */ @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]):not([data-theme="light"]){ color-scheme: light; --hb-bg:#FFFFFF; --hb-bg2:#EFEFEC; --hb-sfc:#FFFFFF; --hb-sfc2:#F1EFE8; --hb-txt:#1B1A20; --hb-mut:#6E6C76; --hb-brd:rgba(0,0,0,.14); --hb-brd2:rgba(0,0,0,.2); --hb-acc-text:#16745C; --hb-danger:#DC5B5B; --hb-ok:#16745C; --hb-warning:#B8792A; --hb-info:#2E7D8F; --hb-violet:#6F4FC9; --hb-shadow:0 14px 30px rgba(90,80,60,.14); --hb-shadow-sm:0 6px 14px rgba(90,80,60,.10); --hb-shadow-xl:0 30px 70px rgba(60,50,30,.22); --hb-glow:0 10px 24px rgba(120,140,40,.22); --hb-shell-bg-image: radial-gradient(ellipse 1100px 720px at 80% -8%, color-mix(in srgb, var(--hb-acc) 9%, transparent), transparent 62%), radial-gradient(ellipse 900px 640px at -10% 60%, color-mix(in srgb, var(--hb-acc) 6%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--hb-acc) 3%, var(--hb-bg)), var(--hb-bg)); } } /* ── Modul identifikatsiya ranglari (faqat ikonka/nishon darajasida, §3.1) ── */ :root{ --hb-mod-staff:var(--hb-info); --hb-mod-attendance:var(--hb-info); --hb-mod-fines:var(--hb-warning); --hb-mod-recruiting:var(--hb-violet); --hb-mod-academy:var(--hb-violet); --hb-mod-surveys:var(--hb-info); --hb-mod-hr:var(--hb-acc); --hb-mod-cms:var(--hb-acc); --hb-mod-calendar:var(--hb-violet); --hb-mod-discuss:var(--hb-acc); --hb-mod-project:var(--hb-info); } *{box-sizing:border-box} html,body{margin:0;padding:0} /* [BUG FIX, 2026-08-25 — buyurtmachi: "burchak yo'q joyda ham orqasida oq qirra chiqib qolayabdi"] `html`ning O'ZINING foni yo'q edi — faqat `body.hb`niki bor. Pastki navbar (`.hb-bottomnav`) yuqori burchaklari dumaloq (`overflow:hidden`) — o'sha kesilgan uchburchak joylarda, ba'zi holatlarda (mobil "elastik" ortiqcha-skroll, safe-area chekkasi) AYNAN shu piksellarda body EMAS, balki ENG TUB — `html`ning o'zi ko'rinadi. Fonsiz `html` brauzerning STANDART OQ foniga qaytadi — shu "oq qirra" edi. Endi `html` ham bir xil tema rangiga ega. */ html{background:var(--hb-bg)} body.hb{ background:var(--hb-bg); color:var(--hb-txt); font-family:var(--hb-font); font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased; } /* 2026-08-09 (buyurtmachi so'rovi): hover'da pastdan chiziq chiqmasligi kerak — deyarli barcha .hb a instansiyasi bu ilovada "havola" emas, balki navigatsiya elementi/tugma (.hb-navitem, .hb-btn va h.k.) sifatida ishlatiladi, ular allaqachon o'z fon-hover holatiga ega; qo'shimcha chiziq faqat shovqin qo'shardi. O'rniga: yumshoq rang o'tishi. */ .hb a{color:var(--hb-acc-text); text-decoration:none; transition:opacity .15s ease} .hb a:hover{opacity:.8} /* Sof matn ichidagi havolalar (masalan chat/post tanasi) — bular haqiqatan ham "havola" bo'lib, atrofdagi oddiy matndan farqlanishi kerak (a11y qoidasi), shuning uchun bu yerda ATAYLAB underline saqlanadi. */ .hb-prose a{text-decoration:underline; text-underline-offset:3px} .hb-prose a:hover{opacity:.8} .hb button{font-family:inherit} /* 2026-08-09 (buyurtmachi so'rovi): oldin ingichka uslublangan scrollbar ko'rsatilardi — "hunik" topildi, shuning uchun butun platformada HECH QANDAY scrollbar ko'rinmaydi (scroll o'zi ishlayveradi, faqat vizual chiziq/tayoqcha yashirilgan) — Chrome/Safari/Edge (webkit) va Firefox (scrollbar-width) ikkalasi ham qamrab olinadi. */ .hb, .hb *{scrollbar-width:none; -ms-overflow-style:none} .hb ::-webkit-scrollbar, .hb::-webkit-scrollbar{display:none; width:0; height:0} /* [2026-08-10, buyurtmachi so'rovi] Asosiy kontent uchun standart brauzer scrollbar'i qaytarildi — yuqoridagi umumiy yashirish qoidasi kichik ichki elementlar (sidebar-nav, dropdown) uchun saqlanadi, faqat #hbMainContent'ning O'ZI uchun bekor qilinadi. */ #hbMainContent{scrollbar-width:thin; -ms-overflow-style:auto} #hbMainContent::-webkit-scrollbar{display:block; width:10px; height:10px} #hbMainContent::-webkit-scrollbar-thumb{background:var(--hb-brd); border-radius:99px} #hbMainContent::-webkit-scrollbar-thumb:hover{background:var(--hb-mut)} #hbMainContent::-webkit-scrollbar-track{background:transparent} @keyframes hb-screenin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes hb-popin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @keyframes hb-bargrowx{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes hb-sheetup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes hb-toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes hb-pulse{0%,100%{opacity:.45}50%{opacity:.9}} @keyframes hb-fabbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}