/* Скопировано из web/tabbar-glass.css (мини-апп), неймспейс ed-tabs. */ /* Таббар как в iOS 26 (20.10.2026, физика и стекло по замерам iOS 26.5 из liquidum — 21.10.2026): жидкое стекло и линза выделения. Свой неймспейс tbg-*, файл последним в цепочке. Пока app.js не поставил класс tbg-on, бар остаётся прежним: со своей плашкой ::after и без перетаскивания. С ним плашку рисуют два слоя, которые двигает app.js: .tbg-pill — серая плашка под иконками в покое, .tbg-lens — стеклянная линза над ними, пока палец на баре. Геометрия (сдвиг, ширина, растяжение) приходит инлайном, здесь только вид. */ /* Сам бар: стекло вместо глухой заливки. Тон тот же #1c1c1e, но на 72%, с размытием и насыщенностью под ним, светлый край сверху как блик на фаске. */ .ed-tabs.tbg-on { overflow: visible; transform-origin: 50% 50%; will-change: scale, translate; background: rgba(28, 28, 30, .72); border-color: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .10), inset 0 -.5px 0 0 rgba(255, 255, 255, .05), 0 8px 30px rgba(0, 0, 0, .35); } .ed-tabs.tbg-on::after { display: none !important; } /* Палец ведёт линзу сам: ни прокрутки страницы, ни жестов Telegram. */ .ed-tabs.tbg-on, .ed-tabs.tbg-on * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .ed-tabs.tbg-on .ed-tab { transform-origin: 50% 55%; transition: color .18s ease-out; will-change: transform; } .ed-tabs.tbg-on .ed-tab.tbg-hover { color: var(--ink); } .tbg-pill, .tbg-lens { position: absolute; top: 0; left: 0; border-radius: 100px; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; } /* Блик под пальцем: мягкое пятно 93px, растекается, когда линза ушла с вкладки, и гаснет вчетверо шире после отпускания. Обрезан по форме бара. */ .tbg-wash { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; } .tbg-glow { position: absolute; top: 0; left: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .55) 38%, rgba(255, 255, 255, .16) 70%, rgba(255, 255, 255, 0) 100%); will-change: transform, opacity; } .tbg-pill { z-index: 1; background: rgba(255, 255, 255, .1); } /* Линза над иконками — «clear» стекло iOS: почти без размытия (1.5px), иконка под ней видна и увеличена на 16% (app.js). Стекло читается по краю: обводка-блик 1.25px со светом сверху слева (угол −140°, как в системе), цветная кайма от дисперсии и мягкая тень снизу. */ .tbg-lens { z-index: 3; opacity: 0; } .tbg-lens-glass { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(130% 90% at 30% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .07) 100%); -webkit-backdrop-filter: blur(1.5px) saturate(160%) brightness(1.12); backdrop-filter: blur(1.5px) saturate(160%) brightness(1.12); box-shadow: inset 1.2px 0 1px -0.5px rgba(255, 96, 96, .16), inset -1.2px 0 1px -0.5px rgba(96, 150, 255, .20), inset 0 -6px 12px -6px rgba(255, 255, 255, .16), inset 0 0 18px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .20); } /* Обводка-блик: яркая там, куда падает свет (верх-лево) и где он выходит (низ-право), тусклая по бокам. Рамка вырезана маской из заливки. */ .tbg-lens-glass::after { content: ""; position: absolute; inset: 0; padding: 1.25px; border-radius: inherit; background: linear-gradient(140deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .38) 22%, rgba(255, 255, 255, .10) 45%, rgba(255, 255, 255, .10) 58%, rgba(255, 255, 255, .42) 82%, rgba(255, 255, 255, .75) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Блик на выпуклости: светлая дуга в верхней трети, смещена к свету. */ .tbg-lens-glass::before { content: ""; position: absolute; left: 10%; right: 26%; top: 5%; height: 38%; border-radius: 100px; background: radial-gradient(120% 100% at 35% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0) 78%); opacity: .55; } @media (prefers-reduced-motion: reduce) { .ed-tabs.tbg-on .ed-tab { will-change: auto; } } /* ── Радужная кромка и вода внутри (21.10.2026, по фото iOS 26) ───────── Кромка — кольцо conic-gradient: голубой, синий, фиолетовый, розовый, как преломление на ребре настоящего стекла. Угол --tbg-hue двигает app.js: поехал пальцем — цвета перетекают по кругу. Внутри — «жидкость»: мягкое светлое пятно и блик, которые отстают от хода и качаются (--tbg-slosh, --tbg-tilt), пока вода не успокоится. Всё на transform/opacity и одном небольшом слое: перерисовывается только сама линза. */ .tbg-lens { --tbg-hue: 0deg; --tbg-slosh: 0px; --tbg-tilt: 0deg; } .tbg-lens-rim { position: absolute; inset: 0; z-index: 2; padding: 1.8px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--tbg-hue), rgba(255, 255, 255, .55) 0deg, rgba(120, 225, 255, .85) 38deg, rgba(100, 135, 255, .75) 72deg, rgba(185, 115, 255, .55) 104deg, rgba(255, 255, 255, .22) 145deg, rgba(255, 255, 255, .10) 180deg, rgba(255, 255, 255, .45) 212deg, rgba(255, 130, 205, .70) 250deg, rgba(255, 195, 145, .45) 288deg, rgba(255, 255, 255, .40) 325deg, rgba(255, 255, 255, .55) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: blur(.4px); opacity: .9; } /* Цветной ореол внутри кромки: радуга «затекает» в стекло на пару пикселей. */ .tbg-lens-rim::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: conic-gradient(from var(--tbg-hue), rgba(255, 255, 255, 0) 0deg, rgba(120, 225, 255, .42) 45deg, rgba(150, 120, 255, .30) 95deg, rgba(255, 255, 255, 0) 150deg, rgba(255, 255, 255, 0) 210deg, rgba(255, 130, 205, .36) 255deg, rgba(255, 255, 255, 0) 310deg); -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 100%); mask: radial-gradient(closest-side, transparent 78%, #000 100%); filter: blur(2px); } /* Вода: светлая линза-капля внутри, отстаёт от хода и качается. */ .tbg-lens-liquid { position: absolute; inset: 8% 12%; border-radius: inherit; background: radial-gradient(60% 70% at 50% 38%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(80% 60% at 50% 100%, rgba(140, 190, 255, .16) 0%, rgba(140, 190, 255, 0) 70%); transform: translateX(var(--tbg-slosh)) rotate(var(--tbg-tilt)); will-change: transform; } /* Верхний блик едет вместе с водой, только меньше, как отражение на волне. */ .tbg-lens-glass::before { transform: translateX(calc(var(--tbg-slosh) * .6)) rotate(calc(var(--tbg-tilt) * .5)); } /* Иконка под линзой ловит отсвет кромки, как календарь на фото. */ .ed-tabs.tbg-on .ed-tab.tbg-hover svg { filter: drop-shadow(-1px 0 0 rgba(120, 220, 255, .55)) drop-shadow(1px 0 0 rgba(255, 120, 200, .45)); } @media (prefers-reduced-motion: reduce) { .tbg-lens-liquid, .tbg-lens-glass::before { transform: none; } } /* поверх линзы — иконки и подписи, под ней — плашка */ .ed-tabs.tbg-on .ed-tab { position: relative; z-index: 2; background: transparent !important; } .ed-tabs.tbg-on .ed-tab.is-active, .ed-tabs.tbg-on .ed-tab.tbg-hover { color: var(--ink); }