/* maxlite — интерфейс панели. * * Без сборки и без внешних шрифтов: панель одного владельца на слабом * сервере, и всё, что ей нужно, — этот файл и app.js. * * Шаблоны почти не знают о дизайне: оформление навешивается на обычную * разметку (формы, таблицы, p.error …). Таблицы на узком экране становятся * карточками — подписи колонок в ячейки проставляет app.js. */ :root { color-scheme: light dark; --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f1f3f7; --border: #e2e6ec; --text: #141821; --text-2: #5b6576; --accent: #2f6fed; --accent-text: #ffffff; --accent-soft: #e8effd; --ok: #17803d; --ok-soft: #e5f4ea; --warn: #8f5f00; --warn-soft: #fff3d6; --danger: #c62828; --danger-soft: #fdeaea; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05); --sidebar: 248px; --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Тема: без data-theme — как в системе; кнопка в меню ставит на * data-theme="light"/"dark". Тёмная палитра записана дважды — для системной * тёмной и для выбранной вручную: CSS не умеет объединить @media и селектор * в одно правило, а переменных-наборов у него нет. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #161a22; --surface-2: #1d222c; --border: #2a303c; --text: #e8ebf1; --text-2: #9aa4b5; --accent: #6f9dff; --accent-text: #0b1020; --accent-soft: #1b2744; --ok: #5cc98a; --ok-soft: #13271b; --warn: #e7b653; --warn-soft: #2a2312; --danger: #ff7070; --danger-soft: #331a1b; --shadow: 0 1px 2px rgba(0, 0, 0, .4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1116; --surface: #161a22; --surface-2: #1d222c; --border: #2a303c; --text: #e8ebf1; --text-2: #9aa4b5; --accent: #6f9dff; --accent-text: #0b1020; --accent-soft: #1b2744; --ok: #5cc98a; --ok-soft: #13271b; --warn: #e7b653; --warn-soft: #2a2312; --danger: #ff7070; --danger-soft: #331a1b; --shadow: 0 1px 2px rgba(0, 0, 0, .4); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin: 0 0 18px; } h2 { font-size: 18px; font-weight: 650; margin: 32px 0 12px; } p { margin: 0 0 12px; } ul { padding-left: 20px; } code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: .88em; } /* ---------- каркас ---------- */ .app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px 14px; } .brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 20px; font-weight: 750; font-size: 17px; color: var(--text); letter-spacing: -.01em; } .brand:hover { text-decoration: none; } .brand-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2f6fed 0%, #7b5cff 100%); box-shadow: 0 4px 12px rgba(47, 111, 237, .35); flex: none; } .brand-logo svg { width: 18px; height: 18px; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); padding: 14px 12px 6px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-weight: 550; font-size: 14.5px; } .nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); } .nav svg { width: 18px; height: 18px; flex: none; } .sidebar-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .sidebar-foot form { margin: 0; } .sidebar-foot button { width: 100%; justify-content: flex-start; gap: 11px; background: transparent; color: var(--text-2); border-color: transparent; font-weight: 550; box-shadow: none; } .sidebar-foot button:hover { background: var(--surface-2); color: var(--text); filter: none; } .sidebar-foot form button:hover { color: var(--danger); } /* Иконка кнопки темы — текущий режим; до app.js виден «авто» из разметки. */ .theme-btn svg { display: none; } .theme-btn[data-mode="auto"] .ti-auto, .theme-btn[data-mode="light"] .ti-light, .theme-btn[data-mode="dark"] .ti-dark { display: block; } .topbar { display: none; } .scrim { display: none; } .main { min-width: 0; padding: 30px 36px 56px; } .content { max-width: 1240px; } /* ---------- мелкие элементы ---------- */ .crumbs { font-size: 13px; color: var(--text-2); margin: 0 0 6px; } .crumbs a { color: var(--text-2); } .crumbs a:hover { color: var(--accent); text-decoration: none; } .crumbs span[aria-current] { color: var(--text); } .muted { color: var(--text-2); font-size: 13px; } .hint { color: var(--text-2); font-size: 13px; } .secret-set { color: var(--ok); font-size: 13px; font-weight: 650; } .notice, .warn { color: var(--warn); } .error { color: var(--danger); } p.error, p.warn, p.notice, p.status-ok { display: block; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent; } p.error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } p.warn, p.notice { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); } p.status-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); font-weight: 600; } .quote { white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--border); padding: 2px 0 2px 10px; margin: 6px 0; color: var(--text); } a.quote-jump { display: block; text-decoration: none; } a.quote-jump:hover { border-left-color: var(--accent); } a.reply-jump { white-space: nowrap; } /* Состояния: плашка с точкой. «Сессия недействительна» обязана отличаться от «не запущено» с первого взгляда — на них разная реакция. */ span.status-ok, span.status-broken, span.status-idle, span.status-off, td.status-ok, td.status-broken, td.status-idle, td.status-off { font-weight: 600; } span.status-ok, span.status-broken, span.status-idle, span.status-off { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; line-height: 1.6; } span.status-ok::before, span.status-broken::before, span.status-idle::before, span.status-off::before, td.status-ok::before, td.status-broken::before, td.status-idle::before, td.status-off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; } .status-ok { color: var(--ok); } span.status-ok { background: var(--ok-soft); } .status-broken { color: var(--danger); } span.status-broken { background: var(--danger-soft); } .status-idle { color: var(--warn); } span.status-idle { background: var(--warn-soft); } .status-off { color: var(--text-2); } span.status-off { background: var(--surface-2); } /* ---------- кнопки ---------- */ button, .btn, .content > p > a[href$="/new"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14.5px; font-weight: 650; line-height: 1.2; min-height: 40px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); transition: filter .15s, background-color .15s, box-shadow .15s; } button:hover, .btn:hover, .content > p > a[href$="/new"]:hover { filter: brightness(1.07); text-decoration: none; } button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); } button:disabled { opacity: .55; cursor: not-allowed; } button svg, .btn svg { width: 18px; height: 18px; flex: none; } /* Второстепенные действия: отклонить, отменить, переключатели в таблицах. */ .btn-secondary, button[value="reject"], button[value="fail"], form[action$="/cancel"] button, form[action$="/login/start"] button.secondary, .actions form[action$="/login/start"] button, td form[action$="/monitor"] button, td form[action$="/store_all"] button, form[hx-post] button { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; } .btn-secondary:hover, button[value="reject"]:hover, button[value="fail"]:hover, form[action$="/cancel"] button:hover, .actions form[action$="/login/start"] button:hover, td form button:hover, form[hx-post] button:hover { background: var(--surface-2); filter: none; } /* Разрушительные — красные, чтобы их не нажимали на автомате. */ form[action$="/delete"] button { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); box-shadow: none; } form[action$="/delete"] button:hover { background: var(--danger-soft); filter: none; } td form button { min-height: 32px; padding: 5px 12px; font-size: 13px; } /* Переключатели чата: «включено» — зелёным, чтобы состояние читалось без чтения подписи; пока htmx ждёт ответа — кнопка приглушена. */ .chat-toggle button.toggle-on { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .chat-toggle button.toggle-on:hover { background: var(--ok-soft); filter: brightness(.97); } .chat-toggle form.htmx-request button { opacity: .55; cursor: progress; } .chat-toggle .error { font-size: 13px; margin-top: 4px; } .chat-switches { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 8px 0 18px; } .chat-switch { display: flex; align-items: center; gap: 10px; } .chat-switch > span { color: var(--text-2); font-size: 14px; } .chat-switch .chat-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .chat-switch .chat-toggle .error { margin-top: 0; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; } a.ext-link:not(.btn) { font-weight: 600; } a.btn.ext-link { background: #2f6fed; color: #fff; } .actions form { margin: 0; } /* ---------- формы ---------- */ input, select, textarea { font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; min-height: 40px; max-width: 100%; transition: border-color .15s, box-shadow .15s; } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--text-2) 75%, transparent); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } textarea { width: 100%; min-height: 100px; resize: vertical; line-height: 1.5; } select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808a9b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; padding: 0; margin: 0 8px 0 0; accent-color: var(--accent); vertical-align: -3px; box-shadow: none; } input[type="date"] { min-width: 150px; } label { cursor: pointer; } /* Форма с полями — карточка. Одинокая кнопка (удалить, отправить код) остаётся просто кнопкой. */ .content > form[method="post"]:has(input:not([type="hidden"]), textarea, select), .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin: 0 0 20px; max-width: 860px; } .content > form[method="post"] > p { margin-bottom: 16px; } .content > form[method="post"] > p > label > input:not([type="checkbox"]):not([type="radio"]), .content > form[method="post"] > p > label > select, .content > form[method="post"] > fieldset > p > label > input:not([type="checkbox"]):not([type="radio"]) { margin-top: 6px; } .content > form[method="post"] > button[type="submit"], .content > form[method="post"] > button:last-child { margin-top: 4px; } /* Фильтры списков — одной строкой с переносом. */ .content > form[method="get"] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin: 0 0 18px; } .content > form[method="get"] input[name="q"] { flex: 1 1 260px; } .content > form[method="get"] select { max-width: 260px; } fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px 6px; margin: 18px 0; background: color-mix(in srgb, var(--surface-2) 55%, transparent); min-width: 0; } legend { font-weight: 650; font-size: 14px; padding: 0 6px; color: var(--text); } .field { margin: 0 0 16px; max-width: 46rem; } .field > label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; } .field .hint { display: block; margin-top: 6px; } .field input:not([type="checkbox"]):not([type="radio"]), .field select { max-width: 100%; } fieldset .field:last-child { margin-bottom: 10px; } .chat-picker { max-height: 17rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px; line-height: 2; } .emoji-picker { margin: 4px 0 16px; max-width: 46rem; } .emoji-picker summary { cursor: pointer; font-weight: 600; margin-bottom: 4px; } .emoji-group { margin-bottom: 4px; } .emoji-picker button.emoji { font-size: 19px; line-height: 1; min-height: 36px; min-width: 36px; padding: 4px; margin: 2px; background: var(--surface); color: inherit; border: 1px solid var(--border); box-shadow: none; font-weight: 400; } .emoji-picker button.emoji:hover { background: var(--surface-2); filter: none; } .emoji-picker .hint { display: block; margin-top: 6px; } .rights-check-form { margin: 12px 0 20px; } /* Темы чата: строка с подсказками и метки ниже неё. */ .topic-combo { position: relative; } .topic-combo input { width: 100%; } .topic-options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 16rem; overflow-y: auto; } .topic-options li { padding: 8px 10px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; } .topic-options li[aria-selected="true"] { background: var(--accent-soft); } .topic-options li.topic-create { color: var(--accent); font-weight: 600; } .topic-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .topic-chips:empty { display: none; } .topic-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 13px; line-height: 1.3; } .topic-chip span { overflow-wrap: anywhere; } .topic-chip button.topic-remove { min-height: 26px; min-width: 26px; padding: 0; margin: 0; background: transparent; color: var(--text-2); border: 0; box-shadow: none; font-size: 17px; line-height: 1; font-weight: 400; } .topic-chip button.topic-remove:hover { color: var(--danger); filter: none; } .topic-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } /* Метка в одну строку: перенос внутри «пилюли» в узкой колонке списка читается как две метки. Длинное название (до 64 символов) обрезается многоточием. */ a.topic-tag { font-size: 12px; line-height: 1.5; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } a.topic-tag:hover { text-decoration: underline; } .placeholder-picker { margin: 4px 0 16px; max-width: 46rem; } .placeholder-picker summary { cursor: pointer; font-weight: 600; margin-bottom: 4px; } .placeholder-group { margin: 10px 0 2px; } .placeholder-list { list-style: none; margin: 0; padding: 0; } .placeholder-list li { margin: 3px 0; line-height: 1.35; } .placeholder-picker button.placeholder { font: 13px/1.2 ui-monospace, Consolas, monospace; min-height: 32px; padding: 4px 8px; margin-right: 6px; background: var(--surface); color: inherit; border: 1px solid var(--border); box-shadow: none; } .placeholder-picker button.placeholder:hover { background: var(--surface-2); filter: none; } .placeholder-picker .hint { display: block; margin-top: 8px; } .regex-help { margin: -4px 0 16px; max-width: 46rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; } .regex-help summary { cursor: pointer; font-weight: 600; } .regex-help[open] summary { margin-bottom: 4px; } .regex-group { margin: 12px 0 2px; font-weight: 600; font-size: 14px; } .regex-list { margin: 0; padding-left: 1.2rem; } .regex-list li { margin: 4px 0; line-height: 1.45; } /* Длинные выражения (телефон) без переноса распирали бы страницу на 390 px. */ .regex-help code { overflow-wrap: anywhere; } .regex-help .hint { display: block; margin-top: 10px; } /* ---------- таблицы ---------- */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 18px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 14px; text-align: left; vertical-align: top; font-size: 14px; border-bottom: 1px solid var(--border); } th { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); background: var(--surface-2); white-space: nowrap; } tr:last-child > td { border-bottom: 0; } tbody tr:hover > td, table.cards tr:not(.head):hover > td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); } td form { margin: 0; } td > div + div { margin-top: 2px; } /* Таблица «ключ — значение» (Служебное): заголовки в строках. */ tr > th + td { width: 100%; } tr > th:first-child:not(:only-child) { width: 1%; } .chat-lost > td { background: var(--danger-soft); } /* Лента намерений: одно срабатывание — одна строка; ширины заданы, иначе текст сообщения съедает колонку, в которой принимают решение. */ .plans { table-layout: fixed; min-width: 900px; } .plans td { overflow-wrap: anywhere; } /* Селектор сильнее общего `tr > th:first-child:not(:only-child) { width: 1% }`: иначе при table-layout: fixed колонка «Когда» сжималась до 1% и дата налезала на название чата. */ table.plans tr > th:nth-child(1) { width: 6.5rem; } table.plans tr > th:nth-child(2) { width: 15%; } table.plans tr > th:nth-child(3) { width: 27%; } table.plans tr > th:nth-child(4) { width: 30%; } .plans .nowrap { white-space: nowrap; } .plans .plan + .plan { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .plans textarea { margin-top: 6px; min-height: 80px; } /* Журнал действий. Колонки фиксированы по той же причине, что у «Ответов»: текст сообщения иначе съедает колонку с действиями. */ .journal-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; } .journal-summary .stat { flex: 1 1 10rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; box-shadow: var(--shadow); } .journal-summary .stat-num { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; } /* Цвет числа, а не плашка статуса: у span.status-ok фон и точка. */ .journal-summary .stat-num.ok { color: var(--ok); } .journal { table-layout: fixed; min-width: 960px; } .journal td { overflow-wrap: anywhere; vertical-align: top; } table.journal tr > th:nth-child(1) { width: 8rem; } table.journal tr > th:nth-child(2) { width: 17%; } table.journal tr > th:nth-child(3) { width: 28%; } table.journal tr > th:nth-child(5) { width: 8rem; } table.journal tr.is-queued > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .journal-actions { list-style: none; margin: 0; padding: 0; } .journal-actions li + li { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } /* ---------- постраничный вывод ---------- */ .pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 18px; } .pager .pg-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 550; } .pager a.pg-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .pager .pg-btn.disabled { color: var(--text-2); opacity: .55; } .pager .pg-info { font-size: 13.5px; padding: 0 6px; } /* ---------- страница входа ---------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, #7b5cff 14%, transparent), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 10px 40px rgba(16, 24, 40, .12); padding: 30px 28px; } .auth-card .brand { padding: 0 0 22px; font-size: 20px; } .auth-card h1 { font-size: 20px; margin-bottom: 4px; } .auth-card label { display: block; font-weight: 600; font-size: 14px; margin: 18px 0 6px; } .auth-card input, .auth-card button { width: 100%; } .auth-card button { margin-top: 16px; min-height: 44px; } .auth-card p.error { margin: 16px 0 0; } /* ---------- мобильные ---------- */ @media (max-width: 960px) { .app { grid-template-columns: minmax(0, 1fr); } .topbar { display: flex; position: sticky; top: 0; z-index: 30; height: 56px; align-items: center; gap: 10px; padding: 0 12px; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .topbar-title { font-weight: 650; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-btn { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 12px; flex: none; background: transparent; color: var(--text); border: 0; box-shadow: none; } .icon-btn:hover { background: var(--surface-2); filter: none; } .icon-btn svg { width: 22px; height: 22px; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(84vw, 300px); height: 100dvh; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .25); padding-top: calc(18px + env(safe-area-inset-top)); } body.nav-open .sidebar { transform: none; } .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 15, .45); opacity: 0; pointer-events: none; transition: opacity .2s; display: block; } body.nav-open .scrim { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } .nav a { padding: 12px 12px; font-size: 15.5px; } .main { padding: 18px 14px 48px; } h1 { font-size: 22px; margin-bottom: 14px; } .crumbs { display: none; } /* 16px — иначе iOS увеличивает страницу при фокусе на поле. */ input, select, textarea, button { font-size: 16px; } input:not([type="checkbox"]):not([type="radio"]), select, button { min-height: 44px; } .content > form[method="post"]:has(input:not([type="hidden"]), textarea, select), .card { padding: 16px; } .content > form[method="post"] input:not([type="checkbox"]):not([type="radio"]):not([size="5"]):not([size="10"]), .content > form[method="post"] select { width: 100%; } .content > form[method="get"] > * { flex: 1 1 100%; } .content > form[method="get"] select { max-width: none; } .content > form[method="get"] > button { flex: 1 1 100%; } fieldset { padding: 12px 12px 4px; } .plans, .journal { min-width: 0; table-layout: auto; } } /* Поиск: строка, к которой перешли по «↩ ответ на». Ниже правил наведения и с той же силой селектора: подсветка не должна пропадать под курсором. */ @keyframes msg-flash { from { background: color-mix(in srgb, var(--accent) 38%, var(--surface)); } } table.cards tr.msg-flash:not(.head) > td { background: var(--accent-soft); animation: msg-flash 1.6s ease-out; } table.cards tr.msg-flash:not(.head) > td:first-child { box-shadow: inset 3px 0 0 var(--accent); } @media (max-width: 720px) { /* Таблицы — карточками: строка становится карточкой, ячейка — парой «подпись — значение». Подписи из заголовка таблицы ставит app.js. */ .table-wrap:has(> table.cards) { background: transparent; border: 0; box-shadow: none; overflow: visible; } table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; } table.cards thead, table.cards tr.head { display: none; } table.cards tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 10px; padding: 8px 0; overflow: hidden; } table.cards tr.chat-lost { border-color: color-mix(in srgb, var(--danger) 45%, transparent); } /* Подпись — абсолютом в левой трети, всё содержимое ячейки (и элементы, и голый текст) — в правой части. Сетка здесь не годится: текстовый узел после вложенного блока уезжал бы в колонку подписей. */ table.cards td { position: relative; border: 0; padding: 7px 14px 7px calc(34% + 10px); min-height: 2.4em; font-size: 14.5px; overflow-wrap: anywhere; } table.cards td::before { content: attr(data-label); position: absolute; left: 14px; top: 9px; width: calc(34% - 18px); color: var(--text-2); font-size: 11px; font-weight: 650; line-height: 1.35; text-transform: uppercase; letter-spacing: .03em; } table.cards td[data-label=""], table.cards td[colspan] { padding-left: 14px; } table.cards td[data-label=""]::before, table.cards td[colspan]::before { display: none; } /* Ячейки с крупным содержимым (лента ответов) — подпись сверху, текст на всю ширину. */ table.cards.plans td, table.cards.journal td { padding-left: 14px; } table.cards.plans td::before, table.cards.journal td::before { position: static; display: block; width: auto; margin: 2px 0 4px; } table.cards.journal tr.is-queued { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } table.cards.journal tr.is-queued > td:first-child { box-shadow: none; } table.cards td.status-ok::before, table.cards td.status-broken::before, table.cards td.status-idle::before, table.cards td.status-off::before { content: attr(data-label); display: block; width: calc(34% - 18px); height: auto; border-radius: 0; background: none; margin: 0; color: var(--text-2); vertical-align: baseline; } table.cards tbody tr:hover > td, table.cards tr:not(.head):hover > td { background: transparent; } table.cards .chat-lost > td, table.cards tr.chat-lost > td { background: var(--danger-soft); } /* Карточка скруглена: подсвечивается она целиком, а не ячейки внутри. */ table.cards tr.msg-flash:not(.head) { background: var(--accent-soft); border-color: var(--accent); animation: msg-flash 1.6s ease-out; } table.cards tr.msg-flash:not(.head) > td { background: transparent; box-shadow: none; animation: none; } table.cards tr.msg-flash:not(.head) > td:first-child { box-shadow: none; } /* Ячейка «Решение» и одиночные кнопки — во всю ширину под палец. */ table.cards td form button { width: 100%; min-height: 40px; font-size: 15px; } .plans td.nowrap { white-space: normal; } tr > th:first-child:not(:only-child) { width: 40%; white-space: normal; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } } /* Публикации: вкладки видов и медиа. */ .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; } .tabs a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; background: var(--surface); } .tabs a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); } .post-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .post-media-item { margin: 0; max-width: 160px; font-size: 13px; overflow-wrap: anywhere; } .post-media-item img { display: block; width: 160px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } .post-media-item figcaption { margin-top: 4px; } .post-media-controls { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; } .post-media-controls input[type="number"] { width: 4.5em; min-height: 32px; padding: 4px 6px; } /* Разметка публикаций MAX: панель кнопок, предпросмотр, показ отформатированного текста. */ .post-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; } .post-toolbar button { min-height: 32px; padding: 4px 10px; font-size: 13px; background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; } .post-toolbar button:hover { background: var(--surface-2); filter: none; } .post-toolbar .post-b { font-weight: 800; } .post-toolbar .post-i { font-style: italic; } .post-toolbar .post-u { text-decoration: underline; } .post-toolbar .post-s { text-decoration: line-through; } .post-toolbar .post-mark { background: var(--warn-soft); } .post-counter { margin-top: 4px; font-size: 13px; } .post-counter.error { color: var(--danger); } .post-preview { margin-top: 8px; } .post-text { white-space: pre-wrap; overflow-wrap: anywhere; } .post-text-short { max-height: 16em; overflow: auto; } .post-text blockquote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid var(--accent); } .post-text pre { margin: 6px 0; padding: 8px; background: var(--surface-2); border-radius: 6px; overflow-x: auto; white-space: pre; } .post-text code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .post-text mark { background: #ffe58a; color: #1a1a1a; border-radius: 3px; padding: 0 2px; }