/* ============================================================ Agua — design system v3 (black / rounded / SF Pro Rounded) ============================================================ */ /* Шрифты: сначала лёгкое подмножество (латиница+кириллица, ~66 КБ вместо 2.3 МБ) — оно предзагружается в и появляется сразу. Полный шрифт объявлен вторым и скачивается только если на странице встретится символ вне этих диапазонов. */ @font-face { font-family: "SFRounded"; src: url("/assets/SF-Pro-Rounded-Bold-subset.woff2") format("woff2"); font-weight: 700 950; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2070, U+2074, U+20AC, U+20BD, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SFRounded"; src: url("/assets/SF-Pro-Rounded-Bold.woff2") format("woff2"); font-weight: 700 950; font-style: normal; font-display: swap; } @font-face { font-family: "SFRoundedMid"; src: url("/assets/SF-Pro-Rounded-Semibold-subset.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2070, U+2074, U+20AC, U+20BD, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SFRoundedMid"; src: url("/assets/SF-Pro-Rounded-Semibold.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; } @font-face { font-family: "SFRoundedLight"; src: url("/assets/SF-Pro-Rounded-Light-subset.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0304, U+0308, U+0329, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2000-206F, U+2070, U+2074, U+20AC, U+20BD, U+2113, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SFRoundedLight"; src: url("/assets/SF-Pro-Rounded-Light.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; } :root { --bg: #000; --bg-2: #050505; --card: #0a0a0a; --card-2: #030303; --pill: #111112; --pill-2: #161617; --accent: #34c759; --accent-strong: #2fb350; --accent-dark: #0f4f20; /* «Создать» всегда зелёная — не зависит от темы и скинов, которые меняют --accent */ --create-green: #34c759; --create-green-strong: #2fb350; --create-green-glow: rgba(52,199,89,.38); --accent-ink: #050505; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-border: color-mix(in srgb, var(--accent) 24%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 42%, transparent); --danger: #ff4d4d; --danger-dark: #4f1212; --blue: #38a3ff; --text: #ffffff; --text-2: #b9b9be; --text-3: #8a8a8e; --border: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.06); --story-seen: var(--text-3); /* кольцо просмотренной истории — приглушённо, но видно */ --glass: rgba(8, 8, 8, 0.66); /* Подложка под ЛЮБЫМ окном (модалка, шторка, меню, панель). Раньше у каждого окна был свой блюр: где 16px, где 4px, где вообще ничего — и обои за одним окном размывались, а за соседним нет. Теперь значение одно на всех. */ --win-blur: blur(16px) saturate(1.25); --win-dim: rgba(0, 0, 0, 0.42); --radius: 32px; --radius-sm: 22px; --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --font: "SFRoundedMid", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-bold: "SFRounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-light: "SFRoundedLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color-scheme: dark; } [data-theme="light"] { --bg: #eef0f2; --bg-2: #e6e8ea; --card: #ffffff; --card-2: #ffffff; /* «капли» за кнопками/вкладками в светлой теме заметно темнее — раньше сливались с белым фоном на ПК и планшетах */ --pill: #dde1e5; --pill-2: #d0d5da; --accent: #1ea64a; --accent-strong: #188a3d; --accent-dark: #cdeed7; --accent-ink: #ffffff; --text: #0a0c0e; --text-2: #41464c; --text-3: #6b7178; --border: rgba(0, 0, 0, 0.12); --border-soft: rgba(0, 0, 0, 0.07); --glass: rgba(255, 255, 255, 0.72); /* в светлой теме та же матовость, но затемнение мягче — иначе окно выглядит как дыра в белой странице */ --win-dim: rgba(0, 0, 0, 0.28); --shadow: 0 18px 50px rgba(0, 0, 0, 0.14); color-scheme: light; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 600; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow: hidden; } button { font: inherit; cursor: pointer; color: inherit; } a { color: inherit; text-decoration: none; } input, textarea, select { font: inherit; } svg { display: block; flex: 0 0 auto; } /* the hidden attribute must always win, even over classes that set display */ [hidden] { display: none !important; } .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* inline Apple emoji images */ img.emoji { height: 1.2em; width: 1.2em; vertical-align: -0.22em; margin: 0 .03em; display: inline-block; object-fit: contain; } .ic.fill { fill: currentColor; stroke: none; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } /* ---------- Scrollbar ---------- */ .feed::-webkit-scrollbar, .right::-webkit-scrollbar { width: 0; display: none; } .feed, .right { scrollbar-width: none; } /* ============================================================ SHELL — 3 columns on desktop ============================================================ */ .shell { display: grid; grid-template-columns: minmax(230px, 23vw) minmax(420px, 720px) minmax(260px, 24vw); gap: clamp(16px, 2vw, 30px); height: 100dvh; max-width: 1500px; margin: 0 auto; padding: clamp(16px, 2.4vw, 34px); } .left { display: flex; flex-direction: column; gap: 14px; min-height: 0; } /* ПК: панель навигации не прижата к верху, а по центру вертикали экрана */ @media (min-width: 681px) { .left { justify-content: center; } } .logo-panel { padding: 14px 8px 6px; } .brand { display: flex; align-items: center; gap: 14px; border: 0; background: transparent; color: var(--text); font-family: var(--font-bold); font-weight: 900; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1; } .brand img { width: 46px; height: 46px; object-fit: contain; } .brand .drop { width: 40px; height: 40px; color: var(--accent); } .nav { display: flex; flex-direction: column; gap: 10px; position: relative; } /* «Создать»: зелёная; на ПК и планшетах — В САМОМ НИЗУ колонки навигации */ .nav-item.nav-create { background: linear-gradient(180deg, var(--create-green), var(--create-green-strong)); color: #fff; box-shadow: 0 10px 26px var(--create-green-glow), inset 0 1px 0 rgba(255,255,255,.3); } .nav-item.nav-create:hover { filter: brightness(1.07); background: linear-gradient(180deg, var(--create-green), var(--create-green-strong)); } @media (min-width: 681px) { .nav-item.nav-create { order: 99; margin-top: 12px; } } /* планшет: лого и колонка навигации чуть ниже центра */ @media (min-width: 681px) and (max-width: 1100px) { .left { justify-content: center; transform: translateY(5vh); } } .nav-item { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--pill); color: var(--text); font-family: var(--font-bold); font-weight: 900; font-size: clamp(1.05rem, 1.3vw, 1.3rem); position: relative; transition: transform .18s ease, background .2s ease, color .2s ease; } .nav-item .ic { width: 28px; height: 28px; } .nav-item:hover { transform: translateY(-1px); } .nav-item.active { background: var(--accent-dark); color: var(--accent); } /* «Создать» остаётся зелёной и когда открыта страница создания — иначе .nav-item.active красит её в тёмный и она выглядит чёрной */ .nav-item.nav-create.active { background: linear-gradient(180deg, var(--create-green), var(--create-green-strong)); color: #fff; } .nav-item .badge { position: absolute; top: 10px; left: 36px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 900; display: grid; place-items: center; } .post-cta { margin-top: 4px; min-height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-bold); font-weight: 950; font-size: 1.2rem; box-shadow: 0 10px 30px var(--accent-border); transition: transform .15s ease, filter .2s ease; } .post-cta:hover { filter: brightness(1.05); } .post-cta:active { transform: scale(.97); } .feed { min-width: 0; height: 100%; position: relative; /* якорь для выпадающей панели настроений */ overflow-y: auto; overflow-x: hidden; padding-right: 4px; /* обрыв ленты сверху и снизу не резкий: скругляем обрезку скролла */ border-radius: var(--radius); transition: padding-top .42s cubic-bezier(.2,.9,.2,1); } .right { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding-bottom: 20px; } /* ПК: правая колонка (онлайн/популярно/рекомендуем) по центру вертикали, как левая панель. `safe center` — если карточек больше, чем экран, скролл не ломается. */ @media (min-width: 681px) { .right { justify-content: safe center; } } /* ============================================================ TOPBAR ============================================================ */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 14px; background: var(--card-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); /* верхние плашки (уведомления, профиль и т.д.) — снова с круглыми углами */ } .topbar h1 { margin: 0; font-family: var(--font-bold); font-weight: 950; font-size: 1.7rem; letter-spacing: -.02em; } .topbar .sub { color: var(--accent); font-weight: 800; font-size: .95rem; margin-top: 2px; } .topbar .spacer { flex: 1; } .icon-btn { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--pill); color: var(--text); transition: transform .15s ease, background .2s ease; } .icon-btn:hover { background: var(--pill-2); } .icon-btn:active { transform: scale(.92); } .icon-btn .ic { width: 22px; height: 22px; } .back-only { background: transparent; } /* ============================================================ TABS (segmented) ============================================================ */ .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px; margin-bottom: 18px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border-soft); position: relative; } .feed-tabs { position: sticky; top: 0; z-index: 18; /* nearly opaque: bright story rings scrolling under used to smear through the glass */ background: color-mix(in srgb, var(--card-2) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); } .tab { border: 0; background: transparent; color: var(--text-2); min-height: 46px; border-radius: 999px; font-family: var(--font-bold); font-weight: 900; font-size: 1.05rem; transition: color .2s ease, background .25s ease; } .tab.active { background: linear-gradient(180deg, var(--accent-glow), color-mix(in srgb, var(--accent-dark) 80%, transparent)); color: #fff; } .feed-filters { display: flex; justify-content: center; gap: 8px; margin: -8px 0 16px; overflow-x: auto; scrollbar-width: none; } .feed-filters::-webkit-scrollbar { display: none; } .feed-filter { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card-2); color: var(--text-2); min-height: 38px; padding: 0 16px; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; font-size: .95rem; transition: background .2s ease, color .2s ease, border-color .2s ease; } .feed-filter.active { background: var(--accent-dark); color: var(--accent); border-color: transparent; } /* Телефоны: компактнее + прокрутка слева (иначе при центрировании левые чипы обрезаются и недоступны) */ @media (max-width: 560px) { .feed-filters { justify-content: flex-start; gap: 6px; padding: 0 2px; margin-bottom: 12px; } .feed-filter { min-height: 34px; padding: 0 12px; font-size: .82rem; } .feed-mood-btn { gap: 4px; } .feed-mood-btn .fm-plus { font-size: .95rem; } } /* Лента по настроению: кнопка-плюс + раскрывающийся столбец настроений */ .feed-mood-btn { display: inline-flex; align-items: center; gap: 6px; } .feed-mood-btn .fm-plus { font-size: 1.05rem; line-height: 1; transition: transform .2s ease; } .feed-mood-btn[aria-expanded="true"] .fm-plus { transform: rotate(45deg); } /* Выпадает поверх ленты от кнопки «Нейтрально» (position/left/top задаёт JS), не сдвигая контент */ .feed-mood-panel { display: none; position: absolute; z-index: 60; flex-direction: column; gap: 6px; align-items: stretch; width: 190px; padding: 8px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: 0 16px 40px rgba(0,0,0,.32); } .feed-mood-panel.open { display: flex; animation: moodPanelIn .16s ease; transform-origin: top center; } @keyframes moodPanelIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } } .feed-mood-opt { width: 100%; border: 1px solid var(--border); background: var(--card-2); color: var(--text-2); min-height: 36px; padding: 0 16px; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; font-size: .92rem; transition: background .2s ease, color .2s ease, border-color .2s ease; } .feed-mood-opt:hover { border-color: var(--accent); color: var(--text); } .feed-mood-opt.active { background: var(--accent-dark); color: var(--accent); border-color: transparent; } .feed-list { transition: opacity .18s ease, transform .18s ease; } .feed-list.is-switching { opacity: .55; transform: translateY(4px); } /* ---------- скелетон загрузки ленты (вместо «голого» спиннера) ---------- */ .post-skeleton { padding: clamp(18px, 2.3vw, 26px); border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 12px; animation: skIn .4s ease both; } @keyframes skIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .sk { display: block; position: relative; overflow: hidden; background: var(--pill); border-radius: 8px; } .sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent); animation: skShimmer 1.4s ease-in-out infinite; } @keyframes skShimmer { to { transform: translateX(100%); } } .sk-head { display: flex; align-items: center; gap: 14px; } .sk-ava { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; } .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; } .sk-line { height: 13px; border-radius: 7px; } .sk-line.w28 { width: 28%; } .sk-line.w45 { width: 45%; } .sk-line.w70 { width: 70%; } .sk-line.w92 { width: 92%; } .sk-media { height: 220px; border-radius: var(--radius-sm); } .sk-foot { display: flex; gap: 12px; margin-top: 4px; } .sk-pill { width: 74px; height: 40px; border-radius: 999px; } @media (prefers-reduced-motion: reduce) { .post-skeleton, .sk::after { animation: none; } } /* «растяжка» в конце ленты — по ней с сервера догружается следующая порция; пока порция едет, внизу виден компактный лоадер Agua */ .feed-sentinel { display: grid; place-items: center; padding: 6px 0 14px; } /* Отрисовываются только карточки у экрана — длинная лента скроллится без лагов. contain-intrinsic-size держит примерную высоту, чтобы полоса прокрутки не прыгала. */ .feed-list > .post { content-visibility: auto; contain-intrinsic-size: auto 360px; } /* segmented with 3+ items (search categories) */ .seg { display: flex; gap: 6px; padding: 7px; margin-bottom: 16px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border-soft); } .seg button { flex: 1; border: 0; background: transparent; color: var(--text-2); min-height: 42px; border-radius: 999px; font-family: var(--font-bold); font-weight: 900; transition: color .2s, background .25s; } .seg button.active { background: var(--accent-dark); color: var(--accent); } /* ============================================================ POST CARD ============================================================ */ .feed-list { display: flex; flex-direction: column; gap: 18px; } .post { position: relative; padding: clamp(18px, 2.3vw, 26px); border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--border-soft); cursor: pointer; transition: border-color .25s ease, transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease; } .post:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.32); } .post:active { transform: translateY(0) scale(.997); } .post-head { display: flex; align-items: center; gap: 14px; } .avatar { border-radius: 50%; display: grid; place-items: center; background: #2f2f33; color: #fff; overflow: hidden; font-family: var(--font-bold); font-weight: 900; flex: 0 0 auto; line-height: 1; text-align: center; /* буква ровно по центру (шрифт с высоким line-height сдвигал её вверх) */ transition: transform .25s cubic-bezier(.2,.9,.2,1); } .post-head .avatar:hover, .nav-avatar:hover, .mp-cover:hover { transform: scale(1.06); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .post-id { flex: 1; min-width: 0; } /* one tidy line: long names/handles ellipsize instead of pushing the time onto a second row */ .name-row { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; } .dname { font-family: var(--font-bold); font-weight: 950; font-size: 1.18rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .uname { color: var(--accent); font-weight: 850; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 3; min-width: 30px; } .dot-sep { color: var(--text-3); flex: 0 0 auto; } .name-row .time { white-space: nowrap; flex: 0 0 auto; } .time { color: var(--text-3); font-weight: 700; font-size: .92rem; } .post-body { margin-top: 14px; font-size: 1.12rem; line-height: 1.34; font-weight: 700; word-wrap: break-word; overflow-wrap: anywhere; } .post-body b { font-family: var(--font-bold); font-weight: 950; } .post-body .h { display: block; font-family: var(--font-bold); font-weight: 950; font-size: 1.35rem; margin: 6px 0; } .post-body .small-gray { color: var(--text-3); font-size: .9em; } /* ---------- AI blocks (summary / translation / fact-check) ---------- */ .ai-box { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--pill); } .ai-box > .ic { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; } .ai-box-main { min-width: 0; flex: 1; } .ai-box-title { font-family: var(--font-bold); font-weight: 950; font-size: .82rem; letter-spacing: .01em; margin-bottom: 3px; opacity: .9; } .ai-box-text { font-size: 1rem; line-height: 1.36; font-weight: 650; color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; } /* summary — soft blue/violet accent */ .ai-summary { background: linear-gradient(135deg, rgba(56,163,255,.12), rgba(175,82,222,.12)); border-color: rgba(120,120,255,.30); } .ai-summary > .ic { color: #8a8aff; fill: currentColor; stroke: none; } .ai-summary .ai-box-title { color: #9aa6ff; } /* pending */ .ai-pending { align-items: center; color: var(--text-3); font-weight: 800; font-size: .9rem; } .ai-pending > .ic { color: #8a8aff; fill: currentColor; stroke: none; width: 18px; height: 18px; margin: 0; } /* fact-check — amber warning */ .ai-factcheck { background: rgba(255,176,32,.10); border-color: rgba(255,176,32,.34); } .ai-factcheck > .ic { color: #ffb020; } .ai-factcheck .ai-box-title { color: #ffb020; } /* translation note inside the body */ .ai-trans-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; color: var(--text-3); font-size: .85rem; font-weight: 800; } .ai-trans-note > .ic { width: 15px; height: 15px; color: #8a8aff; fill: currentColor; stroke: none; } .ai-orig-btn { border: 0; background: transparent; color: var(--blue); font-weight: 900; font-size: .85rem; padding: 2px 4px; cursor: pointer; } .mention { color: var(--accent); font-weight: 850; } .hashtag { color: var(--blue); font-weight: 850; } /* badges */ .badge-verified, .badge-mod, .badge-danger, .badge-bug { flex: 0 0 auto; /* never let a flex row squish the round badge into an oval */ align-self: center; transition: transform .2s cubic-bezier(.2,.9,.2,1), background .25s ease, color .25s ease; } .badge-verified:hover, .badge-mod:hover, .badge-danger:hover, .badge-bug:hover { transform: scale(1.12); } .badge-verified { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #38a3ff; color: #03121f; } .badge-verified .ic { width: 13px; height: 13px; } /* gray verification — set by a moderator on top of an existing checkmark */ .badge-verified.gray { background: #8a8a8e; color: #15151a; } [data-theme="light"] .badge-verified.gray { background: #9aa0a6; color: #fff; } .badge-mod { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: rgba(56,163,255,.18); color: #38a3ff; } .badge-mod .ic { width: 15px; height: 15px; } .badge-danger { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--danger-dark); color: var(--danger); } .badge-danger .ic { width: 15px; height: 15px; } /* жёлтый молоточек — человек нашёл баг, и мы его подтвердили */ .badge-bug { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f5b700; color: #2a1d00; } /* молотку нужно больше места, чем галочке: в 13px силуэт схлопывался в пятно */ .badge-bug .ic { width: 16px; height: 16px; } [data-theme="light"] .badge-bug { background: #e8a900; color: #fff; } /* ---------- media grid ---------- */ .media-grid { margin-top: 14px; display: grid; gap: 5px; border-radius: var(--radius-sm); overflow: hidden; } .media-grid .cell { position: relative; background: #111; overflow: hidden; cursor: zoom-in; } .media-grid .cell img, .media-grid .cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .media-grid.m1 { grid-template-columns: 1fr; } /* Одиночное фото показываем ЦЕЛИКОМ. Раньше ячейка резалась по max-height, а картинка внутри стояла object-fit: cover — у вертикальных снимков (9:16 и выше) верх и низ просто отрезало: у фото 887x1920 на телефоне было видно лишь ~76%. Теперь ограничение висит на самой картинке, а не на ячейке: width/height auto + max-* масштабируют её с сохранением пропорций, так что высокое фото становится уже, но видно его полностью. */ .media-grid.m1 .cell { max-height: none; display: grid; place-items: center; } .media-grid.m1 .cell img, .media-grid.m1 .cell video { width: auto; height: auto; max-width: 100%; max-height: 560px; object-fit: contain; margin: 0 auto; } .media-grid.m2 { grid-template-columns: 1fr 1fr; } .media-grid.m2 .cell, .media-grid.m3 .cell, .media-grid.m4 .cell, .media-grid.mN .cell { aspect-ratio: 1; } .media-grid.m3 { grid-template-columns: 1fr 1fr; } .media-grid.m3 .cell:first-child { grid-row: span 2; aspect-ratio: auto; } .media-grid.m4 { grid-template-columns: 1fr 1fr; } .media-grid.mN { grid-template-columns: 1fr 1fr 1fr; } .vbadge { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; } .vbadge .ic { width: 18px; height: 18px; } .more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; font-family: var(--font-bold); font-weight: 950; font-size: 2rem; color: #fff; } /* ---------- spoiler ---------- */ /* spoiler reveal animates smoothly from blurred → clear */ .media-grid .cell img, .media-grid .cell video { transition: filter .5s ease, transform .5s ease, opacity .35s ease; } /* пока фото грузится — прозрачное, по load плавно проявляется (класс снимает JS) */ .media-grid .cell img.img-loading { opacity: 0; } /* Одиночное фото: высота ячейки идёт от самой картинки, а у незагруженной её нет — ячейка схлопывалась в 0px, из-за чего loading="lazy" не срабатывал и фото не появлялось совсем. Держим место, пока картинка не приехала (класс снимает JS). */ .media-grid.m1 .cell.cell-reserve { min-height: 280px; } /* Пока фото едет (на мобильном интернете это секунды), ячейка не просто чёрная — по ней идёт блик. Иначе непонятно, грузится картинка или уже сломалась. */ .media-grid .cell.cell-reserve { background: linear-gradient(100deg, #141414 30%, #1e1e1e 50%, #141414 70%) 0 0 / 300% 100%; animation: cellShimmer 1.4s ease-in-out infinite; } @keyframes cellShimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .media-grid .cell.cell-reserve { animation: none; } } .cell.spoiler img, .cell.spoiler video { filter: blur(34px); transform: scale(1.1); } .spoiler-tag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.32); color: #fff; font-family: var(--font-bold); font-weight: 950; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; z-index: 2; cursor: pointer; transition: opacity .35s ease; } .spoiler-tag .ic { width: 22px; height: 22px; } .cell.spoiler-off img, .cell.spoiler-off video { filter: none; transform: none; } /* ============================================================ POST ACTIONS — pills ============================================================ */ .post-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .action-left, .action-right { display: flex; align-items: center; gap: 12px; min-width: 0; } .action-right { margin-left: auto; } .act, .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pill); color: var(--text); font-family: var(--font-bold); font-weight: 900; font-size: 1rem; flex: 0 0 auto; /* never shrink below content — prevents buttons overlapping each other */ transition: transform .15s ease, background .2s ease, color .2s ease; } .act .ic { width: 21px; height: 21px; } .act:hover { background: var(--pill-2); } .act:active { transform: scale(.92); } .act .c { min-width: 2px; } /* No count → render just the icon button, with no leftover gap/width from an empty number */ .act .c:empty { display: none; } .act:has(.c:empty) { gap: 0; } .act.icon-pill { width: 46px; min-width: 46px; padding: 0; border-radius: 50%; } .act.liked, .act.fav-on, .act.rep-on { background: var(--accent-dark); color: var(--accent); } .act.liked .ic, .act.fav-on .ic { fill: currentColor; } /* a satisfying little pop when a like / favorite / repost turns on. Играет только в момент клика (.just-on ставит JS на ~0.65с) — раньше уже-лайкнутые посты «подпрыгивали» при каждом рендере ленты. */ .act { position: relative; } .act.just-on .ic { animation: likePop .42s cubic-bezier(.2,1.4,.3,1) both; } @keyframes likePop { 0% { transform: scale(1); } 32% { transform: scale(1.42); } 62% { transform: scale(.9); } 100% { transform: scale(1); } } /* расходящееся кольцо вокруг кнопки в момент включения */ .act.just-on::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; pointer-events: none; animation: likeRing .55s ease-out both; } @keyframes likeRing { 0% { opacity: .7; transform: scale(.72); } 100% { opacity: 0; transform: scale(1.28); } } @media (prefers-reduced-motion: reduce) { .act.just-on .ic, .act.just-on::after { animation: none; } } .act.icon-pill .ic { transition: transform .2s ease, fill .2s ease; } .act.fav-on.icon-pill .ic { transform: translateY(-1px) scale(1.08); } .views { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 800; font-size: .95rem; padding-left: 2px; } .views .ic { width: 19px; height: 19px; } /* ---------- Comment preview (rotating strip under a post, above the actions) ---------- */ .comment-preview { position: relative; display: block; margin-top: 14px; height: 34px; overflow: hidden; border-radius: 12px; background: var(--pill); cursor: pointer; transition: background .2s ease; } .comment-preview:hover { background: var(--pill-2); } .cpv-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; } .cpv-item.active { opacity: 1; transform: translateY(0); } .cpv-item .avatar { flex: 0 0 auto; } .cpv-name { flex: 0 0 auto; font-weight: 900; font-size: .9rem; color: var(--text); max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpv-text { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .9rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpv-text .h { font-size: .9rem; } .badge-verified .ic { stroke-width: 3; } /* ============================================================ POST FILES (pdf / lrs) under text ============================================================ */ .post-files { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .post-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--pill); border: 1px solid var(--border-soft); } .pf-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--accent-dark); color: var(--accent); } .pf-icon.lrs { background: rgba(56,163,255,.16); color: var(--blue); } .pf-icon .ic { width: 22px; height: 22px; } .pf-info { flex: 1; min-width: 0; } .pf-name { font-family: var(--font-bold); font-weight: 900; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-meta { color: var(--text-3); font-size: .85rem; font-weight: 700; margin-top: 2px; } .pf-dl { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--pill-2); color: var(--text); display: grid; place-items: center; } .pf-dl:active { transform: scale(.9); } /* ============================================================ POST AUDIO chip ============================================================ */ .post-audio { margin-top: 12px; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 20px; cursor: pointer; background: linear-gradient(135deg, var(--accent-soft), var(--pill)); border: 1px solid var(--border-soft); } .pa-cover { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 13px; overflow: hidden; background: #222; display: grid; place-items: center; color: var(--accent); } .pa-cover img { width: 100%; height: 100%; object-fit: cover; } .pa-cover .ic { width: 26px; height: 26px; } .pa-info { flex: 1; min-width: 0; } .pa-title { font-family: var(--font-bold); font-weight: 950; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pa-artist { color: var(--text-2); font-size: .9rem; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pa-play { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; } .pa-play .ic { width: 22px; height: 22px; } /* ============================================================ POLL / QUIZ ============================================================ */ .poll { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; } .poll-hint { color: var(--text-3); font-weight: 800; font-size: .92rem; margin-bottom: 2px; } .poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 16px; border-radius: 16px; background: var(--pill); border: 1px solid var(--border-soft); font-weight: 850; transition: background .2s ease; } .poll-opt.clickable { cursor: pointer; } .poll-opt.clickable:hover { background: var(--pill-2); } .poll-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-dark); transition: width .5s cubic-bezier(.2,.9,.2,1); z-index: 0; } .poll-opt.correct .poll-bar { background: color-mix(in srgb, var(--accent) 32%, transparent); } .poll-opt.wrong .poll-bar { background: color-mix(in srgb, var(--danger) 26%, transparent); } .poll-mark { position: relative; z-index: 1; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--text-3); display: grid; place-items: center; } .poll-opt.multi .poll-mark { border-radius: 8px; } .poll-mark.checked { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .poll-mark .ic { width: 15px; height: 15px; } .poll-mark.correct-mark { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .poll-mark.wrong-mark { border-color: var(--danger); background: var(--danger); color: #fff; } .poll-opt-text { position: relative; z-index: 1; flex: 1; min-width: 0; } .poll-pct { position: relative; z-index: 1; font-family: var(--font-bold); font-weight: 950; font-variant-numeric: tabular-nums; } .poll-opt.correct .poll-pct { color: var(--accent); } .poll-opt.wrong .poll-pct { color: var(--danger); } .poll-foot { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-weight: 800; font-size: .9rem; margin-top: 2px; } .poll-vote-btn { align-self: flex-start; margin-top: 4px; } /* ============================================================ SIDE CARDS (right column) ============================================================ */ .side-card { padding: 18px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--border-soft); } .side-title { margin: 0 0 12px; font-family: var(--font-bold); font-weight: 950; font-size: 1.25rem; } .side-search .input-wrap { margin: 0; } .trend-list, .follow-list { display: flex; flex-direction: column; gap: 8px; } .trend { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 999px; background: var(--pill); font-weight: 850; cursor: pointer; transition: background .2s ease; } .trend:hover { background: var(--pill-2); } .trend .t-tag { color: var(--blue); font-family: var(--font-bold); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trend .t-count { color: var(--text-3); white-space: nowrap; font-size: .9rem; } .follow { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 999px; background: var(--pill); cursor: pointer; } .follow:hover { background: var(--pill-2); } .follow-name { font-family: var(--font-bold); font-weight: 900; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .follow-handle { color: var(--text-3); font-size: .85rem; font-weight: 750; margin-top: 1px; } .follow .btn { padding: 8px 14px; min-height: 0; } /* ============================================================ BUTTONS / INPUTS / FIELDS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--pill); color: var(--text); font-family: var(--font-bold); font-weight: 900; font-size: 1.02rem; transition: transform .15s ease, background .2s ease, filter .2s ease, opacity .2s; } .btn:hover { background: var(--pill-2); } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .45; pointer-events: none; } .btn.primary { background: var(--accent); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.06); background: var(--accent); } /* «Опубликовать» и другие главные кнопки остаются зелёными и пока неактивны — иначе общая прозрачность .45 делает их серыми до наведения/заполнения */ .btn.primary:disabled { opacity: 1; filter: saturate(.85) brightness(.82); } .btn.danger { background: var(--danger-dark); color: var(--danger); } .btn.ghost { background: transparent; border: 1px solid var(--border); } .btn.block { display: flex; width: 100%; } /* Кнопка ждёт ответ сервера: крутится кружок, нажатие не проходит. Без opacity:.45 от :disabled — иначе «занято» выглядит как «сломано». */ .btn.busy { opacity: 1; filter: none; cursor: progress; } .btn.busy:not(.primary) { background: var(--pill-2); } .btn-spin { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .85; animation: spin .7s linear infinite; } .btn-busy-txt { opacity: .9; } .input { width: 100%; min-height: 50px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--text); font-weight: 700; outline: none; transition: border-color .2s ease; } .input:focus { border-color: var(--accent); } textarea.input { resize: vertical; line-height: 1.4; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap .prefix { position: absolute; left: 16px; color: var(--text-3); font-weight: 800; } .input.with-prefix { padding-left: 34px; } .input-wrap .eye { position: absolute; right: 8px; width: 38px; height: 38px; display: grid; place-items: center; background: transparent; border: 0; color: var(--text-3); border-radius: 50%; } .field { margin-bottom: 14px; } .field label { display: block; margin-bottom: 7px; color: var(--text-2); font-weight: 800; font-size: .92rem; } .counter { text-align: right; color: var(--text-3); font-size: .82rem; margin-top: 5px; } .counter.near { color: var(--accent); } .counter.over { color: var(--danger); } .counter.counter-hidden { display: none; } .checkbox-row { display: flex; align-items: center; gap: 9px; margin: 12px 0; color: var(--text-2); font-weight: 700; } .checkbox-row input { width: 18px; height: 18px; accent-color: var(--accent); } /* ============================================================ COMPOSER ============================================================ */ .composer { padding: 4px 2px 30px; } .composer-head { display: flex; gap: 14px; } #composer-text { width: 100%; min-height: 130px; border: 0; background: transparent; resize: none; outline: none; color: var(--text); font-family: var(--font); font-weight: 700; font-size: 1.25rem; line-height: 1.35; } .preview-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; } .pv { position: relative; width: 110px; height: 110px; border-radius: 16px; overflow: hidden; background: #111; cursor: pointer; } .pv img, .pv video { width: 100%; height: 100%; object-fit: cover; } .pv.is-spoiler img, .pv.is-spoiler video { filter: blur(16px); transform: scale(1.1); } .pv .uploading { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font-weight: 800; font-size: .85rem; } .pv .rm { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: 0; display: grid; place-items: center; } .pv .rm .ic { width: 16px; height: 16px; } .pv .spoiler-flag { position: absolute; bottom: 5px; left: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font-size: .72rem; font-weight: 900; pointer-events: none; } .pv-hint { width: 100%; color: var(--text-3); font-size: .82rem; font-weight: 700; margin-top: -2px; } /* ---------- Media editor (preview + crop / draw) ---------- */ .modal.media-editor { max-width: 560px; } .me-toolbar { display: flex; gap: 8px; margin: 4px 0 14px; } .me-tool { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid var(--border); background: var(--pill); color: var(--text-2); border-radius: 12px; font-weight: 900; font-size: .92rem; } .me-tool .ic { width: 18px; height: 18px; } .me-tool.is-active { background: var(--blue); color: #fff; border-color: var(--blue); } .me-stage { position: relative; margin: 0 auto; max-width: 100%; border-radius: 12px; overflow: hidden; background: #000; touch-action: none; user-select: none; } .me-stage.solo { display: flex; align-items: center; justify-content: center; max-height: 60vh; } .me-stage.solo img, .me-stage.solo video { max-width: 100%; max-height: 60vh; width: auto; height: auto; display: block; } .me-stage canvas { position: absolute; left: 0; top: 0; display: block; } #me-base { pointer-events: none; } .me-crop { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.5); cursor: move; touch-action: none; } .me-crop.circle { border-radius: 50%; } .me-crop .me-h { position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.5); touch-action: none; } .me-crop .me-h.tl { left: -10px; top: -10px; cursor: nwse-resize; } .me-crop .me-h.tr { right: -10px; top: -10px; cursor: nesw-resize; } .me-crop .me-h.bl { left: -10px; bottom: -10px; cursor: nesw-resize; } .me-crop .me-h.br { right: -10px; bottom: -10px; cursor: nwse-resize; } /* bigger grab targets on touch devices so the crop points are draggable */ @media (pointer: coarse) { .me-crop .me-h { width: 30px; height: 30px; } .me-crop .me-h.tl { left: -16px; top: -16px; } .me-crop .me-h.tr { right: -16px; top: -16px; } .me-crop .me-h.bl { left: -16px; bottom: -16px; } .me-crop .me-h.br { right: -16px; bottom: -16px; } } .me-text-opts .input, #me-text-opts .input { min-height: 38px; } .me-uploading { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 5; border-radius: inherit; } .me-brush-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.6); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px rgba(0,0,0,.35); z-index: 4; } .me-brush-dot.show { opacity: .9; transform: translate(-50%,-50%) scale(1); } .me-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .me-opts[hidden] { display: none; } .me-chip { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--pill); color: var(--text-2); font-weight: 900; font-size: .86rem; } .me-chip.is-active { background: var(--blue); color: #fff; border-color: var(--blue); } .me-colors { display: flex; gap: 7px; } .me-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); padding: 0; } .me-color.is-active { border-color: var(--text); transform: scale(1.12); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); } .me-range { flex: 1; min-width: 90px; accent-color: var(--blue); } .composer-tools { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; border-top: 1px solid var(--border-soft); padding-top: 14px; } .composer-tools .spacer { flex: 1; } .composer-attach { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } /* mention autocomplete: выпадающий столбик пользователей ПОВЕРХ контента (а не вставка в поток) — работает и в композере, и в комментариях */ #mention-host, #cm-mention { position: relative; } .mention-box { position: absolute; top: 4px; left: 0; right: 0; z-index: 90; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden auto; max-height: 252px; box-shadow: 0 18px 44px rgba(0, 0, 0, .42); animation: mentionDrop .18s cubic-bezier(.2,.9,.2,1); transform-origin: top center; } @keyframes mentionDrop { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: none; } } .mention-box .hint { padding: 12px 14px; color: var(--text-3); font-weight: 700; } .mention-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; text-align: left; transition: background .15s ease; } .mention-row.sel, .mention-row:hover { background: var(--pill); } .mr-name { font-family: var(--font-bold); font-weight: 900; } .mr-user { color: var(--accent); font-size: .85rem; font-weight: 800; } /* poll builder (composer) */ .poll-builder { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--border-soft); } .poll-builder .pb-opt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .poll-builder .pb-opt .input { min-height: 44px; } .poll-builder .pb-correct { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--pill); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-3); } .poll-builder .pb-opt.is-correct .pb-correct { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .poll-builder .pb-correct .ic { width: 18px; height: 18px; } .poll-builder .pb-rm { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: transparent; color: var(--text-3); display: grid; place-items: center; } .poll-builder .pb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .poll-builder .pb-toggle { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: var(--text-2); } /* ============================================================ COMMENTS ============================================================ */ .comment-box { display: flex; gap: 12px; padding: 16px 2px; } .comment-box .grow { flex: 1; } .comment-box textarea { width: 100%; min-height: 54px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--text); padding: 12px 14px; resize: none; outline: none; font-weight: 700; } .comment-box.inline { margin-left: calc(var(--depth, 1) * 22px); } .reply-context { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 800; font-size: .9rem; margin-bottom: 6px; } .reply-context[hidden] { display: none; } .reply-context b { color: var(--accent); } .reply-context .rc-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; background: transparent; border: 0; color: var(--text-3); cursor: pointer; padding: 3px; border-radius: 50%; } .reply-context .rc-x .ic { width: 16px; height: 16px; } .reply-context .rc-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); } .comment { padding: 14px 2px; border-top: 1px solid var(--border-soft); } /* Reddit-style nesting: each level steps in and grows a thread line on the left. */ .comment.reply { margin-left: calc(var(--depth, 1) * 22px); padding-left: 12px; border-top: 0; border-left: 2px solid var(--border); } .comment.reply:hover { border-left-color: var(--accent); } .comment-head { display: flex; align-items: center; gap: 9px; min-width: 0; } /* Имя и ник ужимаются многоточием, а не выпихивают кнопку «⋯» за край ветки */ .comment-head .dname, .comment-head .uname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comment-head .dname { font-size: 1rem; } .comment-head .uname { font-size: .85rem; } .comment-head .cmenu-btn { flex: 0 0 auto; } .comment-head .avatar, .comment-head .ava-ring, .comment-head .time, .comment-head .dot-sep { flex: 0 0 auto; } .comment-text { margin-top: 8px; line-height: 1.4; font-weight: 700; } /* min(): в узкой ветке картинка ужимается по ширине комментария, а не торчит наружу */ .comment-gif { display: block; margin-top: 8px; max-width: min(240px, 100%); max-height: 240px; width: auto; height: auto; border-radius: 14px; background: #111; } /* comment composer row + gif preview */ .cm-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .cm-gif-preview { position: relative; margin-top: 10px; width: fit-content; } .cm-gif-preview[hidden] { display: none; } .cm-gif-preview img { display: block; max-width: 200px; max-height: 200px; border-radius: 14px; } .cm-gif-rm { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: 0; display: grid; place-items: center; } .cm-gif-rm .ic { width: 16px; height: 16px; } .cm-img-preview { position: relative; margin-top: 10px; width: fit-content; } .cm-img-preview[hidden] { display: none; } .cm-img-preview img { display: block; max-width: 200px; max-height: 200px; border-radius: 14px; } .cm-img-loading { width: 120px; height: 90px; display: grid; place-items: center; border-radius: 14px; background: var(--pill); } /* GIF picker modal */ .modal.gif-picker { max-width: 540px; } .gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: 104px; align-content: start; gap: 8px; max-height: 56vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .gif-grid .loading { grid-column: 1 / -1; } /* «Ничего не найдено» — во всю ширину сетки, а не сжатое в одну клетку 96×104 */ .gif-grid .empty { grid-column: 1 / -1; } .gif-cell { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: var(--pill); border-radius: 12px; overflow: hidden; cursor: pointer; } .gif-cell img { display: block; width: 100%; height: 100%; object-fit: cover; } .comment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .comment-actions .act { min-height: 36px; padding: 0 12px; font-size: .9rem; background: transparent; } .comment-actions .act.liked { color: var(--accent); } /* Телефон: глубокие ветки ответов не должны выдавливать сам комментарий за экран. Шаг 22px на уровень (и до 6 уровней) съедал 132px из 360-390px ширины — к пятому-шестому ответу от текста оставалась полоска, а GIF и кнопка «⋯» уезжали за правый край. Шаг меньше и лесенка не глубже четырёх ступенек: вложенность по-прежнему видна (её дорисовывает полоска слева), а ширина комментария почти не теряется. */ @media (max-width: 680px) { .comment.reply { margin-left: calc(min(var(--depth, 1), 4) * 9px); padding-left: 10px; } .comment-box.inline { margin-left: calc(min(var(--depth, 1), 4) * 9px); } } /* ============================================================ PROFILE ============================================================ */ .profile-header { border-radius: var(--radius); overflow: hidden; background: var(--card-2); border: 1px solid var(--border-soft); } .cover { position: relative; height: 200px; background: linear-gradient(135deg, var(--accent-dark), color-mix(in srgb, var(--accent) 22%, var(--bg-2))); overflow: hidden; } .cover img, .cover video { width: 100%; height: 100%; object-fit: cover; } .profile-body { padding: 0 22px 22px; position: relative; } .profile-top { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -52px; } .profile-avatar { width: 110px; height: 110px; border: 4px solid var(--card-2); font-size: 2.6rem; } /* С кольцом историй обычную рамку профиля убираем — иначе получается двойное «странное» кольцо. Без историй остаётся обычная рамка под цвет карточки. */ .ava-ring .profile-avatar { border: 0; } .profile-actions { display: flex; align-items: center; gap: 9px; padding-bottom: 6px; } .profile-name-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; } .profile-name-row h2 { margin: 0; font-family: var(--font-bold); font-weight: 950; font-size: 1.8rem; } .profile-uname { color: var(--accent); font-weight: 850; margin-top: 2px; } /* live online / offline indicator */ .profile-presence { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-weight: 800; font-size: .9rem; color: var(--text-3); transition: color .3s ease; } .profile-presence .pres-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; transition: background .35s ease, box-shadow .35s ease; } .profile-presence.on { color: var(--accent); } .profile-presence.on .pres-dot { background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: presPulse 2s infinite; } @keyframes presPulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .pres-txt { transition: opacity .3s ease; } .profile-bio { margin-top: 12px; line-height: 1.4; font-weight: 700; } .profile-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; color: var(--text-3); font-weight: 700; font-size: .92rem; } .profile-meta span { display: inline-flex; align-items: center; gap: 6px; } .profile-meta .ic { width: 17px; height: 17px; } .profile-stats { display: flex; gap: 22px; margin-top: 14px; font-weight: 700; } .profile-stats b { font-family: var(--font-bold); font-weight: 950; } .profile-stats .muted { color: var(--text-3); } .ptabs { display: flex; gap: 6px; margin: 16px 0; padding: 7px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border-soft); } .ptab { flex: 1; border: 0; background: transparent; color: var(--text-3); min-height: 44px; border-radius: 999px; display: grid; place-items: center; transition: background .2s, color .2s; } .ptab .ic { width: 22px; height: 22px; } .ptab.active { background: var(--accent-dark); color: var(--accent); } .pinned-label { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 800; margin: 6px 2px 10px; } .pinned-label .ic { width: 18px; height: 18px; } /* pinned posts grouped in one frame (up to 3) */ .pinned-frame { border: 1.5px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 5%, var(--card-2)); padding: 12px; margin-bottom: 16px; } .pinned-frame .pinned-label { margin: 4px 8px 6px; } .pinned-frame .post { border: 0; background: transparent; border-radius: var(--radius-sm); } .pinned-frame .post + .post { border-top: 1px solid var(--border-soft); border-radius: 0; } /* quoted ("реагуа") post — small embedded card */ .quoted-post { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--card); cursor: pointer; transition: background .2s ease, border-color .2s ease; } .quoted-post:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); } .quoted-post.deleted { color: var(--text-3); display: flex; align-items: center; gap: 8px; cursor: default; font-weight: 700; } .quoted-post.deleted .ic { width: 18px; height: 18px; } .quoted-head { display: flex; align-items: center; gap: 7px; } .quoted-head .avatar { width: 22px; height: 22px; font-size: 10px; } .quoted-name { font-family: var(--font-bold); font-weight: 900; font-size: .98rem; color: var(--text); } .quoted-uname { color: var(--text-3); font-weight: 700; font-size: .9rem; } .quoted-main { display: flex; gap: 10px; margin-top: 6px; align-items: flex-start; } .quoted-body { flex: 1; min-width: 0; } .quoted-text { font-size: 1rem; line-height: 1.3; font-weight: 650; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; overflow-wrap: anywhere; } .quoted-text b { font-weight: 900; } .quoted-meta { margin-top: 6px; color: var(--text-3); font-size: .85rem; font-weight: 700; } .quoted-thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; position: relative; background: var(--bg-2); } .quoted-thumb img, .quoted-thumb video { width: 100%; height: 100%; object-fit: cover; } .quoted-more { position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; font-weight: 800; padding: 1px 6px; border-radius: 8px; } /* quoted block inside the composer */ .composer-quote { position: relative; margin-top: 12px; } .composer-quote .quoted-post { cursor: default; } .composer-quote .quoted-post:hover { border-color: var(--border); background: var(--card); } .quote-remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; } .quote-remove .ic { width: 16px; height: 16px; } /* ---------- profile album ---------- */ .album { margin: 16px 0; } .album-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-bold); font-weight: 950; font-size: 1.2rem; margin-bottom: 12px; } .album-title .ic { width: 22px; height: 22px; color: var(--accent); } .song-list { display: flex; flex-direction: column; gap: 10px; } .song-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 13px; align-items: center; padding: 10px; border-radius: 20px; background: var(--card-2); border: 1px solid var(--border-soft); } .song-cover { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #222; display: grid; place-items: center; color: var(--accent); cursor: pointer; } .song-cover img { width: 100%; height: 100%; object-fit: cover; } .song-cover .ic { width: 28px; height: 28px; } .song-main { min-width: 0; } .song-title { font-family: var(--font-bold); font-weight: 950; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .song-artist { color: var(--text-2); font-size: .92rem; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .song-line { display: flex; align-items: center; gap: 10px; margin-top: 9px; } .song-play { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; } .song-play .ic { width: 20px; height: 20px; } .song-timeline { flex: 1; height: 5px; border-radius: 3px; background: var(--pill-2); position: relative; cursor: pointer; min-width: 60px; } .song-timeline .song-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); width: 0; } .song-dur { color: var(--text-3); font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } .song-del { width: 38px; height: 38px; border-radius: 50%; background: var(--pill); color: var(--text-3); display: grid; place-items: center; } .song-add { margin-top: 12px; } /* ============================================================ SETTINGS ============================================================ */ .set-tabs { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; } .set-tab { white-space: nowrap; border: 0; background: var(--pill); color: var(--text-2); min-height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 900; } .set-tab.active { background: var(--accent-dark); color: var(--accent); } .settings-section { padding: 18px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--border-soft); margin-bottom: 16px; } .settings-section h4 { margin: 0 0 14px; font-family: var(--font-bold); font-weight: 950; font-size: 1.15rem; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; } .set-row .label { font-weight: 800; } .set-row .desc { color: var(--text-3); font-size: .88rem; font-weight: 700; margin-top: 3px; } .desc { color: var(--text-3); font-size: .88rem; font-weight: 700; } .switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--pill-2); transition: background .2s; } .switch .slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; } .switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::before { transform: translateX(20px); } .edit-cover-wrap, .edit-avatar-wrap { position: relative; cursor: pointer; } .edit-cover-wrap .cover { height: 150px; border-radius: var(--radius-sm); } .edit-avatar-wrap { width: 96px; height: 96px; } .edit-cover-wrap .cam, .edit-avatar-wrap .cam { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; } .edit-avatar-wrap .cam { right: 0; bottom: 0; width: 32px; height: 32px; } /* ============================================================ NOTIFICATIONS ============================================================ */ .notif { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--card-2); border: 1px solid var(--border-soft); margin-bottom: 10px; cursor: pointer; /* зажатие (тач) и ПКМ на ПК больше не «размазывают» текст выделением/callout — клик/навигация работают как обычно */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .notif.unread { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), var(--card-2)); } .ic-circle { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--pill); overflow: hidden; } .ic-circle.like { color: var(--danger); } .ic-circle.comment { color: var(--blue); } .ic-circle.repost, .ic-circle.follow, .ic-circle.mention { color: var(--accent); } .ic-circle.bug { color: #f5b700; } /* молоточек «нашёл баг» */ .ic-circle.follow { padding: 0; gap: 0; cursor: inherit; } .ic-circle .ic { width: 20px; height: 20px; } .ic-circle.follow .ic { width: 18px; height: 18px; transform: none; } .n-body { flex: 1; min-width: 0; font-weight: 700; } .n-body b { font-family: var(--font-bold); font-weight: 950; } .n-time { color: var(--text-3); font-size: .82rem; margin-top: 3px; } .n-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } /* user row (search) */ .user-row { display: flex; align-items: center; gap: 13px; padding: 13px; border-radius: 20px; background: var(--card-2); border: 1px solid var(--border-soft); margin-bottom: 10px; cursor: pointer; } .user-row .grow { flex: 1; min-width: 0; } /* ============================================================ EMPTY / LOADING / NOTICE ============================================================ */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 50px 24px; } .empty .ic { width: 36px; height: 36px; } .empty-orb { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-dark) 50%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .empty-orb .ic { width: 36px; height: 36px; } .empty h3 { margin: 0; font-family: var(--font-bold); font-weight: 950; font-size: 1.4rem; } .empty p { margin: 0; max-width: 340px; color: var(--text-3); font-weight: 700; line-height: 1.35; } .empty .empty-cta { margin-top: 8px; } .tg-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); font-weight: 800; cursor: pointer; } .tg-notify-row input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; } /* Кнопки подключения способов (Email/Telegram/Лингуи) — столбцом на всю ширину. */ .contact-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .contact-actions .btn { width: 100%; } .loading { display: grid; place-items: center; padding: 50px; } .spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Лоадер «Agua» (Uiverse.io by dexter-st, адаптация): буквы Agua + вращающееся кольцо из inset-теней в оттенках акцента оформления пользователя ---- */ .aq-loader { position: relative; width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; gap: 1px; border-radius: 50%; background: transparent; user-select: none; } .aq-loader i { position: absolute; inset: 0; border-radius: 50%; background: transparent; animation: aqRotate 2s linear infinite; z-index: 0; } /* пропорции теней оригинала (180px) пересчитаны под 116px; фиолетовые цвета заменены на градации var(--accent) — светлый блик, чистый акцент, тёмная глубина */ @keyframes aqRotate { 0% { transform: rotate(90deg); box-shadow: 0 6px 13px 0 #fff inset, 0 13px 19px 0 color-mix(in srgb, var(--accent) 55%, #fff) inset, 0 38px 38px 0 var(--accent) inset; } 50% { transform: rotate(270deg); box-shadow: 0 6px 13px 0 #fff inset, 0 13px 6px 0 color-mix(in srgb, var(--accent) 80%, #fff) inset, 0 26px 38px 0 color-mix(in srgb, var(--accent) 60%, #000) inset; } 100% { transform: rotate(450deg); box-shadow: 0 6px 13px 0 #fff inset, 0 13px 19px 0 color-mix(in srgb, var(--accent) 55%, #fff) inset, 0 38px 38px 0 var(--accent) inset; } } .aq-loader b { position: relative; z-index: 1; display: inline-block; font-family: var(--font-bold); font-weight: 950; font-size: 1.22rem; letter-spacing: .03em; line-height: 1; background: linear-gradient(135deg, var(--accent) 15%, color-mix(in srgb, var(--accent) 60%, #fff) 50%, var(--accent) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .4; transform: translateY(0); animation: aqLetter 2s infinite; } .aq-loader b:nth-of-type(1) { animation-delay: 0s; } .aq-loader b:nth-of-type(2) { animation-delay: .1s; } .aq-loader b:nth-of-type(3) { animation-delay: .2s; } .aq-loader b:nth-of-type(4) { animation-delay: .3s; } @keyframes aqLetter { 0%, 100% { opacity: .4; transform: translateY(0); } 20% { opacity: 1; transform: scale(1.15); } 40% { opacity: .7; transform: translateY(0); } } /* компактный вариант — для подгрузки следующих порций ленты/комментариев */ .aq-loader.sm { width: 72px; height: 72px; } .aq-loader.sm i { animation-name: aqRotateSm; } @keyframes aqRotateSm { 0% { transform: rotate(90deg); box-shadow: 0 4px 8px 0 #fff inset, 0 8px 12px 0 color-mix(in srgb, var(--accent) 55%, #fff) inset, 0 24px 24px 0 var(--accent) inset; } 50% { transform: rotate(270deg); box-shadow: 0 4px 8px 0 #fff inset, 0 8px 4px 0 color-mix(in srgb, var(--accent) 80%, #fff) inset, 0 16px 24px 0 color-mix(in srgb, var(--accent) 60%, #000) inset; } 100% { transform: rotate(450deg); box-shadow: 0 4px 8px 0 #fff inset, 0 8px 12px 0 color-mix(in srgb, var(--accent) 55%, #fff) inset, 0 24px 24px 0 var(--accent) inset; } } .aq-loader.sm b { font-size: .86rem; } .notice-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--border-soft); margin-top: 14px; } .notice-card.warn { border-color: rgba(255,77,77,.3); color: var(--danger); } .notice-card h3 { margin: 0; color: var(--text); } .notice-card p { margin: 0; color: var(--text-2); font-weight: 700; } /* devices / sessions list */ .btn.small { min-height: 38px; padding: 0 14px; font-size: .92rem; flex: 0 0 auto; } .btn.danger-ghost { background: transparent; border: 1px solid rgba(255,77,77,.35); color: var(--danger); } .btn.danger-ghost:hover { background: var(--danger-dark); } .dev-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-soft); } .dev-row:first-of-type { border-top: 0; } .dev-ico { width: 42px; height: 42px; border-radius: 12px; background: var(--pill); display: grid; place-items: center; color: var(--text-2); flex: 0 0 auto; } .dev-row.current .dev-ico { background: var(--accent-dark); color: var(--accent); } .dev-ico .ic { width: 22px; height: 22px; } .dev-meta { flex: 1; min-width: 0; } .dev-top { font-weight: 900; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dev-badge { font-size: .72rem; font-weight: 800; color: var(--accent); background: var(--accent-dark); padding: 2px 8px; border-radius: 999px; } .dev-sub { font-size: .88rem; color: var(--text-2); font-weight: 700; margin-top: 2px; } .dev-sub.muted { color: var(--text-3); } /* cloud PIN */ .pin-input { display: block; width: 100%; margin: 10px 0 0; height: 56px; border: 2px solid var(--border); border-radius: 14px; background: var(--card); color: var(--text); text-align: center; font-size: 1.6rem; font-weight: 900; letter-spacing: 12px; padding-left: 12px; outline: none; } .pin-input:focus { border-color: var(--accent); } .pin-hint { background: var(--pill); border-radius: 12px; padding: 10px 14px; color: var(--text-2); font-weight: 700; font-size: .95rem; margin-top: 4px; } .pin-err { color: var(--danger); font-weight: 800; font-size: .9rem; min-height: 18px; margin-top: 8px; } .modal .input { width: 100%; margin-top: 10px; } /* additional usernames */ .uname-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-soft); } .uname-row:first-child { border-top: 0; } .uname-handle { font-weight: 900; color: var(--text); } .uname-badge { font-size: .72rem; font-weight: 800; color: var(--accent); background: var(--accent-dark); padding: 2px 8px; border-radius: 999px; } .uname-act { margin-left: auto; background: var(--pill); border: 0; color: var(--text); font-weight: 800; font-size: .85rem; padding: 7px 12px; border-radius: 999px; } .uname-act:hover { background: var(--pill-2); } .uname-add { display: flex; gap: 8px; margin-top: 12px; } .uname-add .input { flex: 1; } .uname-err { color: var(--danger); font-weight: 800; font-size: .9rem; min-height: 16px; margin-top: 6px; } .report-row { padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .report-row .label { font-weight: 900; color: var(--text); } .report-preview { margin: 8px 0; padding: 10px 12px; background: var(--pill); border-radius: 12px; color: var(--text-2); font-weight: 700; font-size: .92rem; } .report-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--blue); font-weight: 800; font-size: .92rem; text-decoration: none; } .report-link .ic { width: 16px; height: 16px; } .report-link:hover { text-decoration: underline; } .profile-altnames { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; } .profile-altnames .altname { font-size: .82rem; font-weight: 800; color: var(--text-3); background: var(--pill); padding: 2px 9px; border-radius: 999px; } /* security update banner (top of all tabs) */ .sec-banner { position: sticky; top: 0; z-index: 450; background: linear-gradient(135deg, #c0392b, #e74c3c); color: #fff; } .sec-banner-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 18px; } .sec-banner .ic { width: 22px; height: 22px; flex: 0 0 auto; } .sec-text { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.35; } .sec-text b { font-weight: 900; } .sec-timer { font-weight: 900; white-space: nowrap; } .sec-btn { flex: 0 0 auto; background: #fff; color: #c0392b; border: 0; border-radius: 999px; padding: 9px 18px; font-family: var(--font-bold); font-weight: 900; font-size: .95rem; } .sec-btn:hover { background: #ffeceb; } .modal.modal-wide { max-width: 520px; } .modal.modal-wide .reg-service { margin-top: 12px; text-align: left; } @media (max-width: 680px) { .sec-banner-in { flex-wrap: wrap; padding: 9px 12px; gap: 8px; } .sec-text { flex: 1 1 100%; order: 2; font-size: .88rem; } .sec-btn { order: 3; } .sec-banner .ic { order: 1; } } .danger-gate { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; text-align: center; color: var(--danger); } .danger-gate h3 { color: var(--text); margin: 0; } .danger-gate p { color: var(--text-2); max-width: 320px; font-weight: 700; } /* ============================================================ TOAST / MODAL / SHEET ============================================================ */ #toast-host { position: fixed; left: 0; right: 0; bottom: 30px; z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 9px; padding: 13px 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text); font-weight: 800; box-shadow: var(--shadow); animation: toastIn .42s cubic-bezier(.2,.9,.2,1) both; } .toast.error { border-color: rgba(255,77,77,.4); animation: toastIn .42s cubic-bezier(.2,.9,.2,1) both, toastShake .5s ease .4s; } .toast.out { opacity: 0; transform: translateY(16px) scale(.95); transition: opacity .38s ease, transform .38s ease; } @keyframes toastShake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } .toast .ic { width: 20px; height: 20px; color: var(--accent); } .toast.error .ic { color: var(--danger); } /* шторка «новое сообщение»: вылетает сверху, тап — открыть чат */ .dm-drawer { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 1200; display: flex; align-items: center; gap: 11px; width: min(430px, calc(100vw - 24px)); padding: 10px 16px 10px 10px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 19px; box-shadow: 0 18px 50px rgba(0,0,0,.35); pointer-events: auto; cursor: pointer; transform: translate(-50%, 0); animation: drawerIn .5s cubic-bezier(.2,.9,.3,1.18) both; } @keyframes drawerIn { from { opacity: 0; transform: translate(-50%, -34px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0); } } /* animation:none — иначе fill-mode «прибивает» transform и шторка не уедет вверх */ .dm-drawer.out { animation: none; opacity: 0; transform: translate(-50%, -26px) scale(.96); transition: opacity .35s ease, transform .35s ease; } .dm-drawer .dd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; } .dm-drawer .dd-body b { font-weight: 900; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-drawer .dd-body i { font-style: normal; color: var(--text-2); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-drawer .dd-body i .emoji { width: 16px; height: 16px; } /* --- зелёный кружочек «в сети» у аватарки (чат, список чатов, профиль) --- */ .chu-ava, .pf-ava { position: relative; display: inline-flex; flex: none; } .chu-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #17bf63; border: 2.5px solid var(--bg); opacity: 0; transform: scale(.4); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.4); pointer-events: none; } .chu-dot.on { opacity: 1; transform: none; } .chat-item .chu-dot { border-color: var(--card); } .pf-dot { width: 18px; height: 18px; right: 5px; bottom: 5px; border-width: 3px; border-color: var(--card-2); } /* --- GIF-док: панель на месте клавиатуры, а не окно поверх --- */ .gif-dock { margin-top: 8px; width: 100%; height: min(42dvh, 340px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 10px; animation: composerIn .3s cubic-bezier(.2,.9,.3,1.1) both; } .gif-dock .gd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .gif-dock .gd-q { flex: 1; min-width: 0; } .gif-dock .gif-grid { flex: 1; min-height: 0; overflow-y: auto; } /* --- комментарии: строка ввода прилипает к низу и едет с прокруткой --- */ .comment-dock { position: sticky; /* Строка ввода липнет к низу списка комментов. Контейнер (.feed) на телефоне УЖЕ укорочен на высоту нижней навигации (100dvh − nav-clearance), поэтому добавлять сюда ещё nav-clearance нельзя — иначе поле висело в воздухе на ~180px выше нава (двойной отступ). Достаточно маленького зазора. */ bottom: 10px; z-index: 6; } .comment-dock .comment-box { background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 18px; padding: 12px; margin: 10px 0; } .cs-body .comment-dock { bottom: 0; } @media (min-width: 901px) { .comment-dock { bottom: 12px; } } /* --- поле ввода с эпл-эмодзи (contenteditable вместо textarea) --- */ .emoji-edit { white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; } .emoji-edit:empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; } .emoji-edit .emoji { width: 1.25em; height: 1.25em; vertical-align: -.28em; margin: 0 .5px; } .emoji-edit:focus { outline: none; } /* копия правил textarea.dm-input — у div они сами не применятся */ .emoji-edit.dm-input { flex: 1; border: none; background: transparent; min-height: 48px; max-height: 120px; padding: 12px 6px; line-height: 24px; overflow-y: auto; scrollbar-width: none; font-size: max(16px, 1rem); box-shadow: none; } .emoji-edit.dm-input::-webkit-scrollbar { display: none; } /* копия правил .comment-box textarea */ .comment-box .emoji-edit { width: 100%; min-height: 54px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--text); padding: 12px 14px; font-weight: 700; transition: border-color .2s ease, box-shadow .25s ease; } .comment-box .emoji-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* --- заголовок поста --- */ .post-title { margin: 0 0 8px; font-family: var(--font-bold); font-weight: 950; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; } .composer-title { width: 100%; border: 0; background: transparent; outline: none; color: var(--text); font-family: var(--font-bold); font-weight: 950; font-size: 1.45rem; padding: 6px 0 2px; } .composer-title::placeholder { color: var(--text-3); font-weight: 800; } /* --- аватарка удалённого аккаунта: «!» на сером --- */ .avatar.ava-deleted { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--text) 18%, transparent); color: var(--text-2); font-weight: 950; border-radius: 50%; flex: none; } /* --- запрос на переписку: текст по центру, кнопки Принять/Отказаться --- */ .dm-banner.center { justify-content: center; text-align: center; } .dm-req-btns { display: flex; gap: 10px; margin-top: 8px; } .dm-req-btns .btn { flex: 1; justify-content: center; padding: 12px; font-size: 1rem; } .dm-del-chat { width: 100%; justify-content: center; margin-top: 8px; color: var(--danger); } /* --- «взрыв в пузырики» при удалении сообщения --- */ .dm-burst { position: fixed; z-index: 5050; pointer-events: none; } .dm-burst i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 75%, #fff), color-mix(in srgb, var(--accent) 45%, transparent) 65%, transparent); animation: dmPop .55s ease-out both; } @keyframes dmPop { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -50px)) scale(1.15); } } /* ============================================================ ПЛАНШЕТЫ (вертикально 681–900, горизонтально 901–1100) ============================================================ */ @media (min-width: 681px) and (max-width: 1100px) { /* контент не «полотном» на всю ширину, а колонкой по центру */ .shell { gap: 18px; padding: 0 18px; } .feed { max-width: 700px; width: 100%; margin: 0 auto; } /* модалки и шторки комфортной ширины, а не в край */ .modal { max-width: 520px; } .comments-sheet { max-width: 640px; } } /* планшет вертикально: чат раньше растягивался ПОВЕРХ боковой рельсы и резервировал снизу 92px под навбар, которого на планшете нет */ @media (min-width: 681px) and (max-width: 900px) { .chat-page { left: 102px; right: 0; bottom: 0; padding: 0 22px 14px; } .land { max-width: 560px; } /* звонок: облака и колонка контента дышат свободнее */ .call-stage { gap: 10px; } .call-avatar { width: 148px !important; height: 148px !important; } } @media (min-width: 901px) and (max-width: 1100px) { /* горизонтальный планшет: чат — карточкой в колонке, как на ПК, но чуть выше и с полными углами */ .chat-page { height: calc(100dvh - 16px); } } /* ============================================================ ОБЩИЙ ЧАТ + аудиочат ============================================================ */ /* строка «Общий чат» над списком личных чатов */ .gc-row .gc-ic { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .gc-live { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); animation: gcPulse 1.6s ease infinite; } .gc-live .ic { width: 16px; height: 16px; } @keyframes gcPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 7px transparent; } } /* аватар-глобус: на сером фоне (как обычная аватарка человека) */ .gc-ava { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text-2); border-radius: 50%; } .gc-ava .ic { width: 24px; height: 24px; } .chat-head .gc-ava { width: 40px; height: 40px; } .chat-head .gc-ava .ic { width: 21px; height: 21px; } /* бейджи строки: зелёный кружок-счётчик и зелёная @ (ответ/упоминание) */ .gc-badges { display: inline-flex; gap: 5px; } .badge.gc-grey { background: var(--accent); color: var(--accent-ink); animation: heartIn .3s cubic-bezier(.2,.9,.3,1.35) both; } .badge.gc-at { background: var(--accent); color: var(--accent-ink); font-weight: 950; animation: heartIn .3s cubic-bezier(.2,.9,.3,1.35) both; } /* панель аудиочата — всегда сверху, как в Telegram */ .gc-voice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 18px; animation: composerIn .3s cubic-bezier(.2,.9,.3,1.1) both; } .gcv-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); } .gcv-ic .ic { width: 19px; height: 19px; } .gcv-main { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 1px; } .gcv-main b { font-weight: 900; font-size: .95rem; } .gcv-main i { font-style: normal; color: var(--text-3); font-size: .78rem; } .gcv-avas { display: inline-flex; } .gcv-avas .avatar { border: 2px solid var(--card); } .gcv-avas .avatar + .avatar { margin-left: -8px; } .gc-voice .btn { padding: 8px 14px; font-size: .88rem; } .gcv-mute { padding: 8px 10px; } .gcv-mute.on { background: var(--danger-dark); color: var(--danger); } .gcv-mute .ic { width: 17px; height: 17px; } /* Плашка «вы в общем чате»: висит поверх любого экрана, как свёрнутый звонок. Те же размеры и стекло, что у .call-mini, но слева стопка аватарок. */ .gc-here-pill { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px) + var(--pill-shift, 0px)); left: 50%; transform: translate(-50%, 0); z-index: 4999; width: min(440px, calc(100vw - 20px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); cursor: pointer; color: var(--text); animation: gchIn .32s cubic-bezier(.2,.9,.25,1.1) both; } @keyframes gchIn { from { opacity: 0; transform: translate(-50%, -130%); } to { opacity: 1; transform: translate(-50%, 0); } } .gc-here-pill:active { transform: translate(-50%, 0) scale(.985); } /* аватарки внахлёст — как под реакциями: первая в DOM лежит поверх */ .gch-avs { display: inline-flex; align-items: center; flex: none; padding-left: 2px; } .gch-avs .avatar { width: 26px; height: 26px; flex: none; border: 2px solid var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); } .gch-avs .avatar:first-child { position: relative; z-index: 3; } .gch-avs .avatar + .avatar { margin-left: -12px; position: relative; z-index: 2; } .gch-avs .avatar + .avatar + .avatar { z-index: 1; } .gch-empty { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pill); color: var(--text-2); } .gch-empty .ic { width: 15px; height: 15px; } .gch-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .gch-info b { font-family: var(--font-bold); font-weight: 900; font-size: .95rem; } .gch-info i { font-style: normal; color: var(--text-2); font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gch-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--pill); color: var(--text-2); display: grid; place-items: center; } .gch-x:hover { background: var(--pill-2); color: var(--text); } .gch-x .ic { width: 17px; height: 17px; } /* сообщения общего чата: аватарка слева, имя автора над текстом */ .gc-msg { align-items: flex-end; gap: 7px; } .gc-msg .gc-msg-ava { flex: none; } .gc-author { display: block; font-weight: 900; font-size: .8rem; color: var(--accent); text-decoration: none; margin-bottom: 2px; } .gc-reply-tag { pointer-events: none; } /* --- панель аудиочата: участники + большая кнопка микрофона --- */ .gc-vpanel { position: fixed; inset: 0; z-index: 4600; } .gc-vpanel .gcp-back { position: absolute; inset: 0; background: var(--win-dim); backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); animation: backdropIn .25s ease both; } .gcp-sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 520px; max-height: 78dvh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -16px 50px rgba(0,0,0,.5); padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px)); animation: gcpUp .38s cubic-bezier(.2,.9,.3,1.08) both; } @keyframes gcpUp { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } .gcp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gcp-head h3 { margin: 0; } .gcp-sub { color: var(--text-3); font-size: .82rem; font-weight: 700; margin-top: 2px; } .gcp-list { flex: 1; min-height: 120px; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; } .gcp-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; transition: background .25s ease, box-shadow .25s ease; } .gcp-row .gcp-ava { position: relative; flex: none; border-radius: 50%; } .gcp-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gcp-names b { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gcp-names i { font-style: normal; color: var(--text-3); font-size: .8rem; } .gcp-you { font-style: normal; color: var(--accent); font-size: .74rem; font-weight: 800; } .gcp-mic { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .gcp-mic.off { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-3); } .gcp-mic .ic { width: 18px; height: 18px; } /* волны речи: видны только когда строка .talking */ .gcp-waves { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 2px; } .gcp-waves i { width: 3px; border-radius: 2px; background: var(--accent); animation: gcWave 0.9s ease-in-out infinite; } .gcp-waves i:nth-child(1) { height: 8px; } .gcp-waves i:nth-child(2) { height: 14px; animation-delay: .15s; } .gcp-waves i:nth-child(3) { height: 8px; animation-delay: .3s; } @keyframes gcWave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.35); } } .gcp-row.talking { background: color-mix(in srgb, var(--accent) 9%, transparent); } .gcp-row.talking .gcp-ava { box-shadow: 0 0 0 2.5px var(--accent); } .gcp-row.talking .gcp-mic:not(.off) .ic { display: none; } .gcp-row.talking .gcp-mic:not(.off) .gcp-waves { display: flex; } .gcp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 10px; color: var(--text-3); text-align: center; } .gcp-empty .ic { width: 34px; height: 34px; } .gcp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .gcp-foot .call-btn-w { position: absolute; left: 50%; transform: translateX(-50%); } .gcp-foot { position: relative; min-height: 96px; } .gcp-foot .call-btn.live { background: var(--accent); color: var(--accent-ink); animation: callPulse 1.6s ease infinite; } .gcp-foot-pad { width: 68px; } .gcp-join-big { width: 100%; justify-content: center; padding: 14px; font-size: 1.05rem; gap: 8px; } /* --- анимации сообщений «как в iMessage»: пружина из угла отправки --- */ .dm-msg { animation: none; } .dm-msg, .gc-msg { animation: msgInLeft .42s cubic-bezier(.18,.89,.32,1.18) both; transform-origin: left bottom; } .dm-msg.mine, .gc-msg.mine { animation-name: msgInRight; transform-origin: right bottom; } @keyframes msgInLeft { from { opacity: 0; transform: translate(-8px, 16px) scale(.72); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @keyframes msgInRight { from { opacity: 0; transform: translate(8px, 16px) scale(.72); } 60% { opacity: 1; } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dm-msg, .gc-msg { animation: none !important; } } /* --- больше жизни: анимации там, где их не было --- */ /* уведомления в Активности въезжают ступеньками */ #notif-list .notif { animation: chatItemIn .32s cubic-bezier(.2,.9,.3,1.1) both; } #notif-list .notif:nth-child(1) { animation-delay: 0ms; } #notif-list .notif:nth-child(2) { animation-delay: 35ms; } #notif-list .notif:nth-child(3) { animation-delay: 70ms; } #notif-list .notif:nth-child(4) { animation-delay: 105ms; } #notif-list .notif:nth-child(n+5) { animation-delay: 140ms; } /* участники аудиочата появляются ступеньками */ .gcp-list .gcp-row { animation: chatItemIn .3s cubic-bezier(.2,.9,.3,1.1) both; } .gcp-list .gcp-row:nth-child(2) { animation-delay: 30ms; } .gcp-list .gcp-row:nth-child(3) { animation-delay: 60ms; } .gcp-list .gcp-row:nth-child(n+4) { animation-delay: 90ms; } /* секции настроек и заметка о шифровании — мягкий подъезд */ .settings-section { animation: chatItemIn .34s ease both; } .settings-section:nth-child(2) { animation-delay: 45ms; } .settings-section:nth-child(3) { animation-delay: 90ms; } .dm-note { animation: composerIn .32s ease both; } /* карточки правой колонки (ПК) */ .right .side-card, .right .online-card { animation: chatItemIn .38s ease both; } .right .side-card:nth-child(2) { animation-delay: 60ms; } .right .side-card:nth-child(3) { animation-delay: 120ms; } /* строки трендов/рекомендаций и результатов поиска */ .trend-list > *, .follow-list > * { animation: fadeIn .35s ease both; } /* плавный отклик всех кнопок-иконок и вкладок */ .icon-btn { transition: transform .14s ease, background .2s ease, color .2s ease; } .icon-btn:active { transform: scale(.88); } .tab, .feed-filter { transition: background .22s ease, color .22s ease, transform .14s ease; } .tab:active, .feed-filter:active { transform: scale(.95); } .chat-item { transition: background .2s ease, transform .15s ease; } .chat-item:active { transform: scale(.985); } .btn { transition: transform .13s ease, filter .18s ease, background .2s ease; } .btn:active { transform: scale(.96); } @media (prefers-reduced-motion: reduce) { #notif-list .notif, .gcp-list .gcp-row, .settings-section, .dm-note, .right .side-card, .right .online-card, .trend-list > *, .follow-list > * { animation: none !important; } } /* круглая кнопка поиска: справа под рядом «Рекомендации/Подписки», выплывает при прокрутке ленты; координаты ставит JS от места вкладок */ .feed-search-fab { position: fixed; z-index: 90; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--border); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 10px 28px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.6); transition: opacity .3s ease, transform .38s cubic-bezier(.2,.9,.3,1.25); } .feed-search-fab.show { opacity: 1; pointer-events: auto; transform: none; } .feed-search-fab:active { transform: scale(.9); } .feed-search-fab .ic { width: 21px; height: 21px; } /* кружок нужен только на телефонах: на ПК и планшетах поиск уже есть в левой панели навигации */ @media (min-width: 681px) { .feed-search-fab { display: none; } } /* --- нижняя навигация плавно прячется в чате/заметках/активности --- */ .nav-wrap, .left { transition: transform .35s cubic-bezier(.3,0,.2,1), opacity .3s ease; } @media (max-width: 680px) { body.hide-nav .left { transform: translateY(140%); opacity: 0; pointer-events: none; } body.hide-nav .chat-page { bottom: env(safe-area-inset-bottom, 0px); } body.hide-nav .feed { height: 100dvh; transition: height .35s cubic-bezier(.3,0,.2,1); } } @keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } } #modal-host { position: fixed; inset: 0; z-index: 4300; display: none; align-items: center; justify-content: center; padding: 18px; } #modal-host.open { display: flex; } .modal-backdrop { position: absolute; inset: 0; background: var(--win-dim); backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); animation: backdropIn .28s ease both; } @keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } } .modal { position: relative; width: 100%; max-width: 440px; padding: 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); max-height: 88vh; overflow-y: auto; animation: modalIn .34s cubic-bezier(.2,.9,.2,1) both; } @keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } } .modal h3 { margin: 0 0 8px; font-family: var(--font-bold); font-weight: 950; font-size: 1.4rem; } .modal p { margin: 0 0 16px; color: var(--text-2); font-weight: 700; line-height: 1.4; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .sheet { position: relative; width: 100%; max-width: 440px; padding: 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; animation: sheetIn .4s cubic-bezier(.2,.9,.2,1) both; } @keyframes sheetIn { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } } .sheet button { display: flex; align-items: center; gap: 13px; padding: 15px; border: 0; background: transparent; color: var(--text); border-radius: 16px; text-align: left; font-weight: 800; transition: background .2s ease, transform .12s ease; } .sheet button:hover { background: var(--pill); } .sheet button:active { transform: scale(.97); } .sheet button.danger { color: var(--danger); } .sheet button .ic { width: 22px; height: 22px; } /* ============================================================ MEDIA VIEWER (lightbox) ============================================================ */ #viewer-host { position: fixed; inset: 0; z-index: 950; display: none; } #viewer-host.open { display: block; } .viewer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); animation: backdropIn .3s ease both; } .viewer-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; } .viewer-stage img, .viewer-stage video { max-width: 100%; max-height: 100%; border-radius: 14px; animation: viewerIn .36s cubic-bezier(.2,.9,.2,1) both; } @keyframes viewerIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } .viewer-close { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; border: 0; font-weight: 800; } .viewer-close .ic { width: 18px; height: 18px; } .viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; display: grid; place-items: center; } .viewer-nav.prev { left: 18px; } .viewer-nav.next { right: 18px; } /* video player */ .vplayer { position: relative; max-width: 100%; max-height: 100%; } .vplayer video { display: block; max-width: 100%; max-height: 80vh; border-radius: 14px; } .vcontrols { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); border-radius: 0 0 14px 14px; } .vtimeline { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); cursor: pointer; } .vbuf { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.3); border-radius: 3px; } .vprog { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; width: 0; } .vhandle { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: #fff; left: 0; } .vrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: #fff; } .vrow button { background: transparent; border: 0; color: #fff; display: grid; place-items: center; } .vrow .ic { width: 24px; height: 24px; } .vrow .spacer { flex: 1; } .vtime { font-variant-numeric: tabular-nums; font-size: .85rem; } .vspeed { font-weight: 900; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.15) !important; } .speed-flash { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font-weight: 900; opacity: 0; transition: opacity .2s; } .speed-flash.show { opacity: 1; } /* ============================================================ MINI PLAYER (persistent, top of all tabs) ============================================================ */ /* ============================================================ ПЛАШКА ЗАГРУЗКИ (музыка, обложки): кольцо + проценты + этап ============================================================ */ #uphud-host { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; justify-content: center; pointer-events: none; } .uphud { display: flex; align-items: center; gap: 12px; margin: 0 12px 20px; padding: 10px 16px 10px 10px; border-radius: 999px; max-width: calc(100vw - 24px); background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); opacity: 0; transform: translateY(18px); transition: opacity .28s ease, transform .32s cubic-bezier(.2,.9,.2,1); } .uphud.show { opacity: 1; transform: none; } .uphud-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; } .uphud-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); } .uphud-ring circle { fill: none; stroke-width: 3.5; } .uphud-ring .uh-bg { stroke: color-mix(in srgb, var(--text) 14%, transparent); } .uphud-ring .uh-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .2s linear; } .uphud-ring .uh-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-bold); font-weight: 900; font-size: .72rem; color: var(--text); font-variant-numeric: tabular-nums; } /* этап без процентов (например «Заполняем информацию») — кольцо просто крутится */ .uphud.busy .uphud-ring svg { animation: uphudSpin 1s linear infinite; } .uphud.busy .uh-fg { stroke-dasharray: 40 200 !important; stroke-dashoffset: 0 !important; } @keyframes uphudSpin { to { transform: rotate(270deg); } } .uphud.failed .uh-fg { stroke: var(--danger); } .uphud-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .uphud-txt b { font-family: var(--font-bold); font-weight: 900; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uphud-txt i { font-style: normal; color: var(--text-2); font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uphud.failed .uphud-txt i { color: var(--danger); } @media (max-width: 680px) { .uphud { margin-bottom: calc(var(--mobile-nav-clearance, 92px) + 10px); } } @media (prefers-reduced-motion: reduce) { .uphud { transition: opacity .2s ease; transform: none; } .uphud.busy .uphud-ring svg { animation: none; } } /* --pill-shift ставит syncTopPills(): плашки звонка/аудиочата/музыки живут в одной точке сверху по центру, поэтому каждая следующая уезжает под предыдущую */ .miniplayer { position: fixed; top: calc(12px + var(--pill-shift, 0px)); left: 50%; transform: translate(-50%, -120%); z-index: 400; width: min(520px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); opacity: 0; transition: transform .4s cubic-bezier(.2,.9,.2,1), opacity .3s ease; } .miniplayer.show { transform: translate(-50%, 0); opacity: 1; } .mp-cover { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 11px; overflow: hidden; background: #222; display: grid; place-items: center; color: var(--accent); cursor: pointer; } .mp-cover img { width: 100%; height: 100%; object-fit: cover; } .mp-cover .ic { width: 22px; height: 22px; } .mp-info { flex: 1; min-width: 0; cursor: pointer; } .mp-title { font-family: var(--font-bold); font-weight: 900; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-timeline { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); position: relative; margin-top: 5px; cursor: pointer; } .mp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); width: 0; } .mp-play { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; } .mp-play .ic { width: 22px; height: 22px; } .mp-close { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; background: transparent; color: var(--text-3); display: grid; place-items: center; } .mp-close .ic { width: 18px; height: 18px; } /* ============================================================ EQUALIZER full-screen view ============================================================ */ #eq-host { position: fixed; inset: 0; z-index: 800; display: none; } /* Frosted-glass backdrop: blur the app behind instead of painting solid black. A keyframe (not a transition) is used so the fade plays across display:none→block. */ #eq-host.open { display: block; backdrop-filter: blur(42px) saturate(150%); -webkit-backdrop-filter: blur(42px) saturate(150%); animation: eqHostIn .36s cubic-bezier(.2,.9,.2,1) both; } @keyframes eqHostIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } } .eq-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, rgba(14,14,16,.46) 0%, rgba(0,0,0,.64) 78%); transition: background .6s ease; touch-action: pan-y; } .eq-top { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; z-index: 6; } .eq-top .eq-now { flex: 1; min-width: 0; color: #fff; } .eq-top .eq-now .nm { font-family: var(--font-bold); font-weight: 900; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eq-roundbtn { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; display: grid; place-items: center; } .eq-roundbtn.on { background: #fff; color: #000; } .eq-roundbtn:disabled { opacity: .3; } .eq-roundbtn .ic { width: 22px; height: 22px; } .eq-ring { position: relative; width: min(72vmin, 360px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .eq-ring canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 175%; height: 175%; } .eq-cover { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 18%; overflow: hidden; background: #1c1c1e; box-shadow: 0 24px 70px rgba(0,0,0,.65); display: grid; place-items: center; color: #9a9aa0; } .eq-cover img { width: 100%; height: 100%; object-fit: cover; } .eq-cover .ic { width: 46%; height: 46%; } .eq-lyrics { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 18%; overflow: hidden; background: #050505; opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 2; box-shadow: 0 24px 70px rgba(0,0,0,.65); } .eq-lyrics.on { opacity: 1; pointer-events: auto; } .eq-lyrics-scroll { position: absolute; top: 0; left: 0; width: 100%; padding: 0 9%; text-align: center; transition: transform .45s cubic-bezier(.22,.61,.36,1); } .eq-ln { font-weight: 800; line-height: 1.25; margin: 7% 0; color: rgba(255,255,255,.34); font-size: clamp(14px,3.6vmin,22px); transition: color .3s, transform .3s, font-size .3s; transform: scale(.84); } .eq-ln.near { color: rgba(255,255,255,.6); } .eq-ln.cur { color: #fff; transform: scale(1); font-size: clamp(18px,4.8vmin,28px); } .eq-lyrics.empty-mode { display: grid; place-items: center; padding: 0 9%; } .eq-lyr-empty { text-align: center; color: #fff; } .eq-lyr-empty .le-title { font-weight: 800; font-size: 1.05rem; } .eq-lyr-empty .le-sub { color: rgba(255,255,255,.65); font-size: .82rem; margin-top: 8px; line-height: 1.4; } .eq-meta { text-align: center; margin-top: 30px; width: min(72vmin,360px); max-width: 88vw; } .eq-title { color: #fff; font-size: 1.4rem; font-family: var(--font-bold); font-weight: 900; } .eq-artist { color: rgba(255,255,255,.68); font-size: 1rem; margin-top: 5px; } .eq-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 16px; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); } .eq-seek { width: min(72vmin,360px); max-width: 90vw; display: flex; align-items: center; gap: 10px; } .eq-seek .t { color: rgba(255,255,255,.55); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 34px; } .eq-seek .t.r { text-align: right; } .eq-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; } .eq-track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #fff; width: 0; } .eq-controls { display: flex; align-items: center; gap: 34px; } .eq-controls button { background: none; border: 0; color: #fff; display: grid; place-items: center; transition: transform .12s; } .eq-controls button:active { transform: scale(.88); } .eq-controls .nav .ic { width: 30px; height: 30px; } .eq-controls .nav:disabled { opacity: .28; } .eq-play { width: 64px; height: 64px; border-radius: 50%; background: #fff !important; color: #000 !important; } .eq-play .ic { width: 26px; height: 26px; } /* ============================================================ AUTH / LOGIN ============================================================ */ .auth-wrap { display: grid; grid-template-columns: 1.1fr 1fr; height: 100dvh; } .auth-media { position: relative; overflow: hidden; background: #050505; } .auth-media .placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--accent); } .auth-media .placeholder .drop { width: 90px; height: 90px; } .auth-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; } .auth-slide.active { opacity: 1; } .auth-slide img, .auth-slide video { width: 100%; height: 100%; object-fit: cover; } .auth-slide .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); } .auth-slide .overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px; } .auth-slide .big-logo { font-family: var(--font-bold); font-weight: 950; font-size: 3rem; color: #fff; } .auth-slide .post-info { color: #fff; margin-bottom: 14px; } .auth-slide .pi-head { display: flex; align-items: center; gap: 10px; } .auth-slide .dname { font-family: var(--font-bold); font-weight: 900; font-size: 1.2rem; } .auth-slide .uname { color: var(--accent); font-weight: 800; } .auth-slide .ptext { margin-top: 8px; font-weight: 700; } .big-logo span { display: block; } .auth-form-side { display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; } .auth-card { width: 100%; max-width: 380px; } .logo-mobile { display: none; align-items: center; gap: 10px; font-family: var(--font-bold); font-weight: 950; font-size: 1.6rem; margin-bottom: 18px; } .logo-mobile .drop { width: 34px; height: 34px; color: var(--accent); } .auth-card h2 { margin: 0 0 6px; font-family: var(--font-bold); font-weight: 950; font-size: 2rem; } .auth-card .lead { margin: 0 0 20px; color: var(--text-3); font-weight: 700; } .auth-error { color: var(--danger); font-weight: 800; min-height: 20px; margin-bottom: 8px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .shell { grid-template-columns: 84px minmax(0, 1fr); align-items: start; } .right { display: none; } .left { align-items: center; } .logo-panel { width: 72px; height: 72px; padding: 0; display: grid; place-items: center; } .brand { width: 56px; height: 56px; justify-content: center; border-radius: 50%; background: transparent; } .brand img { width: 44px; height: 44px; } .nav { align-items: center; width: 72px; } .nav-item { width: 64px; height: 64px; min-height: 64px; justify-content: center; padding: 0; gap: 0; border-radius: 50%; } .nav-item .ic { width: 28px; height: 28px; } .nav-item .badge { top: 7px; left: calc(50% + 6px); } .post-cta { width: 64px; height: 64px; min-height: 64px; border-radius: 50%; } .nav-item span:not(.badge):not(.avatar) { display: none; } .brand span { display: none; } .post-cta { font-size: 0; padding: 0; } .post-cta::after { content: "+"; font-size: 1.8rem; } } @media (max-width: 680px) { body { overflow: hidden; } :root { --mobile-nav-clearance: calc(92px + env(safe-area-inset-bottom)); } .shell { display: block; height: 100dvh; padding: 0; grid-template-columns: none; } .feed { height: calc(100dvh - var(--mobile-nav-clearance)); padding: env(safe-area-inset-top) 14px 18px; scroll-padding-bottom: 18px; /* боковые отступы (14px) не дают карточкам дойти до скруглённых углов контейнера — обрезаем по ширине контента, чтобы углы были полные. Верхние плашки снова круглые — скругляем и верх контейнера */ border-radius: 0; clip-path: inset(0 14px round var(--radius)); } .left { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 300; display: block; align-items: stretch; pointer-events: none; } .logo-panel, .post-cta { display: none; } /* Поиск на телефоне живёт в шапке ленты — в баре 5 кнопок, «Создать» ровно в центре */ .nav .nav-item[href="/search"] { display: none; } .nav { pointer-events: auto; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; width: auto; align-items: stretch; padding: 8px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, var(--accent-soft)), rgba(8,8,8,.7); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 60px rgba(0,0,0,.8); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); --active-index: 0; } .mobile-nav-indicator { /* геометрия синхронизирована с .nav: боковой паддинг 8px, 4 зазора по 7px */ display: block; position: absolute; left: 8px; top: 8px; bottom: 8px; width: calc((100% - 16px - 28px) / 5); border-radius: 999px; background: linear-gradient(180deg, var(--accent-glow), color-mix(in srgb, var(--accent-dark) 85%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 24px var(--accent-border); transform: translate3d(calc(var(--active-index,0) * (100% + 7px)), 0, 0); transition: transform .42s cubic-bezier(.2,.95,.2,1); z-index: 0; } .nav[data-active="feed"] { --active-index: 0; } .nav[data-active="plenka"] { --active-index: 1; } .nav[data-active="messages"] { --active-index: 3; } .nav[data-active="notifications"] { --active-index: 3; } .nav[data-active="profile"] { --active-index: 4; } /* Создать — своя зелёная кнопка, ползунок под ней не нужен; на /search тоже */ .nav[data-active="none"] .mobile-nav-indicator, .nav[data-active="search"] .mobile-nav-indicator, .nav[data-active="posting"] .mobile-nav-indicator { opacity: 0; } /* «Создать» на телефоне: зелёный круг с плюсом, по центру вертикали плашки */ .nav-item.nav-create { background: linear-gradient(180deg, var(--create-green), var(--create-green-strong)); color: #fff; border-radius: 50%; width: 54px; height: 54px; justify-self: center; align-self: center; box-shadow: 0 8px 22px var(--create-green-glow), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s ease, filter .15s ease; } .nav-item.nav-create:active { transform: scale(.92); } .nav-item.nav-create .ic { width: 28px; height: 28px; stroke-width: 2.4; } .nav-item { position: relative; z-index: 1; width: auto; height: 54px; min-width: 0; min-height: 54px; padding: 0; gap: 0; justify-content: center; border-radius: 999px; background: transparent; } .nav-item .ic { width: 26px; height: 26px; } .nav-item span:not(.badge):not(.avatar) { display: none; } .nav-item.active { background: transparent; color: var(--accent); } .nav-item .badge { left: 50%; top: 4px; transform: translateX(2px); } /* Light theme: the bottom bar must match the light page (was a dark glass bar). */ [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 34px rgba(0, 0, 0, 0.18); } [data-theme="light"] .nav-item { color: #5b626a; } /* inactive icons readable on light */ [data-theme="light"] .nav-item.active { color: var(--accent-ink); } [data-theme="light"] .mobile-nav-indicator { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); box-shadow: 0 6px 18px var(--accent-glow); } .auth-wrap { grid-template-columns: 1fr; } .auth-media { display: none; } .logo-mobile { display: flex; } .topbar h1 { font-size: 1.4rem; } .feed-tabs { top: 0; } /* Kill the gap above the sticky header: the scroll container's top padding pushes a `top:0` sticky element down, exposing a strip of scrolling content above it. A full-bleed pseudo fills that strip with the page bg (same colour as the header, so it blends — no visible strip). */ .topbar, .feed-tabs { position: sticky; } .profile-avatar { width: 86px; height: 86px; } .miniplayer { top: calc(8px + var(--pill-shift, 0px)); width: calc(100vw - 16px); } .modal, .sheet { max-width: none; } } /* desktop: hide mobile-only nav indicator */ @media (min-width: 681px) { .mobile-nav-indicator { display: none; } } /* ============================================================ POLISH — mobile / player / polls ============================================================ */ @media (max-width: 680px) { .shell { overflow-x: hidden; } .feed { overflow-x: hidden; } /* tighter post cards on phones */ .post { padding: 16px; border-radius: 24px; } .post-body { font-size: 1.04rem; } .dname { font-size: 1.06rem; } /* actions: keep on one row, scroll if needed, comfy tap targets */ .post-actions { gap: 7px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .post-actions::-webkit-scrollbar { display: none; } .act, .pill { min-height: 42px; padding: 0 13px; flex: 0 0 auto; } .post-actions .act[data-act="view"] { margin-left: 4px; } /* topbar: hide redundant bell (nav has notifications) */ .topbar [data-bell] { display: none; } /* media single image not too tall — предел на картинке, а не на ячейке, иначе вертикальное фото обрезается вместо того, чтобы уменьшиться */ .media-grid.m1 .cell img, .media-grid.m1 .cell video { max-height: 70vh; } /* composer text a touch smaller */ #composer-text { font-size: 1.12rem; min-height: 110px; } /* profile tweaks */ .profile-name-row h2 { font-size: 1.5rem; } .cover { height: 150px; } .profile-top { margin-top: -44px; } /* song rows fit narrow screens */ .song-row { grid-template-columns: 56px 1fr auto; gap: 10px; padding: 9px; } .song-cover { width: 56px; height: 56px; } /* Все всплывающие окна — строго по центру экрана (по вертикали и горизонтали), как на десктопе. Раньше на мобильном они прижимались к верху (flex-start), из-за чего разные окна оказывались на разной высоте. */ #modal-host { align-items: center; padding-top: 18px; } /* equalizer: leave room for nav-free fullscreen, larger controls */ .eq-controls { gap: 30px; } .eq-bar { padding-bottom: calc(26px + env(safe-area-inset-bottom)); } } /* equalizer: tappable cover + crisp touch seek anywhere on the bar */ .eq-track, .mp-timeline, .song-timeline { touch-action: none; } .eq-track::before, .mp-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; } .eq-ring { cursor: pointer; } /* polls: clearer selectable state + voted emphasis */ .poll-opt.clickable .poll-mark { transition: border-color .15s ease, background .15s ease; } .poll-opt.clickable:active { transform: scale(.99); } .poll-opt .poll-mark.checked, .poll-opt .poll-mark.correct-mark, .poll-opt .poll-mark.wrong-mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .poll-opt .poll-mark.wrong-mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); } .poll-opt.correct { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .poll-opt.wrong { border-color: color-mix(in srgb, var(--danger) 32%, transparent); } .poll-vote-btn { min-width: 150px; } /* ============================================================ ONLINE card (real-time) ============================================================ */ .online-card { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 22px; border-radius: var(--radius); background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-dark) 50%, transparent)); border: 1px solid var(--accent-border); color: var(--accent); font-family: var(--font-bold); font-weight: 950; font-size: 1.3rem; } .online-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: onlinePulse 2s infinite; } @keyframes onlinePulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .online-card .num { font-variant-numeric: tabular-nums; } .online-card .lbl { color: var(--text-2); font-weight: 800; font-size: .95rem; } /* light theme: soft green card so the "онлайн" label stays readable on PC */ [data-theme="light"] .online-card { background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent) 6%, transparent)); border: 1px solid var(--accent-border); color: var(--accent); } [data-theme="light"] .online-card .lbl { color: var(--text-2); } /* ============================================================ ANIMATIONS — lively feel matching the mockups ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* Только transform/opacity (композитинг на GPU) — blur из кадров убран, он заставлял перерисовывать карточку на каждом кадре и лагал. Ступенчатую задержку внутри порции задаёт JS через style.animationDelay. */ .feed-list > .post, .feed-list > .pinned-label { animation: postIn .42s cubic-bezier(.2,.9,.2,1) both; } @keyframes postIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } .notif, .user-row, .song-row { animation: postIn .4s cubic-bezier(.2,.9,.2,1) both; } .side-card { animation: fadeIn .5s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tab.active, .ptab.active, .seg button.active { transition: background .3s cubic-bezier(.2,.9,.2,1), color .25s ease; } .poll-opt { animation: optIn .3s ease both; } @keyframes optIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } } /* low-end devices: disable heavy entrance blur/animation, keep final look identical */ @media (prefers-reduced-motion: reduce) { .feed-list > .post, .feed-list > .pinned-label, .notif, .user-row, .song-row, .side-card, .poll-opt { animation: none !important; } } /* ---- interactive polish: smooth hover/press feedback everywhere ---- */ .feed { scroll-behavior: smooth; } /* gentle fade when a new page mounts (opacity only — keeps sticky headers intact) */ @media (prefers-reduced-motion: no-preference) { .feed, .right { animation: colFade .32s ease both; } @keyframes colFade { from { opacity: 0; } to { opacity: 1; } } } .notif, .user-row, .song-row { transition: border-color .22s ease, transform .22s cubic-bezier(.2,.9,.2,1), background .22s ease; } .notif:hover, .user-row:hover { border-color: var(--border); transform: translateY(-2px); background: var(--card); } .notif:active, .user-row:active, .song-row:active { transform: scale(.99); } .side-card { transition: border-color .25s ease; } .icon-btn .ic, .nav-item .ic, .ptab .ic, .act .ic { transition: transform .22s cubic-bezier(.2,.9,.2,1); } .icon-btn:hover .ic { transform: scale(1.1); } [data-back]:hover .ic { transform: translateX(-2px); } .poll-opt { transition: border-color .2s ease, transform .15s ease, background .2s ease; } .poll-opt:active { transform: scale(.99); } .song-play, .mp-play, .eq-play { transition: transform .15s cubic-bezier(.2,1.4,.3,1), filter .2s ease; } .song-play:active, .mp-play:active { transform: scale(.88); } .hashtag, .mention { transition: opacity .2s ease; } .hashtag:hover, .mention:hover { opacity: .7; } .profile-avatar { transition: transform .3s cubic-bezier(.2,.9,.2,1), border-color .25s ease; } /* ============================================================ EQUALIZER — stage beams (projectors) + pager (match equalizer_no_square_v2) ============================================================ */ .eq-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; filter: blur(14px); } .eq-beam { position: absolute; top: -8vmin; left: 50%; width: 60vmin; height: 150vmin; opacity: 0; transform-origin: top center; will-change: opacity; clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%); background: linear-gradient(to bottom, var(--eq-c1, rgba(255,255,255,.9)) 0%, transparent 62%), radial-gradient(ellipse 30% 70% at 50% 0%, rgba(255,255,255,.9), transparent 75%); -webkit-mask: linear-gradient(to bottom,#000 0%,#000 30%,transparent 88%); mask: linear-gradient(to bottom,#000 0%,#000 30%,transparent 88%); } .eq-beam.l { transform: translateX(-50%) rotate(-22deg); } .eq-beam.c { width: 50vmin; transform: translateX(-50%) rotate(0deg); } .eq-beam.r { transform: translateX(-50%) rotate(22deg); background: linear-gradient(to bottom, var(--eq-c2, rgba(220,220,220,.75)) 0%, transparent 62%), radial-gradient(ellipse 30% 70% at 50% 0%, rgba(255,255,255,.9), transparent 75%); } .eq-ring { z-index: 3; will-change: transform; } .eq-cover { will-change: transform; transition: box-shadow .3s ease; } .eq-pager { display: flex; gap: 7px; justify-content: center; margin-top: 16px; height: 8px; z-index: 3; position: relative; } .eq-pager .dot { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.28); transition: background .35s, width .35s cubic-bezier(.4,0,.2,1); } .eq-pager .dot.on { background: #fff; width: 20px; } .eq-counter { color: rgba(255,255,255,.4); font-size: 11px; font-variant-numeric: tabular-nums; margin-top: 8px; text-align: center; z-index: 3; position: relative; } /* ============================================================ AUTH — landing + slide-in screens (match agua_9_v26) ============================================================ */ /* стартовый экран сжат так, чтобы Регистрация, «У меня есть аккаунт» и Условия помещались на одном экране без прокрутки */ .land { height: 100dvh; width: 100%; max-width: 480px; margin: 0 auto; padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; overflow-y: auto; } .land-hero { width: calc(100% + 44px); margin: -14px -22px 12px; height: clamp(140px, 22svh, 260px); object-fit: cover; background: var(--card-2); display: block; flex: 0 0 auto; } .land-right { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .land-headline { font-family: var(--font-bold); font-weight: 900; font-size: 1.7rem; line-height: 1.15; text-align: center; } .land-features { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } .land-feature { background: var(--pill); border-radius: 18px; padding: 13px 18px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--border-soft); } .land-feature .lf-ico { width: 30px; height: 30px; flex: 0 0 auto; color: var(--accent); } /* emoji feature icons: the observer swaps the char for an sized 1.2em */ .land-feature .lf-emoji { font-size: 25px; line-height: 1; display: grid; place-items: center; } .land-feature .lf-emoji img.emoji { margin: 0; vertical-align: middle; } .land-feature .lf-ttl { font-family: var(--font-bold); font-weight: 800; font-size: 1.1rem; } .land-feature .lf-sub { font-family: var(--font-light); font-weight: 500; font-size: .9rem; color: var(--text-3); margin-top: 2px; } .land-choose { text-align: center; color: var(--text-3); font-family: var(--font-light); font-weight: 600; font-size: 1.05rem; margin-top: auto; padding: 10px 0; } .btn-register { width: 100%; border: none; background: var(--accent); color: #fff; font-family: var(--font-bold); font-weight: 800; font-size: 1.2rem; padding: 14px; border-radius: 40px; transition: transform .12s ease, filter .12s ease; } .btn-register:active { transform: scale(.97); filter: brightness(.95); } .have-account { display: block; width: 100%; text-align: center; margin-top: 10px; color: var(--accent); font-family: var(--font-bold); font-weight: 700; font-size: 1.05rem; text-decoration: underline; background: none; border: none; } /* desktop / wide: full-bleed split auth — image left full height, content right */ @media (min-width: 900px) { .land { max-width: none; height: 100dvh; padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(420px, 560px); column-gap: 0; align-items: stretch; } .land-hero { grid-column: 1; grid-row: 1; align-self: stretch; width: 100%; height: 100dvh; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0; object-fit: cover; object-position: center; border: 0; box-shadow: none; } .land-right { grid-column: 2; grid-row: 1; flex: 0 0 auto; justify-content: center; padding: 48px clamp(44px, 5vw, 96px); max-width: 620px; margin: 0 auto; width: 100%; } .land-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .land-brand img { width: 44px; height: 44px; } .land-brand span { font-family: var(--font-bold); font-weight: 900; font-size: 1.7rem; } .land-headline { text-align: left; font-size: clamp(2.1rem, 2.6vw, 2.8rem); line-height: 1.08; letter-spacing: -.02em; } .land-features { margin-top: 26px; gap: 12px; } .land-feature { padding: 16px 22px; border-radius: 20px; } .land-feature .lf-ttl { font-size: 1.22rem; } .land-feature .lf-sub { font-size: .98rem; } .land-choose { text-align: left; margin-top: 28px; padding: 0 0 14px; font-size: 1.05rem; } .btn-register { font-size: 1.3rem; padding: 18px; border-radius: 999px; } .have-account { text-align: center; } } /* tablets (portrait & small landscape): comfortable single hero + content */ @media (min-width: 681px) and (max-width: 899px) { .land { max-width: 600px; padding: 22px 26px 30px; } .land-hero { height: clamp(240px, 36svh, 360px); border-radius: 26px; width: calc(100% + 52px); margin: -22px -26px 22px; } .land-headline { font-size: 2rem; } .land-feature { padding: 15px 20px; } } /* hide the desktop-only brand row on phones (hero already shows the logo); scoped so it doesn't override the desktop display:flex declared above */ @media (max-width: 899px) { .land-brand { display: none; } } /* Телефон: картинку сверху показываем крупнее, а текст с плашками сдвигаем ниже — так верхняя плашка видна почти целиком, а не срезана заголовком */ @media (max-width: 680px) { .land-hero { height: clamp(200px, 34svh, 320px); margin-bottom: 18px; } .land-headline { margin-top: 6px; font-size: 1.55rem; } .land-features { margin-top: 14px; } } /* desktop: vertically-centered auth card instead of top-aligned phone form */ @media (min-width: 900px) { .auth-screen { display: flex; flex-direction: column; justify-content: center; padding: 40px; } .auth-screen .auth-header, .auth-err2, .auth-form2 { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; } .auth-screen .auth-header { margin-bottom: 6px; } .auth-bigtitle { font-size: 3rem; } } .auth-screen { position: fixed; inset: 0; z-index: 600; background: #000; color: #fff; padding: clamp(28px,5.5svh,54px) clamp(28px,6vw,58px) 24px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(18px) scale(.985); pointer-events: none; transition: opacity .24s ease, transform .28s cubic-bezier(.2,.85,.25,1), visibility 0s linear .28s; } .auth-screen.is-active { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; } /* уходящий экран при переключении вход↔регистрация↔восстановление: остаётся непрозрачной чёрной подложкой ПОД новым экраном — без вспышки лендинга */ .auth-screen.is-under { visibility: visible; opacity: 1; transform: none; pointer-events: none; transition: none; z-index: 599; } .auth-screen .auth-header { position: relative; height: 88px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; gap: 8px; } .auth-back { width: 58px; height: 58px; border: 2px solid #242426; border-radius: 50%; background: #151517; color: #fff; display: grid; place-items: center; } .auth-back .ic { width: 24px; height: 24px; } .auth-bigtitle { min-width: 0; text-align: center; white-space: nowrap; font-family: var(--font-bold); font-weight: 900; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1; } .auth-form2 { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 24px auto 0; } .auth-code-note { color: #8c8c92; font-size: .82rem; line-height: 1.4; margin: 2px 4px -4px; } .auth-field2 { position: relative; height: 62px; border: 2px solid #242426; border-radius: 999px; background: #151517; display: flex; align-items: center; } .auth-field2 input { width: 100%; height: 100%; border: none; outline: none; background: transparent; color: #fff; padding: 0 56px 0 26px; font-family: var(--font-bold); font-weight: 800; font-size: 1.2rem; } .auth-field2 input::placeholder { color: #4a4a4d; } /* Chrome autofill paints inputs pale blue/navy — force the dark pill look back */ .auth-field2 input:-webkit-autofill, .auth-field2 input:-webkit-autofill:hover, .auth-field2 input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #151517 inset; -webkit-text-fill-color: #fff; caret-color: #fff; border-radius: 999px; } .auth-eye2 { position: absolute; right: 16px; width: 40px; height: 40px; border: 0; background: none; color: #777; display: grid; place-items: center; } .auth-eye2 .ic { width: 24px; height: 24px; } .auth-submit2 { height: 70px; border: 2px solid #242426; border-radius: 999px; background: #343438; color: #8c8c92; font-family: var(--font-bold); font-weight: 800; font-size: 1.7rem; transition: background .16s, border-color .16s, color .16s; } .auth-submit2.is-green { background: var(--accent); border-color: #108900; color: #fff; } .auth-submit2:disabled { pointer-events: none; } .auth-err2 { color: var(--danger); font-weight: 800; text-align: center; min-height: 20px; max-width: 460px; margin: 10px auto 0; } /* ---------- Registration: multi-step + contact verification ---------- */ .reg-steps { width: 100%; max-width: 460px; margin: 6px auto 0; } .reg-step { display: none; flex-direction: column; gap: 14px; } .reg-step.is-active { display: flex; animation: regfade .25s ease; } @keyframes regfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .reg-hint { color: #9a9aa0; font-weight: 700; font-size: .98rem; line-height: 1.4; margin-bottom: 2px; } .reg-back-step { background: none; border: 0; color: #8c8c92; font-weight: 800; font-size: 1.05rem; padding: 6px; } .reg-service { border: 2px solid #242426; border-radius: 22px; background: #131315; padding: 16px; transition: border-color .2s; } .reg-service.is-connected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .reg-svc-head { display: flex; align-items: center; gap: 12px; } .reg-svc-ico { width: 46px; height: 46px; border-radius: 14px; background: #1d1d20; display: grid; place-items: center; color: #fff; flex: 0 0 auto; } .reg-svc-ico .ic { width: 24px; height: 24px; } .reg-svc-meta { flex: 1; min-width: 0; } .reg-svc-ttl { font-family: var(--font-bold); font-weight: 900; font-size: 1.12rem; color: #fff; } .reg-svc-sub { color: #8a8a8e; font-weight: 700; font-size: .9rem; } .reg-svc-check { color: var(--accent); width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; } .reg-svc-check .ic { width: 26px; height: 26px; stroke-width: 3; } .reg-svc-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .reg-service.is-connected .reg-svc-body { display: none; } .reg-svc-row { display: flex; gap: 8px; } .reg-svc-input { flex: 1; min-width: 0; height: 52px; border: 2px solid #242426; border-radius: 14px; background: #0e0e10; color: #fff; padding: 0 16px; font-weight: 800; font-size: 1.05rem; outline: none; } .reg-svc-input:disabled { opacity: .6; } .reg-svc-input::placeholder { color: #4a4a4d; } .reg-svc-btn { flex: 0 0 auto; padding: 0 18px; height: 52px; border: 0; border-radius: 14px; background: #343438; color: #fff; font-family: var(--font-bold); font-weight: 800; font-size: 1.02rem; } .reg-svc-btn:hover { background: #3f3f44; } .reg-svc-note { color: #74747a; font-weight: 700; font-size: .82rem; line-height: 1.35; } .reg-bot-link { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; background: #232a33; border: 1px solid #2f3947; color: #cfe3ff; font-weight: 800; font-size: .95rem; text-decoration: none; } .reg-bot-link:hover { background: #28313c; } .reg-bot-link .ic { width: 20px; height: 20px; color: #4aa3ff; flex: 0 0 auto; } .reg-svc-dev { color: var(--accent); font-weight: 800; font-size: .92rem; } .reg-svc-err { color: var(--danger); font-weight: 800; font-size: .9rem; min-height: 16px; } /* ---------- Брендовые кнопки входа (Gmail / Telegram / Лингуи) ---------- */ .svc-auth-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; border: 0; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: transform .15s ease, filter .2s ease, box-shadow .2s ease; } .svc-auth-btn:hover { filter: brightness(1.07); } .svc-auth-btn:active { transform: scale(.98); } .svc-auth-btn svg, .svc-auth-btn img, .svc-auth-btn .ic { width: 22px; height: 22px; flex: 0 0 auto; } .svc-google { background: #fff; color: #1f1f1f; box-shadow: 0 10px 30px rgba(255,255,255,.09); } .svc-tg { background: #229ED9; color: #fff; box-shadow: 0 10px 30px rgba(34,158,217,.28); } .svc-lingui { background: linear-gradient(135deg, #4a6cf7, #8a5cff); color: #fff; box-shadow: 0 10px 30px rgba(122,92,255,.3); } .svc-lingui img { border-radius: 7px; } /* голый ряд: кнопка + строка ошибки, без карточки вокруг */ .svc-row { display: flex; flex-direction: column; gap: 4px; } .svc-row .reg-svc-err { min-height: 0; text-align: center; } .svc-row .reg-svc-err:empty { display: none; } .svc-auth-btn .svc-ok { display: grid; place-items: center; margin-left: -4px; } .svc-auth-btn .svc-ok .ic { width: 22px; height: 22px; } .svc-row.is-connected .svc-auth-btn { pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 65%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 25%, transparent); } .svc-row.is-connected .svc-ok { color: var(--accent); animation: otpPop .3s cubic-bezier(.2,1.4,.3,1); } .svc-row.is-connected .svc-tg .svc-ok, .svc-row.is-connected .svc-lingui .svc-ok { color: #fff; } /* ---------- Экран привязки Gmail/Telegram (внутри сайта, поверх регистрации) ---------- */ .verify-screen { z-index: 620; } .vs-body { width: 100%; max-width: 460px; margin: 6px auto 0; display: flex; flex-direction: column; gap: 12px; } .vs-logo { width: 74px; height: 74px; border-radius: 22px; margin: 6px auto 0; background: #151517; border: 2px solid #242426; display: grid; place-items: center; box-shadow: 0 12px 34px rgba(0,0,0,.5); } .vs-logo svg { width: 36px; height: 36px; } .vs-logo .ic { width: 36px; height: 36px; color: #229ED9; } .vs-hint { text-align: center; color: #8a8a8e; font-weight: 700; font-size: .98rem; line-height: 1.4; } .vs-send { height: 60px; font-size: 1.25rem; } .vs-code { display: flex; flex-direction: column; gap: 8px; } /* «Gmail: адрес — Изменить» после отправки кода */ .vs-sum { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: .95rem; color: #8a8a8e; font-weight: 700; } .vs-sum b { color: #fff; font-weight: 800; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-edit { background: none; border: 0; color: var(--accent); font-weight: 800; font-size: .95rem; padding: 4px 6px; cursor: pointer; } .vs-edit:hover { text-decoration: underline; text-underline-offset: 3px; } .vs-resend { background: none; border: 0; color: #8c8c92; font-weight: 800; font-size: .98rem; padding: 8px; margin: 2px auto 0; } .vs-resend:hover { color: #c4c4ca; } /* кнопки модалки столбиком, во всю ширину (2FA-код, облачный пароль) */ .modal-actions-col { flex-direction: column; align-items: stretch; gap: 8px; } .modal-actions-col .btn { width: 100%; } /* новый комментарий мягко въезжает сверху (без перезагрузки списка) */ .comment.cm-new { animation: cmNew .45s cubic-bezier(.2,.9,.25,1) both !important; } @keyframes cmNew { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .comment.cm-new { animation: none !important; } } /* ---------- OTP: 6 стеклянных клеток для кода подтверждения ---------- */ .otp-title { color: #8a8a8e; font-weight: 800; font-size: .88rem; margin: 2px 0 8px; letter-spacing: .02em; text-align: center; } .otp-box { position: relative; } /* настоящий input — невидимый, растянут поверх клеток (фокус/вставка/автозаполнение) */ .otp-real { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: .011; border: 0; outline: none; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; /* 16px — iOS не зумит */ -webkit-text-fill-color: transparent; } .otp-cells { display: flex; gap: 8px; justify-content: center; } .otp-cell { flex: 1 1 0; min-width: 0; max-width: 58px; height: 62px; display: grid; place-items: center; font-family: var(--font-bold); font-weight: 900; font-size: 1.55rem; color: #fff; border: 2px solid #242426; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 60%), #131315; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; } .otp-cell.is-active { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 22px color-mix(in srgb, var(--accent) 28%, transparent); } /* мигающий «каретка»-огонёк в активной клетке */ .otp-cell.is-active::after { content: ''; width: 3px; height: 26px; border-radius: 2px; background: var(--accent); animation: otpCaret 1s steps(2, jump-none) infinite; } @keyframes otpCaret { 50% { opacity: 0; } } .otp-cell.is-filled { border-color: #3a3a40; background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 60%), #17171a; } .otp-cell.is-pop { animation: otpPop .26s cubic-bezier(.2,1.4,.3,1); } @keyframes otpPop { 0% { transform: scale(.78); } 60% { transform: scale(1.09); } 100% { transform: scale(1); } } /* неверный код — коробка трясётся */ .otp-box.is-shake { animation: otpShake .4s cubic-bezier(.36,.07,.19,.97); } @keyframes otpShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } @media (prefers-reduced-motion: reduce) { .otp-cell.is-pop, .otp-box.is-shake { animation: none; } } /* forgot password */ .land-help { display: block; margin: 4px auto 8px; background: none; border: 0; color: var(--text-3); font-weight: 700; font-size: .92rem; padding: 6px 12px; text-decoration: underline; text-underline-offset: 3px; } .land-help:hover { color: var(--text-2); } /* приподнято: на телефонах ссылки упирались в самый низ экрана (за жест-бар) */ .land-legal { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 6px 0 14px; padding-bottom: env(safe-area-inset-bottom, 0px); } .land-legal a { color: var(--text-3); font-size: .85rem; font-weight: 600; text-decoration: none; } .land-legal a:hover { color: var(--text-2); text-decoration: underline; } .land-legal span { color: var(--text-3); font-size: .85rem; } /* Возрастной гейт + согласие с условиями в регистрации */ .reg-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 2px 14px; color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.35; cursor: pointer; } .reg-consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); cursor: pointer; } .reg-consent a { color: var(--accent); text-decoration: underline; } .auth-forgot-link { display: block; width: 100%; max-width: 460px; margin: 14px auto 0; background: none; border: 0; color: #8c8c92; font-weight: 800; font-size: 1.05rem; padding: 8px; } .auth-forgot-link:hover { color: #c4c4ca; } .fp-method { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 10px; border: 2px solid #242426; border-radius: 16px; background: #131315; color: #fff; font-weight: 800; font-size: 1.05rem; text-align: left; transition: border-color .18s, background .18s; } .fp-method .ic { width: 24px; height: 24px; color: var(--accent); flex: 0 0 auto; } .fp-method:hover { border-color: #3a3a3f; } .fp-method.is-chosen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .fp-method .fp-masked { margin-left: auto; color: #8a8a8e; font-weight: 700; font-size: .95rem; } /* tablets only — on ≥900px the .land grid layout must keep max-width:none, otherwise the hero column collapses to 0 and the left half goes black */ @media (min-width: 760px) and (max-width: 899px) { .land { max-width: 520px; } } @media (min-width: 760px) { .auth-form2, .auth-err2 { max-width: 520px; } } @media (max-width: 380px) { .auth-screen { padding-left: 20px; padding-right: 20px; } .auth-screen .auth-header { grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 6px; } .auth-back { width: 52px; height: 52px; } .auth-bigtitle { font-size: clamp(1.9rem, 8.2vw, 2.4rem); } } /* ============================================================ FIXES — nav avatar, player buttons, mobile bottom bar ============================================================ */ /* avatar inside the nav (profile item) */ .nav-avatar { flex: 0 0 auto; } .profile-nav-item { gap: 14px; } .profile-nav-item span:not(.avatar) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* follow notification: actor avatar + text + follow-back button */ .n-follow { flex: 0 0 auto; min-height: 38px; padding: 0 16px; font-size: .92rem; } /* tablet (681–1100px): centered, width-capped feed so posts don't stretch */ @media (min-width: 681px) and (max-width: 1100px) { .shell { grid-template-columns: 92px minmax(0, 1fr); } .feed { max-width: 780px; margin: 0 auto; padding: 0 18px; } .post { padding: 22px; } .nav-item { min-height: 64px; } } /* equalizer: keep round buttons perfectly round (no flatten on mobile) */ .eq-controls { gap: 32px; flex: 0 0 auto; } .eq-controls button { flex: 0 0 auto; } .eq-play { width: 64px; height: 64px; min-width: 64px; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; } .eq-controls .nav { width: 48px; height: 48px; border-radius: 50%; } .eq-roundbtn { flex: 0 0 auto; aspect-ratio: 1 / 1; } .eq-top { gap: 12px; } .eq-now { overflow: hidden; } /* equalizer layout safety: stack stays inside, bar never overlaps the meta */ .eq-stage { padding: 0 16px; } .eq-ring { flex: 0 0 auto; } .eq-meta { flex: 0 0 auto; } .eq-bar { gap: 14px; } /* mini player: lock control sizes so nothing squishes */ .miniplayer { gap: 10px; padding: 8px 10px; } .mp-cover, .mp-play, .mp-close { flex: 0 0 auto; aspect-ratio: 1 / 1; } .mp-play { width: 42px; height: 42px; border-radius: 50%; padding: 0; } @media (max-width: 680px) { /* fullscreen player: smaller ring so meta + controls always fit, bar reachable */ .eq-ring { width: min(64vmin, 300px); } .eq-meta { margin-top: 20px; } .eq-title { font-size: 1.25rem; } .eq-controls { gap: 28px; } .eq-play { width: 60px; height: 60px; min-width: 60px; } .eq-controls .nav { width: 44px; height: 44px; } .eq-bar { padding: 12px 18px calc(20px + env(safe-area-inset-bottom)); } .eq-top { top: calc(10px + env(safe-area-inset-top)); padding: 0 12px; } /* bottom nav bar: even items, centered icons/avatar, badge tidy */ .nav { padding: 7px 8px; gap: 4px; } .nav-item { min-height: 50px; } .nav-item .ic { width: 26px; height: 26px; } .nav-avatar { width: 30px !important; height: 30px !important; font-size: 13px !important; } .profile-nav-item { gap: 0; } .nav-item .badge { top: 3px; left: calc(50% + 6px); transform: none; min-width: 17px; height: 17px; font-size: 10px; } /* mini player above the bottom bar feel: keep it clearly tappable */ .miniplayer { top: calc(6px + env(safe-area-inset-top) + var(--pill-shift, 0px)); width: calc(100vw - 14px); } .mp-title { font-size: .92rem; } } /* very short screens (landscape phones): shrink the player ring further */ @media (max-height: 560px) { .eq-ring { width: min(46vmin, 240px); } .eq-meta { margin-top: 12px; } .eq-play { width: 54px; height: 54px; min-width: 54px; } } /* ============================================================ BUG SWEEP — mini-player overlap, mobile overflow, polish ============================================================ */ /* mini-player no longer bends sticky page titles; reserve space in the scrollport instead */ body.mini-on .feed { padding-top: 82px; } .mp-cover, .mp-play, .mp-close { border: 0; padding: 0; } /* search "Рекомендуем почитать" account rows: button never squishes, text truncates */ .user-row .grow { min-width: 0; } .user-row .grow .dname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .user-row .name-row { min-width: 0; flex-wrap: nowrap; } @media (max-width: 680px) { body.mini-on .feed { padding-top: 86px; } /* post action row: fit on one line; scroll sideways if it can't */ .post-actions { gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .post-actions::-webkit-scrollbar { display: none; } .action-left, .action-right { gap: 8px; } .act, .pill { min-height: 42px; padding: 0 12px; font-size: .95rem; flex: 0 0 auto; } .act .ic { width: 20px; height: 20px; } .act.icon-pill { width: 42px; min-width: 42px; } /* view counts now visible on phones & tablets too */ .views { display: inline-flex; flex: 0 0 auto; font-size: .9rem; } /* composer toolbar stays on one tidy row; publish never wraps away */ .composer-tools { gap: 6px; flex-wrap: wrap; } .composer-tools .icon-btn { width: 44px; height: 44px; } .composer-tools .btn.primary { flex: 1 1 auto; min-width: 130px; } /* account rows / follow buttons readable on narrow screens */ .n-follow { padding: 0 13px; font-size: .85rem; min-height: 36px; } .user-row { gap: 11px; padding: 12px; } /* settings tabs and segmented controls scroll cleanly */ .set-tabs { -webkit-overflow-scrolling: touch; } .set-tabs::-webkit-scrollbar { display: none; } /* profile action buttons fit: БЕЗ переноса (при wrap верхний ряд кнопок («Смотреть», ⋯) вылезал на обложку) — просто компактнее в один ряд */ .profile-actions { gap: 6px; flex-wrap: nowrap; justify-content: flex-end; } .profile-actions .btn { padding: 0 14px; height: 38px; font-size: .9rem; white-space: nowrap; } .profile-actions .icon-btn { width: 38px; height: 38px; flex: none; } /* prevent any element from forcing horizontal page scroll */ .post, .settings-section, .profile-header, .side-card, .notif, .user-row, .song-row { max-width: 100%; } .post-body, .comment-text, .pf-name, .pa-title, .mp-title { overflow-wrap: anywhere; } } /* view transition */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; } } /* ============================================================ v17 additions — gender / age / location / lists / viewer / media lock ============================================================ */ /* gender selector */ .gender-pick { display: flex; gap: 8px; } .gender-opt { flex: 1; min-height: 50px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); color: var(--text-2); font-family: var(--font-bold); font-weight: 900; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; } .gender-opt:active { transform: scale(.97); } .gender-opt.active { background: var(--accent-dark); color: var(--accent); border-color: transparent; } /* «Убрать возраст» / «Убрать пол» — тихая кнопка-сброс под контролом */ .field-clear { display: inline-flex; align-items: center; margin-top: 8px; padding: 6px 12px; border: 1px dashed var(--border); border-radius: 999px; background: transparent; color: var(--text-3); font-weight: 800; font-size: .84rem; transition: color .2s ease, border-color .2s ease, transform .12s ease; } .field-clear:hover { color: var(--text); border-color: var(--text-3); } .field-clear:active { transform: scale(.95); } /* age slider */ .range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--pill); outline: none; margin: 10px 0 4px; } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card-2); box-shadow: 0 4px 12px rgba(0,0,0,.4); cursor: pointer; transition: transform .15s ease; } .range::-webkit-slider-thumb:active { transform: scale(1.15); } .range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card-2); cursor: pointer; } .field label #age-val { color: var(--accent); font-family: var(--font-bold); } /* location autocomplete */ .loc-wrap { position: relative; } .loc-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: none; } .loc-suggest.open { display: block; animation: modalIn .2s ease both; } .loc-item { display: block; width: 100%; text-align: left; padding: 13px 16px; border: 0; background: transparent; color: var(--text); font-weight: 700; border-bottom: 1px solid var(--border-soft); transition: background .15s ease; } .loc-item:last-child { border-bottom: 0; } .loc-item:hover { background: var(--pill); } /* clickable follower/following stats */ .stat-btn { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; padding: 4px 8px; margin: -4px -8px; border-radius: 12px; cursor: pointer; transition: background .18s ease, transform .12s ease; } .stat-btn b { font-family: var(--font-bold); font-weight: 950; } .stat-btn:hover { background: var(--pill); } .stat-btn:active { transform: scale(.96); } /* follow list modal */ .follow-list { max-height: 60vh; overflow-y: auto; margin: 4px -6px 0; } .follow-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 16px; cursor: pointer; transition: background .18s ease; } .follow-row:hover { background: var(--pill); } .follow-row .grow { min-width: 0; } .follow-row .dname { font-family: var(--font-bold); font-weight: 900; font-size: 1.02rem; } .follow-row .uname { color: var(--accent); font-weight: 800; font-size: .9rem; } /* viewer counter + dots */ .viewer-counter { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-weight: 800; font-size: .9rem; background: rgba(255,255,255,.12); padding: 6px 14px; border-radius: 999px; } .viewer-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 7px; } .viewer-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .25s ease, width .25s ease; } .viewer-dots span.on { background: #fff; width: 20px; border-radius: 999px; } .viewer-nav { transition: background .2s ease, transform .15s ease; } .viewer-nav:active { transform: translateY(-50%) scale(.9); } .viewer-nav.next:active { transform: translateY(-50%) rotate(180deg) scale(.9); } /* media download lock (best-effort) */ img, video { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } .media-grid .cell img, .media-grid .cell video, .viewer-stage img, .viewer-stage video, .cover img, .cover video { pointer-events: auto; } /* ============================================================ Оформление (skins / palettes) ============================================================ */ .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .skin-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--border); background: var(--pill); border-radius: 16px; cursor: pointer; } .skin-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .skin-name { font-weight: 900; font-size: .82rem; color: var(--text-2); } .skin-swatch { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid var(--border); display: block; position: relative; } .skin-swatch i { position: absolute; inset: 0; display: block; } /* mini-previews that hint at each skin */ .skin-swatch[data-sk="space"] { background: radial-gradient(circle at 30% 30%, #fff 1px, transparent 1.6px), radial-gradient(circle at 70% 60%, #cfd2ff 1px, transparent 1.6px), #000; background-size: 14px 14px, 18px 18px, 100% 100%; } .skin-swatch[data-sk="space"] i { background: transparent !important; } .skin-swatch[data-sk="murmansk"] i { background: linear-gradient(180deg, #0a1a30, #4be3a5 140%) !important; } .skin-swatch[data-sk="instagram"] i { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf) !important; } .skin-swatch[data-sk="tiktok"] i { background: linear-gradient(135deg, #25f4ee 0 50%, #fe2c55 50% 100%) !important; } /* animated background layer */ #skin-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; } /* Each skin = signature accent (theme-independent) + dark & light surfaces, so it works in both themes. Space & Murmansk are night-only (dark + animated bg). */ /* ---- Лес ---- */ [data-skin="forest"] { --accent:#4caf50; --accent-strong:#43a047; --blue:#66bb6a; } [data-theme="dark"][data-skin="forest"] { --bg:#0c140e; --bg-2:#0a1109; --card:#111d14; --card-2:#0b160e; --pill:#16261a; --pill-2:#1d3322; --accent-dark:#14361d; --text:#eaf3ea; --text-2:#b3c9b6; --text-3:#7d9a82; --border:rgba(120,200,130,.14); --border-soft:rgba(120,200,130,.07); } [data-theme="light"][data-skin="forest"] { --bg:#eef4ef; --bg-2:#e5efe7; --card:#ffffff; --card-2:#f3f8f4; --pill:#e3efe6; --pill-2:#d6e8da; --accent-dark:#cdeed7; --text:#16291b; --text-2:#41594a; --text-3:#6c8472; --border:rgba(30,120,60,.16); --border-soft:rgba(30,120,60,.08); } /* ---- Сакура ---- */ [data-skin="sakura"] { --accent:#ed6ea0; --accent-strong:#e0588f; --blue:#d56aa0; } [data-theme="dark"][data-skin="sakura"] { --bg:#170f12; --bg-2:#110a0d; --card:#221319; --card-2:#180f12; --pill:#2c1a21; --pill-2:#3a232c; --accent-dark:#3a1622; --text:#fbe9f0; --text-2:#d6b9c5; --text-3:#9b8490; --border:rgba(237,110,160,.16); --border-soft:rgba(237,110,160,.08); } [data-theme="light"][data-skin="sakura"] { --bg:#fdeef2; --bg-2:#fbe3ea; --card:#ffffff; --card-2:#fff4f7; --pill:#fce4ec; --pill-2:#f8d3e0; --accent-dark:#ffd9e6; --text:#3a2230; --text-2:#6e5460; --text-3:#9b8490; --border:rgba(180,80,120,.16); --border-soft:rgba(180,80,120,.08); } /* ---- Snapchat ---- */ [data-skin="snapchat"] { --accent:#ffd400; --accent-strong:#f0c800; --blue:#0aa3c2; } [data-theme="dark"][data-skin="snapchat"] { --bg:#14140a; --bg-2:#0e0e06; --card:#1d1d12; --card-2:#13130b; --pill:#26260f; --pill-2:#33330f; --accent-dark:#3a3410; --text:#fdf7cf; --text-2:#cfca97; --text-3:#9a9568; --border:rgba(255,212,0,.16); --border-soft:rgba(255,212,0,.08); } [data-theme="light"][data-skin="snapchat"] { --bg:#fff7cc; --bg-2:#fff2a8; --card:#ffffff; --card-2:#fffde0; --pill:#fff39e; --pill-2:#ffec70; --accent-dark:#fff39e; --text:#1a1a0a; --text-2:#44441f; --text-3:#6a6638; --border:rgba(0,0,0,.14); --border-soft:rgba(0,0,0,.07); } /* ---- Instagram ---- */ [data-skin="instagram"] { --accent:#e1306c; --accent-strong:#c92a60; --blue:#5851db; } [data-theme="dark"][data-skin="instagram"] { --bg:#0a0a0a; --bg-2:#000; --card:#161616; --card-2:#0e0e0e; --pill:#222; --pill-2:#2c2c2c; --accent-dark:#3a0f23; --text:#fafafa; --text-2:#c4c4c4; --text-3:#8e8e8e; --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.06); } [data-theme="light"][data-skin="instagram"] { --bg:#fafafa; --bg-2:#f0f0f0; --card:#ffffff; --card-2:#f7f7f7; --pill:#efefef; --pill-2:#e3e3e3; --accent-dark:#fbe0ea; --text:#1a1a1a; --text-2:#555; --text-3:#888; --border:rgba(0,0,0,.12); --border-soft:rgba(0,0,0,.06); } /* ---- Reddit ---- */ [data-skin="reddit"] { --accent:#ff4500; --accent-strong:#e03d00; --blue:#ff4500; } [data-theme="dark"][data-skin="reddit"] { --bg:#1a1a1b; --bg-2:#121213; --card:#1f1f20; --card-2:#161617; --pill:#272729; --pill-2:#343536; --accent-dark:#3a1500; --text:#d7dadc; --text-2:#b3b6b8; --text-3:#818384; --border:rgba(255,255,255,.10); --border-soft:rgba(255,255,255,.05); } [data-theme="light"][data-skin="reddit"] { --bg:#f6f7f8; --bg-2:#eef0f1; --card:#ffffff; --card-2:#f8f9fa; --pill:#eef0f1; --pill-2:#e2e4e6; --accent-dark:#ffe2d6; --text:#1a1a1b; --text-2:#4a4d50; --text-3:#787c7e; --border:rgba(0,0,0,.12); --border-soft:rgba(0,0,0,.06); } /* ---- TikTok ---- */ [data-skin="tiktok"] { --accent:#fe2c55; --accent-strong:#e0244a; --blue:#25f4ee; } [data-theme="dark"][data-skin="tiktok"] { --bg:#000; --bg-2:#060606; --card:#121214; --card-2:#0a0a0c; --pill:#1c1c1e; --pill-2:#262628; --accent-dark:#3a0a16; --text:#ffffff; --text-2:#c7c7cc; --text-3:#8e8e93; --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.06); } [data-theme="light"][data-skin="tiktok"] { --bg:#f8f8f8; --bg-2:#efefef; --card:#ffffff; --card-2:#f5f5f5; --pill:#eeeeef; --pill-2:#e2e2e4; --accent-dark:#ffdbe2; --text:#111; --text-2:#4a4a4f; --text-3:#7c7c82; --border:rgba(0,0,0,.12); --border-soft:rgba(0,0,0,.06); } /* ---- YouTube ---- */ [data-skin="youtube"] { --accent:#ff0000; --accent-strong:#cc0000; --blue:#3ea6ff; } [data-theme="dark"][data-skin="youtube"] { --bg:#0f0f0f; --bg-2:#000; --card:#1f1f1f; --card-2:#181818; --pill:#272727; --pill-2:#323232; --accent-dark:#3a0000; --text:#f1f1f1; --text-2:#aaaaaa; --text-3:#888888; --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.06); } [data-theme="light"][data-skin="youtube"] { --bg:#f9f9f9; --bg-2:#f0f0f0; --card:#ffffff; --card-2:#f6f6f6; --pill:#ececec; --pill-2:#e0e0e0; --accent-dark:#ffd6d6; --text:#0f0f0f; --text-2:#4a4a4a; --text-3:#808080; --border:rgba(0,0,0,.12); --border-soft:rgba(0,0,0,.06); } /* ---- Space (dark = white stars on black · light = black stars on white) ---- */ [data-skin="space"] body { background: transparent; } [data-theme="dark"][data-skin="space"] { --bg:#000; --bg-2:#050507; --card:#0c0c12; --card-2:#08080c; --pill:#15151e; --pill-2:#1e1e2a; --accent:#cfd2ff; --accent-strong:#b8bbf0; --accent-dark:#1a1a2e; --blue:#9aa0ff; --text:#f5f6ff; --text-2:#b9bcd0; --text-3:#7e8196; --border:rgba(180,185,255,.14); --border-soft:rgba(180,185,255,.07); } [data-theme="light"][data-skin="space"] { --bg:#ffffff; --bg-2:#f3f3f7; --card:#ffffff; --card-2:#f6f6fa; --pill:#ececf2; --pill-2:#e0e0ea; --accent:#2b2b3c; --accent-strong:#1d1d2a; --accent-dark:#dadae6; --blue:#4a4a6a; --text:#0a0a12; --text-2:#44445a; --text-3:#76768c; --border:rgba(20,20,40,.14); --border-soft:rgba(20,20,40,.07); } [data-skin="space"] #skin-bg { display: block; overflow: hidden; } [data-skin="space"] #skin-bg::before, [data-skin="space"] #skin-bg::after { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background-size: 320px 320px; animation: starDrift 90s linear infinite, twinkle 5s ease-in-out infinite alternate; } [data-skin="space"] #skin-bg::after { background-size: 200px 200px; opacity: .55; animation-duration: 150s, 7s; } [data-theme="dark"][data-skin="space"] #skin-bg { background: radial-gradient(ellipse at 50% -10%, #0c0c22, #000 72%); } [data-theme="dark"][data-skin="space"] #skin-bg::before, [data-theme="dark"][data-skin="space"] #skin-bg::after { background-image: radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent), radial-gradient(1.4px 1.4px at 70% 60%, #cfd2ff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1.2px 1.2px at 85% 20%, #aab2ff, transparent), radial-gradient(2px 2px at 60% 38%, #fff, transparent), radial-gradient(1px 1px at 12% 68%, #fff, transparent); } [data-theme="light"][data-skin="space"] #skin-bg { background: radial-gradient(ellipse at 50% -10%, #eef0ff, #fff 72%); } [data-theme="light"][data-skin="space"] #skin-bg::before, [data-theme="light"][data-skin="space"] #skin-bg::after { background-image: radial-gradient(1.6px 1.6px at 20% 30%, #000, transparent), radial-gradient(1.4px 1.4px at 70% 60%, #222, transparent), radial-gradient(1px 1px at 40% 80%, #000, transparent), radial-gradient(1.2px 1.2px at 85% 20%, #333, transparent), radial-gradient(2px 2px at 60% 38%, #000, transparent), radial-gradient(1px 1px at 12% 68%, #000, transparent); } @keyframes starDrift { from { transform: translate(0,0); } to { transform: translate(160px,160px); } } @keyframes twinkle { from { opacity: .45; } to { opacity: 1; } } /* ---- Мурманск (dark = night + aurora · light = snowy day) ---- */ [data-skin="murmansk"] body { background: transparent; } [data-theme="dark"][data-skin="murmansk"] { --bg:#060d1a; --bg-2:#040a14; --card:#0c1828; --card-2:#081320; --pill:#122236; --pill-2:#1a2f48; --accent:#6fd3ff; --accent-strong:#4fc0f0; --accent-dark:#0e2436; --blue:#6fd3ff; --text:#eaf4ff; --text-2:#b3c8de; --text-3:#7e95ad; --border:rgba(120,200,255,.14); --border-soft:rgba(120,200,255,.07); } [data-theme="light"][data-skin="murmansk"] { --bg:#eaf3fb; --bg-2:#dceaf6; --card:#ffffff; --card-2:#f2f8fd; --pill:#e0ecf7; --pill-2:#cfe0f0; --accent:#1f8fd0; --accent-strong:#1a7ab4; --accent-dark:#cfe6f7; --blue:#1f8fd0; --text:#0c2030; --text-2:#3c5468; --text-3:#6c849a; --border:rgba(30,110,170,.16); --border-soft:rgba(30,110,170,.08); } [data-skin="murmansk"] #skin-bg { display: block; overflow: hidden; } [data-theme="dark"][data-skin="murmansk"] #skin-bg { background: linear-gradient(180deg, #06101f 0%, #060d1a 60%); } [data-theme="dark"][data-skin="murmansk"] #skin-bg::before { content: ''; position: absolute; top: -25%; left: -25%; right: -25%; height: 85%; background: radial-gradient(60% 55% at 30% 30%, rgba(74,227,165,.42), transparent 70%), radial-gradient(55% 45% at 70% 22%, rgba(111,211,255,.38), transparent 70%), radial-gradient(45% 45% at 52% 42%, rgba(160,120,255,.28), transparent 72%); filter: blur(55px); animation: aurora 14s ease-in-out infinite alternate; } [data-theme="light"][data-skin="murmansk"] #skin-bg { background: linear-gradient(180deg, #dff0ff 0%, #eaf3fb 60%); } [data-theme="light"][data-skin="murmansk"] #skin-bg::before { content: ''; position: absolute; top: -25%; left: -25%; right: -25%; height: 85%; background: radial-gradient(60% 55% at 30% 30%, rgba(74,227,165,.25), transparent 70%), radial-gradient(55% 45% at 70% 22%, rgba(111,180,255,.28), transparent 70%), radial-gradient(45% 45% at 52% 42%, rgba(160,140,255,.18), transparent 72%); filter: blur(55px); animation: aurora 16s ease-in-out infinite alternate; } @keyframes aurora { 0% { transform: translateX(-6%) skewX(-5deg) scaleY(1); opacity: .55; } 50% { opacity: .9; } 100% { transform: translateX(8%) skewX(5deg) scaleY(1.18); opacity: .6; } } /* ---- Readability fixes: white button text on saturated accents ---- */ [data-skin="instagram"] .btn.primary, [data-skin="reddit"] .btn.primary, [data-skin="tiktok"] .btn.primary, [data-skin="youtube"] .btn.primary { color: #fff; } /* Snapchat: yellow accent is unreadable as text — use a dark gold for mentions/links */ [data-skin="snapchat"] .mention { color: #8a6a00; } [data-theme="light"][data-skin="snapchat"] { --accent-ink: #1a1400; } [data-theme="light"][data-skin="snapchat"] .btn.primary { color: var(--accent-ink); } /* Light Space: accent is near-black, so primary-button text must be white (not dark) */ [data-theme="light"][data-skin="space"] { --accent-ink: #fff; } [data-theme="light"][data-skin="space"] .btn.primary { color: var(--accent-ink); } /* Dark Space: pale accent — black button text reads better than the default dark green */ [data-theme="dark"][data-skin="space"] { --accent-ink: #111; } [data-theme="dark"][data-skin="space"] .btn.primary { color: var(--accent-ink); } @media (prefers-reduced-motion: reduce) { #skin-bg::before, #skin-bg::after { animation: none !important; } } /* ============================================================ Boards (Pinterest-style) ============================================================ */ /* окно «Сохранить»: избранное + доски */ .bp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bp-head h3 { margin: 0; } .bp-head-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .bp-head-ic .ic { width: 22px; height: 22px; } .bp-sub { color: var(--text-3); font-size: .82rem; font-weight: 700; margin-top: 2px; } .board-picker #bp-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; } .bp-create { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 14px; margin-top: 2px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--accent); border-radius: 16px; font-weight: 900; cursor: pointer; transition: background .2s ease, transform .12s ease; } .bp-create:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); } .bp-create:active { transform: scale(.98); } .bp-create .ic { width: 20px; height: 20px; } .bp-board { display: flex; align-items: center; gap: 12px; padding: 9px; border: 1.5px solid var(--border-soft); background: var(--card); border-radius: 18px; text-align: left; cursor: pointer; animation: chatItemIn .3s cubic-bezier(.2,.9,.3,1.1) both; transition: border-color .2s ease, background .2s ease, transform .12s ease; } .bp-board:hover { background: var(--pill); } .bp-board:active { transform: scale(.985); } .bp-board.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); } .bp-cover { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 14px; overflow: hidden; background: var(--pill-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); } .bp-cover img, .bp-cover video { width: 100%; height: 100%; object-fit: cover; } .bp-cover .ic { width: 22px; height: 22px; flex: 0 0 auto; } .bp-cover.empty { border: 0; color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); } .bp-name { flex: 1; min-width: 0; font-weight: 900; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .bp-name, .bp-meta { white-space: nowrap; text-overflow: ellipsis; } .bp-meta { font-weight: 700; font-size: .78rem; color: var(--text-3); overflow: hidden; } /* чек-кружок: пустой контур → при сохранении заливается акцентом */ .bp-check { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--border); color: transparent; display: grid; place-items: center; transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s cubic-bezier(.2,.9,.3,1.4); } .bp-board.on .bp-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: scale(1.08); } .bp-check .ic { width: 15px; height: 15px; } /* boards strip on the profile favorites tab */ .profile-boards { margin-bottom: 16px; } .boards-head { font-family: var(--font-bold); font-weight: 950; font-size: 1.05rem; margin: 2px 2px 10px; } .boards-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .boards-row::-webkit-scrollbar { display: none; } .boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .board-card { display: flex; flex-direction: column; gap: 6px; background: var(--card-2); border: 1px solid var(--border-soft); border-radius: 16px; padding: 8px; cursor: pointer; } .board-card-cover { width: 100%; aspect-ratio: 1.3 / 1; border-radius: 12px; overflow: hidden; background: var(--pill); display: flex; align-items: center; justify-content: center; color: var(--text-3); } .board-card-cover img, .board-card-cover video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .board-card-cover .ic { width: 30px; height: 30px; flex: 0 0 auto; display: block; margin: 0; } .board-card-cover.empty { background: var(--pill); border: 1px dashed var(--border); } .board-card-name { font-weight: 900; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-card-meta { font-size: .76rem; color: var(--text-3); font-weight: 700; } .board-new { align-items: center; justify-content: center; color: var(--accent); border-style: dashed; aspect-ratio: 1.1 / 1; } .board-new .ic { width: 26px; height: 26px; } .board-new span { font-weight: 900; font-size: .82rem; text-align: center; } .board-fav .board-card-cover.empty { color: var(--accent); } /* nice empty-board state */ .board-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 56px 24px; text-align: center; color: var(--text-3); } .board-empty .ic { width: 46px; height: 46px; opacity: .5; } .board-empty .be-title { font-family: var(--font-bold); font-weight: 950; font-size: 1.15rem; color: var(--text); } .board-empty .be-sub { font-weight: 700; max-width: 280px; line-height: 1.4; } /* invite picker */ .invite-results { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; margin-top: 10px; } .invite-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: var(--pill); } .invite-row .grow { flex: 1; min-width: 0; } .invite-row .dname { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .invite-row .uname { color: var(--text-3); font-weight: 700; font-size: .85rem; } .invite-row .btn { min-height: 36px; padding: 0 14px; } /* board page */ .board-by { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 700; font-size: .9rem; margin: 0 2px 14px; flex-wrap: wrap; } .board-by .avatar { flex: 0 0 auto; } .board-collab { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--accent-dark); color: var(--accent); font-weight: 800; font-size: .82rem; white-space: nowrap; } .board-collab .ic { width: 15px; height: 15px; } .board-grid { columns: 2; column-gap: 10px; } /* multi-photo collage cell */ .board-collage { display: grid; gap: 2px; aspect-ratio: 1; position: relative; } .board-collage.c2 { grid-template-columns: 1fr 1fr; } .board-collage.c3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .board-collage.c3 > :first-child { grid-row: 1 / span 2; } .board-collage.c4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .board-collage img, .board-collage video { width: 100%; height: 100%; object-fit: cover; display: block; } .board-more { position: absolute; right: 6px; bottom: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-weight: 900; font-size: .8rem; } @media (min-width: 560px) { .board-grid { columns: 3; } } .board-cell { display: block; position: relative; margin: 0 0 10px; border-radius: 16px; overflow: hidden; background: var(--pill); break-inside: avoid; } .board-cell img, .board-cell video { display: block; width: 100%; height: auto; } .board-text { padding: 14px; font-weight: 700; color: var(--text); font-size: .95rem; } .board-rm { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; border: 0; display: grid; place-items: center; } .board-rm .ic { width: 16px; height: 16px; } /* ============================================================ QR instant login ============================================================ */ .qr-login { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 360px; margin: 10px auto 0; text-align: center; } .qr-hint { color: var(--text-2); font-weight: 700; line-height: 1.45; margin: 0; } .qr-box { width: 280px; height: 280px; display: grid; place-items: center; background: #fff; border-radius: 22px; padding: 10px; box-shadow: var(--shadow); } .qr-img { width: 100%; height: 100%; display: block; border-radius: 12px; } .qr-timer { color: var(--text-3); font-weight: 800; min-height: 20px; } .qr-msg { color: var(--text-2); font-weight: 800; text-align: center; padding: 20px; } .link-btn { background: transparent; border: 0; color: var(--accent); font-weight: 900; cursor: pointer; padding: 2px 4px; } /* approval screen (phone) */ .qr-approve { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 420px; margin: 18px auto 0; padding: 0 8px; } .qr-dev-ic { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-dark); color: var(--accent); } .qr-dev-ic .ic { width: 38px; height: 38px; } .qr-approve h3 { margin: 6px 0 0; font-family: var(--font-bold); font-weight: 950; font-size: 1.45rem; } .qr-dev { font-weight: 900; font-size: 1.05rem; color: var(--text); padding: 8px 14px; background: var(--pill); border-radius: 999px; } .qr-ip { color: var(--text-3); font-weight: 700; font-size: .9rem; } .qr-warn { display: flex; gap: 10px; align-items: flex-start; text-align: left; color: var(--text-2); font-weight: 700; line-height: 1.4; background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.3); border-radius: 16px; padding: 12px 14px; margin: 8px 0 0; } .qr-warn .ic { flex: 0 0 auto; width: 20px; height: 20px; color: #ffb020; margin-top: 1px; } .qr-actions { display: flex; gap: 12px; width: 100%; margin-top: 8px; } .qr-actions .btn { flex: 1; min-height: 50px; } /* OAuth consent («Войти через Агуа»): the current-account card */ .oauth-me { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--pill); border-radius: 16px; } .oauth-me-names { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .oauth-me-names b { font-weight: 900; } .oauth-me-names span { color: var(--text-3); font-weight: 700; font-size: .9rem; } /* ============================================================ Weather widget (top of feed) + Solara fullscreen ============================================================ */ .weather-widget { margin-top: 14px; margin-bottom: 14px; } @media (max-width: 680px) { .weather-widget { margin-top: calc(10px + env(safe-area-inset-top)); } } .ww-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(33,150,243,.18), rgba(33,150,243,.04)), rgba(10,9,21,.72); color: #fff; border-radius: 20px; cursor: pointer; text-align: left; min-height: 64px; box-shadow: 0 10px 28px rgba(0,0,0,.22); } .ww-card:hover { filter: brightness(1.06); } .ww-card:active { transform: scale(.99); } .ww-ic { font-size: 30px; line-height: 1; flex: 0 0 auto; } .ww-ic img.emoji { width: 32px; height: 32px; } .ww-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ww-temp { font-family: var(--font-bold); font-weight: 950; font-size: 1.4rem; color: #fff; } .ww-city { color: rgba(255,255,255,.54); font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ww-open { flex: 0 0 auto; color: rgba(255,255,255,.54); } .ww-open .ic { width: 22px; height: 22px; } .ww-loading { display: grid; place-items: center; width: 100%; } .ww-loading .spinner { border-color: rgba(255,255,255,.18) !important; border-top-color: #2196f3 !important; } .ww-by { display: block; text-align: center; margin-top: 6px; color: rgba(255,255,255,.4); font-weight: 800; font-size: .82rem; } .ww-by:hover { color: #2196f3; } /* «Нашли баг?» — та же карточка, что у погоды, только серая (открывает бота) */ .bug-widget { margin-bottom: 14px; } .bug-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), rgba(18,18,20,.72); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 10px 28px rgba(0,0,0,.22); } .bug-card:hover { filter: brightness(1.12); } .bug-card:active { transform: scale(.99); } .bug-ic { font-size: 28px; line-height: 1; flex: 0 0 auto; } .bug-ic img.emoji { width: 30px; height: 30px; } .bug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bug-title { font-family: var(--font-bold); font-weight: 950; font-size: 1.1rem; color: #fff; } .bug-sub { color: rgba(255,255,255,.54); font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bug-open { flex: 0 0 auto; color: rgba(255,255,255,.54); } .bug-open .ic { width: 22px; height: 22px; } [data-theme="light"] .bug-card { border-color: rgba(0,0,0,.10); background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.01)), #e9ebee; color: var(--text); } [data-theme="light"] .bug-title { color: var(--text); } [data-theme="light"] .bug-sub, [data-theme="light"] .bug-open { color: var(--text-2); } .solara-overlay { position: fixed; inset: 0; z-index: 1200; background: #0a0915; animation: backdropIn .25s ease both; } .solara-overlay iframe { width: 100%; height: 100%; border: 0; display: block; } .solara-close { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 1210; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .solara-close .ic { width: 22px; height: 22px; } /* ============================================================ Stories ("истории") — рейл сверху ленты + создание + просмотрщик ============================================================ */ .stories-rail { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 12px 2px 16px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; overscroll-behavior-x: contain; } .stories-rail::-webkit-scrollbar { display: none; } .stories-rail.dragging { cursor: grabbing; scroll-behavior: auto; } .stories-rail.dragging .story-item { pointer-events: none; } .story-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 70px; border: 0; background: none; padding: 0; cursor: pointer; } .story-ava-wrap { position: relative; display: inline-flex; padding: 2px; } .story-ava { position: relative; display: inline-flex; transition: transform .15s ease; } .story-item:active .story-ava { transform: scale(.94); } /* НЕ block: базовый .avatar центрирует букву-заглушку через grid */ .story-ava .avatar { display: grid; } .story-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .story-plus { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); display: grid; place-items: center; border: 3px solid var(--bg); z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .story-plus .ic { width: 13px; height: 13px; stroke-width: 3; } .story-name { font-size: .78rem; color: var(--text-2); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .story-mine .story-name { color: var(--text); font-weight: 700; } /* ---- Создание истории (сцена: фон + медиа + текст + рисунок) ---- */ .story-editor { position: fixed; inset: 0; z-index: 4000; background: #000; display: flex; flex-direction: column; color: #fff; } .se-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; } .se-x { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; flex: 0 0 auto; } .se-x .ic { width: 20px; height: 20px; } .se-tools { display: flex; gap: 8px; margin: 0 auto; } .se-tool { min-width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-family: var(--font-bold); font-weight: 800; font-size: 1.1rem; display: grid; place-items: center; } .se-tool .ic { width: 19px; height: 19px; } .se-tool.active { background: var(--accent); color: var(--accent-ink, #fff); } .se-post { border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font-family: var(--font-bold); font-weight: 800; font-size: .95rem; padding: 10px 20px; flex: 0 0 auto; } .se-post:disabled { opacity: .6; } .se-wrap { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 12px; } .se-scene { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #0a0a0a; touch-action: none; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .se-bg { position: absolute; inset: 0; } .se-scene .se-media { position: absolute; left: 50%; top: 50%; max-width: none; width: 100%; height: auto; transform: translate(-50%,-50%); will-change: transform; } .se-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .se-texts { position: absolute; inset: 0; pointer-events: none; } .se-text { position: absolute; pointer-events: auto; max-width: 86%; padding: 4px 8px; font-family: var(--font-bold); font-weight: 800; font-size: 1.5rem; line-height: 1.2; text-align: center; white-space: pre-wrap; text-shadow: 0 1px 8px rgba(0,0,0,.45); cursor: move; } .se-text.sel { outline: 2px dashed rgba(255,255,255,.7); outline-offset: 3px; border-radius: 6px; } .se-scene.drawing .se-text { pointer-events: none; } .se-hint { position: absolute; left: 12px; right: 12px; bottom: 14px; text-align: center; font-size: .85rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; transition: opacity .3s; } .se-hint.gone { opacity: 0; } .se-text-del { position: absolute; top: 10px; right: 10px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,59,48,.9); color: #fff; display: grid; place-items: center; } .se-text-del .ic { width: 18px; height: 18px; } .se-palette { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; padding: 10px 16px; } .se-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); padding: 0; } .se-sw.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 2px var(--accent); } .se-text-modal .se-text-input { width: 100%; resize: none; text-align: center; font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; } .se-text-modal .se-palette { padding: 0 0 4px; } .se-suggest { width: min(100%, 520px); background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.5); margin-bottom: 8px; } .se-sg-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--text); padding: 9px 12px; text-align: left; } .se-sg-item:hover { background: var(--pill); } .se-sg-name { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: .92rem; min-width: 0; } .se-sg-handle { color: var(--text-3); font-weight: 600; font-size: .85rem; } .se-bar { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: #000; border-top: 1px solid rgba(255,255,255,.08); } .se-aud-title { font-size: .8rem; color: var(--text-3); margin-bottom: 9px; text-transform: uppercase; letter-spacing: .04em; } .se-aud { display: flex; gap: 8px; } .se-aud-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #fff; min-height: 44px; padding: 0 10px; border-radius: 14px; font-weight: 700; font-size: .92rem; transition: background .15s, border-color .15s; } .se-aud-btn .ic { width: 17px; height: 17px; } .se-aud-btn.active { background: var(--accent); color: var(--accent-ink, #fff); border-color: transparent; } .se-aud-hint { margin-top: 9px; font-size: .85rem; color: var(--text-3); text-align: center; } /* Просмотрщик историй */ body.sv-open { overflow: hidden; } .story-viewer { position: fixed; inset: 0; z-index: 4100; background: #000; display: flex; flex-direction: column; perspective: 1100px; touch-action: none; } /* 3D-куб для свайпа между людьми: sv-rot вращается, sv-cube и sv-face2 — его грани */ .sv-rot { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; transform-style: preserve-3d; will-change: transform; } .sv-cube { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; } .sv-face2 { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; background: #000; } .sv-face2 img, .sv-face2 video { width: 100%; height: 100%; object-fit: contain; } .sv-f2-head { position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 14px; display: flex; align-items: center; gap: 8px; color: #fff; z-index: 2; } .sv-f2-head b { font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .sv-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; gap: 4px; padding: 10px 10px 0; } .sv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; } .sv-bar-fill { display: block; height: 100%; width: 0; background: #fff; } .sv-bar-fill.done { width: 100% !important; } .sv-head { position: absolute; top: 20px; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 14px; } .sv-author { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; } .sv-author b { font-size: .95rem; } .sv-time { color: rgba(255,255,255,.8); font-size: .82rem; } .sv-aud { color: rgba(255,255,255,.8); font-size: .8rem; margin-left: 4px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 1px 8px; } .sv-x { margin-left: auto; width: 36px; height: 36px; border: 0; background: rgba(0,0,0,.35); color: #fff; border-radius: 50%; display: grid; place-items: center; } .sv-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; } .sv-scene { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; overflow: hidden; } .sv-scene .sv-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; } .sv-scene .sv-media.scene { inset: auto; left: 50%; top: 50%; height: auto; transform: translate(-50%,-50%); will-change: transform; object-fit: fill; } .sv-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .sv-text { position: absolute; max-width: 86%; padding: 4px 8px; font-family: var(--font-bold); font-weight: 800; font-size: 1.5rem; line-height: 1.2; text-align: center; white-space: pre-wrap; text-shadow: 0 1px 8px rgba(0,0,0,.45); } .sv-caption { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3; text-align: center; color: #fff; padding: 10px 18px; font-size: 1.05rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; } .sv-caption a { pointer-events: auto; color: color-mix(in srgb, var(--accent) 55%, #fff); font-weight: 700; text-decoration: none; } .sv-mentions a { background: rgba(0,0,0,.4); border-radius: 8px; padding: 1px 6px; } .sv-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); } .sv-views { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; } .sv-views .ic { width: 18px; height: 18px; } .sv-del { border: 0; background: rgba(255,59,48,.18); color: #ff6961; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; } .sv-del .ic { width: 16px; height: 16px; } .sv-tap { position: absolute; top: 0; bottom: 0; z-index: 1; width: 35%; } .sv-tap-prev { left: 0; } .sv-tap-next { right: 0; width: 65%; } /* ============================================================ REELS — вертикальная лента видео ("Видео"), листаешь как TikTok ============================================================ */ /* сама колонка тоже без скруглений — иначе .feed (border-radius: var(--radius)) срезает углы плашки на десктопе */ .reels-col { padding: 0 !important; overflow: hidden !important; border-radius: 0 !important; clip-path: none !important; } .reels { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: 0; /* плашка плёнки — квадратные углы */ background: #000; } .reels::-webkit-scrollbar { display: none; } .reels .empty, .reels .loading { height: 100%; display: grid; place-content: center; place-items: center; color: #fff; } .reel { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; position: relative; } .reel-stage { position: relative; /* Кадр плёнки ВСЕГДА 9:16 — и на телефоне, и на ПК. По высоте на всю плашку, ширина считается из 9:16; если не влезает — упирается в ширину (max-width). Пространство вокруг кадра остаётся чёрным (фон .reels). Видео внутри — object-fit: contain, поэтому квадратный/горизонтальный ролик дополняется чёрными рамками сверху/снизу прямо в этом 9:16-кадре. */ height: 100%; aspect-ratio: 9 / 16; width: auto; max-width: 100%; margin: 0 auto; background: #000; overflow: hidden; border-radius: 0; display: grid; place-items: center; } /* object-fit: contain на чёрном фоне = letterbox: квадратный, горизонтальный или альбомный ролик дополняется чёрными рамками сверху/снизу (или по бокам) */ .reel-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } /* ПК: у плёнки скруглённые рамки (просьба), на телефоне остаётся full-screen без углов */ @media (min-width: 681px) { .reels-col { border-radius: var(--radius) !important; } .reels { border-radius: var(--radius); } .reel-stage { border-radius: var(--radius); } } .reel-tap { position: absolute; inset: 0; z-index: 1; cursor: pointer; } .reel-playpause { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8); z-index: 2; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); } .reel-playpause .ic { width: 76px; height: 76px; } .reel.is-paused .reel-playpause { opacity: .92; transform: translate(-50%, -50%) scale(1); } .reel-mute { position: absolute; top: 14px; right: 14px; z-index: 4; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.4); backdrop-filter: blur(8px); transition: transform .15s ease, background .2s ease; } .reel-mute:hover { background: rgba(0,0,0,.6); } .reel-mute:active { transform: scale(.9); } .reel-mute .ic { width: 22px; height: 22px; } /* правая колонка действий (лайк/коммент/репост/избранное/поделиться) */ .reel-actions { position: absolute; right: 12px; bottom: 26px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 18px; } .reel-actions .act { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: transparent; color: #fff; font-family: var(--font-bold); font-weight: 800; font-size: .82rem; transition: transform .15s ease; filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); } .reel-actions .act:active { transform: scale(.86); } .reel-actions .act .ic { width: 32px; height: 32px; } .reel-actions .act .c { line-height: 1; min-height: .82rem; } .reel-actions .act.liked { color: var(--accent); } .reel-actions .act.liked .ic { fill: var(--accent); } .reel-actions .act.rep-on { color: color-mix(in srgb, var(--accent) 70%, #fff); } .reel-actions .act.fav-on { color: var(--accent); } .reel-actions .act.fav-on .ic { fill: var(--accent); } /* Кнопки действий в плёнке — ВСЕГДА без подложки (в т.ч. liked/fav/rep): базовое .act.liked{background:var(--accent-dark)} давало странный зелёный прямоугольник поверх видео. И убираем вспыхивающее кольцо .just-on::after — на видео оно лишнее. */ .reel-actions .act, .reel-actions .act.liked, .reel-actions .act.fav-on, .reel-actions .act.rep-on { background: transparent !important; } .reel-actions .act.just-on::after { display: none !important; } /* нижний оверлей: автор + подпись. Без чёрного градиента — читаемость держат тени у текста и иконок. */ .reel-overlay { position: absolute; left: 0; right: 64px; bottom: 0; z-index: 3; padding: 18px 16px 24px; color: #fff; pointer-events: none; text-shadow: 0 1px 10px rgba(0,0,0,.65); } .reel-overlay > * { pointer-events: auto; } .reel-author { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; margin-bottom: 8px; } .reel-author .avatar { border: 2px solid rgba(255,255,255,.6); } /* Если у автора есть истории — кольцо рисует .ava-ring, обычную обводку убираем, чтобы не было двойного кольца. Нет историй — остаётся обычная белая обводка. */ .reel-author .ava-ring .avatar { border: 0; } .reel-names { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .reel-dname { font-family: var(--font-bold); font-weight: 900; font-size: 1rem; } .reel-uname { color: rgba(255,255,255,.7); font-size: .9rem; } .reel-caption { font-size: .98rem; line-height: 1.4; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .reel-caption a { color: color-mix(in srgb, var(--accent) 55%, #fff); text-decoration: none; font-weight: 700; } /* бейдж наложенного звука под автором (кнопка: тап → страница звука) */ .reel-sound { display: inline-flex; align-items: center; gap: 7px; max-width: 78%; margin-top: 8px; padding: 6px 12px; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .85rem; color: #fff; animation: rcRowIn .4s ease both; transition: transform .15s ease, background .2s ease; } .reel-sound .ic { flex: 0 0 auto; width: 15px; height: 15px; } /* Длинные имена с YouTube обрезаем в ОДНУ строку с многоточием: без этого текст переносился, и капсула превращалась в многострочную кляксу. */ .reel-sound span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Не влезло совсем — пускаем бегущей строкой, как в TikTok: текст продублирован, поэтому на стыке нет рывка. Многоточие тут уже не нужно. Обёртка с overflow обязательна: без неё уезжающий текст наползал на ноту слева (flex-элемент выходит за свои границы, а обрезать было нечему). */ .reel-sound.is-long span { display: block; overflow: hidden; text-overflow: clip; flex: 1 1 auto; } /* i — «лента» из двух копий; едет она целиком, сдвиг на -50% = ровно одна копия */ .reel-sound.is-long span i { display: inline-flex; font-style: normal; white-space: nowrap; animation: reelMarquee var(--marquee, 10s) linear infinite; } .reel-sound.is-long span i em { font-style: normal; padding-right: 28px; } @keyframes reelMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .reel-sound.is-long:hover span, .reel-sound.is-long:active span { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .reel-sound.is-long span { animation: none; } .reel-sound.is-long span i + i { display: none; } /* без анимации второй копии не надо */ } .reel-sound:active { transform: scale(.95); } /* ---------- страница звука (как в TikTok) ---------- */ .sound-hero { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--border-soft); margin-bottom: 16px; } .sound-cover { position: relative; width: 96px; height: 96px; flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--accent-dark), color-mix(in srgb, var(--accent) 30%, var(--bg-2))); display: grid; place-items: center; transition: transform .15s ease; } .sound-cover:active { transform: scale(.95); } .sound-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* поверх обложки — круглая кнопка воспроизведения (нет второй «ноты» под ней) */ .sound-cover .sc-play { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .15s ease, background .2s ease; } .sound-cover:hover .sc-play { background: rgba(0,0,0,.6); } .sound-cover .sc-play .ic { width: 20px; height: 20px; } .sound-meta { min-width: 0; } .sound-meta h2 { margin: 0; font-family: var(--font-bold); font-weight: 950; font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; } .sound-artist { color: var(--text-2); font-weight: 700; margin-top: 2px; } .sound-by { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--text-2); font-weight: 800; text-decoration: none; } .sound-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-3); font-weight: 800; font-size: .9rem; } /* «МОД: удалить звук» — красная, но не кричит: рядом обычная карточка звука */ .sound-del { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 14px; color: var(--danger); font-size: .88rem; } .sound-del .ic { width: 15px; height: 15px; } .sound-del:disabled { opacity: .6; } .sound-count .ic { width: 16px; height: 16px; } .sound-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .sound-cell { position: relative; display: block; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; background: #000; } .sound-cell video { width: 100%; height: 100%; object-fit: cover; display: block; } .sound-cell .sc-views { position: absolute; left: 7px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: .8rem; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.7); } .sound-cell .sc-views .ic { width: 14px; height: 14px; } @media (max-width: 420px) { .sound-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .sound-hero { padding: 14px; gap: 13px; } .sound-cover { width: 80px; height: 80px; border-radius: 15px; } .sound-meta h2 { font-size: 1.1rem; } } .reel-sound .ic { animation: rcNotesSway 2.2s ease-in-out infinite; } @keyframes rcNotesSway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } .reel-sound .ic { width: 15px; height: 15px; flex: none; } .reel-sound span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* сердечко дабл-тапа: вспыхивает в месте тапа под случайным наклоном (--tilt) и уплывает вверх; цвет — акцент текущего оформления зрителя */ .reel-heart { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); } .reel-heart .ic { width: 96px; height: 96px; fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 4px 18px rgba(0,0,0,.45)); animation: reelHeartPop .9s cubic-bezier(.17,.89,.32,1.28) forwards; } @keyframes reelHeartPop { 0% { transform: rotate(var(--tilt, 0deg)) scale(0); opacity: 0; } 14% { transform: rotate(var(--tilt, 0deg)) scale(1.18); opacity: 1; } 26% { transform: rotate(var(--tilt, 0deg)) scale(1); opacity: 1; } 60% { transform: rotate(var(--tilt, 0deg)) scale(1) translateY(-14px); opacity: .95; } 100% { transform: rotate(var(--tilt, 0deg)) scale(.88) translateY(-90px); opacity: 0; } } /* ---- планшеты (681–1100px): плёнка как карточка, а не «телефон растянули» ---- */ @media (min-width: 681px) and (max-width: 1100px) { /* .feed на планшете сужен до 780px с отступами по бокам — плёнке это не нужно, кадр и так центрируется сам, а лишние 18px только сдвигают его вбок */ .reels-col { max-width: none !important; padding: 0 !important; } /* вертикальный воздух: без него карточка упирается в самые края экрана и скругления, которые включены с 681px, просто не видно */ .reels-col { height: calc(100dvh - 24px) !important; margin: 12px 0 !important; } /* подпись не должна заезжать под колонку кнопок (она 64px + отступ) */ .reel-overlay { right: 84px; padding-bottom: 22px; } } /* Планшет лёжа: экран низкий, кадр 9:16 получается узким, а по бокам остаётся чёрное поле. Даём кадру запас по ширине (12:16 вместо 9:16) — само видео от этого не меняется (object-fit: contain), зато колонка кнопок встаёт РЯДОМ с роликом, а не поверх него. ВАЖНО: overflow: hidden у .reel-stage не трогать — без него height: 100% перестаёт разрешаться и кадр раздувается до натурального размера видео. */ @media (min-width: 681px) and (max-width: 1100px) and (orientation: landscape) { .reel-stage { aspect-ratio: 12 / 16; } .reel-actions { right: 8px; } .reel-overlay { left: 12%; right: 76px; } } @media (max-width: 680px) { /* видео на ВЕСЬ экран (без боковой обрезки .feed и скруглений) — остаётся только нижняя панель навигации */ /* svh, а не dvh: dvh «дышит» при показе/скрытии панели браузера на тап — высота колонки менялась и видео подпрыгивало при паузе */ .reels-col { height: calc(100svh - var(--mobile-nav-clearance)) !important; clip-path: none !important; border-radius: 0 !important; } .reels { border-radius: 0; } .reel-stage { max-width: 100%; border-radius: 0; } .reel-actions { bottom: 18px; } .reel-overlay { padding-bottom: 18px; } } /* ============================================================ Съёмка плёнки (TikTok-стиль): камера на весь экран, шаттер, галерея слева, экран публикации со звуком и красной кнопкой ============================================================ */ .reel-cap { position: fixed; inset: 0; z-index: 220; background: #000; } .rc-stage { position: relative; width: 100%; height: 100%; overflow: hidden; animation: rcStageIn .3s ease both; } @keyframes rcStageIn { from { opacity: 0; } to { opacity: 1; } } /* ПК: вместо камеры — большая зона загрузки видео */ .rc-upload { display: grid; place-items: center; } .rc-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 460px; width: calc(100% - 48px); padding: 48px 34px; border: 2px dashed rgba(255,255,255,.3); border-radius: 22px; color: #fff; text-align: center; cursor: pointer; outline: none; background: rgba(255,255,255,.04); transition: border-color .2s ease, background .2s ease, transform .2s ease; animation: rcDropIn .45s cubic-bezier(.2,.9,.25,1.15) both; } @keyframes rcDropIn { from { opacity: 0; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: none; } } .rc-drop:hover, .rc-drop:focus-visible { border-color: var(--accent); background: rgba(255,255,255,.08); } .rc-drop.is-over { border-color: var(--accent); background: rgba(255,255,255,.1); transform: scale(1.025); animation: rcDropPulse 1s ease infinite; } @keyframes rcDropPulse { 50% { box-shadow: 0 0 0 12px rgba(255,255,255,.06); } } .rc-drop > .ic { width: 52px; height: 52px; opacity: .85; } .rc-drop b { font-family: var(--font-bold); font-size: 1.15rem; } .rc-drop p { color: rgba(255,255,255,.65); line-height: 1.5; font-size: .92rem; } .rc-drop .btn { margin-top: 6px; pointer-events: none; } .rc-cam, .rc-preview { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; } .rc-cam { object-fit: cover; } .rc-cam.is-mirror { transform: scaleX(-1); } .rc-cam-wait { position: absolute; inset: 0; display: grid; place-content: center; place-items: center; gap: 12px; color: rgba(255,255,255,.85); text-align: center; padding: 20px; z-index: 1; } .rc-cam-wait .ic { width: 54px; height: 54px; opacity: .8; } .rc-cam-wait p { line-height: 1.45; } .rc-x { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 6; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); display: grid; place-items: center; transition: transform .15s ease, background .2s ease; animation: rcFadeDown .35s ease both; } @keyframes rcFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .rc-x .ic { width: 22px; height: 22px; } .rc-x:hover { background: rgba(0,0,0,.65); } .rc-x:active { transform: scale(.92); } .rc-timer { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-family: var(--font-bold); font-weight: 800; animation: rcTimerPop .3s cubic-bezier(.2,.9,.3,1.3) both; } @keyframes rcTimerPop { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } } .rc-timer i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: rcBlink 1s infinite; } @keyframes rcBlink { 50% { opacity: .25; } } .rc-bottom { position: absolute; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; justify-content: center; gap: 46px; animation: rcRiseIn .4s cubic-bezier(.2,.9,.25,1.1) both; } @keyframes rcRiseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .rc-side { border: 0; background: transparent; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .8rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); transition: transform .15s ease; } .rc-side .ic { width: 30px; height: 30px; } .rc-side:active { transform: scale(.9); } /* кнопка съёмки: белое кольцо, при записи — красный квадрат + пульсирующее кольцо */ .rc-shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,.25); display: grid; place-items: center; padding: 0; transition: transform .15s ease; } .rc-shutter:active { transform: scale(.94); } .rc-shutter i { width: 58px; height: 58px; border-radius: 50%; background: #ff3b30; transition: all .22s ease; } .rc-shutter.is-rec { animation: rcRecRing 1.4s ease infinite; } @keyframes rcRecRing { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.55); } 70% { box-shadow: 0 0 0 16px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } } .rc-shutter.is-rec i { width: 30px; height: 30px; border-radius: 8px; } /* экран публикации */ .rc-sound-btn { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 8px; max-width: 62%; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); color: #fff; font-family: var(--font-bold); font-weight: 800; font-size: .9rem; transition: background .2s ease; animation: rcSoundDrop .4s cubic-bezier(.2,.9,.3,1.25) both; } @keyframes rcSoundDrop { from { opacity: 0; transform: translateX(-50%) translateY(-16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .rc-sound-btn:hover { background: rgba(0,0,0,.68); } .rc-sound-btn .ic { width: 17px; height: 17px; flex: none; } .rc-sound-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-sound-btn:active { transform: translateX(-50%) scale(.96); } .rc-publish-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.35) 70%, transparent); animation: rcRiseIn .4s cubic-bezier(.2,.9,.25,1.1) both; } .rc-caption { width: 100%; min-height: 44px; max-height: 110px; resize: none; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(0,0,0,.35); color: #fff; padding: 11px 14px; font: inherit; outline: none; } .rc-caption::placeholder { color: rgba(255,255,255,.55); } .btn.rc-publish { width: 100%; padding: 14px; border-radius: 14px; background: #ff3b30; color: #fff; border: 0; font-family: var(--font-bold); font-weight: 900; font-size: 1.05rem; } .btn.rc-publish:disabled { opacity: .7; } .btn.rc-danger { background: #ff3b30; color: #fff; border: 0; display: inline-flex; align-items: center; gap: 7px; } .btn.rc-danger .ic { width: 17px; height: 17px; } /* шторка выбора звука */ .rc-sheet { display: flex; flex-direction: column; } .rc-sound-body { padding: 0 10px 16px; } .rc-snd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; transition: background .18s ease, transform .15s ease; animation: rcRowIn .34s ease both; } @keyframes rcRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .rc-snd:nth-child(1) { animation-delay: 0ms; } .rc-snd:nth-child(2) { animation-delay: 35ms; } .rc-snd:nth-child(3) { animation-delay: 70ms; } .rc-snd:nth-child(4) { animation-delay: 105ms; } .rc-snd:nth-child(5) { animation-delay: 140ms; } .rc-snd:nth-child(6) { animation-delay: 175ms; } .rc-snd:nth-child(7) { animation-delay: 210ms; } .rc-snd:nth-child(8) { animation-delay: 245ms; } .rc-snd:hover { background: var(--pill); } .rc-snd:active { transform: scale(.985); } .rc-snd:disabled { opacity: .6; } .rc-snd-cover { width: 46px; height: 46px; flex: none; border-radius: 10px; overflow: hidden; background: var(--pill); display: grid; place-items: center; color: var(--text-2); } .rc-snd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-snd-cover .ic { width: 22px; height: 22px; } .rc-snd-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rc-snd-meta b { font-family: var(--font-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-snd-meta i { font-style: normal; color: var(--text-2); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-snd-empty { text-align: center; color: var(--text-2); padding: 26px 14px; } /* настройка звука: начало (конец — по длине видео) и громкость */ .rc-tuner { position: fixed; inset: 0; z-index: 240; display: grid; align-items: end; background: var(--win-dim); backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); animation: backdropIn .25s ease both; } .rc-tuner-card { background: var(--card); color: var(--text); border-radius: 20px 20px 0 0; padding: 20px 18px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; max-width: 560px; width: 100%; margin: 0 auto; animation: rcTunerUp .36s cubic-bezier(.2,.9,.25,1.05) both; } @keyframes rcTunerUp { from { transform: translateY(100%); } to { transform: none; } } .rc-tuner-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-bold); margin-bottom: 6px; min-width: 0; } .rc-tuner-title .ic { width: 18px; height: 18px; flex: none; } /* длинные названия yt-dlp-треков не ломают карточку — обрезаем многоточием */ .rc-tuner-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .rc-tuner-card label { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: .9rem; margin-top: 6px; } .rc-tuner-card input[type="range"] { width: 100%; accent-color: var(--accent); } .rc-tuner-actions { display: flex; gap: 10px; margin-top: 14px; } .rc-tuner-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .rc-tuner-actions .ic { width: 16px; height: 16px; } /* ============================================================ Меню «Создать» (Пост / Видео) — выпадает у кнопки «+» ============================================================ */ /* размазанный фон за выбором «Пост / Плёнка» */ .cc-backdrop { position: fixed; inset: 0; z-index: 4200; background: var(--win-dim); backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); animation: backdropIn .22s ease; } /* пока меню открыто, панель с кнопкой «+» живёт НАД блюром — её не размазывает */ body.cc-open .left { position: relative; z-index: 4210; } @media (max-width: 680px) { body.cc-open .left { position: fixed; } /* на телефоне панель и так fixed — не сбивать */ } .composer-chooser { position: fixed; z-index: 4250; min-width: 240px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; animation: ccIn .18s cubic-bezier(.2,.9,.2,1) both; } @keyframes ccIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } } .cc-opt { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 0; background: transparent; color: var(--text); border-radius: 14px; text-align: left; cursor: pointer; transition: background .18s ease, transform .12s ease; } .cc-opt:hover { background: var(--pill); } .cc-opt:active { transform: scale(.98); } .cc-opt .ic { width: 28px; height: 28px; flex: 0 0 auto; color: var(--accent); } .cc-opt span { display: flex; flex-direction: column; min-width: 0; } .cc-opt b { font-family: var(--font-bold); font-weight: 900; font-size: 1.04rem; } .cc-opt i { font-style: normal; color: var(--text-2); font-size: .84rem; font-weight: 700; margin-top: 1px; } /* ============================================================ Шторка комментариев поверх видео (TikTok-style) Своя подложка (z ниже #modal-host=4300), чтобы пикер GIF открывался поверх неё и не уничтожал шторку. ============================================================ */ .cs-host { position: fixed; inset: 0; z-index: 4000; } .cs-backdrop { position: absolute; inset: 0; background: var(--win-dim); backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); animation: backdropIn .28s ease both; } .comments-sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 100%; max-width: 560px; height: min(72dvh, 740px); background: var(--card); border: 1px solid var(--border); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -16px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow: hidden; animation: csUp .32s cubic-bezier(.2,.9,.2,1) both; } @keyframes csUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } } .cs-grip { width: 42px; height: 4px; border-radius: 999px; background: var(--border); margin: 8px auto 2px; flex: 0 0 auto; } .cs-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; border-bottom: 1px solid var(--border-soft); flex: 0 0 auto; } .cs-head b { font-family: var(--font-bold); font-weight: 950; font-size: 1.12rem; } .cs-head .icon-btn { width: 38px; height: 38px; } .cs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px 18px; } .cs-body .comment-box { margin-bottom: 12px; } /* ============================================================ UPDATE PACK — share links, guest gate, popular chip, nav polish, eq lyrics empty state, extra animations ============================================================ */ /* ---- guest gate for shared post links ---- */ /* one centered column on every width (the desktop .land grid would shove it right) */ .land.gate-land { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 560px; margin: 0 auto; padding: 24px; height: 100dvh; overflow-y: auto; } .land.gate-land .gate-card { padding: 0; max-width: 420px; margin: 0 auto; width: 100%; } .gate-card { flex: 0 0 auto; align-items: center; text-align: center; gap: 14px; animation: gateIn .45s cubic-bezier(.2,.9,.25,1) both; } .gate-card .land-headline { text-align: center; font-size: 1.9rem; } .gate-logo { width: 72px; height: 72px; margin-bottom: 4px; } .gate-title { margin-top: 2px; } .gate-sub { color: var(--text-3, #9a9aa0); font-weight: 700; line-height: 1.45; margin: 0 0 10px; max-width: 320px; } .gate-sender { animation: gateIn .5s .08s cubic-bezier(.2,.9,.25,1) both; } .gate-card .btn-register { max-width: 340px; } @keyframes gateIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } /* ---- «вам отправили пост» interstitial ---- */ .share-landing { animation: gateIn .4s cubic-bezier(.2,.9,.25,1) both; } .share-landing .share-sender .avatar { box-shadow: 0 0 0 4px var(--accent-dark), 0 14px 40px rgba(0,0,0,.5); } .share-landing h3 { max-width: 340px; } /* ---- «Популярное» chip on top-ranked feed posts ---- */ .popular-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; font-size: .82rem; color: #ffb020; background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .28); animation: popChip .5s cubic-bezier(.2,1.2,.3,1) both; } @keyframes popChip { from { opacity: 0; transform: translateY(-4px) scale(.92); } to { opacity: 1; transform: none; } } /* ---- equalizer: lyrics empty state ---- */ .eq-lyrics.empty-mode .eq-lyrics-scroll { position: static; transform: none !important; width: 100%; padding: 0; } .eq-lyr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12%; animation: gateIn .35s ease both; } .eq-lyr-empty .le-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); margin-bottom: 8px; } .eq-lyr-empty .le-ico .ic { width: 26px; height: 26px; } .eq-lyr-empty .le-title { font-family: var(--font-bold); font-weight: 900; font-size: 1.1rem; } .eq-lyr-empty .le-sub { color: rgba(255,255,255,.55); font-size: .84rem; margin-top: 4px; line-height: 1.45; } /* ---- mobile bottom nav polish ---- */ @media (max-width: 680px) { /* breathing room above the bar + softer float */ .nav { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 44px rgba(0,0,0,.6); } /* press feedback: icon squishes under the finger */ .nav-item { transition: transform .18s cubic-bezier(.2,.9,.2,1); -webkit-tap-highlight-color: transparent; } .nav-item:active { transform: scale(.9); } /* the icon pops when its tab becomes active */ .nav-item.active .ic { animation: navIconPop .4s cubic-bezier(.2,1.5,.3,1) both; } /* topbar breathing room from the very top of the screen (profiles etc.) */ .feed > .topbar:first-child { margin-top: 8px; } } @keyframes navIconPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } /* notification badge pops in instead of just appearing */ .nav-item .badge { animation: badgeIn .35s cubic-bezier(.2,1.4,.3,1) both; } @keyframes badgeIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ---- extra micro-animations (cheap, opacity/transform only) ---- */ /* share button pop reuses the like pop via .just-on (already wired) */ .act[data-act="share"]:active .ic { transform: scale(.85) rotate(-8deg); } /* device rows slide in on the security screen */ .dev-row { animation: devIn .35s ease both; } @keyframes devIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* side cards float in on desktop */ @media (min-width: 1101px) and (prefers-reduced-motion: no-preference) { .side-card, .online-card { animation: gateIn .4s ease both; } } @media (prefers-reduced-motion: reduce) { .gate-card, .gate-sender, .share-landing, .popular-chip, .dev-row, .nav-item.active .ic, .nav-item .badge { animation: none; } } /* ---- comment «⋯» menu: small, quiet, not a giant grey blob ---- */ .cmenu-btn { width: 30px; height: 30px; flex: 0 0 auto; background: transparent; color: var(--text-3); } .cmenu-btn .ic { width: 17px; height: 17px; } .cmenu-btn:hover { background: var(--pill); color: var(--text); } /* ---- post action bar on phones: compress instead of breaking when counts get long ---- */ @media (max-width: 680px) { .post-actions { gap: 6px; } .action-left, .action-right { gap: 6px; } .act, .pill { min-height: 40px; padding: 0 11px; font-size: .92rem; gap: 6px; } .act.icon-pill { width: 42px; min-width: 42px; } .views { font-size: .88rem; } } /* very narrow phones: shrink further so «10,0 тыс» never wraps or clips buttons */ @media (max-width: 420px) { .post-actions { gap: 5px; } .action-left, .action-right { gap: 5px; } .act, .pill { min-height: 38px; padding: 0 9px; font-size: .84rem; gap: 5px; } .act .ic { width: 19px; height: 19px; } .act.icon-pill { width: 38px; min-width: 38px; } .views { font-size: .8rem; gap: 4px; } .views .ic { width: 17px; height: 17px; } } /* ---- video posts: «Плёнка» chip on the card ---- */ .video-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-bold); font-weight: 800; font-size: .82rem; color: var(--accent); background: var(--accent-dark); border: 1px solid var(--accent-border, transparent); } .video-chip .ic { width: 15px; height: 15px; } .popular-chip + .video-chip { margin-left: 8px; } /* ---- profile album: stacked view + tidy delete ---- */ /* the trash was a heavy grey circle — now quiet, red only on hover */ .song-del { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); transition: background .18s ease, color .18s ease, transform .15s ease; } .song-del .ic { width: 18px; height: 18px; } .song-del:hover { background: rgba(255, 69, 58, .12); color: #ff453a; } .song-del:active { transform: scale(.88); } /* collapsed stack: hidden tracks fold to nothing but keep smooth transitions */ .song-list .song-row { transition: border-color .22s ease, background .22s ease, max-height .45s cubic-bezier(.2,.9,.25,1), opacity .35s ease, margin .45s cubic-bezier(.2,.9,.25,1), padding .45s cubic-bezier(.2,.9,.25,1), transform .45s cubic-bezier(.2,.9,.25,1); } .song-list.collapsed .song-row.stack-hidden, .song-list.expanded .song-row.stack-hidden { max-height: 140px; overflow: hidden; } .song-list.collapsed .song-row.stack-hidden { max-height: 0; opacity: 0; transform: translateY(10px) scale(.97); margin: -10px 0 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none; } /* the peeking «window» under the last track — reads as the edge of the next card */ .album-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 22px); margin: -7px auto 0; padding: 9px 16px 8px; border: 1px solid var(--border-soft); border-top: 0; border-radius: 0 0 18px 18px; background: var(--card-2); color: var(--text-3); font-family: var(--font-bold); font-weight: 800; font-size: .86rem; transition: color .2s ease, background .2s ease; } .album-more:hover { color: var(--text); background: var(--pill); } .album-more .am-chev { display: grid; place-items: center; transition: transform .35s cubic-bezier(.2,.9,.25,1); } .album-more .am-chev .ic { width: 15px; height: 15px; transform: rotate(-90deg); } .album-more.open .am-chev { transform: rotate(180deg); } /* ============================================================ STORIES UPDATE — rings everywhere, likes, profile tab, share ============================================================ */ /* segmented story ring around avatars app-wide (one arc per story, grey = seen); drawn by storyRingSvg inside an .ava-ring wrapper sized avatar+14px */ .ava-ring { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; } .ava-ring .story-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* story viewer footer: like + share for everyone */ .sv-like, .sv-share { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; min-height: 40px; padding: 0 14px; background: rgba(255,255,255,.12); color: #fff; font-family: var(--font-bold); font-weight: 800; font-size: .95rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease, color .2s ease, transform .15s ease; } .sv-like:active, .sv-share:active { transform: scale(.9); } .sv-like .ic, .sv-share .ic { width: 20px; height: 20px; } .sv-like.on { background: rgba(255, 69, 88, .25); color: #ff4558; } .sv-like.on .ic { fill: currentColor; } .sv-like .c:empty { display: none; } .sv-like.pop .ic { animation: likePop .42s cubic-bezier(.2,1.4,.3,1) both; } /* profile «Истории» tab: section labels + preview grid */ .stories-sec-title { display: flex; align-items: center; gap: 10px; margin: 16px 2px 10px; } .stories-sec-title:first-child { margin-top: 4px; } .ssb { font-family: var(--font-bold); font-weight: 900; font-size: .85rem; padding: 4px 12px; border-radius: 999px; } .ssb.live { color: var(--accent); background: var(--accent-dark); } .ssb.past { color: var(--text-3); background: var(--pill); } .ssb-sub { color: var(--text-3); font-weight: 700; font-size: .78rem; } .stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .story-card { position: relative; aspect-ratio: 9 / 14; border-radius: 16px; overflow: hidden; background: #131315; border: 1px solid var(--border-soft); cursor: pointer; transition: transform .2s cubic-bezier(.2,.9,.2,1), border-color .2s ease; } .story-card:hover { transform: translateY(-2px); border-color: var(--border); } .story-card:active { transform: scale(.97); } .story-card img, .story-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .story-card-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font-family: var(--font-bold); font-weight: 800; font-size: .74rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); text-align: left; } @media (min-width: 900px) { .stories-grid { grid-template-columns: repeat(4, 1fr); } } /* ---- «Отправить» dialog on desktop (no native share sheet there) ---- */ .share-modal h3 { margin-bottom: 14px; } .share-url-row { display: flex; gap: 8px; align-items: stretch; } .share-url-row .share-url { flex: 1; min-width: 0; font-size: .92rem; color: var(--text-2); } .share-url-row .share-copy { flex: 0 0 auto; white-space: nowrap; } .share-apps { display: flex; gap: 10px; margin-top: 12px; } .share-app { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 14px; background: var(--pill); color: var(--text); font-family: var(--font-bold); font-weight: 800; font-size: .95rem; transition: background .18s ease, transform .15s ease; } .share-app:hover { background: var(--pill-2); } .share-app:active { transform: scale(.97); } .share-app .ic { width: 19px; height: 19px; } .sv-share .c:empty { display: none; } /* ============================================================ «ВХОД ЧЕРЕЗ ЛИНГУИ» — button, reg card, settings link ============================================================ */ /* divider «или» between the password form and the Lingui button */ .auth-or { display: flex; align-items: center; gap: 12px; color: #8c8c92; font-weight: 800; font-size: .92rem; margin: 2px 0; } .auth-or span { flex: 1; height: 1px; background: #242426; } /* the button itself: white in dark theme; white with a black outline in light */ .btn-lingui { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; border-radius: 999px; border: 2px solid transparent; background: #fff; color: #000; font-family: var(--font-bold); font-weight: 800; font-size: 1.15rem; transition: transform .12s ease, filter .15s ease; } .btn-lingui:hover { filter: brightness(.94); } .btn-lingui:active { transform: scale(.97); } .btn-lingui img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; } [data-theme="light"] .btn-lingui { border-color: #000; } /* Lingui logo used as a service icon (registration card + settings row) */ .lingui-ico { background: #fff !important; overflow: hidden; } .lingui-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* registration card button */ .lingui-reg-btn { display: flex; align-items: center; justify-content: center; width: 100%; } /* settings «Привязать Лингуи» */ .btn.lingui-link { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #000; border: 2px solid transparent; } .btn.lingui-link img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; } [data-theme="light"] .btn.lingui-link { border-color: #000; } /* ============================================================ PLENKA + STORIES polish: counter pills, views eye, viewer footer ============================================================ */ /* плёнка: цифры на чёрной скруглённой подложке под каждой кнопкой */ .reel-actions .act .c { background: rgba(0, 0, 0, .55); border-radius: 9px; padding: 3px 8px; font-size: .78rem; line-height: 1; min-height: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .reel-actions .act .c:empty { display: none; } /* просмотры: серый глазик + количество под всеми кнопками */ .reel-actions .reel-views { color: #b9b9be; pointer-events: none; } .reel-actions .reel-views .ic { width: 27px; height: 27px; } .reel-actions .reel-views .c { color: #d9d9de; } /* ---- story viewer footer: normal bottom bar ---- */ .sv-foot { justify-content: flex-start; padding: 46px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .62)); } .sv-like, .sv-share { min-height: 44px; padding: 0 16px; font-size: 1rem; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .sv-share { padding: 0 14px; } .sv-views { margin-left: auto; background: rgba(255, 255, 255, .1); border-radius: 999px; min-height: 38px; padding: 0 13px; font-weight: 800; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sv-del { min-height: 38px; } /* story-card meta: readable chips (time · likes · views) instead of a bare «♥ N» */ .story-card-meta { display: flex; align-items: center; gap: 8px; } .story-card-meta .scm { display: inline-flex; align-items: center; gap: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .story-card-meta .scm .ic { width: 12px; height: 12px; } /* ============================================================ CUSTOM SKIN — wallpaper + AI palettes («Своё оформление») ============================================================ */ /* wallpaper layer behind everything when the custom skin is on */ [data-skin="custom"] #skin-bg { display: block; background-size: cover; background-position: center; /* обои показываем КАК ЕСТЬ — без затемнения и без размытия; матовость дают сами панели (backdrop-filter за «окнами») */ } /* settings: the custom card + «Своё» button */ .skin-card { position: relative; } .cskin-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #ff6961; } .cskin-del .ic { width: 14px; height: 14px; } .cskin-plus { display: grid; place-items: center; color: var(--text-2); background: var(--pill); } .cskin-plus .ic { width: 24px; height: 24px; } /* flow modal */ .cs-wall { width: 100%; aspect-ratio: 16 / 7; border-radius: 14px; background-size: cover; background-position: center; margin-bottom: 12px; border: 1px solid var(--border-soft); } .cs-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cs-pal { border: 2px solid transparent; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; transition: transform .15s ease, border-color .2s ease; } .cs-pal:active { transform: scale(.97); } .cs-pal.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow, rgba(52,199,89,.25)); } .cs-dots { display: flex; gap: 5px; } .cs-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); } .cs-pal-name { font-family: var(--font-bold); font-weight: 900; font-size: .95rem; } .cs-pal-demo { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 5px 10px; font-weight: 800; font-size: .8rem; } .cs-pal-demo i { width: 12px; height: 12px; border-radius: 50%; } /* Загрузка «ИИ подбирает палитры»: лоадер Agua + живой статус + мерцающие скелетоны будущих палитр (вместо голого кольца со строчкой под сеткой) */ .cs-load { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; } .cs-load-text { color: var(--text-2); font-weight: 800; font-size: .95rem; text-align: center; min-height: 1.3em; transition: opacity .3s ease; } .cs-skels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; } .cs-skels i { height: 86px; border-radius: 16px; border: 1px solid var(--border-soft); background: linear-gradient(100deg, var(--card-2) 40%, var(--pill) 50%, var(--card-2) 60%); background-size: 220% 100%; animation: csSkel 1.4s ease-in-out infinite; } @keyframes csSkel { from { background-position: 120% 0; } to { background-position: -120% 0; } } .cs-skels i:nth-child(2) { animation-delay: .15s; } .cs-skels i:nth-child(3) { animation-delay: .3s; } .cs-skels i:nth-child(4) { animation-delay: .45s; } /* готовые палитры въезжают с лёгким разворотом — по одной */ @media (prefers-reduced-motion: no-preference) { .cs-pal { animation: palIn .4s cubic-bezier(.2,.9,.25,1.15) both; } .cs-pal:nth-child(2) { animation-delay: .07s; } .cs-pal:nth-child(3) { animation-delay: .14s; } .cs-pal:nth-child(4) { animation-delay: .21s; } .cs-pal:nth-child(5) { animation-delay: .28s; } @keyframes palIn { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } } } /* ============================================================ GLASS PACK — матовое стекло на ПК, liquid glass на телефоне ============================================================ */ /* --- ПК: спокойное матовое (frosted) стекло на ключевых поверхностях --- */ @media (min-width: 681px) { .topbar { background: color-mix(in srgb, var(--card-2) 70%, transparent); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); } .feed-tabs { background: color-mix(in srgb, var(--card-2) 64%, transparent); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); } .side-card { background: color-mix(in srgb, var(--card-2) 72%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } .left .nav-item { background: color-mix(in srgb, var(--pill) 70%, transparent); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); } .left .nav-item.active { background: color-mix(in srgb, var(--accent-dark) 82%, transparent); } /* «Создать» — сплошная зелёная, без матового стекла: правила выше идут позже в файле и с той же специфичностью перекрывали ей зелёный фон */ .left .nav-item.nav-create, .left .nav-item.nav-create.active, .left .nav-item.nav-create:hover { background: linear-gradient(180deg, var(--create-green), var(--create-green-strong)); backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; } .modal { background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); } } /* --- Телефон: liquid glass — жиже, глянцевые блики, сильное преломление --- */ @media (max-width: 680px) { .topbar { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 45%), color-mix(in srgb, var(--card-2) 52%, transparent); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(30px) saturate(1.9); -webkit-backdrop-filter: blur(30px) saturate(1.9); } .feed-tabs { /* прозрачнее, чем остальное стекло: под плашкой должно быть ВИДНО, как иконки лайков и посты размазываются при прокрутке (просьба: «заблюрено сзади») */ background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.01) 45%), color-mix(in srgb, var(--card-2) 30%, transparent); border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px -10px rgba(0,0,0,.5); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); } /* нижняя панель: максимум «жидкости» — глянец сверху и снизу */ .nav { background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 42%, var(--accent-soft)), rgba(8,8,8,.52); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.65); backdrop-filter: blur(34px) saturate(2); -webkit-backdrop-filter: blur(34px) saturate(2); } .comments-sheet { background: color-mix(in srgb, var(--card) 62%, transparent); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -16px 50px rgba(0,0,0,.5); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); } .modal, .sheet { /* блик строго сверху вниз: диагональный (150deg) собирался ярким пятном слева у кнопок («Репост», «Реагуа» и т.д.) и выглядел странно */ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%), color-mix(in srgb, var(--card) 66%, transparent); border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); } /* светлая тема: стекло светлое, аккуратные тёмные кромки */ [data-theme="light"] .topbar, [data-theme="light"] .feed-tabs, [data-theme="light"] .comments-sheet, [data-theme="light"] .modal, [data-theme="light"] .sheet { border-color: rgba(0,0,0,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(0,0,0,.12); } } /* ПК: обои НЕ трогаем — размытие живёт только ЗА «окнами» интерфейса: кнопки панели слева, «Сейчас популярно», карточки постов и т.д. */ @media (min-width: 681px) { [data-skin="custom"] .post, [data-skin="custom"] .online-card, [data-skin="custom"] .ww-card { backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); } } /* ============================================================ НОВЫЕ АНИМАЦИИ — места, где движения раньше не было вовсе (существующие анимации не трогаем) ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* комментарии подъезжают каскадом слева (задержку порции ставит JS) */ .comment { animation: commentIn .38s cubic-bezier(.2,.9,.25,1) both; } @keyframes commentIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } /* кружки сторис выпрыгивают по одному */ .stories-rail .story-item { animation: storyPop .5s cubic-bezier(.2,1.15,.3,1) both; } .stories-rail .story-item:nth-child(2) { animation-delay: .05s; } .stories-rail .story-item:nth-child(3) { animation-delay: .1s; } .stories-rail .story-item:nth-child(4) { animation-delay: .15s; } .stories-rail .story-item:nth-child(5) { animation-delay: .2s; } .stories-rail .story-item:nth-child(6) { animation-delay: .25s; } .stories-rail .story-item:nth-child(7) { animation-delay: .3s; } .stories-rail .story-item:nth-child(n+8) { animation-delay: .35s; } @keyframes storyPop { from { opacity: 0; transform: scale(.55) translateY(10px); } to { opacity: 1; transform: none; } } /* пустые состояния мягко вплывают, «орб» дышит */ .empty { animation: emptyIn .45s cubic-bezier(.2,.9,.25,1) both; } @keyframes emptyIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } } .empty-orb { animation: orbFloat 3.4s ease-in-out infinite; } @keyframes orbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* аватар в шапке профиля «надувается» при открытии */ .profile-avatar { animation: avaPop .5s cubic-bezier(.2,1.2,.3,1) both; } @keyframes avaPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } } /* заголовок страницы слегка съезжает вниз при открытии */ .topbar h1 { animation: titleIn .32s ease both; } @keyframes titleIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } } /* GIF-ячейки в пикере проявляются с лёгким увеличением */ .gif-cell { animation: gifIn .3s ease both; } .gif-cell:nth-child(2n) { animation-delay: .05s; } .gif-cell:nth-child(3n) { animation-delay: .09s; } @keyframes gifIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } /* чипсы фильтров ленты и настроений пружинят при нажатии */ .feed-filter:active, .feed-mood-opt:active, .story-item:active { transform: scale(.93); } .feed-filter, .feed-mood-opt { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .16s cubic-bezier(.2,1.2,.3,1); } /* кнопка «Показать ещё комментарии» */ .cm-more { animation: emptyIn .35s ease both; } } @media (prefers-reduced-motion: reduce) { .comment, .stories-rail .story-item, .empty, .empty-orb, .profile-avatar, .topbar h1, .gif-cell, .cm-more { animation: none !important; } } /* «Показать ещё комментарии» — во всю ширину, с воздухом */ .cm-more { display: block; width: 100%; margin-top: 12px; } .cm-more .aq-loader.sm { margin: 0 auto; } /* ============================================================ V4 POLISH — фокус с клавиатуры, скроллбары в тему, фиксы светлой темы, микро-анимации (только transform/opacity) ============================================================ */ /* ---- видимый фокус при навигации с клавиатуры (Tab); мышь/тап его не показывают ---- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .input:focus-visible, textarea:focus-visible { outline: none; } /* у полей своя подсветка рамкой */ /* ---- внутренние скроллы (модалки, пикеры, списки) — тонкий скроллбар в цвет темы вместо системного серого ---- */ .modal, .gif-grid, .follow-list, .invite-results, .cs-body, .mention-box, .board-picker #bp-list, .auth-screen, .land { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; } .modal::-webkit-scrollbar, .gif-grid::-webkit-scrollbar, .follow-list::-webkit-scrollbar, .invite-results::-webkit-scrollbar, .cs-body::-webkit-scrollbar, .mention-box::-webkit-scrollbar, .board-picker #bp-list::-webkit-scrollbar, .auth-screen::-webkit-scrollbar, .land::-webkit-scrollbar { width: 8px; height: 8px; } .modal::-webkit-scrollbar-thumb, .gif-grid::-webkit-scrollbar-thumb, .follow-list::-webkit-scrollbar-thumb, .invite-results::-webkit-scrollbar-thumb, .cs-body::-webkit-scrollbar-thumb, .mention-box::-webkit-scrollbar-thumb, .board-picker #bp-list::-webkit-scrollbar-thumb, .auth-screen::-webkit-scrollbar-thumb, .land::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 999px; } .modal::-webkit-scrollbar-track, .gif-grid::-webkit-scrollbar-track { background: transparent; } /* ---- светлая тема: читаемая активная вкладка + мягкие тени (тёмные были слишком тяжёлые) ---- */ [data-theme="light"] .tab.active { color: var(--accent-strong); } [data-theme="light"] .post:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .10); } [data-theme="light"] .feed-tabs { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .20); } [data-theme="light"] .feed-mood-panel { box-shadow: 0 16px 40px rgba(0, 0, 0, .14); } [data-theme="light"] .mention-box { box-shadow: 0 18px 44px rgba(0, 0, 0, .16); } /* ---- плавная смена темы/скина: фон и цвет текста переезжают, а не мигают ---- */ body { transition: background-color .35s ease, color .35s ease; } /* ---- поля ввода: мягкое свечение при фокусе (и у комментариев, где рамка вовсе не подсвечивалась) ---- */ .input, .comment-box textarea { transition: border-color .2s ease, box-shadow .25s ease; } .input:focus, .comment-box textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } @media (prefers-reduced-motion: no-preference) { /* переключатели настроек: кнопка по-iOS растягивается, пока палец/мышь нажаты */ .switch .slider::before { transition: transform .3s cubic-bezier(.2, 1.2, .3, 1), width .22s ease; } .switch input:active + .slider::before { width: 29px; } .switch input:checked:active + .slider::before { transform: translateX(15px); } /* вкладки и сегменты пружинят при нажатии */ .tab, .ptab, .seg button, .set-tab { transition: color .2s ease, background .25s ease, transform .16s cubic-bezier(.2, 1.2, .3, 1); } .tab:active, .ptab:active, .seg button:active, .set-tab:active { transform: scale(.94); } /* тренды слегка подаются к курсору */ .trend { transition: background .2s ease, transform .2s ease; } .trend:hover { transform: translateX(3px); } /* иконки левой навигации чуть растут при наведении (transition уже задан выше) */ .nav-item:hover .ic { transform: scale(1.08); } /* глянцевый блик пробегает по основной кнопке при наведении (ПК) */ .btn.primary { position: relative; overflow: hidden; } .btn.primary::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .28) 50%, transparent 68%); transform: translateX(-130%); transition: transform .55s ease; } .btn.primary:hover::after { transform: translateX(130%); } } /* ============================================================ ОНБОРДИНГ после создания аккаунта: приветствие + сборка интерфейса «кирпичиками» и тяжёлая вставка нижней плашки ============================================================ */ .ob-overlay { position: fixed; inset: 0; z-index: 5000; background: #000; color: #fff; display: grid; place-items: center; transition: opacity .5s ease; } .ob-overlay.is-gone { opacity: 0; pointer-events: none; } .ob-stage { text-align: center; padding: 28px; max-width: 640px; transition: opacity .6s ease, transform .6s ease, filter .6s ease; } .ob-overlay.is-dark .ob-stage { opacity: 0; transform: scale(.94); filter: blur(6px); } .ob-hello { font-family: var(--font-bold); font-weight: 950; font-size: clamp(1.9rem, 6.4vw, 3.4rem); line-height: 1.15; letter-spacing: -.02em; animation: obHello .8s cubic-bezier(.2,.9,.25,1) both; } .ob-hello b { background: linear-gradient(92deg, var(--accent, #34c759), #7fd8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ob-wave { display: inline-block; transform-origin: 70% 75%; animation: obWave 1.6s .5s ease-in-out 2; } @keyframes obWave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(14deg); } 80% { transform: rotate(-4deg); } } .ob-sub { margin-top: 14px; color: #9a9aa0; font-weight: 800; font-size: clamp(1rem, 3.4vw, 1.35rem); animation: obHello .8s .35s cubic-bezier(.2,.9,.25,1) both; } .ob-dots i { display: inline-block; font-style: normal; animation: obDot 1.2s infinite; } .ob-dots i:nth-child(2) { animation-delay: .18s; } .ob-dots i:nth-child(3) { animation-delay: .36s; } @keyframes obDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @keyframes obHello { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } /* пока идёт сборка — страница чёрная (перекрывает тему и обои-скины) */ html.ob-black body { background: #000 !important; background-image: none !important; } html.ob-black .shell, html.ob-black .feed { background: transparent !important; } /* кирпич: спрятан, потом падает сверху и пружинит */ .ob-brick { opacity: 0 !important; animation: none !important; } .ob-brick.ob-in { opacity: 1 !important; animation: obBrickIn .5s cubic-bezier(.3,1.25,.4,1) both !important; } @keyframes obBrickIn { 0% { opacity: 0; transform: translateY(-46vh) rotate(-1.2deg) scale(1.02); } 55% { opacity: 1; transform: translateY(0) rotate(0) scale(1); } 72% { transform: translateY(-8px); } 86% { transform: translateY(0); } 93% { transform: translateY(-3px); } 100% { transform: translateY(0); } } /* плашка-финал: невидима, затем вставляется как тяжёлая плита */ .ob-slab { opacity: 0 !important; } .ob-slab.ob-slam { opacity: 1 !important; animation: obSlam .55s cubic-bezier(.55,0,.6,1) both !important; } @keyframes obSlam { 0% { opacity: 0; transform: translateY(-42vh) scale(1.05); } 45% { opacity: 1; } 55% { transform: translateY(0) scaleY(.92) scaleX(1.035); } /* удар: плита сплющивается */ 70% { transform: translateY(-7px) scale(1); } 84% { transform: translateY(0) scaleY(.985) scaleX(1.01); } 100% { transform: none; } } /* встряска ленты от удара */ .ob-shake { animation: obShakeY .5s cubic-bezier(.36,.07,.19,.97); } @keyframes obShakeY { 15% { transform: translateY(6px); } 35% { transform: translateY(-5px); } 55% { transform: translateY(3px); } 75% { transform: translateY(-2px); } 100% { transform: none; } } /* пыль от удара */ .ob-dust { position: fixed; inset: 0; z-index: 4600; pointer-events: none; } .ob-dust i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(210,205,195,.95), rgba(160,155,145,0) 70%); opacity: 0; animation: obDustFly .95s ease-out forwards; } @keyframes obDustFly { 0% { opacity: .95; transform: translate(0, 0) scale(.55); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.7); } } @media (prefers-reduced-motion: reduce) { .ob-hello, .ob-sub, .ob-wave, .ob-dots i, .ob-brick.ob-in, .ob-slab.ob-slam, .ob-shake, .ob-dust i { animation: none !important; } .ob-brick, .ob-slab { opacity: 1 !important; } } /* ============================================================ ЛИЧНЫЕ СООБЩЕНИЯ: страница «Сообщения», чат, звонки ============================================================ */ /* точка непрочитанного на пузыре в топбаре */ .icon-btn { position: relative; } .tb-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); } /* --- раздел «Активность» сверху --- */ .activity-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin: 10px 0 6px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; color: var(--text); cursor: pointer; text-align: left; transition: background .15s ease, transform .12s ease; } .activity-row:hover { background: var(--card-2); transform: translateY(-1px); } .activity-row .act-ic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-dark); color: var(--accent); } .activity-row .act-ic .ic { width: 22px; height: 22px; } .activity-row .act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .activity-row .act-main b { font-weight: 800; } .activity-row .act-main i { font-style: normal; color: var(--text-3); font-size: .85rem; } .activity-row .badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 900; display: grid; place-items: center; } .activity-row .act-chev { color: var(--text-3); display: grid; place-items: center; } .activity-row .act-chev .ic { width: 18px; height: 18px; transform: rotate(180deg); } .dm-note { display: flex; gap: 8px; align-items: flex-start; color: var(--text-3); font-size: .8rem; padding: 4px 6px 10px; } .dm-note .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; } .dm-note.warn { color: var(--danger); } /* --- список чатов --- */ .chat-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin-bottom: 6px; background: transparent; border: none; border-radius: 16px; color: var(--text); cursor: pointer; text-align: left; transition: background .15s ease; } .chat-item:hover { background: var(--card); } .chat-item .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .chat-item .chat-name { font-weight: 800; display: flex; align-items: center; gap: 8px; min-width: 0; } .chat-item .chat-req { font-style: normal; font-size: .68rem; font-weight: 800; color: var(--accent); background: var(--accent-dark); border-radius: 999px; padding: 2px 8px; flex: none; } .chat-item .chat-preview { color: var(--text-3); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-item.has-unread .chat-preview { color: var(--text); font-weight: 600; } .chat-item .chat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; } .chat-item .chat-time { color: var(--text-3); font-size: .75rem; } .chat-item .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 900; display: grid; place-items: center; } /* --- модалки «новый чат» / «отправить другу» --- */ .nc-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .nc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; text-align: left; } .nc-row:hover { background: var(--pill); } .nc-row:disabled { opacity: .6; cursor: default; } .nc-row .nc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .nc-row .nc-main b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nc-row .nc-main i { font-style: normal; color: var(--text-3); font-size: .8rem; } .nc-row .nc-send { color: var(--accent); display: grid; place-items: center; } /* --- экран чата --- */ .chat-page { display: flex; flex-direction: column; height: calc(100dvh - 24px); min-height: 380px; } .chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 6px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* кнопки звонка и «⋯» прижаты к правому краю (глобальный .spacer растягивается только внутри .topbar — здесь нужен свой) */ .chat-head .spacer { flex: 1; } .chat-head-user { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; } .chat-head-user .chu-names { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .chat-head-user .chu-names b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-head-user .chu-names i { font-style: normal; color: var(--text-3); font-size: .75rem; } /* «N участников печатают…» в шапке общего чата — акцентом, вместо строки статистики */ .chat-head-user .chu-names i.gc-typing { color: var(--accent); font-weight: 700; } .chat-head-user .chu-names i.gc-typing[hidden] { display: none; } .dm-msgs { flex: 1; overflow-y: auto; padding: 14px 6px 10px; display: flex; flex-direction: column; scroll-behavior: smooth; /* тонкий деликатный скроллбар (ярче при наведении) */ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 12%, transparent) transparent; } .dm-msgs:hover { scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent; } .dm-msgs::-webkit-scrollbar { width: 5px; } .dm-msgs::-webkit-scrollbar-track { background: transparent; } .dm-msgs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 3px; } .dm-msgs:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 24%, transparent); } .dm-msgs.mod { max-height: calc(100dvh - 190px); } .dm-more { align-self: center; margin-bottom: 10px; } .dm-day { align-self: center; margin: 12px 0 8px; color: var(--text-3); font-size: .74rem; font-weight: 700; background: var(--pill); border-radius: 999px; padding: 4px 12px; } .dm-author { font-size: .7rem; color: var(--text-3); margin: 6px 4px 2px; } .dm-msg { display: flex; max-width: 78%; align-self: flex-start; animation: dmMsgIn .34s cubic-bezier(.2,.9,.3,1.15) both; margin-top: 10px; } @keyframes dmMsgIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } .dm-msg.mine { align-self: flex-end; } .dm-msg.sys { align-self: center; max-width: 92%; margin: 14px 0 4px; } /* серия сообщений подряд от одного человека — плотнее и с «выпрямленным» углом */ .dm-msg.cont { margin-top: 2px; } .dm-msg.cont .dm-bubble { border-top-left-radius: 7px; } .dm-msg.mine.cont .dm-bubble { border-top-left-radius: 16px; border-top-right-radius: 7px; } .dm-bubble { position: relative; padding: 9px 12px 7px; background: var(--card); border: 1px solid var(--border-soft); border-radius: 16px 16px 16px 6px; overflow-wrap: anywhere; word-break: break-word; } .dm-msg.mine .dm-bubble { background: var(--accent-dark); border-color: transparent; border-radius: 16px 16px 6px 16px; } .dm-msg.sys .dm-bubble { background: color-mix(in srgb, var(--text) 6%, transparent); border: none; border-radius: 14px; text-align: center; padding: 10px 18px 8px; } .dm-msg.sys .dm-time.center { justify-content: center; margin-top: 3px; } .dm-text { white-space: pre-wrap; font-size: .95rem; } /* время — отдельной строкой ПОД текстом, не наезжает на сообщение */ .dm-time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 4px; float: none; color: var(--text-3); font-size: .68rem; } .dm-check { display: inline-flex; align-items: center; color: var(--text-3); } .dm-check .ic { width: 13px; height: 13px; } .dm-check.read { color: var(--accent); } .dm-gif { max-width: min(260px, 100%); border-radius: 12px; display: block; } .dm-call { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--text-2); font-size: .88rem; font-weight: 800; } .dm-call .ic { width: 16px; height: 16px; } .dm-call.missed { color: var(--danger); } /* --- ответы на сообщения --- */ .dm-msg { touch-action: pan-y; } /* горизонтальный свайп остаётся жесту «ответить» */ .dm-reply { display: flex; flex-direction: column; gap: 1px; width: 100%; margin-bottom: 6px; padding: 5px 9px; border: none; cursor: pointer; border-left: 3px solid var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--accent) 12%, transparent); text-align: left; color: var(--text); } .dm-reply b { font-size: .74rem; font-weight: 800; color: var(--accent); } .dm-reply i { font-style: normal; font-size: .8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } /* подсветка оригинала при переходе по плашке */ .dm-msg.flash .dm-bubble { animation: dmFlash 1.1s ease; } @keyframes dmFlash { 0%, 30% { background: color-mix(in srgb, var(--accent) 28%, var(--card)); } 100% { } } /* бар «Ответ …» над композером */ .dm-replybar { display: none; align-items: center; gap: 10px; margin-bottom: 6px; padding: 7px 8px 7px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; } .dm-replybar.show { display: flex; animation: fadeIn .2s ease both; } .dm-replybar .rb-line { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent); flex: none; } .dm-replybar .rb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dm-replybar .rb-body b { font-size: .76rem; color: var(--accent); } .dm-replybar .rb-body i { font-style: normal; font-size: .84rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-replybar .rb-x { width: 34px; height: 34px; flex: none; } /* меню сообщения (зажатие / ПКМ): столбик плавно выезжает вверх */ .msg-menu-back { position: fixed; inset: 0; z-index: 5090; background: var(--win-dim); backdrop-filter: var(--win-blur); -webkit-backdrop-filter: var(--win-blur); animation: fadeIn .18s ease both; } .msg-menu { position: fixed; z-index: 5100; min-width: 200px; display: flex; flex-direction: column; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.4); transform-origin: bottom center; animation: msgMenuIn .24s cubic-bezier(.2,.9,.3,1.2) both; } .msg-menu.below { transform-origin: top center; } @keyframes msgMenuIn { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } } .msg-menu button { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: none; border-radius: 11px; background: transparent; color: var(--text); font-weight: 700; font-size: .95rem; cursor: pointer; text-align: left; } .msg-menu button:hover { background: var(--pill); } .msg-menu button .ic { width: 18px; height: 18px; } .msg-menu button.danger { color: var(--danger); } .dm-msg.menu-target .dm-bubble { box-shadow: 0 0 0 2px var(--accent); } /* --- реакции --- */ .dm-reacts { display: none; gap: 5px; flex-wrap: wrap; margin-top: 6px; } .dm-reacts.has { display: flex; } /* капля реакции: серая — поставил собеседник; зелёная — поставили вы */ .dm-react-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font-size: .86rem; cursor: pointer; animation: chipIn .28s cubic-bezier(.2,.9,.3,1.25) both; transition: transform .14s ease, background .2s ease, border-color .2s ease; } /* в светлой теме капли заметно серее — не сливаются с фоном (ПК и iPad) */ [data-theme="light"] .dm-react-chip { background: color-mix(in srgb, var(--text) 14%, transparent); border-color: color-mix(in srgb, var(--text) 20%, transparent); } .dm-react-chip:hover { transform: translateY(-1px) scale(1.06); } .dm-react-chip:active { transform: scale(.9); } .dm-react-chip.mine, [data-theme="light"] .dm-react-chip.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 26%, transparent); } .dm-react-chip b { font-size: .74rem; font-weight: 900; } .dm-react-chip .emoji { width: 17px; height: 17px; } /* аватарки поставивших: последний — поверх, первый — позади наполовину */ .dm-react-chip .rc-avs { display: inline-flex; align-items: center; } .dm-react-chip .rc-avs .avatar { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); } .dm-react-chip .rc-avs .avatar:first-child { position: relative; z-index: 2; } .dm-react-chip .rc-avs .avatar + .avatar { margin-left: -9px; } .dm-react-chip.mine .rc-avs .avatar { border-color: color-mix(in srgb, var(--accent) 30%, var(--card)); } /* новая (верхняя) аватарка плавно выезжает перед старой */ .dm-react-chip .rc-avs .avatar.rc-new { animation: rcAvaIn .32s cubic-bezier(.2,.9,.3,1.35) both; } @keyframes rcAvaIn { from { opacity: 0; transform: translateX(-6px) scale(.4); } to { opacity: 1; transform: none; } } /* снятая реакция плавно схлопывается */ .dm-react-chip.chip-out { opacity: 0; transform: scale(.55); transition: opacity .22s ease, transform .22s ease; pointer-events: none; } @keyframes chipIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } } /* ряд быстрых реакций в меню сообщения */ .msg-menu-reacts { display: flex; gap: 2px; padding: 4px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); } .msg-menu-reacts button { width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; animation: reactPop .3s cubic-bezier(.2,.9,.3,1.4) both; transition: transform .13s ease, background .18s ease; } .msg-menu-reacts button:hover { transform: scale(1.25) translateY(-2px); background: var(--pill); } .msg-menu-reacts button:active { transform: scale(.85); } .msg-menu-reacts button .emoji { width: 24px; height: 24px; } @keyframes reactPop { from { opacity: 0; transform: scale(.3) translateY(8px); } to { opacity: 1; transform: none; } } /* сердечко непрочитанной реакции в списке чатов */ .chat-item .badge.heart { background: #e0245e; color: #fff; animation: heartIn .35s cubic-bezier(.2,.9,.3,1.35) both; } @keyframes heartIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } /* плавное схлопывание удалённого сообщения */ .dm-msg.collapse { opacity: 0; transform: translateX(-12px); margin-top: 0 !important; transition: height .32s cubic-bezier(.3,0,.2,1), opacity .22s ease, transform .3s ease, margin .32s cubic-bezier(.3,0,.2,1); } /* --- плавность по всему мессенджеру --- */ .chat-item { animation: chatItemIn .32s cubic-bezier(.2,.9,.3,1.1) both; } #dm-list .chat-item:nth-child(1) { animation-delay: 0ms; } #dm-list .chat-item:nth-child(2) { animation-delay: 35ms; } #dm-list .chat-item:nth-child(3) { animation-delay: 70ms; } #dm-list .chat-item:nth-child(4) { animation-delay: 105ms; } #dm-list .chat-item:nth-child(5) { animation-delay: 140ms; } #dm-list .chat-item:nth-child(n+6) { animation-delay: 170ms; } @keyframes chatItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .activity-row { animation: chatItemIn .3s ease both; } .chat-item .badge { animation: heartIn .3s cubic-bezier(.2,.9,.3,1.35) both; } .chat-head { animation: fadeIn .25s ease both; } .chat-foot .dm-composer { animation: composerIn .32s cubic-bezier(.2,.9,.3,1.1) both; } @keyframes composerIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .dm-banner { animation: composerIn .3s ease both; } .dm-day { animation: fadeIn .35s ease both; } .dm-check { transition: color .3s ease; } .dm-composer .send { transition: transform .15s ease, filter .2s ease; } .dm-composer .send:active { transform: scale(.85) rotate(-8deg); } .icon-btn[data-gif]:active { transform: scale(.85); } #chat-presence { transition: color .25s ease; } @media (prefers-reduced-motion: reduce) { .chat-item, .dm-msg, .dm-react-chip, .msg-menu-reacts button, .dm-composer, .dm-banner { animation: none !important; } } /* плавающая кнопка «прокрутить вниз» (+счётчик новых сообщений) */ .dm-scrolldown { position: absolute; right: 14px; bottom: 96px; z-index: 8; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.3); opacity: 0; transform: translateY(10px) scale(.85); pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .dm-scrolldown.show { opacity: 1; transform: none; pointer-events: auto; } .dm-scrolldown .ic { width: 20px; height: 20px; } .dm-scrolldown .sd-badge { position: absolute; top: -5px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 900; display: grid; place-items: center; } .chat-page { position: relative; } /* карточка отправленного поста/плёнки */ .dm-post-card { display: flex; gap: 10px; align-items: stretch; min-width: 200px; max-width: 300px; text-decoration: none; color: var(--text); } .dm-post-card.deleted { color: var(--text-3); font-size: .88rem; } .dm-post-thumb { width: 64px; min-height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--pill); } .dm-post-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dm-post-body b { font-weight: 800; font-size: .85rem; } .dm-post-body i { font-style: normal; color: var(--text-2); font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dm-post-body u { text-decoration: none; color: var(--accent); font-size: .78rem; font-weight: 800; } /* --- низ чата: композер и баннеры --- */ /* композер всегда внизу видимой области: липнет к низу скроллпорта, а не уезжает вместе с прокруткой чата */ .chat-foot { position: sticky; bottom: 0; z-index: 6; padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 78%, transparent); } .dm-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; color: var(--text-2); font-size: .88rem; } .dm-banner .ic { width: 17px; height: 17px; flex: none; } .dm-banner.warn { color: var(--danger); border-color: rgba(255,77,77,.35); } .dm-banner.req span { flex: 1; min-width: 140px; } .dm-banner .btn { padding: 6px 12px; font-size: .82rem; } .dm-composer { display: flex; align-items: flex-end; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 6px; } /* селектор с тегом — чтобы перебить `textarea.input { resize: vertical }`, который рисовал уголок-растяжку; поле растёт само по мере набора (JS) */ textarea.dm-input { flex: 1; border: none; background: transparent; resize: none; /* высота поля = высоте кнопок ряда (48px): 24 строка + 12+12 паддинги — иначе поле (38px) прижималось к низу ряда flex-end'ом, и «Сообщение…» оказывалось ниже центра */ min-height: 48px; height: 48px; max-height: 120px; padding: 12px 6px; line-height: 24px; overflow-y: auto; scrollbar-width: none; /* ≥16px — иначе iOS «наезжает» зумом на поле при фокусе и отъезжает после */ font-size: max(16px, 1rem); } textarea.dm-input::-webkit-scrollbar { display: none; } textarea.dm-input::-webkit-resizer { display: none; } .dm-input:focus { outline: none; box-shadow: none; } .dm-composer .icon-btn { flex: none; } .dm-composer .send { background: var(--accent); color: var(--accent-ink); } .dm-composer .send:hover { filter: brightness(1.08); } /* --- звонок: на весь экран, сворачивается в плашку сверху (как музыка) --- */ .call-full { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(26px + env(safe-area-inset-bottom, 0px)); /* Только НЕпрозрачный фон: в кастомном оформлении --bg полупрозрачный (обои должны просвечивать в ленте), и звонок из-за этого шёл с обоями под лицом собеседника. --bg-solid ставит applySkin(); у обычных тем его нет и подставляется --bg, который и так непрозрачный. */ background: var(--bg-solid, var(--bg)); overflow: hidden; animation: fadeIn .22s ease both; } /* живой фон: два зелёных «облака» плывут по экрану; при ошибке (класс .call-error на оверлее) зелёные гаснут и проявляются красные — у красных анимация стартует быстро и затухает к медленной (callBgFast → плавный цикл) */ /* размытие делаем самим градиентом (radial до transparent), а не filter:blur на огромных слоях — тяжёлый blur лагал на телефонах */ .call-bg { position: absolute; inset: -20%; pointer-events: none; contain: paint; } .call-bg .cb { position: absolute; border-radius: 50%; opacity: .5; transition: opacity 1.1s ease; will-change: transform; transform: translateZ(0); } /* «как на самсунге»: три больших облака дышат, плывут и чуть меняют оттенок */ .call-bg .cb-g1 { width: 86vmax; height: 86vmax; left: -20vmax; top: -26vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 22%, transparent) 42%, transparent 68%); animation: cbDrift1 18s ease-in-out infinite alternate, cbHue 23s ease-in-out infinite alternate; } .call-bg .cb-g2 { width: 70vmax; height: 70vmax; right: -22vmax; bottom: -24vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 44%, transparent) 0%, color-mix(in srgb, var(--accent) 17%, transparent) 42%, transparent 68%); animation: cbDrift2 24s ease-in-out infinite alternate, cbHue 31s ease-in-out infinite alternate-reverse; } .call-bg .cb-g3 { width: 52vmax; height: 52vmax; left: 22vmax; bottom: -20vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%, color-mix(in srgb, var(--accent) 12%, transparent) 45%, transparent 70%); animation: cbDrift3 29s ease-in-out infinite alternate, cbHue 19s ease-in-out infinite alternate; } @keyframes cbHue { 0% { filter: hue-rotate(0deg) saturate(1); } 50% { filter: hue-rotate(-14deg) saturate(1.15); } 100% { filter: hue-rotate(10deg) saturate(.95); } } @keyframes cbDrift3 { 0% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-10vmax, -12vmax) scale(1.22); } 100% { transform: translate(8vmax, -4vmax) scale(.9); } } /* красные слои НЕ анимируются, пока невидимы (экономия GPU на телефонах) — анимацию им выдаёт только .call-error ниже */ .call-bg .cb-r1 { width: 86vmax; height: 86vmax; left: -20vmax; top: -26vmax; background: radial-gradient(circle, rgba(224,36,94,.55) 0%, rgba(224,36,94,.2) 42%, transparent 68%); opacity: 0; } .call-bg .cb-r2 { width: 70vmax; height: 70vmax; right: -22vmax; bottom: -24vmax; background: radial-gradient(circle, rgba(224,36,94,.4) 0%, rgba(224,36,94,.15) 42%, transparent 68%); opacity: 0; } @media (prefers-reduced-motion: reduce) { .call-bg .cb { animation: none !important; } } /* телефон (портрет): vmax считается от высоты, и нижне-правое «облако» уезжало центром далеко за экран — оставался еле заметный край. Меряем от vmin и пододвигаем, чтобы свечение снизу-справа было видно как на ПК */ @media (max-width: 900px) { .call-bg .cb-g2, .call-bg .cb-r2 { width: 120vmin; height: 120vmin; right: -30vmin; bottom: -22vmin; } .call-bg .cb-g1, .call-bg .cb-r1 { width: 135vmin; height: 135vmin; left: -34vmin; top: -26vmin; } .call-bg .cb-g3 { width: 85vmin; height: 85vmin; left: 18vmin; bottom: -18vmin; } } @keyframes cbDrift1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9vmax, 7vmax) scale(1.12); } 100% { transform: translate(2vmax, 12vmax) scale(.95); } } @keyframes cbDrift2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8vmax, -6vmax) scale(1.15); } 100% { transform: translate(-13vmax, 2vmax) scale(.92); } } /* ошибка: резкий красный «удар» (быстрый цикл), затем обычный медленный дрейф */ .call-overlay.call-error .call-bg .cb-g1, .call-overlay.call-error .call-bg .cb-g2, .call-overlay.call-error .call-bg .cb-g3 { opacity: 0; } .call-overlay.call-error .call-bg .cb-r1 { opacity: .6; animation: cbFast .9s ease-out 1, cbDrift1 13s ease-in-out .9s infinite alternate; } .call-overlay.call-error .call-bg .cb-r2 { opacity: .48; animation: cbFast .9s ease-out 1 reverse, cbDrift2 17s ease-in-out .9s infinite alternate; } @keyframes cbFast { 0% { transform: translate(-10vmax, -8vmax) scale(1.3); } 100% { transform: translate(0, 0) scale(1); } } /* контент поверх фоновых «облаков»; ВАЖНО: не трогаем position у .call-min — универсальное правило с position:relative ломало его absolute-позицию, и вся раскладка звонка разваливалась */ .call-stage, .call-bottom { position: relative; z-index: 1; } .call-min { z-index: 3; } .call-overlay.minimized .call-full { display: none; } .call-min { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } .call-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 0; } .call-ava-wrap { position: relative; display: grid; place-items: center; margin-bottom: 14px; } .call-avatar { box-shadow: 0 18px 60px color-mix(in srgb, var(--accent) 35%, transparent); } /* расходящиеся кольца, пока идёт дозвон; гаснут после соединения */ .call-ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; pointer-events: none; } .call-ava-wrap.ringing .call-ring { animation: callRing 2.2s ease-out infinite; } .call-ava-wrap.ringing .call-ring.r2 { animation-delay: 1.1s; } @keyframes callRing { 0% { transform: scale(.92); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } } .call-name { margin: 0; font-size: 1.65rem; font-family: var(--font-bold); font-weight: 950; } .call-sub { color: var(--text-2); font-size: .95rem; min-height: 1.3em; transition: color .4s ease; } .call-overlay.call-error .call-sub { color: #ff7a9c; font-weight: 800; } .call-timer { color: var(--accent); font-weight: 900; font-size: 1.2rem; min-height: 1.4em; font-variant-numeric: tabular-nums; } /* эмодзи-ключ шифрования: 4 эмодзи, одинаковые у обоих; тап — подсказка */ .call-emoji-slot { min-height: 54px; display: flex; flex-direction: column; align-items: center; } .call-emoji-slot .call-emoji { animation: fadeIn .4s ease both; } .tg-promo-list { margin: 10px 0 4px; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 7px; color: var(--text-2); font-size: .95rem; } .call-emoji { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 16px; border: none; cursor: pointer; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); transition: transform .14s ease, background .2s ease; } .call-emoji:hover { background: color-mix(in srgb, var(--text) 14%, transparent); } .call-emoji:active { transform: scale(.95); } .call-emoji .emoji { width: 26px; height: 26px; } .call-emoji-hint { max-width: 300px; margin-top: 8px; color: var(--text-3); font-size: .78rem; line-height: 1.35; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-4px); transition: opacity .3s ease, max-height .3s ease, transform .3s ease; } .call-emoji-hint.show { opacity: 1; max-height: 80px; transform: none; } /* кнопки «Сбросить / Перезвонить» при ошибке звонка */ .call-err-btn { min-width: 132px; justify-content: center; font-size: 1rem; padding: 12px 18px; animation: fadeIn .3s ease both; } /* кнопки приподняты от края экрана и подписаны */ .call-bottom { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 0 0 auto; padding-bottom: 26px; } /* плашка о шифровании живёт посередине экрана (в .call-stage), под ключом */ .call-e2e { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--text-3); font-size: .72rem; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 999px; padding: 5px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .call-e2e .ic { width: 13px; height: 13px; } .call-btns { display: flex; gap: 26px; align-items: flex-start; } .call-btns:empty { display: none; } /* кнопка + подпись под ней */ .call-btn-w { display: flex; flex-direction: column; align-items: center; gap: 8px; } .call-btn-w .cbl { font-size: .78rem; font-weight: 800; color: var(--text-2); letter-spacing: .01em; } .call-btn { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); transition: transform .12s ease, filter .15s ease; } .call-btn:hover { transform: translateY(-2px); filter: brightness(1.1); } .call-btn:active { transform: scale(.94); } .call-btn .ic { width: 24px; height: 24px; } .call-btn.big { width: 68px; height: 68px; } .call-btn.big .ic { width: 28px; height: 28px; } .call-btn.end { background: #e0245e; color: #fff; } .call-btn.accept { background: #17bf63; color: #fff; animation: callPulse 1.4s ease infinite; } .call-btn.active { background: var(--danger-dark); color: var(--danger); } @keyframes callPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(23,191,99,.45); } 50% { box-shadow: 0 0 0 14px rgba(23,191,99,0); } } /* свёрнутый звонок: плашка сверху в стиле мини-плеера */ .call-mini { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px) + var(--pill-shift, 0px)); left: 50%; transform: translate(-50%, -130%); z-index: 5001; width: min(440px, calc(100vw - 20px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); opacity: 0; pointer-events: none; cursor: pointer; transition: transform .35s cubic-bezier(.2,.9,.2,1), opacity .25s ease; } .call-overlay.minimized .call-mini { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .call-mini .cm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; } .call-mini .cm-info b { font-weight: 900; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .call-mini .cm-info i { font-style: normal; color: var(--text-3); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .call-mini .cm-timer { color: var(--accent); font-weight: 900; font-size: .9rem; font-variant-numeric: tabular-nums; flex: none; } .call-btn.mini { width: 40px; height: 40px; flex: none; } .call-btn.mini .ic { width: 19px; height: 19px; } /* статусы сообщений: ✓ отправлено / ✓✓ прочитано */ .dm-check .ic + .ic { display: none; } .dm-check.read .ic + .ic { display: inline; margin-left: -9px; } /* «печатает…» в шапке чата */ #chat-presence.typing { color: var(--accent); font-weight: 700; } /* мобильный: чат занимает ВЕСЬ экран до навбара (fixed), поле ввода всегда сразу над навигацией — раньше чат считался от скроллпорта с паддингами, выходил маленьким, а поле висело слишком высоко */ @media (max-width: 900px) { .chat-page { position: fixed; left: 0; right: 0; top: 0; /* чуть выше навбара, чтобы нижняя обводка композера не пряталась под ним */ bottom: calc(92px + env(safe-area-inset-bottom, 0px)); height: auto; min-height: 0; z-index: 250; transition: bottom .35s cubic-bezier(.3,0,.2,1); /* навбар уехал → чат плавно опускается */ background: var(--bg); padding: 0 12px; } /* телефоны: backdrop-blur пересчитывается на каждый кадр прокрутки и роняет FPS — на мобиле шапка чата просто непрозрачная (на ПК блюр остаётся) */ .chat-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); /* НЕ sticky на мобиле: .chat-page здесь position:fixed, а sticky внутри fixed на iOS Safari «отрывается» и размазывается при инерционной прокрутке (шапка и плашка аудиочата под ней уезжали вверх). Сообщения и так скроллятся внутри #gc-msgs, поэтому шапке фиксация не нужна. */ position: relative; top: auto; } /* плашка аудиочата — тоже вне прокрутки, отдельным слоем, чтобы её не «съедало» */ .gc-voice { position: relative; z-index: 4; } .chat-foot { position: static; padding-bottom: 10px; background: none; } .dm-msg { max-width: 88%; } /* прокрутка чата без smooth-анимации — мгновенная и дешевле по кадрам */ .dm-msgs { scroll-behavior: auto; } } /* ============================================================ Панель администратора (/admin) — только у аккаунта Agua ============================================================ */ .adm-enter { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 4px 0 14px; padding: 14px 18px; border: 0; border-radius: 18px; text-align: left; background: linear-gradient(180deg, var(--create-green), var(--create-green-strong)); color: #fff; font-family: var(--font-bold); font-weight: 900; font-size: 1.08rem; box-shadow: 0 10px 26px var(--create-green-glow); transition: transform .15s ease, filter .2s ease; } .adm-enter:hover { filter: brightness(1.06); } .adm-enter:active { transform: scale(.98); } .adm-enter span { font-family: var(--font-light); font-weight: 600; font-size: .86rem; opacity: .9; } .adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .adm-stat { background: var(--card); border: 1px solid var(--border-soft); border-radius: 18px; padding: 14px 16px; min-height: 92px; } .adm-stat-n { font-family: var(--font-bold); font-weight: 900; font-size: 1.9rem; line-height: 1.1; } .adm-stat-t { font-family: var(--font-bold); font-weight: 800; font-size: .92rem; margin-top: 2px; } .adm-stat-s { font-family: var(--font-light); font-weight: 500; font-size: .78rem; color: var(--text-3); margin-top: 2px; } .adm-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; } .adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-bold); font-weight: 900; font-size: 1.1rem; margin-bottom: 12px; } .adm-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-light); font-weight: 600; font-size: .8rem; color: var(--text-3); } .adm-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: admPulse 1.6s ease-in-out infinite; } @keyframes admPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } } .adm-globe-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 460px; margin: 0 auto; overflow: hidden; border-radius: 18px; /* приближенный шар не вылезает за карточку */ } .adm-globe { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; } .adm-globe:active { cursor: grabbing; } .adm-tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none; background: color-mix(in srgb, var(--card-2) 92%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; z-index: 3; box-shadow: 0 10px 26px rgba(0,0,0,.4); } .adm-tip b { font-family: var(--font-bold); font-weight: 900; font-size: .95rem; } .adm-tip span { font-family: var(--font-light); font-weight: 600; font-size: .8rem; color: var(--text-3); } .adm-zoom { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .adm-zoom > span { font-family: var(--font-light); font-weight: 600; font-size: .82rem; color: var(--text-3); flex: 0 0 auto; } .adm-zoom input[type=range] { flex: 1; height: 6px; border-radius: 999px; appearance: none; -webkit-appearance: none; background: var(--pill-2); outline: none; } .adm-zoom input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); cursor: pointer; } .adm-zoom input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); cursor: pointer; } .adm-zoom-reset { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--pill); color: var(--text-2); font-family: var(--font-bold); font-weight: 700; font-size: .8rem; } .adm-zoom-reset:active { transform: scale(.96); } .adm-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; } .adm-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-light); font-weight: 600; font-size: .8rem; color: var(--text-3); } .adm-legend i { width: 10px; height: 10px; border-radius: 50%; } .adm-cities { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; } .adm-city { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; } .adm-city:nth-child(odd) { background: var(--card-2); } .adm-city i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .adm-city-n { flex: 1; font-family: var(--font-bold); font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-city-c { font-family: var(--font-light); font-weight: 600; font-size: .85rem; color: var(--text-3); } .adm-empty { font-family: var(--font-light); font-weight: 500; font-size: .9rem; color: var(--text-3); text-align: center; padding: 14px 0; } .adm-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; } .adm-row-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; } .adm-row-txt b { font-family: var(--font-bold); font-weight: 800; font-size: 1rem; } .adm-row-txt span { font-family: var(--font-light); font-weight: 500; font-size: .84rem; color: var(--text-3); } .adm-num { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .adm-num input { width: 92px; min-height: 46px; padding: 0 12px; text-align: center; border-radius: 14px; border: 1px solid var(--border); background: var(--pill); color: var(--text); font-family: var(--font-bold); font-weight: 900; font-size: 1.05rem; } .adm-num span { font-family: var(--font-light); font-weight: 600; font-size: .9rem; color: var(--text-3); } .adm-save { margin-top: 8px; } .adm-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; transition: opacity .2s ease; } .adm-levels.off { opacity: .4; pointer-events: none; } .adm-level { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left; border-radius: 14px; border: 1px solid var(--border); background: var(--pill); color: var(--text); transition: background .2s ease, border-color .2s ease, transform .15s ease; } .adm-level:active { transform: scale(.98); } .adm-level b { font-family: var(--font-bold); font-weight: 900; font-size: .98rem; } .adm-level span { font-family: var(--font-light); font-weight: 500; font-size: .78rem; color: var(--text-3); } .adm-level.active { background: var(--accent-dark); border-color: var(--accent); } .adm-level.active b { color: var(--accent); } /* Наша капча на экране входа */ .cap-box { margin: 12px 0; padding: 14px; border-radius: 18px; background: var(--pill); border: 1px solid var(--border); } .cap-q { font-family: var(--font-bold); font-weight: 800; font-size: .98rem; margin-bottom: 10px; text-align: center; } .cap-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .cap-opt { aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: 26px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); transition: transform .15s ease, border-color .2s ease, background .2s ease; } .cap-opt:active { transform: scale(.92); } .cap-opt.picked { border-color: var(--accent); background: var(--accent-dark); } .cap-opt img.emoji { width: 30px; height: 30px; margin: 0; } @media (max-width: 680px) { .adm-stats { grid-template-columns: repeat(2, 1fr); } .adm-stat-n { font-size: 1.6rem; } .adm-levels { grid-template-columns: 1fr; } .adm-globe-wrap { max-height: 380px; } .adm-row { flex-wrap: wrap; } }