/* ================================================================ Симулятор чата — оформление. Тёмная тема, без внешних библиотек. ================================================================ */ /* Тёмная палитра — и как основа, и как класс .theme-dark (его вешает на каркас чата applyTheme, когда в админке выбрана тёмная тема). */ :root, .theme-dark{ --bg: #0a0b0e; --panel: #14161b; --panel-2: #191c22; --line: #262a33; --line-soft: #1f232a; --text: #e9eaec; --muted: #8b919b; --accent: #4d9dea; --accent-2: #3f6fe0; --ok: #57ba64; --legend: #2fa84f; --danger: #e05a5a; --warn: #e0a83c; --in: #1b1f26; /* чужой пузырь */ --out: #2b5278; /* свой пузырь */ --r-sm: 8px; --r: 12px; --r-lg: 18px; --vvh: 100dvh; /* то, что в светлой теме меняется помимо палитры */ --bubble-shadow: 0 1px 2px rgba(0,0,0,.28); --pop-shadow: 0 10px 34px rgba(0,0,0,.5); --meta: rgba(233,234,236,.45); --tick-read: #8ec6ff; --soft: rgba(255,255,255,.09); /* плашки дат, чипы реакций */ --soft-hover: rgba(255,255,255,.17); /* матовое стекло плавающих панелей чата */ --glass: rgba(18,20,26,.74); --glass-strong: rgba(12,14,19,.82); --glass-line: rgba(255,255,255,.09); --glass-blur: 16px; --glass-shadow: 0 10px 30px rgba(0,0,0,.55); /* лицо стекла: в тёмной теме его ещё и притемняем, чтобы оно было матовым, а не подсвеченным изнутри, как в светлой */ --glass-face: color-mix(in srgb, #000 16%, var(--glass)); color-scheme: dark; } /* Светлая тема — основная для всего приложения (класс light на в index.html) и класс .theme-light на каркасе чата, когда она выбрана в админке. */ body.light, .theme-light{ --bg: #ffffff; --panel: #ffffff; --panel-2: #f1f3f5; --line: #e3e6ea; --line-soft: #eef0f2; --text: #0f1419; --muted: #667085; --accent: #1f6fc5; --accent-2: #2b6be0; --ok: #178a42; --legend: #178a42; --danger: #d33a3a; --warn: #b7791f; --in: #f0f2f5; /* чужой пузырь — светло-серый */ --out: #dcecff; /* свой пузырь — светло-голубой */ --bubble-shadow: 0 1px 1px rgba(16,24,40,.06); --pop-shadow: 0 8px 28px rgba(16,24,40,.14); --meta: rgba(15,20,25,.45); --tick-read: #2b7de0; --soft: rgba(15,20,25,.06); --soft-hover: rgba(15,20,25,.11); --glass: rgba(255,255,255,.86); --glass-strong: rgba(255,255,255,.88); --glass-line: rgba(15,20,25,.08); --glass-blur: 8px; --glass-shadow: 0 6px 22px rgba(16,24,40,.12); --glass-face: color-mix(in srgb, var(--text) 5%, var(--glass)); color-scheme: light; } /* Тема на каркасе чата: цвет текста пересчитываем здесь — иначе он наследуется от со светлой палитрой и в тёмной теме остаётся чернильным. */ .theme-dark, .theme-light{ color: var(--text); } /* цвета имён подобраны под тёмный фон: затемняем их только в светлой теме (селектор с body.light — чтобы перебить парное правило ниже по файлу) */ body.light .theme-dark .author, body.light .theme-dark .members li:not(.off) .nm, .theme-dark .author, .theme-dark .members li:not(.off) .nm{ filter: none; } *{ box-sizing: border-box; } [hidden]{ display: none !important; } /* Видимая часть экрана: при открытой клавиатуре она ниже, и приложение ужимается ровно на её высоту — вверх уезжает только поле ввода. */ /* Каркас занимает весь экран и при клавиатуре НЕ меняет размер: так лента не перерисовывается и ничего не мигает. Под клавиатуру уезжает только поле ввода. */ #app{ position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: 100%; z-index: 1; } /* Фон чата отдельным слоем и С ЗАПАСОМ за края экрана: на iPhone область страницы иногда чуть меньше экрана, и по нижней кромке (у home-индикатора) от картинки оставалась только заливка цветом — тёмная полоса. */ body::before{ content: ""; position: fixed; z-index: 0; pointer-events: none; left: -80px; right: -80px; top: -80px; bottom: -80px; background-color: var(--page-bg, transparent); background-image: var(--page-img, none); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Полоса между приложением и низом экрана (туда попадает системная панель iOS над клавиатурой) ничем не закрывается: сквозь полупрозрачную панель виден чистый фон чата, без плёнок и затемнений. */ html, body{ height: 100%; } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ margin: 0; /* Приложение, а не страница: окно не прокручивается и не тянется резинкой, двойной тап не зумит. Высоту видимой части держит --vvh (см. main.js). */ position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); -webkit-font-smoothing: antialiased; overflow: hidden; } a{ color: var(--accent); text-decoration: none; } a:hover{ text-decoration: underline; } svg{ width: 20px; height: 20px; flex: none; } /* ------------------------------------------------------------ кнопки */ .btn{ display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--accent-2); background: var(--accent-2); color: #fff; padding: 9px 15px; border-radius: var(--r); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; transition: filter .15s, border-color .15s, background .15s; } .btn:hover{ filter: brightness(1.12); } .btn:disabled{ opacity: .5; cursor: default; filter: none; } .btn svg{ width: 17px; height: 17px; } .btn--block{ width: 100%; justify-content: center; margin-top: 18px; padding: 12px; font-size: 15px; } .btn--ghost{ background: var(--panel-2); border-color: var(--line); color: var(--text); } .btn--ghost:hover{ border-color: var(--accent); color: var(--accent); filter: none; } .btn--danger{ background: transparent; border-color: rgba(224,90,90,.45); color: var(--danger); } .btn--danger:hover{ background: rgba(224,90,90,.12); filter: none; } .btn--sm{ padding: 7px 12px; font-size: 13.5px; } .btn--xs{ padding: 4px 8px; font-size: 12.5px; border-radius: var(--r-sm); } .btn--xs svg{ width: 15px; height: 15px; } .icon-btn{ display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); width: 40px; height: 40px; border-radius: var(--r); cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; } .icon-btn:hover{ background: var(--panel-2); color: var(--text); } /* ------------------------------------------------------------- формы */ .field{ margin-bottom: 12px; } .field label{ display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; } input, textarea, select{ width: 100%; padding: 10px 12px; font: inherit; color: var(--text); caret-color: var(--text); /* системная схема может быть тёмной — курсор берём свой */ background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); outline: none; transition: border-color .15s; } input[type="color"]{ padding: 4px; height: 41px; cursor: pointer; } input:focus, textarea:focus, select:focus{ border-color: var(--accent); } textarea{ resize: vertical; min-height: 84px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .field--bad input, .field--bad textarea{ border-color: var(--danger); } .field .err{ color: var(--danger); font-size: 12.5px; min-height: 16px; margin-top: 4px; } .input-wrap{ position: relative; } .input-wrap .has-suffix{ padding-right: 44px; } .input-suffix{ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; } .input-suffix:hover{ color: var(--text); } .check{ display: flex; align-items: center; gap: 9px; margin: 10px 0; cursor: pointer; font-size: 14px; } .check input{ width: auto; } .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .muted{ color: var(--muted); } .nowrap{ white-space: nowrap; } /* ================================================================ Экран входа ================================================================ */ .auth{ height: var(--vvh); display: grid; place-items: safe center; padding: 24px; overflow-y: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); font-family: var(--font, inherit); background: transparent; /* фон рисует (см. .layout) */ } /* карточка входа — то же матовое стекло, что у панелей чата */ .auth-card{ width: 100%; max-width: 384px; padding: 30px 28px; border: 0; border-radius: 22px; background: var(--glass-face); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--glass-shadow); } .auth-logo{ display: flex; justify-content: center; margin-bottom: 14px; } .auth-logo .ava{ width: 72px; height: 72px; font-size: 36px; } .auth-logo img{ border-radius: 18px; } .auth-sub{ text-align: center; color: var(--muted); font-size: 13.5px; margin: 4px 0 22px; } .auth-foot{ margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--muted); } .auth-foot{ line-height: 1.9; } .auth input{ font-size: 16px; } /* меньше 16px — и iOS зумит страницу при фокусе */ /* главная кнопка входа — цветом кнопки «Отправить» из настроек */ .auth .btn--block{ background: var(--send-bg, var(--accent-2)); border-color: var(--send-bg, var(--accent-2)); } .auth--admin .auth-sub{ color: var(--danger); } .form-err{ color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 0; } /* ================================================================ Чат ================================================================ */ /* шрифт и фон чата живут на каркасе: в админке свои цвета */ .layout{ display: flex; height: 100%; font-family: var(--font, inherit); -webkit-user-select: none; user-select: none; /* фон (цвет и картинка) рисует на весь экран: иначе при клавиатуре каркас ужимается и картинка подгоняется заново — виден «кусок фона» */ background: transparent; } .chat{ flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; } /* Плавающие панели: лента идёт под ними, сквозь матовое стекло видно фон и края сообщений. Высоту панелей отдаёт JS в --top-h/--bot-h, по ним лента отступает. */ .chat-top{ position: absolute; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none; } .chat-head{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); background: transparent; border: 0; } /* Зона строки состояния телефона: прозрачное матовое стекло, сквозь которое видно ленту, с мягким переходом вниз. На экранах без выреза высота нулевая. */ .chat-top::before, .auth::before{ content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 4; height: env(safe-area-inset-top); pointer-events: none; background: transparent; /* никакой плёнки — только фон чата */ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); } /* iPhone «с экрана Домой» рисует часы белыми поверх нашей ленты: если фон вверху светлый, добавляем едва заметную тень, иначе часы теряются. */ html.ios-app.light-top .chat-top::before, html.ios-app.light-top .auth::before{ background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); } .chat-head > *{ pointer-events: auto; } .chat-head .spacer{ pointer-events: none; } /* островок: матовое стекло с мягкими краями */ .island{ background: var(--glass-face); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); border: 0; border-radius: 999px; box-shadow: var(--glass-shadow); transform: translateZ(0); } .head-mid{ display: flex; align-items: center; gap: 10px; min-width: 0; padding: 5px 16px 5px 5px; max-width: min(520px, 62vw); } .head-right{ display: flex; align-items: center; gap: 2px; padding: 4px; } .head-out{ display: flex; align-items: center; } /* гостю выходить неоткуда: на широком экране правый островок пустой — убираем */ @media (min-width: 901px){ .head-right.no-out{ display: none; } } .room-ava{ width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, #6ab3f3, #3f6fe0); overflow: hidden; } .room-ava img{ width: 100%; height: 100%; object-fit: cover; display: block; } .head-text{ min-width: 0; } .chat-head h1{ margin: 0; font-size: 15.5px; line-height: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-head .sub{ font-size: 11.5px; line-height: 14px; min-height: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* место под имя пишущего занято всегда — островок не прыгает */ .chat-head .sub-typing{ color: var(--accent); } .chat-head .sub.live{ color: var(--accent); } .spacer{ flex: 1; } .authbox{ display: flex; align-items: center; gap: 8px; min-width: 0; } .who{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding: 6px 14px; } .who b{ font-size: 13.5px; } .who small{ font-size: 11.5px; color: var(--muted); } /* кнопки шапки — стеклянные пилюли, сплошной на них только текст */ .chat-head .btn{ border: 0; background: var(--glass-face); color: var(--text); font-weight: 600; padding: 8px 18px; border-radius: 999px; transform: translateZ(0); } .chat-head .btn:hover{ filter: none; color: var(--accent); } .chat-head .icon-btn{ width: 36px; height: 36px; border-radius: 50%; color: var(--text); } .chat-head .icon-btn:hover{ background: var(--soft); } /* баннер события: белая полоса, мигающая красная точка и название */ .event-bar{ display: flex; align-items: center; gap: 10px; padding: 9px 16px; width: calc(100% - 20px); max-width: 840px; margin: 2px auto 0; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 0; color: #d33a3a; box-shadow: var(--glass-shadow); font-size: 14px; font-weight: 600; z-index: 4; pointer-events: auto; } .event-bar--s{ padding: 5px 16px; font-size: 12.5px; } .event-bar--l{ padding: 16px; font-size: 17px; } .event-bar--image{ text-shadow: 0 1px 3px rgba(0,0,0,.55); border-bottom: 0; } .event-text{ min-width: 0; } .event-people{ font-size: .82em; font-weight: 500; opacity: .85; margin-top: 1px; } .event-dot{ width: 10px; height: 10px; border-radius: 50%; background: #e02b2b; flex: none; animation: event-blink 1.8s ease-in-out infinite; } @keyframes event-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: .25; } } .event-title{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; } .event-bar--l .event-dot{ width: 13px; height: 13px; } .event-bar--s .event-dot{ width: 8px; height: 8px; } .event-left{ margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce){ .event-dot{ animation: none; } } /* фон рисует каркас (цвет или картинка) — лента поверх него прозрачная */ .feed{ flex: 1; overflow-y: auto; overscroll-behavior: contain; background: transparent; /* системную полосу прячем: у ленты свой ползунок без стрелок (.feed-bar) */ scrollbar-width: none; padding: calc(var(--top-h, 64px) + 12px) 0 calc(var(--bot-h, 72px) + var(--kb-idle, 0px) + 8px); /* при клавиатуре и при ответе на сообщение лента приподнимается сдвигом слоя, а не изменением отступов: иначе телефон пересчитывает все строки */ transform: translateY(calc(-1 * (var(--kb, 0px) + var(--bar-h, 0px)))); transition: transform .2s cubic-bezier(.22, .61, .36, 1); } .feed::-webkit-scrollbar{ width: 0; height: 0; } .feed-inner{ max-width: 840px; margin: 0 auto; padding: 0 14px; } /* Ползунок ленты: дорожка начинается под шапкой и кончается над полем ввода, поэтому он никогда не заходит под островки. Виден, пока листают. */ .feed-bar{ position: absolute; right: 6px; width: 6px; z-index: 6; top: calc(var(--top-h, 64px) + 10px); bottom: calc(var(--bot-h, 72px) + var(--kb-idle, 0px) + var(--kb, 0px) + var(--bar-h, 0px) + 10px); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .feed-bar.on{ opacity: 1; pointer-events: auto; } .feed-bar.drag{ transition: none; } .feed-thumb{ position: absolute; left: 0; width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--text) 32%, transparent); cursor: grab; touch-action: none; } .feed-bar.drag .feed-thumb{ cursor: grabbing; background: color-mix(in srgb, var(--text) 40%, transparent); } .feed-thumb:hover{ background: color-mix(in srgb, var(--text) 38%, transparent); } .empty{ text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; } .row{ display: flex; margin: 2px 0; align-items: flex-end; gap: 8px; -webkit-tap-highlight-color: transparent; } .row.own{ justify-content: flex-end; } .ava{ width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 16px; user-select: none; } .ava.ghost{ visibility: hidden; } .ava--img{ background: var(--panel-2); overflow: hidden; } .ava--img img{ width: 100%; height: 100%; object-fit: cover; display: block; } .ava--sm{ width: 26px; height: 26px; font-size: 14px; display: inline-grid; vertical-align: middle; } .ava--lg{ width: 56px; height: 56px; font-size: 26px; } .bot-cell{ white-space: nowrap; } .bot-cell .ava{ margin-right: 6px; } .bot-ava-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .avatar-pick{ display: flex; flex-direction: column; align-items: center; } .auth-hint{ margin: 6px 0 0; font-size: 12.5px; } .ava--xl{ width: 88px; height: 88px; font-size: 44px; } .ava-edit{ background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; } .ap{ min-width: min(360px, 80vw); display: flex; flex-direction: column; align-items: center; gap: 12px; } .ap-preview{ display: grid; place-items: center; } .ap-tabs{ display: flex; gap: 4px; background: var(--panel-2); border-radius: 999px; padding: 3px; } .ap-tab{ border: 0; background: none; font: inherit; font-size: 14px; padding: 6px 16px; border-radius: 999px; cursor: pointer; color: var(--muted); } .ap-tab.on{ background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ap-pane{ width: 100%; } .ap-row{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .ap-pane .hint{ text-align: center; } .ap-label{ font-size: 12px; color: var(--muted); margin: 4px 0 6px; } .ap-emoji{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .ap-e{ border: 0; background: none; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 8px; cursor: pointer; } .ap-e:hover{ background: var(--panel-2); } .ap-e.on{ background: var(--panel-2); outline: 2px solid var(--accent); } .ap-colors{ display: flex; flex-wrap: wrap; gap: 8px; } .ap-c{ width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .ap-c.on{ border-color: var(--text); box-shadow: inset 0 0 0 2px var(--panel); } .ap-custom{ position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); } .ap-custom input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .avatar-pick-btn{ display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--accent); font: inherit; font-size: 14px; } .bubble{ position: relative; max-width: min(74%, 560px); padding: 7px 11px 6px; background: var(--in); border-radius: var(--r-bubble, 15px); border-bottom-left-radius: 5px; width: fit-content; overflow-wrap: break-word; cursor: default; box-shadow: var(--bubble-shadow); } .row.own .bubble{ background: var(--out); border-bottom-left-radius: var(--r-bubble, 15px); border-bottom-right-radius: 5px; } .row.grouped .bubble{ border-bottom-left-radius: var(--r-bubble, 15px); } .row.own.grouped .bubble{ border-bottom-right-radius: var(--r-bubble, 15px); } .author{ font-size: 13px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .legend-name{ color: var(--legend); font-weight: 600; } .badge--team{ background: var(--danger); } .team-name{ color: var(--danger); } .badge{ background: var(--danger); color: #fff; border-radius: 6px; padding: 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } /* Время стоит внутри текста и «плывёт» вправо — так пузырь получает правильную собственную ширину и короткая реплика не переносится. */ /* Выделять можно только текст одного сообщения: интерфейс не выделяется вовсе, текст — да (границы выделения держит chat.js). */ .text{ white-space: pre-wrap; -webkit-user-select: text; user-select: text; } .meta{ float: right; margin: 7px 0 -3px 12px; font-size: 11px; color: var(--meta); display: inline-flex; align-items: center; gap: 3px; user-select: none; white-space: nowrap; } .tick{ font-size: 12px; color: var(--meta); } .tick.read{ color: var(--tick-read); } .quote{ border-left: 3px solid var(--accent); padding: 2px 0 2px 8px; margin-bottom: 5px; font-size: 13px; } .quote b{ display: block; color: var(--accent); } .quote span{ color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .reactions{ display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; } .chip{ border: 1px solid transparent; background: var(--soft); color: var(--text); border-radius: 12px; padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .chip:hover{ background: var(--soft-hover); } .chip.mine{ background: rgba(77,157,234,.24); border-color: rgba(77,157,234,.55); } .sysline, .daysep{ text-align: center; margin: 12px 0 8px; } /* служебные строки («присоединился к чату», дата) — серое матовое стёклышко: на светлом фоне тёмное, на тёмном фоне или тёмной картинке светлое */ .sysline span, .daysep span{ display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; /* без backdrop-filter: таких плашек в ленте десятки, и каждая заставляла телефон пересчитывать размытие фона на каждом кадре прокрутки */ background: rgba(22,25,31,.46); color: #fff; } .layout.bg-dark .sysline span, .layout.bg-dark .daysep span{ background: rgba(244,246,250,.42); color: #10131a; } .dots{ background: var(--in); border-radius: 15px; border-bottom-left-radius: 5px; padding: 11px 13px; display: flex; gap: 4px; align-items: center; box-shadow: var(--bubble-shadow); } .dots i{ width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: block; animation: blink 1.2s infinite; } .dots i:nth-child(2){ animation-delay: .2s; } .dots i:nth-child(3){ animation-delay: .4s; } @keyframes blink{ 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} } .reactbar{ position: absolute; display: none; gap: 2px; padding: 4px 6px; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--pop-shadow); } .reactbar.open{ display: flex; } .reactbar button{ border: 0; background: transparent; font-size: 18px; cursor: pointer; padding: 3px 4px; border-radius: 8px; } .reactbar button:hover{ background: var(--panel-2); transform: scale(1.15); } /* ------------------------------------------------------------- ввод */ .composer{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; background: transparent; border: 0; padding: 8px 12px 10px; /* при открытой клавиатуре нижний отступ вдвое меньше: безопасная зона телефона под ней уже не нужна, и поле не висит высоко над клавиатурой */ padding-bottom: max(10px, calc(env(safe-area-inset-bottom) / var(--sab-div, 1))); transform: translateY(calc(-1 * var(--kb-raw, 0px))); transition: transform .2s cubic-bezier(.22, .61, .36, 1); } .composer > *{ pointer-events: auto; } /* Кнопка «к новым сообщениям» со счётчиком — как в Telegram: висит над полем ввода в правом углу, пока человек листает историю. */ .jump-btn{ position: absolute; right: 14px; bottom: calc(100% + 12px); z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--glass-face); color: var(--muted); display: grid; place-items: center; backdrop-filter: blur(var(--glass-blur)) saturate(1.8); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); box-shadow: var(--glass-shadow); cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translateZ(0); transition: color .15s, transform .15s; } .jump-btn:hover{ color: var(--text); } .jump-btn:active{ transform: scale(.94); } .jump-btn svg{ width: 22px; height: 22px; } .jump-count{ position: absolute; top: -9px; left: 50%; transform: translateX(-50%); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; /* сплошной и посветлее фона кнопки, иначе цифры не разобрать */ background: color-mix(in srgb, var(--accent-2) 82%, white); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.25); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } .composer-wrap{ max-width: 840px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; } /* поле ввода со смайликом внутри — один островок */ .input-island{ flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; padding: 3px 4px 3px 6px; border-radius: var(--r-bubble, 22px); } .input-island .icon-btn{ width: 38px; height: 38px; border-radius: 50%; color: var(--muted); } .input-island .icon-btn:hover{ background: var(--soft); color: var(--text); } .composer textarea{ flex: 1; resize: none; max-height: 140px; min-height: 38px; background: transparent; border: 0; border-radius: 0; padding: 9px 6px 9px 9px; font-size: 13px; font-family: inherit; line-height: 1.35; /* длинный текст листается, но без полосы прокрутки — как в мессенджерах */ scrollbar-width: none; } .composer textarea::-webkit-scrollbar{ display: none; } /* в самом поле ввода текст, конечно, выделяется (у каркаса чата выделение снято) */ .composer textarea{ -webkit-user-select: text; user-select: text; } .send-btn{ width: 44px; height: 44px; border-radius: var(--r-send, 50%); flex: none; cursor: pointer; /* стекло, подкрашенное цветом кнопки из настроек */ background: color-mix(in srgb, var(--send-bg, var(--accent-2)) 90%, transparent); color: #fff; display: grid; place-items: center; transition: transform .15s, filter .15s; } .send-btn:hover{ filter: brightness(1.06); } .send-btn:active{ transform: scale(.94); } .send-btn:disabled{ opacity: .45; cursor: default; } .locked{ max-width: 840px; margin: 0 auto; text-align: center; color: var(--muted); font-size: 14px; padding: 10px 14px; border-radius: var(--r-lg); transform: translateZ(0); background: var(--glass); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 0; } .mute-bar{ text-align: left; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 16px; font-size: 14px; box-shadow: var(--pop-shadow); } .emoji-pop{ position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%) translateZ(0); display: none; flex-wrap: wrap; gap: 4px; max-width: 320px; padding: 8px; z-index: 30; background: var(--glass-strong); border: 0; border-radius: var(--r-lg); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); box-shadow: var(--glass-shadow); } .emoji-pop.open{ display: flex; } .emoji-pop button{ border: 0; background: transparent; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 8px; } .emoji-pop button:hover{ background: var(--panel-2); } /* -------------------------------------------------------- участники */ .side{ width: 272px; flex: none; background: var(--glass-strong); backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7); border-left: 1px solid var(--glass-line); display: flex; flex-direction: column; } .side-head{ padding: 17px 16px 11px; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); } .side-ghosts{ margin-top: 3px; } .side-head{ position: relative; padding-right: 48px; } .side-gear{ position: absolute; right: 10px; top: 10px; } .side-gear svg{ width: 18px; height: 18px; } .prof{ min-width: min(380px, 82vw); display: flex; flex-direction: column; gap: 14px; } .prof-ava{ display: flex; flex-direction: column; align-items: center; gap: 8px; } .prof-row{ display: flex; gap: 8px; align-items: center; } .prof-row input{ flex: 1; min-width: 0; } .prof-name{ font-weight: 600; font-size: 15px; margin: 2px 0 8px; min-height: 20px; } .prof-danger{ border-top: 1px solid var(--line); padding-top: 12px; } .btn--danger-text{ color: var(--danger); } .prof-del{ margin-top: 8px; } /* «4 870 гостей» — призраки без списка */ .members{ list-style: none; margin: 0; padding: 0 8px 16px; overflow-y: auto; } .members li{ display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: var(--r); } .members li:hover{ background: var(--panel-2); } .members .member-text{ min-width: 0; } .members .nm{ font-size: 14px; font-weight: 500; } .members .st{ font-size: 12px; color: var(--muted); } .members .st.on{ color: var(--ok); } .members li.off .ava, .members li.off .nm{ opacity: .45; } .only-narrow{ display: none; } .side-backdrop{ display: none; } /* ================================================================ Админка ================================================================ */ /* Админка всегда своя: фон чата и его системная схема на неё не распространяются */ .admin{ display: flex; height: 100%; background: var(--bg); color-scheme: light; } .admin-nav{ width: 158px; flex: none; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 6px; gap: 2px; overflow-y: auto; } .admin-brand{ display: flex; align-items: center; gap: 8px; padding: 8px 8px 16px; font-weight: 600; color: var(--accent); } .nav-item{ display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; padding: 9px 8px; border-radius: var(--r); cursor: pointer; white-space: nowrap; } .nav-item:hover{ background: var(--panel-2); } .nav-item.on{ background: var(--accent-2); color: #fff; } .nav-item svg{ width: 18px; height: 18px; } .nav-gap{ flex: 1; min-height: 18px; } .nav-mode{ padding: 10px 11px 2px; font-size: 12px; color: var(--muted); } .admin-main{ flex: 1; min-width: 0; overflow-y: auto; padding: 26px 30px 70px; } /* Третья зона админки — трансляция: сама страница чата «глазами гостя» (iframe). Класс именно admin-live: просто .live уже занят строкой «печатает…» в шапке чата. */ .admin-live{ width: 380px; flex: none; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); } .live-head{ padding: 14px 16px 12px; border-bottom: 1px solid var(--line); } .live-title{ display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; } .live-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: livePulse 1.6s ease-in-out infinite; } @keyframes livePulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .3; } } .live-people{ margin-top: 8px; font-size: 12.5px; color: var(--muted); } .live-count b{ color: var(--text); font-weight: 600; } .live-names{ display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; } .live-name{ color: var(--text); } .live-name.guest{ color: var(--muted); } .live-typing{ margin-top: 4px; color: var(--accent); } .live-log{ margin-top: 6px; display: grid; gap: 1px; } .live-time{ font-variant-numeric: tabular-nums; } .live-note{ color: var(--muted); } .live-frame{ flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: var(--bg); } /* Внутри трансляции — только смотреть: ни кнопок входа, ни ввода, ни реакций. Лента при этом листается колесом. */ body.preview .authbox, body.preview .composer, body.preview .feed-inner{ pointer-events: none; } body.preview .jump-btn{ pointer-events: auto; } /* «к новым» в трансляции работает */ /* окно уже — трансляцию прячем, чтобы настройки не сжимались */ @media (max-width: 1180px){ .admin-live{ display: none; } } .sub-title{ font-weight: 600; margin: 16px 0 8px; color: var(--text); } .event-preview{ display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 4px 0 14px; border: 1px solid var(--line); border-radius: var(--r); font-weight: 600; font-size: 14px; } .event-preview--s{ padding: 5px 14px; font-size: 12.5px; } .event-preview--l{ padding: 16px 14px; font-size: 17px; } .event-preview--image{ text-shadow: 0 1px 3px rgba(0,0,0,.55); } .event-preview-dot{ width: 10px; height: 10px; border-radius: 50%; flex: none; animation: event-blink 1.8s ease-in-out infinite; } .event-preview-title{ text-transform: uppercase; letter-spacing: .3px; } .event-preview-people{ font-size: .82em; font-weight: 500; opacity: .85; margin-top: 1px; } .event-live{ color: var(--danger); font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .event-live::before{ content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: event-blink 1.8s ease-in-out infinite; } .narrow-note{ display: none; } .admin-main h1{ font-size: 21px; margin: 0 0 4px; } .lead{ color: var(--muted); margin: 0 0 22px; max-width: 720px; } /* Разделы админки — без рамок-контейнеров: обычный поток на белом фоне, между разделами только тонкая линия. */ .card{ padding: 22px 0 24px; margin: 0; max-width: 980px; border-top: 1px solid var(--line); } .card:last-child{ padding-bottom: 8px; } .card h2{ margin: 0 0 4px; font-size: 16px; } .card-sub{ margin: 0 0 15px; color: var(--muted); font-size: 13px; } .card > label{ display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 5px; } .hint{ color: var(--muted); font-size: 12.5px; margin: 8px 0 0; } .hint code{ color: var(--text); background: var(--panel-2); padding: 1px 5px; border-radius: 5px; } .samples{ margin: 8px 0 0; padding-left: 18px; color: var(--text); font-size: 14px; } .samples li{ margin: 3px 0; } .row-inline{ display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; } /* «Все боты»: окно ровно на 10 строк, листается колесом внутри, страница при этом не прокручивается (overscroll-behavior). */ /* заголовок той же высоты, что строка: 1 + 10 строк; селектор сильнее общего .table-scroll */ .table-scroll.bots-scroll{ --bot-row: 46px; max-height: calc(11 * var(--bot-row)); overscroll-behavior: contain; } .bots-scroll tr{ height: var(--bot-row); } .bots-scroll td{ white-space: nowrap; padding-top: 0; padding-bottom: 0; } .bots-scroll td.muted{ max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* Правило ответа: ключевые слова плашками */ .field-label{ display: block; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; } .seg{ display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 6px; font-size: 14px; } .seg label{ display: flex; align-items: center; gap: 7px; cursor: pointer; } .seg input, .kw-match input{ width: auto; } .kw-list{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; padding: 2px 0 4px; } .kw{ display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px 2px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; } .kw-mode{ border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12px; padding: 3px 7px; border-radius: 999px; cursor: pointer; transition: background .15s; } .kw-mode:hover{ background: var(--soft); } .kw-del{ border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; transition: background .15s, color .15s; } .kw-del:hover{ background: var(--soft); color: var(--danger); } .row-inline.kw-add{ margin-top: 4px; } .row-inline.kw-add input{ flex: 2; } .row-inline.kw-add select{ flex: 0 0 170px; min-width: 150px; } .kw-match{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0 4px; font-size: 13.5px; color: var(--muted); } .kw-match label{ display: flex; align-items: center; gap: 6px; color: var(--text); cursor: pointer; } /* Новости рынка в «Темах бесед» */ .news-list{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; } .news-list li{ line-height: 1.45; } .news-list a{ color: var(--text); } .news-list a:hover{ color: var(--accent); } /* Расписание активности в «Комнате» */ .sched{ margin: 2px 0 14px; font-size: 13px; color: var(--muted); } .sched-now{ color: var(--text); margin-bottom: 8px; } .sched-now b{ color: var(--accent); font-weight: 600; } .sched-row{ display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 5px 0; border-top: 1px solid var(--line-soft); } .sched-row span{ font-variant-numeric: tabular-nums; } .sched-day{ width: 100px; color: var(--text); } .row-inline input, .row-inline select{ flex: 1; min-width: 180px; } .grid{ display: grid; gap: 12px; } .grid-2{ grid-template-columns: 1fr 1fr; } .grid-3{ grid-template-columns: 1fr 1fr 1fr; } .table-scroll{ overflow-x: auto; max-height: 460px; overflow-y: auto; margin: 0 -4px; } table{ width: 100%; border-collapse: collapse; font-size: 13.5px; } th{ text-align: left; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); } td{ padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tr:last-child td{ border-bottom: 0; } .pill{ display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); } .pill.ok{ color: var(--ok); border-color: rgba(87,186,100,.4); } .pill.danger{ color: var(--danger); border-color: rgba(224,90,90,.4); } .dot{ display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; } /* ================================================================ Модальные окна и уведомления ================================================================ */ /* Окно живёт в видимой части экрана: при открытой клавиатуре оно не прячется за ней (правило идёт после общих, иначе inset:0 перебивает высоту). */ .modal-root{ font-family: var(--font, inherit); position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100%); z-index: 200; display: grid; place-items: safe center; padding: 20px; overflow-y: auto; } .modal-root[aria-hidden="true"]{ display: none; } .modal-bg{ position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); } .modal{ position: relative; width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--pop-shadow); } .modal-head{ padding: 18px 20px 6px; font-size: 16px; font-weight: 600; } .modal-body{ padding: 6px 20px 4px; color: var(--text); } .modal-foot{ padding: 14px 20px 18px; display: flex; gap: 9px; justify-content: flex-end; } .toasts{ position: fixed; right: 18px; bottom: 18px; z-index: 300; display: flex; flex-direction: column; gap: 9px; } .toast{ background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 16px; max-width: 340px; font-size: 14px; box-shadow: var(--pop-shadow); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; } .toast--in{ opacity: 1; transform: translateY(0); } /* ================================================================ Узкие экраны ================================================================ */ @media (max-width: 900px){ .side{ display: none; position: absolute; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: -12px 0 40px rgba(0,0,0,.5); } body.light .side{ box-shadow: -12px 0 40px rgba(16,24,40,.16); } body.light .side-backdrop.open{ background: rgba(16,24,40,.22); } .side.open{ display: flex; } .side-backdrop.open{ display: block; position: absolute; inset: 0; z-index: 39; background: rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; } .side-head{ cursor: pointer; user-select: none; } .only-narrow{ display: inline-flex; } .bubble{ max-width: 86%; } .grid-2, .grid-3{ grid-template-columns: 1fr; } .admin{ flex-direction: column; } .admin-nav{ width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; } .admin-brand, .nav-gap, .nav-mode{ display: none; } .nav-item span{ display: none; } .nav-item{ padding: 10px; } .admin-main{ padding: 18px 14px 60px; } .narrow-note{ display: block; margin-bottom: 16px; padding: 0 0 12px; font-size: 13px; color: var(--warn); border-bottom: 1px solid var(--line); } .who{ display: none; } .side{ width: min(300px, 86vw); } } /* ----------------------------------------------- светлая тема: точечно */ /* основной фон чата — чисто белый, без цветных пятен тёмной темы */ /* фон ленты рисует каркас .layout (цвет или картинка) */ /* цвета персонажей подобраны под тёмный фон — на белом их затемняем, чтобы имена (жёлтая «Света» и т.п.) читались */ body.light .author, body.light .members li:not(.off) .nm{ filter: brightness(.72) saturate(1.35); } body.light .row.own .bubble{ box-shadow: none; } /* фон и тень экрана входа берутся из настроек чата (см. .auth/.auth-card) */ /* админка */ body.light .modal-bg{ background: rgba(16,24,40,.35); } body.light .pill.ok{ border-color: rgba(23,138,66,.4); } body.light .pill.danger{ border-color: rgba(211,58,58,.4); } /* Телефоны: чат — главный сценарий, всё компактнее и крупнее под палец. */ @media (max-width: 480px){ .chat-head{ gap: 9px; padding-left: 10px; padding-right: 8px; } .room-ava{ width: 38px; height: 38px; font-size: 18px; } .chat-head h1{ font-size: 15.5px; } .chat-head .sub{ font-size: 11px; } .authbox{ gap: 4px; } .authbox .btn--ghost{ display: none; } /* «Регистрация» — со страницы входа */ .feed-inner{ padding: 0 8px; } .bubble{ max-width: 88%; } .row .ava{ width: 30px; height: 30px; font-size: 15px; } .composer{ padding-left: 8px; padding-right: 8px; } .composer-wrap{ gap: 6px; } /* 16px обязательны: на меньшем размере iOS зумит страницу при фокусе */ .composer textarea{ font-size: 16px; padding: 8px 6px 8px 9px; } input, textarea, select{ font-size: 16px; } /* сообщения не обрезаются под строкой состояния, а мягко в неё утекают. Только для iPhone «с экрана Домой»: в остальных случаях полосу рисует система, затухание не видно, а маска на прокрутке стоит кадров. */ html.ios-app .feed{ -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) calc(env(safe-area-inset-top) + 6px), #000 calc(env(safe-area-inset-top) + 34px), #000 100%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) calc(env(safe-area-inset-top) + 6px), #000 calc(env(safe-area-inset-top) + 34px), #000 100%); } .emoji-pop{ left: 8px; right: 8px; transform: none; max-width: none; justify-content: center; } .toasts{ left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); } .toast{ max-width: none; } .auth{ padding: 16px; } .auth-card{ padding: 24px 18px; } } /* ================================================================ Ответ и реакции по сообщению (как в Telegram) Телефон: долгое нажатие — меню, свайп вправо — ответ. Компьютер: правая кнопка мыши — меню. ================================================================ */ .mm-back{ position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .16s ease; } .mm-back.open{ opacity: 1; pointer-events: auto; } /* Анимацию «вырастания» держат сами карточки, а не контейнер: transform на родителе отключает у детей размытие фона, и стекло превращалось в плёнку. */ .msgmenu{ position: fixed; z-index: 61; display: flex; flex-direction: column; gap: 8px; pointer-events: none; visibility: hidden; } .msgmenu.open{ pointer-events: auto; visibility: visible; } .msgmenu > *{ opacity: 0; transform: scale(.82); transform-origin: inherit; transition: opacity .12s ease, transform .18s cubic-bezier(.2,.9,.3,1.25); } .msgmenu.open > *{ opacity: 1; transform: none; } .mm-react{ display: flex; gap: 2px; padding: 6px 8px; max-width: 86vw; overflow-x: auto; background: var(--glass-face); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 0; border-radius: 999px; box-shadow: var(--glass-shadow); scrollbar-width: none; } .mm-react::-webkit-scrollbar{ display: none; } .mm-react button{ border: 0; background: transparent; cursor: pointer; padding: 3px 4px; font-size: 24px; line-height: 1; border-radius: 50%; transform: scale(0); transition: background .12s ease; } .msgmenu.open .mm-react button{ animation: mmPop .26s cubic-bezier(.2,.9,.3,1.5) forwards; animation-delay: calc(var(--i) * 26ms); } .mm-react button:hover{ background: var(--panel-2); } .mm-react button:active{ transform: scale(.88); } @keyframes mmPop{ from{ transform: scale(0); } 70%{ transform: scale(1.14); } to{ transform: scale(1); } } .mm-list{ min-width: 196px; padding: 6px; background: var(--glass-face); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 0; border-radius: 16px; box-shadow: var(--glass-shadow); } .mm-list button{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; text-align: left; } .mm-list button svg{ width: 18px; height: 18px; flex: none; opacity: .7; } .mm-list button:hover{ background: var(--panel-2); } .mm-list button:active{ background: var(--soft-hover); } /* сообщение слегка уезжает под пальцем в любую сторону — и открывается меню */ .row{ transition: transform .2s cubic-bezier(.2,.9,.3,1); } .row.swiping{ transition: none; } /* плашка «отвечаю на сообщение» над полем ввода */ .reply-bar{ display: flex; align-items: center; gap: 10px; max-width: 840px; margin: 0 auto 6px; padding: 8px 12px; background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 0; border-radius: var(--r-lg); transform: translateZ(0); animation: rbIn .16s ease; } .reply-bar > svg{ width: 18px; height: 18px; color: var(--accent); flex: none; } .rb-text{ min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .rb-text b{ font-size: 13px; color: var(--accent); } .rb-text span{ font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-bar .icon-btn{ margin-left: auto; } @keyframes rbIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } } /* переход к сообщению по клику на цитату: сама цитата кликабельна, найденное сообщение коротко подсвечивается (как в Telegram) */ .quote{ cursor: pointer; } .quote:hover{ filter: brightness(1.06); } .bubble{ position: relative; } .bubble::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; pointer-events: none; transition: opacity .35s ease; } .row.flash .bubble::after{ opacity: .25; } /* воздух между сообщениями: между разными собеседниками больше, внутри серии от одного автора меньше (как в Telegram) */ .row{ margin: 0 0 9px; } .row.grouped{ margin-top: -6px; } .sysline, .daysep{ margin: 18px 0 14px; } .reactions{ margin-top: 6px; } /* ---------------------------------------------------------------- Админка: текстовый вид управления. Кнопки и выпадашки без «коробок» — жирный текст цветом --text, у выпадашки только жирная галочка. Меню: активный пункт синим, спокойный — жирным чёрным, без заливки. ---------------------------------------------------------------- */ .admin .btn, body.in-admin .modal .btn, .admin .btn--ghost, body.in-admin .modal .btn--ghost, .admin .btn--danger, body.in-admin .modal .btn--danger, .admin .btn--sm, body.in-admin .modal .btn--sm, .admin .btn--xs, body.in-admin .modal .btn--xs{ padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font-weight: 700; font-size: 14px; transition: color .15s; } .admin .btn--xs, body.in-admin .modal .btn--xs{ font-size: 13px; } .admin .btn:hover, body.in-admin .modal .btn:hover, .admin .btn--ghost:hover, body.in-admin .modal .btn--ghost:hover{ background: none; border: 0; filter: none; color: var(--accent); } .admin .btn--danger:hover, body.in-admin .modal .btn--danger:hover{ background: none; color: var(--danger); } .admin .btn:disabled, body.in-admin .modal .btn:disabled{ color: var(--muted); opacity: 1; } .admin .btn:disabled:hover, body.in-admin .modal .btn:disabled:hover{ color: var(--muted); } .admin .btn--block, body.in-admin .modal .btn--block{ width: auto; justify-content: flex-start; padding: 0; margin-top: 14px; font-size: 14px; } /* текст без коробки стоит вплотную — разводим пары кнопок по строке */ .admin .row-inline{ gap: 20px; align-items: center; } .admin .row-inline input, .admin .row-inline select{ flex: 1; } .admin select, body.in-admin .modal select{ appearance: none; -webkit-appearance: none; width: auto; max-width: 100%; padding: 2px 22px 2px 0; background: none; border: 0; border-radius: 0; color: var(--text); font-weight: 700; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right center; background-size: 14px 14px; } body.light .admin select, body.light.in-admin .modal select{ background-image: url("data:image/svg+xml;utf8,"); } .admin select:focus, body.in-admin .modal select:focus{ border: 0; color: var(--accent); } .admin select option, body.in-admin .modal select option{ background: var(--panel); color: var(--text); font-weight: 400; } .admin .nav-item{ border-radius: 0; font-weight: 700; color: var(--text); } .admin .nav-item:hover{ background: none; color: var(--accent); } .admin .nav-item.on{ background: none; color: var(--accent); } /* переключатель «Фото · Эмодзи» в окнах админки — по правилу меню */ body.in-admin .modal .ap-tabs{ background: none; padding: 0; gap: 18px; } body.in-admin .modal .ap-tab{ padding: 0; border-radius: 0; font-weight: 700; color: var(--text); } body.in-admin .modal .ap-tab.on{ background: none; box-shadow: none; color: var(--accent); } /* текст без коробки: разводим кнопки, стоящие подряд в ячейке или строке */ .admin td .btn + .btn, .admin .card > .btn + .btn{ margin-left: 16px; } /* Телефон: островок в центре должен оставаться одной строкой на строку */ @media (max-width: 480px){ .head-mid{ max-width: 58vw; padding: 4px 12px 4px 4px; gap: 8px; } .chat-head .btn{ padding: 8px 12px; } .chat-head .btn span{ display: none; } .chat-head .sub{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .head-right{ padding: 3px; } .chat-head .icon-btn{ width: 34px; height: 34px; } } /* ---------------------------------------------------------------- Матовое стекло панелей. Chrome обрезает размытие фона по прямоугольнику элемента, а не по его скруглению: на цветном фоне вокруг пилюль проступала светлая плашка. Свой слой отрисовки (translateZ) заставляет обрезать по радиусу. ---------------------------------------------------------------- */ .island, .chat-head .btn, .jump-btn, .reply-bar, .locked, .emoji-pop{ background: var(--glass-face); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); transform: translateZ(0); } .emoji-pop{ transform: translateX(-50%) translateZ(0); } /* кнопка отправки красится своим цветом из настроек: непрозрачность 90%, и в неактивном виде она остаётся такой же плотной */ .send-btn{ background: var(--send-bg, var(--accent-2)); backdrop-filter: none; -webkit-backdrop-filter: none; } /* пустое поле: кнопка остаётся сплошной, тускнеет только сама иконка */ .send-btn:disabled{ opacity: 1; color: rgba(255,255,255,.72); } /* иконки шапки: при наведении светятся акцентом, как кнопка «Войти» */ .chat-head .icon-btn:hover, .chat-head .icon-btn:focus-visible{ background: none; color: var(--accent); } /* список участников: показаны только те, кто в сети, остальные — строкой */ .members-more{ padding: 10px 8px 4px; color: var(--muted); font-size: 12.5px; } /* образец фоновой картинки в админке */ .bg-preview{ width: 54px; height: 38px; object-fit: cover; border-radius: var(--r-sm); display: block; } /* Жёсткая обрезка стекла по скруглению: clip-path режет и размытие фона, и его прямоугольный «хвост». Внешняя тень при этом не рисуется — панели держатся на самом стекле. */ .island{ clip-path: inset(0 round 999px); } .chat-head .btn{ clip-path: inset(0 round 999px); } /* Поле ввода: стекло вынесено в свой слой (::before), а островок режет его обычным overflow по скруглению. С clip-path поверх backdrop-filter Chromium изредка оставлял в левом верхнем углу мигающий обрывок размытия. */ .input-island{ position: relative; isolation: isolate; overflow: hidden; clip-path: none; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; } .input-island::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--glass-face); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); } .input-island > *{ position: relative; z-index: 1; } .send-btn{ clip-path: inset(0 round var(--r-send, 50%)); } /* счётчик висит выше края кнопки, поэтому её саму не обрезаем: круглая форма и так режет размытие ровно (border-radius + свой слой) */ .reply-bar, .locked, .emoji-pop{ clip-path: inset(0 round var(--r-lg)); } .event-bar{ clip-path: inset(0 round var(--r-lg)); }