/* ════════════════════════════════════════════════════════════════════ TERAN ILDIZ — css/glass.css (v65 · 10-QATLAM · SHISHA VA NUR) ──────────────────────────────────────────────────────────────────── MAQSAD Har kartochka, har post va Teran Ildizning BARCHA funksiyalarini shaffof shisha sirtga o'tkazish — did bilan, yaltiroqsiz. RANG PALITRASI (buyurtma bo'yicha, boshqa rang ishlatilmaydi) aqua #0abab5 — asosiy nur, faol holat qizil #bb1919 — jonli/shoshilinch, yetakchi material oq #ffffff — ustki nur qirrasi (light catch) qora #0a0c0e — chuqurlik, 5 pog'onali soya kumush #ced2d8 — 1px chegara, shisha qirrasi 8 QATLAMLI SOYA (--gl-8) — "8D" aynan shu: 1 kontakt · 2 yaqin · 3 o'rta · 4 uzoq · 5 ambient 6 ustki nur (inset, oq) · 7 pastki qirra (inset, qora) 8 rang nuri (kategoriya rangi — aqua yoki qizil) Bu — haqiqiy shisha panelning fizik xatti-harakati: yorug'lik ustidan tushadi, qirra uni tutadi, pastda soya to'planadi. TEZLIK SHARTNOMASI (buzilmaydi) • `backdrop-filter` FAQAT `html.gl-blur` da va FAQAT sanoqli qat'iy sirtlarda: masthead, catbar, tabbar, yon panel, o'quvchi oynalari, suzuvchi tugma. Ro'yxatlarda YO'Q. • Kartochkalarda blur o'rniga: shaffof fon + nur qirrasi. Ko'rinishi shisha, xarajati deyarli nol. • Uzun ro'yxatda 3 qatlamli soya (--gl-3), 8 qatlam faqat yetakchi material, hover va oynalar uchun. • Qobiliyat darvozasi index.html da: sekin qurilma, Save-Data yoki prefers-reduced-transparency → blur o'chadi, shaffoflik va qirra qoladi. QAYTARISH: dan `gl` klassini olib tashlasa — v64 holiga qaytadi. 1..9 qatlamning birortasiga tegilmagan. ════════════════════════════════════════════════════════════════════ */ /* ═══════════ 1) PALITRA VA QATLAM TOKENLARI ═══════════ */ html.gl { --gl-aqua: #0abab5; --gl-red: #bb1919; --gl-white: #ffffff; --gl-black: #0a0c0e; --gl-silver: #ced2d8; /* Shisha sirt (qorong'i oila — standart) */ --gl-pane: rgba(29, 32, 37, .58); /* kartochka */ --gl-pane-hi: rgba(38, 43, 50, .72); /* ko'tarilgan holat */ --gl-chrome: rgba(16, 18, 20, .72); /* masthead / nav */ --gl-deep: rgba(12, 14, 16, .86); /* oyna orqa foni */ /* Qirralar */ --gl-edge: rgba(206, 210, 216, .14); /* kumush 1px */ --gl-edge-hi: rgba(206, 210, 216, .26); --gl-rim-hi: rgba(255, 255, 255, .10); /* ustki nur (oq) */ --gl-rim-lo: rgba(10, 12, 16, .40); /* pastki qirra */ /* Rang nuri — 8-qatlam. Kategoriya rangi bo'lmasa aqua. */ --gl-tone: var(--cc, var(--gl-aqua)); --gl-glow: 0 0 22px -4px rgba(10, 186, 181, .18); --gl-glow-hi: 0 0 30px -3px rgba(10, 186, 181, .34); --gl-blur: 18px; --gl-r: 14px; --gl-r-sm: 10px; /* ── 8 QATLAMLI SOYA ── */ --gl-8: 0 1px 1px rgba(10,12,14,.34), 0 2px 4px rgba(10,12,14,.26), 0 6px 12px rgba(10,12,14,.20), 0 14px 28px rgba(10,12,14,.16), 0 30px 60px rgba(10,12,14,.12), inset 0 1px 0 var(--gl-rim-hi), inset 0 -1px 0 var(--gl-rim-lo), var(--gl-glow); /* ── 3 QATLAMLI SOYA (uzun ro'yxatlar uchun) ── */ --gl-3: 0 1px 2px rgba(10,12,14,.26), 0 4px 12px rgba(10,12,14,.16), inset 0 1px 0 var(--gl-rim-hi); } /* ── Yorug' oila: shisha oq ustida ishlashi uchun teskari ── */ html.gl[data-theme="white"], html.gl[data-theme="silver"], html.gl[data-theme="tiffany"] { --gl-pane: rgba(255, 255, 255, .64); --gl-pane-hi: rgba(255, 255, 255, .84); --gl-chrome: rgba(16, 18, 20, .78); /* masthead qora qoladi — TI imzosi */ --gl-deep: rgba(250, 251, 252, .90); --gl-edge: rgba(30, 38, 48, .13); --gl-edge-hi: rgba(30, 38, 48, .24); --gl-rim-hi: rgba(255, 255, 255, .80); --gl-rim-lo: rgba(30, 38, 48, .09); --gl-8: 0 1px 1px rgba(20,25,30,.07), 0 2px 4px rgba(20,25,30,.06), 0 6px 12px rgba(20,25,30,.06), 0 14px 28px rgba(20,25,30,.07), 0 30px 60px rgba(20,25,30,.07), inset 0 1px 0 var(--gl-rim-hi), inset 0 -1px 0 var(--gl-rim-lo), var(--gl-glow); --gl-3: 0 1px 2px rgba(20,25,30,.07), 0 4px 12px rgba(20,25,30,.07), inset 0 1px 0 var(--gl-rim-hi); } /* Qorong'i rangli mavzular — o'z tuslarini shishaga uzatadi */ html.gl[data-theme="charcoal-violet"] { --gl-pane: rgba(32,29,41,.58); --gl-pane-hi: rgba(43,40,55,.72); } html.gl[data-theme="cyber-silver"] { --gl-pane: rgba(27,31,38,.58); --gl-pane-hi: rgba(38,44,53,.72); } html.gl[data-theme="luminous-moss"] { --gl-pane: rgba(27,34,26,.58); --gl-pane-hi: rgba(38,47,36,.72); } html.gl[data-theme="vulcanico"] { --gl-pane: rgba(36,27,23,.58); --gl-pane-hi: rgba(49,38,32,.72); } html.gl[data-theme="notturno"] { --gl-pane: rgba(25,29,41,.58); --gl-pane-hi: rgba(36,41,56,.72); } /* ═══════════ 2) NUR MAYDONI ═══════════ MUHIM: shisha o'zi ko'rinmaydi — u ORQADAGI narsani ko'rsatadi. Tekis fon ustidagi shaffoflik hech qanday effekt bermaydi. Shu sabab orqada juda past intensivlikdagi aqua+qizil nur maydoni turadi. `fixed` — skrollda qayta chizilmaydi. */ html.gl body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 42% at 12% 4%, rgba(10,186,181,.10), transparent 70%), radial-gradient(48% 38% at 92% 12%, rgba(187,25,25,.075), transparent 70%), radial-gradient(70% 50% at 50% 104%, rgba(206,210,216,.055), transparent 72%); } html.gl[data-theme="white"] body::after, html.gl[data-theme="silver"] body::after, html.gl[data-theme="tiffany"] body::after { background: radial-gradient(58% 42% at 12% 4%, rgba(10,186,181,.13), transparent 70%), radial-gradient(48% 38% at 92% 12%, rgba(187,25,25,.055), transparent 70%), radial-gradient(70% 50% at 50% 104%, rgba(30,38,48,.05), transparent 72%); } /* ═══════════ 3) SHISHA QOBIQ (chrome) ═══════════ Sanoqli, qat'iy joylashgan sirtlar — blur shu yerda arzon. */ html.gl #nav, html.gl #catbar, html.gl #tabbar, html.gl .side-panel, html.gl .theme-menu, html.gl .srch-mob { background: var(--gl-chrome) !important; border-color: var(--gl-edge) !important; } html.gl-blur #nav, html.gl-blur #catbar, html.gl-blur #tabbar, html.gl-blur .side-panel, html.gl-blur .theme-menu, html.gl-blur .srch-mob { -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(150%); backdrop-filter: blur(var(--gl-blur)) saturate(150%); } html.gl.ed #nav { box-shadow: 0 1px 0 var(--gl-edge), 0 8px 24px rgba(10,12,14,.24); } html.gl.ed #catbar { box-shadow: 0 1px 0 var(--gl-edge); } html.gl.ed #tabbar { box-shadow: 0 -1px 0 var(--gl-edge), 0 -8px 24px rgba(10,12,14,.22); } html.gl.ed .side-panel { box-shadow: var(--gl-8); } html.gl .side-ov { background: rgba(10,12,14,.52); } html.gl-blur .side-ov { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Qidiruv maydoni — shisha ichida shisha */ html.gl .srch, html.gl .srch-mob input, html.gl .ap-pl-search input { background: rgba(255,255,255,.05) !important; border: 1px solid var(--gl-edge) !important; box-shadow: inset 0 1px 0 var(--gl-rim-hi); } html.gl .srch:focus-within { border-color: rgba(10,186,181,.42) !important; box-shadow: inset 0 1px 0 var(--gl-rim-hi), 0 0 0 3px rgba(10,186,181,.14); } /* ═══════════ 4) KARTOCHKALAR — har biri mustaqil shisha panel ═══════════ Hairline yo'lakli to'r shisha bilan mos kelmaydi: soyaga joy kerak. Shu sabab to'r yo'laklarga o'tadi, har kartochka o'z panelida turadi. */ html.gl #grid.grid { gap: 10px; background: none; border: 0; } html.gl.ed .card { background: var(--gl-pane); border: 1px solid var(--gl-edge); border-left: 3px solid var(--gl-tone); /* 9-qatlam imzosi saqlanadi */ border-radius: var(--gl-r); box-shadow: var(--gl-3); /* uzun ro'yxat — yengil */ overflow: hidden; transition: background .16s var(--ed-ease), border-color .16s var(--ed-ease), box-shadow .2s var(--ed-ease), transform .16s var(--ed-ease); } /* Ko'tarilish: 8 qatlam TO'LIQ ochiladi + kategoriya rangi yonadi */ html.gl.ed .card:hover { background: var(--gl-pane-hi); border-color: var(--gl-edge-hi); box-shadow: var(--gl-8); transform: translateY(-2px); } html.gl.ed .card:active { transform: translateY(0) scale(.995); } html.gl.ed .card:focus-visible { outline: none; border-color: rgba(10,186,181,.55); box-shadow: var(--gl-8), 0 0 0 3px rgba(10,186,181,.18); } /* Kategoriya rangi 8-qatlam nuriga uzatiladi */ html.gl.ed .card:hover { --gl-glow: 0 0 30px -3px color-mix(in srgb, var(--gl-tone) 34%, transparent); } @supports not (color: color-mix(in srgb, red, blue)) { html.gl.ed .card:hover { --gl-glow: var(--gl-glow-hi); } } /* Yetakchi material — qizil nur, 8 qatlam doimiy */ html.gl.ed .card.ed-lead { background: var(--gl-pane-hi); border-top: 3px solid var(--gl-red); border-left: 1px solid var(--gl-edge); box-shadow: var(--gl-8), 0 0 34px -6px rgba(187,25,25,.26); } html.gl.ed .card.ed-lead:hover { box-shadow: var(--gl-8), 0 0 44px -4px rgba(187,25,25,.34); } /* Kartochka ichidagi qirralar — shisha ichida hairline */ html.gl .cab-bar { border-top-color: var(--gl-edge); } html.gl .cab-btn + .cab-btn, html.gl .ed-back-chip { border-color: var(--gl-edge); } html.gl .cab-btn:hover, html.gl .ed-back-chip:hover { background: rgba(255,255,255,.06); } html.gl.ed .cbtn { background: rgba(255,255,255,.05); border: 1px solid var(--gl-edge); border-radius: var(--gl-r-sm); box-shadow: inset 0 1px 0 var(--gl-rim-hi); } html.gl.ed .cbtn:hover { background: rgba(10,186,181,.13); border-color: rgba(10,186,181,.40); box-shadow: inset 0 1px 0 var(--gl-rim-hi), 0 0 16px -4px rgba(10,186,181,.40); } /* ═══════════ 5) POSTLAR VA O'QUVCHI OYNALARI ═══════════ Har post shisha ustida o'qiladi — matn orqasi tinch, qirralar nurli. */ html.gl #artRdr, html.gl #huArtRdr, html.gl #rdr, html.gl #tiYtModal, html.gl #audPanel, html.gl .ti-siteframe { background: var(--gl-deep) !important; } html.gl-blur #artRdr, html.gl-blur #huArtRdr, html.gl-blur #rdr, html.gl-blur #tiYtModal, html.gl-blur #audPanel { -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); } /* O'quvchi ustki paneli — alohida shisha qatlam */ html.gl .art-top, html.gl .hu-rdr-top, html.gl .rdr-top, html.gl .ti-yt-bar, html.gl .ti-sf-bar, html.gl .ap-top { background: var(--gl-chrome) !important; border-bottom: 1px solid var(--gl-edge) !important; box-shadow: 0 8px 24px rgba(10,12,14,.22); } html.gl-blur .art-top, html.gl-blur .hu-rdr-top, html.gl-blur .rdr-top, html.gl-blur .ti-yt-bar, html.gl-blur .ti-sf-bar { -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(150%); backdrop-filter: blur(var(--gl-blur)) saturate(150%); } /* Post ichidagi rasm va joylashtirilgan bloklar */ html.gl .art-hero, html.gl .hu-rdr-cover, html.gl .art-doc-embed, html.gl .ti-news-cover { border-radius: var(--gl-r); border: 1px solid var(--gl-edge); box-shadow: var(--gl-3); overflow: hidden; } /* Sitata — aqua nur chizig'i */ html.gl .art-content blockquote { background: rgba(10,186,181,.06); border-left: 3px solid var(--gl-aqua); border-radius: 0 var(--gl-r-sm) var(--gl-r-sm) 0; box-shadow: inset 0 1px 0 var(--gl-rim-hi); } /* ═══════════ 6) ORQAGA TIZIMI — shisha ═══════════ */ /* (v66) .ed-fab olib tashlandi — pastki panelni to'sardi. */ html.gl .ed-end { border-top: 3px solid var(--gl-red); } html.gl .ed-end-btn { background: var(--gl-pane-hi); border: 1px solid var(--gl-edge-hi); border-radius: var(--gl-r); box-shadow: var(--gl-3); } html.gl .ed-end-btn:hover { background: rgba(10,186,181,.12); border-color: rgba(10,186,181,.42); box-shadow: var(--gl-8), 0 0 24px -6px rgba(10,186,181,.36); } html.gl.ed .rdr-back, html.gl .art-back, html.gl .hu-rdr-back, html.gl .ti-yt-back, html.gl .hub-back { background: rgba(255,255,255,.06) !important; border: 1px solid var(--gl-edge) !important; border-radius: var(--gl-r-sm) !important; box-shadow: inset 0 1px 0 var(--gl-rim-hi); } /* ═══════════ 7) TASMALAR VA YON PANEL ═══════════ */ html.gl.ed .rw { background: var(--gl-pane); border: 1px solid var(--gl-edge); border-top: 3px solid var(--gl-red); border-radius: var(--gl-r); box-shadow: var(--gl-3); padding: 12px 14px; } html.gl .ti-feed-item { border-top-color: var(--gl-edge); border-radius: var(--gl-r-sm); } html.gl .ti-feed-item:hover { background: rgba(10,186,181,.08); box-shadow: inset 0 0 0 1px rgba(10,186,181,.20); } html.gl .ti-feed-no { border-right-color: var(--gl-edge); } /* JONLI nishoni — qizil, haqiqiy nur bilan */ html.gl .ti-live-badge { border-radius: 999px; box-shadow: 0 0 16px -2px rgba(187,25,25,.60), inset 0 1px 0 rgba(255,255,255,.28); } html.gl .reco-card, html.gl .tirec-prev, html.gl .tilr-stage { background: var(--gl-pane); border: 1px solid var(--gl-edge); border-radius: var(--gl-r); box-shadow: var(--gl-3); } html.gl .reco-card:hover, html.gl .tirec-prev:hover { background: var(--gl-pane-hi); box-shadow: var(--gl-8); transform: translateY(-2px); } html.gl .reco-go, html.gl .tirec-go, html.gl .reco-refresh, html.gl.ed .hub-pill, html.gl .tilr-arrow, html.gl .tilr-play { background: rgba(255,255,255,.05); border: 1px solid var(--gl-edge); border-radius: var(--gl-r-sm); box-shadow: inset 0 1px 0 var(--gl-rim-hi); } html.gl.ed .hub-pill.on { background: rgba(10,186,181,.14) !important; border-color: rgba(10,186,181,.40); box-shadow: inset 0 1px 0 var(--gl-rim-hi), 0 0 18px -6px rgba(10,186,181,.44); } /* ═══════════ 8) KATEGORIYA LENTASI — aqua faol nur ═══════════ */ html.gl .nc.on::after { background: var(--gl-red); box-shadow: 0 0 14px 0 rgba(187,25,25,.62); } html.gl .nc.on i { color: var(--gl-aqua); text-shadow: 0 0 12px rgba(10,186,181,.50); } html.gl .nc:hover { background: rgba(255,255,255,.07) !important; } html.gl .nc-sep { background: var(--gl-edge); } html.gl .side-item.on { background: rgba(10,186,181,.10); border-left-color: var(--gl-aqua); box-shadow: inset 0 0 22px -8px rgba(10,186,181,.40); } html.gl .tb.on { color: var(--gl-white); box-shadow: inset 0 2px 0 var(--gl-red); } html.gl .tb.on i { color: var(--gl-aqua); text-shadow: 0 0 10px rgba(10,186,181,.45); } /* Sahifa sarlavhasi — kumush nur chizig'i */ html.gl .phd { border-top-color: var(--gl-red); box-shadow: 0 1px 12px -6px rgba(187,25,25,.50); } html.gl .pcnt { background: rgba(255,255,255,.05); border: 1px solid var(--gl-edge); border-radius: 999px; box-shadow: inset 0 1px 0 var(--gl-rim-hi); } /* Audio pleyer — shisha panel */ html.gl .ap-cbtn, html.gl .mini-btn, html.gl .ap-speed { background: rgba(255,255,255,.06); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-rim-hi); } html.gl .ap-cbtn.primary { background: rgba(10,186,181,.18); border-color: rgba(10,186,181,.45); box-shadow: inset 0 1px 0 var(--gl-rim-hi), 0 0 26px -6px rgba(10,186,181,.50); } html.gl #mini { background: var(--gl-chrome); border: 1px solid var(--gl-edge); border-radius: var(--gl-r); box-shadow: var(--gl-8); } html.gl-blur #mini { -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(150%); backdrop-filter: blur(var(--gl-blur)) saturate(150%); } /* Toast / PWA banner */ html.gl #toast, html.gl #pwaBanner { background: var(--gl-chrome); border: 1px solid var(--gl-edge-hi); border-radius: var(--gl-r); box-shadow: var(--gl-8); } html.gl-blur #toast, html.gl-blur #pwaBanner { -webkit-backdrop-filter: blur(var(--gl-blur)); backdrop-filter: blur(var(--gl-blur)); } html.gl .pwa-btn.primary { background: rgba(10,186,181,.20); border: 1px solid rgba(10,186,181,.45); box-shadow: inset 0 1px 0 var(--gl-rim-hi), 0 0 20px -6px rgba(10,186,181,.44); } /* ═══════════ 9) MOBIL VA TEZLIK CHEKLOVLARI ═══════════ */ @media (max-width: 559px) { html.gl { --gl-r: 12px; --gl-blur: 14px; } html.gl #grid.grid { gap: 8px; } /* Telefonda hover yo'q — transform va 8 qatlam ham keraksiz */ html.gl.ed .card:hover { transform: none; box-shadow: var(--gl-3); } } /* Sichqoncha yo'q qurilmada ko'tarilish o'chadi (bosishda sakramasin) */ @media (hover: none) { html.gl.ed .card:hover, html.gl .reco-card:hover, html.gl .tirec-prev:hover { transform: none; } } /* ═══════════ 10) HURMAT VA ZAXIRA ═══════════ Shaffoflikni kamaytirish so'ralgan bo'lsa yoki qurilma sekin bo'lsa (html.gl-blur YO'Q) — panellar qattiq fonga o'tadi. Ko'rinish o'zgaradi, LEKIN o'qilishlik hech qachon buzilmaydi. */ @media (prefers-reduced-transparency: reduce) { html.gl .card, html.gl .rw, html.gl .reco-card, html.gl .tirec-prev, html.gl .tilr-stage { background: var(--surf); } html.gl #nav, html.gl #catbar, html.gl #tabbar, html.gl .side-panel, html.gl .art-top, html.gl .hu-rdr-top, html.gl .rdr-top, html.gl .ed-fab { background: var(--chrome-bg) !important; } html.gl #artRdr, html.gl #huArtRdr, html.gl #rdr, html.gl #tiYtModal, html.gl #audPanel { background: var(--bg) !important; } html.gl body::after { display: none; } html.gl * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (prefers-reduced-motion: reduce) { html.gl.ed .card:hover, html.gl .reco-card:hover, html.gl .tirec-prev:hover { transform: none; } } html.ti-savedata.gl body::after { display: none; } @media print { html.gl body::after { display: none; } html.gl .card, html.gl .rw { background: #fff; box-shadow: none; border: 1px solid #ccc; } } /* ════════════════════════════════════════════════════════════════ (v66) SENSORLI EKRAN — shisha qatlamidagi hover ham bekor ──────────────────────────────────────────────────────────────── 9-qatlamdagi tuzatish bilan bir xil sabab: telefonda hover yopishib qoladi va noto'g'ri "tanlangan" tuyg'usini beradi. Bosish javobi o'rniga qisqa opaklik ishlatiladi. ════════════════════════════════════════════════════════════════ */ @media (hover: none) { html.gl .nc:hover { background: none !important; } html.gl.ed .card:hover { background: var(--gl-pane); border-color: var(--gl-edge); box-shadow: var(--gl-3); transform: none; } html.gl.ed .card.ed-lead:hover { box-shadow: var(--gl-8), 0 0 34px -6px rgba(187,25,25,.26); } html.gl.ed .cbtn:hover { background: rgba(255,255,255,.05); border-color: var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-rim-hi); } html.gl .cab-btn:hover, html.gl .ed-back-chip:hover { background: none; } html.gl .ti-feed-item:hover { background: none; box-shadow: none; } html.gl .reco-card:hover, html.gl .tirec-prev:hover { background: var(--gl-pane); box-shadow: var(--gl-3); transform: none; } html.gl .ed-end-btn:hover { background: var(--gl-pane-hi); border-color: var(--gl-edge-hi); box-shadow: var(--gl-3); } /* Bosilganda aniq javob */ html.gl.ed .card:active { opacity: .8; transform: none; } } /* (v66) Yangilik eskizi: shisha qirrasi rasmni kesib yubormasin */ html.gl .ti-news-cover { background: var(--gl-pane); } html.gl .ti-news-cover img { border-radius: 0; }