/* ============================================================================ Оформление v2 — «жидкое стекло» и свечение. Перенесено из ветки design, файл redesign/styles v2.css, целиком и намеренно. ---------------------------------------------------------------------------- Целиком — потому что файл накопительный: поверх базового слоя там идут «плоский режим», «неон вернули», «неон выключили», «янтарная тема», и итоговый вид даёт вся цепочка. Выдерни середину — получится не тот дизайн. Макетной обвязки здесь быть не должно: в прототипе .phone это картинка телефона на столе — фиксированные 390x844, скруглённая рамка, вырез и фальшивая строка состояния. У нас это весь экран. Поэтому в конце файла раздел, который возвращает нашу раскладку: он идёт последним и побеждает. ============================================================================ */ /* Tactical Spec-Ops v2 — liquid glass + glow. Tokens from colors_and_type.css */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; background: #06090f; } body { margin: 0; padding: 0; min-height: 100%; background: radial-gradient(1100px 700px at 50% 20%, #10160f 0%, #06090f 62%) fixed; color: var(--c-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } button, input, textarea { font-family: inherit; } button { background: none; border: none; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; outline: none; transition: opacity var(--dur-quick) ease, background .15s ease, box-shadow .2s ease; padding: 0; } button:active { opacity: .7; } input, textarea { border: none; outline: none; background: transparent; color: inherit; resize: none; } input::placeholder, textarea::placeholder { color: var(--c-ph); } ::-webkit-scrollbar { width: 0; height: 0; } a { color: var(--c-accent); text-decoration: none; } a:hover { color: var(--c-text); } .phone { width: 390px; height: 844px; background: var(--c-bg); color: var(--c-text); position: relative; overflow: hidden; border-radius: 44px; box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 12px #14170f, 0 0 0 13px rgba(199,208,194,.16), 0 0 90px rgba(46,139,255,.10); transition: background .3s ease; isolation: isolate; } /* ambient aurora behind the UI — gives glass something to refract */ .phone::after { content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(420px 320px at 18% 8%, rgba(46,139,255,.13), transparent 66%), radial-gradient(460px 360px at 88% 74%, rgba(110,139,61,.12), transparent 66%), radial-gradient(360px 300px at 42% 108%, rgba(214,168,46,.07), transparent 70%); filter: blur(12px); } .phone > * { position: relative; z-index: 1; } .phone::before { content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; border-radius: 24px; background: #000; z-index: 200; } .statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 150; display: flex; justify-content: space-between; align-items: center; padding: 18px 32px 0; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--c-text); font-variant-numeric: tabular-nums; pointer-events: none; } .statusbar .right { display: flex; gap: 6px; align-items: center; } .screen { position: absolute; inset: 0; padding-top: 54px; display: flex; flex-direction: column; z-index: 1; } /* ── Liquid glass system ─────────────────────────────────────────────────── */ /* Every glass surface: heavy blur + saturation, a bright top rim, a soft inner shadow at the bottom, and a diagonal specular streak (via .sheen). */ .glass, .glass-deep, .glass-menu, .glass-pill, .glass-card { position: relative; backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%); border: 1px solid rgba(var(--fg), .14); } .glass { background: linear-gradient(180deg, rgba(var(--fg),.09) 0%, rgba(var(--fg),.035) 40%, rgba(var(--fg),.015) 100%), var(--c-glass); box-shadow: var(--shadow-glass), inset 0 -1px 0 rgba(0,0,0,.35); } .glass-deep { background: linear-gradient(180deg, rgba(var(--fg),.10) 0%, rgba(var(--fg),.03) 46%, rgba(var(--fg),.012) 100%), var(--c-glassDeep); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); box-shadow: var(--shadow-glass), inset 0 -1px 0 rgba(0,0,0,.4); } .glass-menu { background: linear-gradient(180deg, rgba(var(--fg),.12) 0%, rgba(var(--fg),.04) 50%, rgba(var(--fg),.018) 100%), var(--c-glassMenu); box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10); } .glass-pill { background: linear-gradient(180deg, rgba(var(--fg),.10) 0%, rgba(var(--fg),.035) 100%), var(--c-glassPill); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 10px rgba(0,0,0,.28); } .glass-card { background: linear-gradient(180deg, rgba(var(--fg),.075) 0%, rgba(var(--fg),.028) 100%), color-mix(in srgb, var(--c-surface) 66%, transparent); backdrop-filter: blur(24px) saturate(175%); -webkit-backdrop-filter: blur(24px) saturate(175%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 18px rgba(0,0,0,.30); } /* specular streak — the "wet" highlight that sells the material */ .sheen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 18%, transparent 40%, transparent 82%, rgba(255,255,255,.045) 100%); mix-blend-mode: screen; } /* rim light along the top edge of a surface */ .rim::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; border-radius: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); pointer-events: none; } /* ── Glow ────────────────────────────────────────────────────────────────── */ .glow-accent { box-shadow: 0 8px 26px rgba(46,139,255,.42), 0 0 0 1px rgba(150,200,255,.28) inset, 0 0 22px rgba(46,139,255,.30); } .glow-soft { box-shadow: 0 0 20px rgba(46,139,255,.22); } .glow-online { box-shadow: 0 0 12px rgba(110,139,61,.75); } .glow-text { text-shadow: 0 0 18px rgba(46,139,255,.45); } .hairline { border: 1px solid var(--c-bdr); } .chat-grid-bg { background-image: linear-gradient(rgba(var(--fg),0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fg),0.035) 1px, transparent 1px); background-size: 24px 24px; } /* glass bubbles */ .bubble-in { color: var(--c-bInText); background: linear-gradient(180deg, rgba(var(--fg),.10) 0%, rgba(var(--fg),.045) 100%), color-mix(in srgb, var(--c-bIn) 72%, transparent); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(var(--fg),.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.28); } .bubble-out { color: var(--c-bOutText); background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 18%, transparent) 0%, transparent 60%), var(--c-bOutGrad); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(46,139,255,.26); box-shadow: inset 0 1px 0 rgba(170,210,255,.16), 0 3px 16px rgba(46,139,255,.16); } @keyframes msgIn { 0% { opacity: 0; transform: scale(.97) translateY(4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes onlineGlow { 0%,100%{opacity:1} 50%{opacity:.6} } @keyframes typingDot { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} } @keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:.35} } @keyframes callPulse { 0%{box-shadow:0 0 0 0 rgba(46,139,255,.35)} 100%{box-shadow:0 0 0 26px rgba(46,139,255,0)} } @keyframes auroraDrift { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-3%,2%,0) scale(1.06)} } .phone::after { animation: auroraDrift 18s ease-in-out infinite; } /* ── Material polish ─────────────────────────────────────────────────────── */ /* Fine grain on every glass surface — kills the "plastic" look, reads as real frosted material at 1x and 2x. */ .glass::before, .glass-deep::before, .glass-menu::before, .glass-pill::before, .glass-card::before, .bubble-in::before, .bubble-out::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); } /* .rim needs its own pseudo — move grain out of the way where both are used */ .rim::before { z-index: 2; background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); opacity: 1; mix-blend-mode: normal; } /* Depth vignette — focuses the eye centre-screen, separates chrome from content */ .phone > .screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 25; border-radius: 44px; box-shadow: inset 0 0 90px rgba(0,0,0,.30), inset 0 0 26px rgba(0,0,0,.20); } /* Tactile press — everything gives, nothing jumps */ button { transition: opacity var(--dur-quick) ease, transform var(--dur-quick) var(--ease-snap), background .15s ease, box-shadow .2s ease; } button:active { opacity: .78; transform: scale(.972); } /* Momentum + no rubber-band bleed inside the phone */ /* Только там, где вправду крутят. Раньше здесь стояло [style*="overflow"] — под него попадал и промежуточный слой с overflow: hidden. Такой слой тоже считается контейнером прокрутки, и contain на нём обрывает передачу прокрутки наверх, к настоящему списку: колесо и палец умирали на полпути, а список не двигался вовсе. Программно он при этом ездил, поэтому со стороны выглядело как «прокрутка сломалась без причины». */ .phone [style*="overflow: auto"], .phone [style*="overflow:auto"], .phone [style*="overflow: scroll"], .phone [style*="overflow:scroll"], .phone [style*="overflow-y: auto"], .phone [style*="overflow-y:auto"], .phone [style*="overflow-y: scroll"], .phone [style*="overflow-y:scroll"] { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } ::selection { background: rgba(46,139,255,.32); color: var(--c-text); } @keyframes rowIn { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } } .ts-h1, .ts-h2, .ts-h3 { font-family: var(--font-display); letter-spacing: -0.022em; } .bubble-in { border-color: rgba(var(--fg),.18); } .bubble-out { border-color: color-mix(in srgb, var(--c-accent) 42%, transparent); } .glass, .glass-deep, .glass-menu, .glass-pill, .glass-card { border-color: rgba(var(--fg),.18); } /* ── FLAT MODE — no glass, no glow, no depth ─────────────────────────────── */ body { background: #0D1117; } .phone { box-shadow: 0 0 0 12px #14170f, 0 0 0 13px rgba(216,226,238,.18); } .phone::after { display: none; } .glass, .glass-deep, .glass-menu, .glass-pill, .glass-card { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: 1px solid var(--c-bdr); } .glass, .glass-deep { background: var(--c-bg); } .glass-menu { background: var(--c-surf2); } .glass-pill { background: rgba(var(--fg),.045); border-color: rgba(var(--fg),.13); } .glass-card { background: var(--c-surface); } .sheen::after, .rim::before { display: none; } .glass::before, .glass-deep::before, .glass-menu::before, .glass-pill::before, .glass-card::before, .bubble-in::before, .bubble-out::before { display: none; } .bubble-in { background: var(--c-bIn); color: var(--c-bInText); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: none; } .bubble-out { background: var(--c-accent); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: none; --c-sub: rgba(255,255,255,.80); --c-tickRead: #fff; --c-tickSent: rgba(255,255,255,.62); } .glow-accent, .glow-soft, .glow-online { box-shadow: none; } .glow-text { text-shadow: none; } .phone > .screen::after { display: none; } .chat-grid-bg { background-image: none; } button:active { transform: none; opacity: .6; } /* surface ramp: bg → surface → elevated */ .glass { background: var(--c-surface); } .glass-deep { background: var(--c-surf2); } .glass-menu { background: var(--c-surf2); } .glass-card { background: var(--c-surface); } /* Bottom nav: full-width flat bar */ /* nav returns to the floating glass capsule */ /* Unread rows get a surface anchor */ .row-unread { background: rgba(46,139,255,.055); } /* ── Neon backdrop + glass restored over the flat palette ────────────────── */ .phone::after { display: block; inset: -18%; z-index: 0; pointer-events: none; opacity: 1; background: radial-gradient(380px 300px at 14% 6%, rgba(46,139,255,.30), transparent 66%), radial-gradient(420px 340px at 90% 34%, rgba(0,224,255,.16), transparent 66%), radial-gradient(400px 320px at 30% 96%, rgba(140,92,255,.20), transparent 68%), radial-gradient(300px 260px at 92% 88%, rgba(46,139,255,.14), transparent 70%); filter: blur(16px); animation: auroraDrift 20s ease-in-out infinite; } .phone { box-shadow: 0 40px 100px rgba(0,0,0,.72), 0 0 0 12px #0f131a, 0 0 0 13px rgba(140,190,255,.22), 0 0 120px rgba(46,139,255,.20); } .glass, .glass-deep, .glass-menu, .glass-pill, .glass-card { backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid rgba(var(--fg),.16); } .glass { background: linear-gradient(180deg, rgba(var(--fg),.085), rgba(var(--fg),.02)), color-mix(in srgb, var(--c-bg) 74%, transparent); } .glass-deep { background: linear-gradient(180deg, rgba(var(--fg),.095), rgba(var(--fg),.02)), color-mix(in srgb, var(--c-bg) 86%, transparent); } .glass-menu { background: linear-gradient(180deg, rgba(var(--fg),.11), rgba(var(--fg),.03)), color-mix(in srgb, var(--c-surf2) 90%, transparent); } .glass-pill { background: linear-gradient(180deg, rgba(var(--fg),.085), rgba(var(--fg),.03)), color-mix(in srgb, var(--c-surf2) 62%, transparent); } .glass-card { background: linear-gradient(180deg, rgba(var(--fg),.07), rgba(var(--fg),.025)), color-mix(in srgb, var(--c-surface) 72%, transparent); } .nav-bar { background: linear-gradient(180deg, rgba(var(--fg),.09), rgba(var(--fg),.02)), color-mix(in srgb, var(--c-bg) 82%, transparent) !important; } .sheen::after { display: block; } .rim::before { display: block; } .bubble-in { background: linear-gradient(180deg, rgba(var(--fg),.09), rgba(var(--fg),.035)), color-mix(in srgb, var(--c-bIn) 70%, transparent); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(var(--fg),.16); color: var(--c-bInText); } .bubble-out { background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 62%), var(--c-bOutGrad); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(150,205,255,.34); color: #fff; } /* neon glow back on the accent surfaces */ .glow-accent { box-shadow: 0 8px 26px rgba(46,139,255,.50), 0 0 24px rgba(46,139,255,.34), inset 0 0 0 1px rgba(170,215,255,.32); } .glow-soft { box-shadow: 0 0 18px rgba(46,139,255,.34); } .glow-online { box-shadow: 0 0 12px rgba(110,220,150,.6); } .row-unread { background: rgba(46,139,255,.07); } .phone > .screen::after { display: block; } button:active { transform: scale(.972); opacity: .78; } .phone::after { background: radial-gradient(360px 300px at 12% 4%, rgba(46,139,255,.52), transparent 64%), radial-gradient(400px 330px at 92% 28%, rgba(0,224,255,.30), transparent 64%), radial-gradient(400px 340px at 26% 98%, rgba(150,96,255,.38), transparent 66%), radial-gradient(320px 280px at 96% 92%, rgba(46,139,255,.26), transparent 68%); filter: blur(22px); } .chat-grid-bg { background-image: linear-gradient(rgba(var(--fg),.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fg),.035) 1px, transparent 1px); background-size: 24px 24px; } .bubble-out { color: var(--c-bOutText); } .glow-accent, .glow-soft, .glow-online, .glow-text { box-shadow: none; text-shadow: none; } /* ── Neon off · deeper contrast ──────────────────────────────────────────── */ .phone::after { display: none; } body { background: #05070A; } .phone { box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 0 12px #0b0e13, 0 0 0 13px rgba(160,180,205,.16); } .glass { background: linear-gradient(180deg, rgba(var(--fg),.06), rgba(var(--fg),.015)), color-mix(in srgb, var(--c-bg) 88%, transparent); } .glass-deep { background: linear-gradient(180deg, rgba(var(--fg),.07), rgba(var(--fg),.015)), color-mix(in srgb, var(--c-bg) 94%, transparent); } .glass-menu { background: linear-gradient(180deg, rgba(var(--fg),.08), rgba(var(--fg),.02)), color-mix(in srgb, var(--c-surf2) 96%, transparent); } .glass-pill { background: linear-gradient(180deg, rgba(var(--fg),.055), rgba(var(--fg),.02)), color-mix(in srgb, var(--c-surf2) 78%, transparent); } .glass-card { background: linear-gradient(180deg, rgba(var(--fg),.05), rgba(var(--fg),.018)), color-mix(in srgb, var(--c-surface) 88%, transparent); } .bubble-in { background: linear-gradient(180deg, rgba(var(--fg),.06), rgba(var(--fg),.02)), color-mix(in srgb, var(--c-bIn) 88%, transparent); } .row-unread { background: rgba(61,149,255,.085); } .phone > .screen::after { display: block; box-shadow: inset 0 0 110px rgba(0,0,0,.5); } .row-unread { background: transparent; } .phone { --c-onAccent: #FFFFFF; } @keyframes pulseSoft { 0%,100% { opacity: 1 } 50% { opacity: .55 } } /* ── Micro-interactions ──────────────────────────────────────────────────── */ button { transition: transform .14s var(--ease-snap), opacity .14s ease; } button:active { transform: scale(.94); opacity: .85; } textarea, input { transition: none; } /* screen/tab change: subtle rise + fade */ @keyframes screenIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } .screen-in { animation: screenIn .26s var(--ease-snap); } /* chat rows cascade in on tab open */ @keyframes rowIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } .stagger > * { animation: rowIn .3s var(--ease-snap) backwards; } .stagger > *:nth-child(1) { animation-delay: .02s } .stagger > *:nth-child(2) { animation-delay: .05s } .stagger > *:nth-child(3) { animation-delay: .08s } .stagger > *:nth-child(4) { animation-delay: .11s } .stagger > *:nth-child(5) { animation-delay: .14s } .stagger > *:nth-child(6) { animation-delay: .17s } .stagger > *:nth-child(7) { animation-delay: .20s } .stagger > *:nth-child(8) { animation-delay: .23s } .stagger > *:nth-child(n+9) { animation-delay: .26s } /* unread badge lands with a pop */ @keyframes badgePop { 0% { transform: scale(0) } 70% { transform: scale(1.18) } 100% { transform: scale(1) } } .badge-pop { animation: badgePop .32s var(--ease-pop); } /* FAB pops in per tab */ @keyframes fabIn { 0% { transform: scale(0) rotate(-32deg); opacity: 0 } 70% { transform: scale(1.08) rotate(3deg) } 100% { transform: scale(1) rotate(0); opacity: 1 } } .fab-in { animation: fabIn .34s var(--ease-pop) .08s backwards; } /* list row press feedback */ .pressable { transition: background .16s ease; } .pressable:active { background: rgba(var(--fg),.05); } /* reactions fly in */ @keyframes reactIn { 0% { transform: scale(0) } 70% { transform: scale(1.25) } 100% { transform: scale(1) } } .react-in { animation: reactIn .3s var(--ease-pop); } /* typing dots: real 3-dot wave */ @keyframes dotWave { 0%,60%,100% { transform: none; opacity: .45 } 30% { transform: translateY(-3px); opacity: 1 } } .tdots { display: inline-flex; gap: 3px; align-items: center; } .tdots span { width: 4px; height: 4px; border-radius: 2px; background: var(--c-accent); animation: dotWave 1.2s infinite; } .tdots span:nth-child(2) { animation-delay: .18s } .tdots span:nth-child(3) { animation-delay: .36s } /* Flat content atoms: avatars, status dots, in-chat file/media tiles — no gloss, no glass */ .avatar-flat { background-image: none !important; box-shadow: none !important; } .status-flat { background-image: none !important; box-shadow: none !important; } .tile-flat { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; background: var(--c-surf2) !important; } .tile-flat::before, .tile-flat::after { display: none !important; } @keyframes spin { to { transform: rotate(360deg) } } @keyframes shimmer { 0%,100% { opacity: .45 } 50% { opacity: 1 } } .skel { background: rgba(var(--fg),.08); border-radius: 7px; animation: shimmer 1.2s infinite; } @keyframes slideDown { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: none } } /* Два класса типографики из нового набора: у нас были токены размеров, а самих классов не было — примитивы v2 на них ссылаются напрямую. */ .ts-micro { font-family: var(--font-mono); font-size: var(--type-micro-size); font-weight: var(--type-micro-weight); color: var(--c-sub); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .ts-mono { font-family: var(--font-mono); font-size: var(--type-mono-size); font-weight: var(--type-mono-weight); color: var(--c-text); font-variant-numeric: tabular-nums; letter-spacing: .03em; } /* ============================================================================ Наша раскладка поверх макетной. Всё, что ниже, отменяет прототипную обвязку и возвращает поведение настоящего приложения. ============================================================================ */ /* В прототипе телефон нарисован на странице. У нас он и есть страница. */ html { height: auto; background: var(--c-bg); } body { margin: 0; padding: 0; min-height: 100dvh; background: var(--c-bg); display: flex; align-items: stretch; justify-content: center; } .phone { width: 100%; height: var(--app-h, 100dvh); border-radius: 0; box-shadow: none; } /* Вырез и строку состояния рисует система, а не мы. */ .phone::before { content: none; } .statusbar { display: none; } /* Затемнение по краям — тоже прототипное. В макете телефон нарисован на странице, и виньетка отделяла его от фона: рамка со скруглением 44 точки, гасящая края. У нас телефон и есть страница, поэтому она гасила не рамку, а сам экран — сверху и снизу оставались заметно тёмные полосы, а скругление шло по краю поверх настоящих углов устройства. Со стороны читалось однозначно: приложение не на весь экран. */ .phone > .screen::after { content: none; } /* Отступ сверху — настоящая безопасная зона, а не 54 точки под макет. */ .screen { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Вкладки начинаются от самого верха. Отступ безопасной зоны на всём экране отводил под чёлку полосу во всю ширину, в которой не рисовалось ничего: экран начинался ниже часов, и сверху оставалась мёртвая плашка. Здесь его нет — заголовок и список уходят под часы сами, а безопасную зону отмеряет уже заголовок, каждый в своём месте. Так же ведут себя системные списки: содержимое видно, как оно проходит под строкой состояния. Только на телефоне и только пока не открыта переписка: у неё своя шапка, и ей отступ сверху нужен. */ .screen--edge { padding-top: 0; } /* Безопасную зону сверху отмеряет ровно один слой. На вкладках телефона это заголовок и свёрнутая полоса, каждый у себя; на широком окне — сам `.screen`, потому что колонок там две и обе начинаются под часами. Отсюда умолчание без отступа и добавка только внутри `.screen--edge`: иначе на планшете зона отмерялась бы дважды и заголовок уезжал бы на её высоту. */ .collapse-bar { height: 46px; padding-top: 0; } .collapse-title { padding-top: 0; } /* Список идёт под панель вкладок, и это осознанно. Пробовали отвести панели своё место, чтобы содержимое под неё не заезжало, — вышло хуже: между последней карточкой и капсулой оставалась пустая тёмная полоса в палец высотой, и она читалась как лишняя деталь. Панель — стекло, ей есть что размывать, и текст под ней виден. Пусть наезжает. То, что действительно резало строки, лежало не здесь: над панелью висела отдельная полоса-градиент, нарисованная в самом экране профиля. Её убрали. /* Полоса свёрнутого звонка. Безопасную зону сверху платит кто-то один. В переписке её уже отмерил `.screen`, и полосе добавлять нечего. На вкладках отступа у экрана нет — там его платит она сама, потому что стоит выше всех; а шапка вкладки в этом случае не платит второй раз, иначе название уехало бы на высоту чёлки. На широком окне экран — строка из колонок, и полоса, вставшая в неё обычным элементом, оказалась бы узким столбцом слева. Там она остаётся поверх, как была: сдвигать вниз нечего, шапка переписки живёт в своей колонке. */ .call-bar { height: 44px; } .screen--edge .call-bar { height: calc(44px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } .screen--edge.screen--callbar .collapse-bar { height: 46px; padding-top: 0; } .screen--edge.screen--callbar .collapse-title { padding-top: 0; } .screen--wide .call-bar { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; } /* Подложки у свёрнутой шапки нет. Стеклянной плашкой она резала экран ровной чертой поперёк. Туманом, гаснущим книзу, черты не оставляла, но приглушала всё, что под ней проезжало: имя и «Редагувати» проступали полустёртыми. Оба раза полоса портила содержимое под собой, а от неё требуется одно — не мешать. Теперь поверх экрана только буквы, читаемость держит их собственная тень. */ .screen--edge .collapse-bar { height: calc(46px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } .screen--edge .collapse-title { padding-top: env(safe-area-inset-top, 0px); } /* Две колонки на широком окне. В прототипе экран всегда один и всегда столбцом, поэтому .screen задаёт flex-direction: column. Наш .screen--wide просит row, но живёт в styles.css, который подключён раньше: сила у них одинаковая, и побеждает тот, кто ниже, то есть макет. Колонки складывались одна под другой — список сверху узкой полосой, переписка под ним во всю ширину, а кнопка нового чата уезжала на середину экрана вслед за осевшим списком. Отступ снизу здесь тоже свой: на широком окне панель вкладок стоит сбоку, и место под неё внизу не нужно. Его отменял тот же .screen выше. */ .screen--wide { flex-direction: row; padding-bottom: 0; } /* ── Свечение включено обратно ──────────────────────────────────────────── В накопительном слое неон сначала включили, потом выключили: последним шло box-shadow: none, и все .glow-* оказались пустыми классами. При этом ореолы в приложении никуда не делись — они были нарисованы отдельными тенями прямо в разметке, у кнопки нового чата своя, у отправки своя. Итог: свечение было, но не там, где его просили, и менять его приходилось в пяти местах. Возвращаем классы и правим единственное, что мешало включить их раньше: цвет. В макете он вписан синим, а тем у нас пять — берём акцент темы, и каждая светится своим. Для «у сети» — цвет присутствия, он тоже темы. «Сигнал» остаётся без свечения: в styles.css у темы стоит box-shadow: none на всём подряд, и это её осознанное правило, а не упущение. */ .glow-accent { box-shadow: 0 8px 26px rgba(var(--c-accentRgb), .42), 0 0 22px rgba(var(--c-accentRgb), .28), inset 0 0 0 1px rgba(255, 255, 255, .18); } .glow-soft { box-shadow: 0 0 18px rgba(var(--c-accentRgb), .30); } .glow-online { box-shadow: 0 0 12px var(--c-status-online); } .glow-text { text-shadow: 0 0 18px rgba(var(--c-accentRgb), .45); } /* Правил сквозного слоя здесь больше нет. Картинка нативного разговора лежит поверх вебвью, а не под ним: под ним её не видно ни при какой прозрачности — вебвью не пропускает ничего. Значит и прозрачной страницу делать незачем. */