/* Мини-апп рассылки ВК.
*
* Палитра своя, в стилистике ВК, а не из темы Telegram: приложение должно
* выглядеть одинаково в любом клиенте, а «светло/темно» берём у системы
* (или у Telegram, если он подсказал) и вешаем на .
*
* Системных контролов в интерфейсе не осталось: селект — лист выбора снизу,
* подтверждение — свой лист, аккордеон — свой, время — свои барабаны в
* 24-часовом формате (родное поле берёт формат у системы и показывает AM/PM,
* который на части телефонов не переключается).
*/
:root {
color-scheme: light;
--vk-blue: #0077ff;
--vk-blue-press: #0064d8;
--bg: #ffffff;
--bg-elevated: #ffffff; /* карточки на светлом фоне */
--bg-sunken: #f0f2f5; /* фон страницы под карточками */
--bar: rgba(255, 255, 255, .82);
--text: #000000;
--text-2: #818c99;
--text-3: #99a2ad;
--accent: var(--vk-blue);
--accent-soft: rgba(0, 119, 255, .1);
--on-accent: #ffffff;
--danger: #e64646;
--danger-soft: rgba(230, 70, 70, .1);
--ok: #4bb34b;
--ok-soft: rgba(75, 179, 75, .12);
--warn: #ffa000;
--warn-soft: rgba(255, 160, 0, .14);
--line: rgba(0, 0, 0, .08);
--line-strong: rgba(0, 0, 0, .14);
--fill: rgba(0, 0, 0, .04);
--shadow: 0 8px 32px rgba(0, 0, 0, .16);
/* стекло плавающего островка вкладок */
--glass: rgba(255, 255, 255, .72);
--glass-edge: rgba(255, 255, 255, .6);
--glass-shine: rgba(255, 255, 255, .9);
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 20px;
--control-h: 44px;
--ease: cubic-bezier(.22, .61, .36, 1);
--fast: .16s var(--ease);
--slow: .28s var(--ease);
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #19191a;
--bg-elevated: #232324;
--bg-sunken: #19191a;
--bar: rgba(25, 25, 26, .82);
--text: #e1e3e6;
--text-2: #909499;
--text-3: #76787a;
--accent: #4d92f7;
--accent-soft: rgba(77, 146, 247, .16);
--on-accent: #ffffff;
--danger: #ff5c5c;
--danger-soft: rgba(255, 92, 92, .16);
--ok: #4bb34b;
--ok-soft: rgba(75, 179, 75, .16);
--warn: #ffa000;
--warn-soft: rgba(255, 160, 0, .18);
--line: rgba(255, 255, 255, .09);
--line-strong: rgba(255, 255, 255, .16);
--fill: rgba(255, 255, 255, .06);
--shadow: 0 8px 32px rgba(0, 0, 0, .5);
--glass: rgba(44, 44, 46, .72);
--glass-edge: rgba(255, 255, 255, .12);
--glass-shine: rgba(255, 255, 255, .08);
}
* { box-sizing: border-box; }
body {
margin: 0;
font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
background: var(--bg-sunken);
color: var(--text);
padding-bottom: calc(84px + env(safe-area-inset-bottom));
-webkit-tap-highlight-color: transparent;
/* Долгий тап в интерфейсе не должен выделять текст и звать меню копирования —
это про справку и подписи, из-за них экран выглядел «сломанным». */
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
}
/* Выделения в интерфейсе нет нигде, кроме полей ввода.
Перечислять «какие элементы не выделять» бесполезно: правило с body
наследуется не во всех движках, часть возвращает элементам `user-select: auto`,
и от долгого тапа по любой подписи вылезала синяя полоса выделения — экран
выглядел так, будто из него собрались копировать. Поэтому запрет тотальный,
а исключение ровно одно: то, что человек сам печатает. */
*, *::before, *::after {
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
input, textarea {
-webkit-user-select: text; user-select: text;
-webkit-touch-callout: default;
}
/* На всякий случай гасим и саму подсветку: отдельные движки рисуют её даже
при user-select: none — например, когда выделение тянут мышью через блок. */
::selection { background: transparent; }
input::selection, textarea::selection { background: var(--accent-soft); }
/* Обводка по тапу не нужна — она остаётся висеть после нажатия. Для клавиатуры
фокус возвращаем: без него по интерфейсу нельзя ходить табом.
Но именно возвращаем — и только там, где есть настоящая клавиатура и мышь.
На телефоне :focus-visible срабатывает и от пальца: часть движков считает
«видимым» фокус после тапа по кнопке, и на справке, шапке и кнопке темы
оставалась висеть синяя рамка, похожая на выделение текста. */
:where(button, .picker, input, textarea, a, label, summary):focus { outline: none; }
@media (hover: hover) and (pointer: fine) {
button:focus-visible, .picker:focus-visible, input:focus-visible,
textarea:focus-visible, a:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
}
.hidden { display: none !important; }
/* ---------- шапка в духе iOS: объёмная плашка + большой заголовок ---------- */
.appbar {
position: sticky; top: 0; z-index: 20;
/* До прокрутки шапка сливается с фоном страницы — ровно как в тёмной теме.
На светлой она была белой поверх серого фона и торчала отдельной плашкой,
хотя показывать там до прокрутки нечего. */
background: var(--bg-sunken);
padding-top: env(safe-area-inset-top);
/* Скруглённый низ и мягкая тень появляются вместе: шапка отделяется
от страницы только тогда, когда под неё что-то уехало. */
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow var(--slow), background var(--slow);
}
.appbar.scrolled {
background: var(--bar);
-webkit-backdrop-filter: saturate(180%) blur(22px);
backdrop-filter: saturate(180%) blur(22px);
box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .35), 0 1px 0 var(--line);
}
.appbar-inner {
display: flex; align-items: center; gap: var(--s2);
height: 58px; padding: 0 var(--s3);
}
.appbar-title {
flex: 1; min-width: 0; font-size: 17px; font-weight: 600; text-align: center;
opacity: 0; transform: translateY(8px);
transition: opacity var(--fast), transform var(--fast);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
pointer-events: none;
}
.appbar.scrolled .appbar-title { opacity: 1; transform: none; }
/* Крупный заголовок страницы — он же уезжает вверх при прокрутке. */
.large-title {
margin: var(--s3) 0 var(--s4);
font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em;
}
/* чип текущей страницы ВК и круглые кнопки шапки */
.chip {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; max-width: 46vw; padding: 0 var(--s2) 0 4px;
border: 0; border-radius: 999px; background: var(--fill); color: var(--text);
font-size: 14px; font-weight: 500; cursor: pointer;
transition: transform var(--fast), background var(--fast);
}
.chip:active { transform: scale(.96); background: var(--line); }
.chip.off { opacity: .55; }
.chip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .ava {
width: 26px; height: 26px; flex: none; border-radius: 50%;
background: var(--accent); color: var(--on-accent);
display: grid; place-items: center; font-size: 12px; font-weight: 600;
background-size: cover; background-position: center;
}
.chip .ava.img { color: transparent; } /* аватарка страницы ВК */
.chip .ava.all { background: var(--fill); color: var(--text-2); }
.icon-btn {
width: 34px; height: 34px; flex: none; display: grid; place-items: center;
border: 0; border-radius: 50%; background: var(--fill); color: var(--text);
font-size: 15px; cursor: pointer; transition: transform var(--fast), background var(--fast);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn.danger { color: var(--danger); background: var(--danger-soft); }
/* ---------- нижние вкладки ---------- */
/* Нижние вкладки — плавающим островком, как в свежих iOS: полоса во всю ширину
выглядит приклеенной к низу, а островок читается как отдельный элемент
поверх страницы. Стекло собрано слоями: размытие + полупрозрачная заливка +
светлая грань сверху и мягкая тень снизу. */
.tabbar {
position: fixed; z-index: 20;
left: 50%; transform: translateX(-50%);
bottom: calc(var(--s2) + env(safe-area-inset-bottom));
width: min(calc(100% - var(--s4)), 520px);
display: flex;
background: var(--glass);
-webkit-backdrop-filter: saturate(180%) blur(24px);
backdrop-filter: saturate(180%) blur(24px);
border: 1px solid var(--glass-edge);
border-radius: 22px;
box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glass-shine);
overflow: hidden;
}
.tabbar button {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
background: none; border: 0; color: var(--text-3);
padding: 10px 2px 9px; font-size: 10px; font-weight: 500; cursor: pointer;
transition: color var(--fast);
}
.tabbar button svg {
width: 24px; height: 24px; display: block;
transition: transform var(--slow), stroke-width var(--slow);
}
.tabbar button:active svg { transform: scale(.86); }
.tabbar button.active { color: var(--accent); }
.tabbar button.active svg { transform: translateY(-1px); stroke-width: 2.1; }
/* ---------- каркас ---------- */
.view { padding: 0 var(--s3) var(--s6); animation: fade-up .22s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Единый вертикальный ритм внутри вкладки. Раньше кнопка «Новый пост» и первая
карточка стояли впритык, а пояснение под заголовком слипалось со списком. */
.toolbar { margin-bottom: var(--s3); }
.view > .hint { margin-bottom: var(--s3); }
.view > .btn.wide,
.view > .ghost.wide { margin-top: var(--s2); }
.view > .list + .ghost.wide,
.view > .card + .btn.wide { margin-top: var(--s3); }
.empty, .loader {
color: var(--text-2); text-align: center; padding: var(--s6) var(--s3); font-size: 15px;
}
.empty b { color: var(--text); }
.section-title {
margin: var(--s5) 0 var(--s2); font-size: 13px; color: var(--text-2);
font-weight: 600; display: flex; align-items: center; gap: var(--s2);
}
.section-title .grow { flex: 1; }
.section-title:first-child { margin-top: var(--s2); }
.hint { color: var(--text-2); font-size: 14px; margin: var(--s2) 0 0; line-height: 1.4; }
.hint b { color: var(--text); font-weight: 600; }
/* ---------- карточки и списки ---------- */
.card {
background: var(--bg-elevated); border-radius: var(--radius);
padding: var(--s3) var(--s4); margin-bottom: var(--s2);
transition: opacity var(--fast);
}
.card.off { opacity: .5; }
.card-head { display: flex; align-items: center; gap: var(--s2); min-height: 26px; }
.card-head h3 {
margin: 0; font-size: 16px; font-weight: 600; flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .meta { margin: var(--s2) 0 0; color: var(--text-2); font-size: 14px; }
.card .meta div + div { margin-top: 2px; }
/* В карточке — только начало объявления. Переносы строк тут схлопываем:
с pre-wrap пустая строка между абзацами съедала половину трёх видимых
и вместо текста показывалось одинокое многоточие. */
.card .excerpt {
margin: var(--s2) 0 0; font-size: 15px; color: var(--text); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
overflow-wrap: anywhere;
}
/* Полный текст записи в журнале — со своей прокруткой, а не в двадцать строк. */
.card .excerpt.tall {
-webkit-line-clamp: unset; display: block; white-space: pre-wrap;
max-height: 40vh; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.card .excerpt.tall::-webkit-scrollbar { width: 5px; }
.card .excerpt.tall::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
/* Действия карточки в два яруса: сверху равные по ширине второстепенные,
снизу — главное действие во всю строку и удаление отдельной кнопкой.
Раньше всё лежало одним переносящимся рядом, и «Опубликовать» оказывалось
то в конце первой строки, то в начале второй — попасть в него не глядя
было невозможно. */
.card-actions {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2);
margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
}
.card-actions + .card-actions { margin-top: var(--s2); padding-top: 0; border-top: 0; }
.card-actions.main { grid-auto-columns: 1fr auto; }
.card-actions > * { min-width: 0; }
/* Строка «куда и когда пойдёт»: главный ответ на «а что вообще произойдёт». */
.plan-line {
display: flex; align-items: center; gap: var(--s2);
width: 100%; margin-top: var(--s3); padding: var(--s2) var(--s3);
background: var(--fill); border: 0; border-radius: var(--radius-sm);
color: var(--text); font: inherit; text-align: left; cursor: pointer;
transition: background var(--fast), transform var(--fast);
}
.plan-line:active { background: var(--line); transform: scale(.99); }
.plan-line .grow { flex: 1; min-width: 0; }
.plan-line b {
display: block; font-size: 14px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Одна строка: подробности всё равно открываются тапом, а рваный перенос
с «→» на конце строки читается как поломка. */
.plan-line small {
display: block; color: var(--text-2); font-size: 13px; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.row.nowrap { flex-wrap: nowrap; }
.row > .grow { flex: 1; min-width: 0; }
.list {
background: var(--bg-elevated); border-radius: var(--radius);
padding: 0 var(--s4); margin-bottom: var(--s2); overflow: hidden;
}
.list-row {
display: flex; align-items: center; gap: var(--s3);
padding: var(--s3) 0; border-bottom: 1px solid var(--line);
animation: row-in .22s var(--ease) both;
}
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .grow b {
display: block; font-size: 15px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Подпись строки — всегда в одну строчку: иначе на телефоне она разъезжается
на три и выдавливает название сообщества в узкий столбик. */
.list-row .grow small {
display: block; color: var(--text-2); font-size: 13px; margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-row .grow .tags { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: 6px; }
.list-row.tappable { cursor: pointer; transition: background var(--fast), transform var(--fast); }
.list-row.tappable:active { background: var(--fill); transform: scale(.995); }
.avatar {
width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
background: var(--fill); display: grid; place-items: center;
color: var(--text-3); font-size: 15px; font-weight: 600;
}
.avatar.sm { width: 28px; height: 28px; }
/* Время публикации в плане — моноширинно, чтобы колонка не плясала. */
.list-row .at {
flex: none; width: 46px; font-size: 15px; font-weight: 600; color: var(--accent);
font-variant-numeric: tabular-nums;
}
.pill {
font-size: 12px; padding: 3px var(--s2); border-radius: 8px; white-space: nowrap;
background: var(--fill); color: var(--text-2); font-weight: 500;
}
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.err { color: var(--danger); background: var(--danger-soft); }
.pill.wait { color: var(--accent); background: var(--accent-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
/* ---------- кнопки ---------- */
.btn, .ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--control-h); padding: 0 var(--s4);
border: 0; border-radius: var(--radius-sm); cursor: pointer;
font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; flex: 0 0 auto;
transition: transform var(--fast), background var(--fast), opacity var(--fast);
}
.btn { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn:active { background: var(--vk-blue-press); transform: scale(.97); }
.ghost { background: var(--fill); color: var(--text); }
.ghost:active { background: var(--line); transform: scale(.97); }
.ghost.danger, .btn.link.danger { color: var(--danger); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.wide, .ghost.wide { width: 100%; }
.btn.sm, .ghost.sm { height: 36px; padding: 0 var(--s3); font-size: 14px; }
.btn.icon, .ghost.icon { width: var(--control-h); padding: 0; }
.ghost.sm.icon { width: 36px; }
.btn.link {
background: none; color: var(--accent); height: auto; padding: 0; font-weight: 500;
}
.btn.link:active { opacity: .5; transform: none; background: none; }
button:disabled { opacity: .4; pointer-events: none; }
/* ---------- поля ---------- */
input, textarea {
font: inherit; color: var(--text);
width: 100%; height: var(--control-h); padding: 0 var(--s3);
background: var(--fill); border: 1px solid transparent;
border-radius: var(--radius-sm); appearance: none; outline: none;
transition: border-color var(--fast), background var(--fast);
}
input:focus, textarea:focus { border-color: var(--accent); background: var(--bg-elevated); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { height: auto; min-height: 140px; padding: var(--s3); resize: vertical; line-height: 1.45; }
input[type="time"] { padding-right: var(--s2); }
/* стрелки у числовых полей на мобильных бесполезны и ломают высоту */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
label.field { display: block; margin-top: var(--s4); }
label.field > span { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
label.field .hint { margin-top: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s2); }
.grid2 label.field { margin-top: var(--s4); }
/* Флажки: общее `appearance: none` снимает родную галочку, поэтому рисуем свою
фоновой картинкой — псевдоэлементы на поддерживаются не везде. */
input[type="checkbox"], input[type="radio"] {
width: 24px; height: 24px; flex: none; margin: 0; padding: 0; cursor: pointer;
border: 2px solid var(--line-strong); border-radius: 8px; background: transparent;
background-repeat: no-repeat; background-position: center;
transition: background-color var(--fast), border-color var(--fast), transform var(--fast);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.88); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
background-color: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
background-size: 16px;
}
input[type="radio"]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
background-size: 18px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .35; cursor: default; }
/* Флажок внутри