/* ═══════════════ Шрифт ═══════════════ */ /* Golos Text, SIL Open Font License 1.1 — app/static/fonts/OFL.txt */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/golos-text-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/golos-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/golos-text-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══════════════ Токены ═══════════════ */ /* Палитра «чернила и янтарь». Каждая пара текст/фон проверена по WCAG 2.1 AA: обычный текст ≥ 4.5:1, рамки элементов управления и кольцо фокуса ≥ 3:1. Меняешь цвет — пересчитай пару, а не подбирай на глаз. */ :root { --bg: #f2f1ec; --surface: #fbfaf7; --surface-2: #f2f1ec; --surface-3: #e8e6df; --text: #14181f; --text-2: #3d4653; --muted: #5c6470; /* 5.29:1 на bg, 4.79:1 на surface-3 */ --border: #dedbd2; /* разделители и края карточек */ --border-strong: #8c8577; /* рамки полей и кнопок — 3.51:1 на surface */ --accent: #95560b; /* ссылки, иконки, кольцо фокуса — 5.14:1 на bg */ --accent-hover: #6f4007; --accent-fill: #c47a16; /* заливка главной кнопки */ --accent-fill-hover: #d08a22; --accent-text: #14181f; /* чернила на янтаре — 5.20:1 */ --accent-soft: #f6ecdc; --accent-soft-text: #7a4708; --ok: #186040; --ok-soft: #e3efe7; --err: #9b2820; --err-soft: #fae7e3; --err-text: #ffffff; --warn: #6f5a06; --warn-soft: #f5efd6; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(31, 26, 17, .06); --shadow: 0 1px 3px rgba(31, 26, 17, .10), 0 1px 2px rgba(31, 26, 17, .05); --shadow-lg: 0 12px 32px rgba(31, 26, 17, .18); --focus: var(--accent); --tap: 44px; /* минимальная зона нажатия, WCAG 2.5.5 */ --sticky-top: 0px; /* отступ липкой шапки от верха .table-wrap — не от окна: из-за overflow-x таблица сама себе контейнер прокрутки, и любое значение больше нуля просто сдвигает шапку вниз, накрывая первую строку */ --sidebar-w: 248px; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } /* Тёмная палитра — один источник правды. Какая тема включена, решает маленький скрипт в : он ставит data-theme до первой отрисовки, беря либо выбор человека, либо настройку системы. */ :root[data-theme="dark"] { --bg: #101319; --surface: #171b22; --surface-2: #1d222b; --surface-3: #262c36; --text: #e9e7e1; --text-2: #c2beb5; --muted: #9a958a; --border: #2a303b; --border-strong: #646c7d; --accent: #e0a33a; --accent-hover: #edb757; --accent-fill: #e0a33a; --accent-fill-hover: #edb757; --accent-text: #101319; --accent-soft: rgba(224, 163, 58, .14); --accent-soft-text: #f0c886; --ok: #5cc08d; --ok-soft: rgba(92, 192, 141, .14); --err: #f0796a; --err-soft: rgba(240, 121, 106, .14); --err-text: #101319; --warn: #d8c04a; --warn-soft: rgba(216, 192, 74, .14); --shadow-sm: none; --shadow: 0 1px 2px rgba(0, 0, 0, .5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6); color-scheme: dark; } /* ═══════════════ База ═══════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14.5px/1.55 "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0 0 18px; } h2 { font-size: 16px; line-height: 1.3; font-weight: 600; margin: 0 0 10px; } h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; } p { margin: 0 0 10px; } code { font-family: var(--mono); font-size: .92em; } b, strong { font-weight: 600; } .icon { flex: none; display: block; } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Ссылка «к содержимому»: видна только с клавиатуры (WCAG 2.4.1) */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--surface); color: var(--text); font-weight: 600; border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); transition: top .15s; } .skip-link:focus { top: 8px; color: var(--text); } /* Только для скринридера */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ═══════════════ Каркас: боковое меню ═══════════════ */ .app { display: flex; min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; width: var(--sidebar-w); flex: none; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px 10px; background: var(--surface); border-right: 1px solid var(--border); overflow: hidden; } .sidebar-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .sidebar-head .brand { flex: 1; min-width: 0; padding-bottom: 0; } .brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 0; color: var(--text); font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; } .brand:hover { color: var(--text); } .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--accent-fill); color: var(--accent-text); font-size: 15px; font-weight: 700; } /* Прокручивается только список разделов, и только если он не влез. Логотип, кнопка сворачивания и карточка пользователя остаются на месте: полоса прокрутки на всю панель появлялась из-за них и выглядела как ошибка. */ .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; } .nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; } .nav { scrollbar-width: thin; } .nav-group { margin: 11px 10px 3px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); font-weight: 500; transition: background .12s, color .12s; } .nav-link .icon { color: var(--muted); transition: color .12s; } .nav-link:hover { background: var(--surface-3); color: var(--text); } .nav-link:hover .icon { color: var(--text-2); } .nav-link.active { background: var(--accent-soft); color: var(--accent-soft-text); } .nav-link.active .icon { color: var(--accent); } /* Имя внизу — вход в свой профиль, поэтому отдельной кнопки-ключа больше нет. */ .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid var(--border); margin-top: 8px; color: var(--text); } .sidebar-user:hover { color: var(--text); background: var(--surface-2); } .sidebar-user:hover .sidebar-user-text b { color: var(--accent); } .sidebar-user[aria-current] .sidebar-user-text b { color: var(--accent); } /* Кнопки отдельной строкой: втроём в один ряд с именем они съедали его до «О…» */ .sidebar-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 4px 4px; } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-2); font-weight: 600; object-fit: cover; overflow: hidden; } .sidebar-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; } .sidebar-user-text b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-text span { font-size: 12px; color: var(--muted); } .icon-button { position: relative; width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; flex: none; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .icon-button::after { content: ""; position: absolute; inset: -4px; } .icon-button:hover { background: var(--surface-3); color: var(--text); } .main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mobile-bar { display: none; } .sidebar-backdrop { display: none; } .page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 48px; } body.bare .page { max-width: 1100px; } .center { min-height: 100vh; display: grid; place-items: center; padding: 20px; } @media (max-width: 960px) { .sidebar { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } body.nav-open .sidebar { transform: none; } body.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(20, 24, 31, .5); } .mobile-bar { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 20; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); } .mobile-bar .brand { padding: 0; } .mobile-bar .brand-mark { width: 26px; height: 26px; font-size: 13px; } .page { padding: 20px 16px 40px; } } /* ═══════════════ Заголовок страницы ═══════════════ */ .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; } .row h1 { margin: 0; } h1 .badge { vertical-align: middle; font-size: 12px; font-weight: 500; margin-left: 4px; } h2.section { margin: 32px 0 12px; } .hint { font-size: 13px; color: var(--muted); } p.hint { margin: 6px 0 10px; } .muted { color: var(--muted); } span.muted { font-size: 13px; } /* ═══════════════ Карточки ═══════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); } .card + .card { margin-top: 16px; } /* Таблица сразу за карточкой (форма добавления над списком) упиралась в неё вплотную. .table-scroll — обёртка, которую навешивает app.js, поэтому правило нужно для обеих. */ .card + .table-wrap, .card + .table-scroll { margin-top: 16px; } .grid > .card + .card, .webs > .card + .card, .usage-grid .card + .card, .settings-grid > .card + .card { margin-top: 0; } .card > h2:first-child { margin-bottom: 14px; } .narrow { width: 100%; max-width: 440px; margin: 0 auto 16px; } .narrow-wide { max-width: 680px; } /* Главная */ .welcome { margin-bottom: 24px; } .welcome h1 { margin-bottom: 4px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; } .module { display: flex; flex-direction: row; align-items: center; gap: 12px; color: var(--text); padding: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; } .module:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); } .module h2 { margin: 0; font-size: 16px; } .module-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .module.soon { opacity: .6; } .today-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 20px; } .today-summary .icon { color: var(--accent); } .today-summary-main { display: flex; align-items: center; gap: 14px; flex: 1 1 300px; } .today-summary-main .badge { margin-left: 4px; } .stat-inline { display: flex; flex-direction: column; line-height: 1.3; } .stat-inline b { font-size: 18px; font-variant-numeric: tabular-nums; } /* ═══════════════ Формы ═══════════════ */ label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--text-2); } label.check { display: flex; gap: 9px; align-items: center; font-weight: 400; font-size: 14px; color: var(--text); cursor: pointer; } input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { display: block; width: 100%; margin-top: 6px; padding: 8px 11px; min-height: 38px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--muted); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); } select { appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } textarea { font: 13px/1.55 var(--mono); resize: vertical; } input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; cursor: pointer; } input[type=file] { display: block; margin-top: 8px; font: inherit; font-size: 14px; color: var(--text-2); } input[type=file]::file-selector-button { font: inherit; font-size: 13.5px; margin-right: 12px; padding: 7px 14px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); } fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 16px; padding: 10px 14px 4px; } legend { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 0 6px; } fieldset label.check { margin-bottom: 8px; } .field-error { display: block; color: var(--err); font-size: 12.5px; font-weight: 500; margin-top: 5px; } .directory-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .status-error { color: var(--err); } input.mono { font-family: var(--mono); font-size: 13px; } label.confirm { margin: 4px 0 16px; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .form-grid .span-2 { grid-column: span 2; } .form-grid .hint { display: block; margin-top: 5px; font-weight: 400; } @media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } } .manual-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; } .manual-form label { margin: 0; } .manual-form .grow { flex: 1 1 220px; } .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .filters input, .filters select { width: auto; margin: 0; } .filters input[type=search] { flex: 1 1 280px; } .filters .geo-filter { width: 100px; } .quick-find { display: flex; gap: 8px; margin-bottom: 12px; } .quick-find input { margin: 0; } /* ═══════════════ Кнопки ═══════════════ */ button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; } button:hover, .button:hover { background: var(--surface-2); border-color: var(--muted); color: var(--text); } button:active, .button:active { transform: translateY(1px); } button.primary, .button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); font-weight: 600; } button.primary:hover, .button.primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--accent-text); } button:disabled { opacity: .5; cursor: not-allowed; } button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-weight: 500; } button.link:hover { background: none; color: var(--accent-hover); } button.wide, form.card > button.primary { width: 100%; } .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 14px; } form.inline { display: inline; margin: 0; } /* ═══════════════ Сообщения ═══════════════ */ .flash { display: block; padding: 11px 14px; border-radius: var(--radius); margin-bottom: 16px; background: var(--ok-soft); color: var(--ok); border: 1px solid transparent; font-weight: 500; font-size: 14px; } .flash-error { background: var(--err-soft); color: var(--err); } .flash-warn { background: var(--warn-soft); color: var(--warn); } .flash a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ═══════════════ Плашки ═══════════════ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1.5; background: var(--surface-3); color: var(--text-2); border: 0; } .badge-done { background: var(--ok-soft); color: var(--ok); } .badge-error, .badge-cancelled { background: var(--err-soft); color: var(--err); } .badge-running, .badge-queued, .badge-absence { background: var(--accent-soft); color: var(--accent-soft-text); } .chip { display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; } /* ═══════════════ Таблицы ═══════════════ */ /* Вертикально таблицы не прокручиваются: вторая полоса прокрутки внутри страницы спорит с основной. По горизонтали блок становится прокручиваемым только когда таблица реально не влезает — класс .fits ставит app.js. Это не косметика: пока блок прокручиваемый, липкая шапка держится за него, а не за страницу, и при прокрутке страницы уезжает вместе с таблицей. */ .table-wrap { position: relative; overflow-x: auto; overflow-y: visible; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .table-wrap.fits { overflow: visible; } /* ── Широкие таблицы ── Первая ячейка строки прилипает к левому краю: при прокрутке вбок видно, о какой строке речь, иначе цифры справа теряют владельца. Крючок — th[scope=row], он же нужен скринридеру, так что размечено это везде одинаково. */ .table-wrap thead th:first-child, .table-wrap tbody th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--surface); } .table-wrap thead th:first-child { z-index: 4; background: var(--surface-2); } .table-wrap tbody tr:hover th[scope="row"] { background: var(--surface-2); } .table-wrap tr.total-row th[scope="row"] { background: var(--surface-2); } .table-wrap tr.row-error th[scope="row"] { background: var(--err-soft); } .table-wrap tr.note-row > td { background: var(--surface); } /* Граница появляется только когда таблицу увели вбок — иначе лишняя линия */ .table-wrap.scrolled-x thead th:first-child::after, .table-wrap.scrolled-x tbody th[scope="row"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--border-strong); opacity: .7; } /* Подсказка, что справа есть ещё: без неё обрезанная колонка выглядит как конец таблицы */ .table-scroll { position: relative; } .table-scroll::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: linear-gradient(90deg, transparent, var(--bg) 85%); opacity: 0; transition: opacity .15s; pointer-events: none; } .table-scroll.has-more::after { opacity: .9; } table { width: 100%; border-collapse: separate; border-spacing: 0; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } tbody th { position: static; background: none; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); } thead th { position: sticky; top: var(--sticky-top, 0px); z-index: 1; background: var(--surface-2); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } tbody tr { transition: background .1s; } tbody tr:hover td, tbody tr:hover th { background: var(--surface-2); } /* Строка истории открывает задачу целиком. Ссылка настоящая — она и даёт фокус с клавиатуры и имя для скринридера, а ::after растягивает её на всю строку, чтобы мышью не надо было целиться в номер. */ tr.row-link { position: relative; cursor: pointer; } tr.row-link > :first-child > a::after { content: ""; position: absolute; inset: 0; } tr.row-link > :first-child > a { font-variant-numeric: tabular-nums; } tr.row-link:hover .row-open { color: var(--accent); } /* Таблица истории шире экрана, поэтому «Открыть» прибита к правому краю — иначе подсказка о том, что строка открывается, видна только после прокрутки вбок. */ .row-open { position: sticky; right: 0; width: 1%; text-align: right; white-space: nowrap; color: var(--muted); font-size: 13px; background: var(--surface); border-left: 1px solid var(--border); } thead .row-open { z-index: 2; background: var(--surface-2); } tbody tr:hover .row-open { background: var(--surface-2); } /* Кольцо фокуса рисуем вокруг строки, а не вокруг одной цифры */ tr.row-link:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; } tr.row-link > :first-child > a:focus-visible { outline: none; } tbody tr:last-child td { border-bottom: 0; } td { font-size: 14px; } td a { font-weight: 500; } tr.muted td { color: var(--muted); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.mono { font-family: var(--mono); font-size: 12.5px; } td.muted { color: var(--muted); } td.wrap { white-space: normal; min-width: 160px; } tr.total-row td { border-top: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 600; } tr.group th { position: static; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); padding-bottom: 4px; border-bottom: 0; } th.group-2, table.results td:nth-child(12) { border-left: 2px solid var(--border); } tr.row-error td { background: var(--err-soft); } /* ═══════════════ Вкладки (сегменты) ═══════════════ */ .tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: 10px; } .tabs a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; } .tabs a::after { content: ""; position: absolute; inset: -5px 0; } .tabs a b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .tabs a:hover { color: var(--text); background: var(--surface-2); } .tabs a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .tabs a.active b { color: var(--accent); } .tabs a .badge { padding: 0 6px; font-size: 11px; } .tabs-title { padding: 0 6px 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); } .tab-groups { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .report-tabs { margin: -6px 0 20px; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; } .toolbar-hint { margin: -2px 0 14px; } .toolbar-hint span { display: block; } .table-filter { max-width: 380px; margin: 0 !important; } .pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 18px 0; color: var(--muted); } /* ═══════════════ Цифры ═══════════════ */ .stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 20px; } .stat-group { flex: 1 1 320px; } .stat-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-row-4 { grid-template-columns: repeat(4, 1fr); } .stat-row-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 900px) { .stat-row-4, .stat-row-5 { grid-template-columns: repeat(2, 1fr); } } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; } .stat span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; } .stat b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat small { display: block; margin-top: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .stats + p.hint { margin-top: -8px; } /* Прогресс фоновых задач */ .progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-bottom: 12px; } .progress-bar { height: 100%; border-radius: 99px; background: var(--accent); transition: width .5s ease; } [data-poll] { margin-bottom: 14px; } [data-poll] p { margin: 0; } .meta { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-bottom: 18px; padding: 16px 22px; } .meta > div > span:first-child { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 2px; } /* ═══════════════ Поиск по click ID ═══════════════ */ .search-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; } @media (max-width: 760px) { .search-grid { grid-template-columns: 1fr; } } .search-grid .ids .hint { display: block; margin-top: 6px; font-weight: 400; } tr.st-not_found td, tr.st-unchecked td { color: var(--muted); } tr.st-failed td { color: var(--err); } td.st-not_found, td.st-unchecked, td.st-no_sub1 { color: var(--muted); } td.st-failed { color: var(--err); } /* ═══════════════ Сверки ═══════════════ */ .recon-grid { display: grid; grid-template-columns: 230px 1fr 1fr; gap: 24px; } @media (max-width: 960px) { .recon-grid { grid-template-columns: 1fr; } } .picker { display: flex; flex-direction: column; min-width: 0; } .picker-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .picker input[type=search] { margin: 0 0 8px; } .picker-list { border: 1px solid var(--border); border-radius: var(--radius); height: 280px; overflow-y: auto; padding: 6px; background: var(--surface-2); } .picker-list label.check { margin: 0; padding: 6px 8px; gap: 8px; border-radius: 6px; font-size: 13.5px; } .picker-list label.check:hover { background: var(--surface-3); } .picker-list label.check[hidden] { display: none; } .picker-list label.check span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-list .badge { font-size: 11px; padding: 0 6px; } .webs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; } @media (max-width: 520px) { .webs { grid-template-columns: 1fr; } } .web h3 { margin: 0; } .web .row { margin-bottom: 10px; } .web pre { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); white-space: pre-wrap; font: 12.5px/1.65 var(--mono); } /* ═══════════════ Реклы ═══════════════ */ [data-conflicts] .flash { margin-bottom: 8px; } [data-conflicts] .hint { margin: 0 0 12px; } .entry-fields { display: grid; grid-template-columns: 170px 1fr; gap: 12px 18px; margin: 0 0 18px; } @media (max-width: 560px) { .entry-fields { grid-template-columns: 1fr; gap: 2px; } .entry-fields dd { margin-bottom: 12px; } } .entry-fields dt { color: var(--muted); font-size: 13px; font-weight: 500; padding-top: 1px; } .entry-fields dd { margin: 0; min-width: 0; } .copy-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .copy-row code { font-size: 12.5px; word-break: break-all; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); } .notes { white-space: pre-wrap; } .history { padding-top: 8px; padding-bottom: 8px; } .history-item { position: relative; padding: 12px 0 12px 18px; border-bottom: 1px solid var(--border); } .history-item::before { content: ""; position: absolute; left: 2px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .history-item:last-child { border-bottom: 0; } .history-item ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); } .history-item li { word-break: break-word; margin: 2px 0; } .cell-copy { max-width: 240px; } .cell-copy code { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 12px; } .usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 760px) { .usage-grid { grid-template-columns: 1fr; } } .usage-item { padding: 10px 0; border-bottom: 1px solid var(--border); } .usage-item:first-child { padding-top: 0; } .usage-item:last-child { border-bottom: 0; padding-bottom: 0; } .usage-item code { font-size: 12.5px; word-break: break-all; } .map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 16px; } .steps { padding-left: 20px; margin: 4px 0 12px; } .steps li { margin: 4px 0; } table.sample td, table.import-preview td { font-size: 13px; } /* ═══════════════ Посещаемость ═══════════════ */ .month-nav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-3); } .month-nav a, .month-nav span.muted { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-2); } .month-nav a::after { content: ""; position: absolute; inset: -5px; } .month-nav a:hover { background: var(--surface); color: var(--text); } .month-nav b { padding: 0 10px; min-width: 130px; text-align: center; font-weight: 600; } .today-card { margin-bottom: 18px; } table.days .events { white-space: normal; } .event { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; margin: 1px 4px 1px 0; border-radius: 6px; background: var(--surface-3); font-size: 12.5px; font-variant-numeric: tabular-nums; } .event.manual { background: transparent; border: 1px dashed var(--border-strong); } .event button.link { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px -4px -2px 0; color: var(--muted); font-size: 15px; line-height: 1; } .event button.link::after { content: ""; position: absolute; inset: -12px; } .event button.link:hover { color: var(--err); } tr.absent > :first-child { color: var(--err); font-weight: 500; } .manual summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; } .manual summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 700; } .manual[open] summary::before { content: "−"; } .manual summary::-webkit-details-marker { display: none; } .absences { margin-bottom: 16px; } .settings-grid { display: grid; gap: 16px; } .settings-grid h2 { margin-bottom: 6px; } .weekdays { display: flex; flex-wrap: wrap; gap: 6px 16px; } /* Отметка с телефона */ .scan { text-align: center; padding: 32px 24px; } .scan h1 { margin-bottom: 14px; } button.big { width: 100%; min-height: 60px; font-size: 19px; font-weight: 600; border-radius: 14px; margin: 10px 0; } button.big.out { background: var(--text); border-color: var(--text); color: var(--surface); } .scan-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700; line-height: 1; background: var(--ok-soft); color: var(--ok); } .scan-icon.warn { background: var(--err-soft); color: var(--err); } .scan-time { font-size: 44px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 12px; font-variant-numeric: tabular-nums; } /* Экран с QR в офисе — всегда светлый */ main.kiosk { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: #fff; color: #111; color-scheme: light; } .kiosk-wrap { text-align: center; } .kiosk-wrap h1 { font-size: clamp(26px, 4vw, 46px); margin: 0 0 6px; color: #111; } .kiosk-sub { font-size: clamp(16px, 2.2vw, 24px); color: #3d4653; margin: 0 0 18px; } .kiosk-qr { display: inline-flex; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .08); line-height: 0; } .kiosk-qr svg { display: block; width: min(62vh, 82vw); height: auto; aspect-ratio: 1; } .kiosk-meta { margin-top: 16px; font-size: 18px; color: #3d4653; font-variant-numeric: tabular-nums; } .kiosk-name { color: #5c6470; } /* ═══════════════ Вход ═══════════════ */ body.bare .center { background: var(--bg); } .login-card { padding: 30px 28px; box-shadow: var(--shadow-lg); } .login-card .brand { justify-content: center; padding: 0 0 6px; font-size: 17px; } .login-card .brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 19px; } .login-card h1 { text-align: center; font-size: 20px; margin: 8px 0 22px; } /* Узкие поля внутри строк фильтров не растягиваются на всю ширину */ .filters :is(input, select):not([type=checkbox]):not([type=radio]):not([type=file]) { width: auto; margin-top: 0; } .filters input[type=search]:not([type=checkbox]) { flex: 1 1 280px; } .filters input.geo-filter:not([type=checkbox]) { width: 100px; flex: none; } .quick-find input:not([type=checkbox]) { margin-top: 0; } @media (max-width: 560px) { .filters :is(input, select):not([type=checkbox]):not([type=radio]):not([type=file]) { flex: 1 1 140px; } .filters input.geo-filter:not([type=checkbox]) { flex: 0 0 100px; } } /* Кошельки и постбеки в таблицах Advertisers */ .secret { display: inline-flex; align-items: center; gap: 4px; } .secret code { font-size: 12px; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text); white-space: nowrap; cursor: help; } .copy-btn { position: relative; min-height: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--muted); } .copy-btn::after { content: ""; position: absolute; inset: -10px; } .copy-btn:hover { background: var(--surface-3); color: var(--text); } .copy-btn.copied { color: var(--ok); } .copy-btn.copied .icon { transform: scale(1.1); } .badge.reuse { padding: 0 6px; font-size: 11px; font-weight: 600; } .advertisers-table td { vertical-align: middle; } .advertisers-table tbody tr:hover .secret code { background: var(--surface); } .inline-fieldset { display: flex; gap: 14px; align-items: center; margin: 0; padding: 6px 12px; } .inline-fieldset label.check { margin: 0; } /* Постбеки рег + деп — парой */ .pb-pair { display: flex; flex-direction: column; gap: 3px; } .pb-line { display: flex; align-items: center; gap: 6px; } .pb-label { flex: none; width: 30px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .pb-usage { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .pb-usage-line { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .pb-usage-line code { font-size: 12.5px; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); word-break: break-all; } .pb-usage-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; width: 100%; margin-top: 2px; } .pb-fieldset { padding: 12px 14px 0; } .pb-fieldset label { margin-bottom: 12px; } /* Подмены линок */ .rates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .filters input.offer-filter:not([type=checkbox]) { width: 110px; flex: none; } .swaps-table td.nowrap { white-space: nowrap; } .swaps-table .cell-copy { max-width: 320px; } .swaps-table .cell-copy code { max-width: 260px; } /* ═══════════════ Доступность: добавленное по аудиту ═══════════════ */ /* Пояснение, которое раньше жило только в title= и было недоступно с клавиатуры и с телефона (1.3.1). Теперь это видимый текст. */ .note { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: normal; } td .note { max-width: 260px; } .event .note { display: inline; margin: 0 0 0 4px; font-size: 11.5px; } /* Итог фильтрации: «ничего не нашлось» вместо молча пустой таблицы */ .filter-empty { padding: 18px 16px; color: var(--muted); font-size: 14px; } .filter-count { font-variant-numeric: tabular-nums; } /* Статус строки значком, а не только цветом (1.4.1) */ .mark { font-weight: 700; font-style: normal; } .mark-err { color: var(--err); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ═══════════════ Запуски и планы ═══════════════ */ .badge-warn { background: var(--warn-soft); color: var(--warn); } .plans-table .status-form { display: inline; } .plans-table .status-form select { width: auto; min-height: 30px; padding: 3px 28px 3px 8px; margin: 0; font-size: 13px; } .plans-table tr.note-row > td { border-top: 0; padding-top: 0; font-size: 13px; } .plans-table tr.note-row:hover > td { background: none; } .review-item { border-left: 3px solid var(--accent); scroll-margin-top: 70px; } /* якорь не уезжает под липкую шапку */ .review-item.done { border-left-color: var(--ok); opacity: .75; } .review-item .manual-form { margin-top: 4px; } .review-item .entry-fields { margin-bottom: 10px; } /* ═══════════════ Стоп-экран: рекл в скамерах ═══════════════ */ .scam-stop { max-width: 560px; padding: 28px; border: 1px solid var(--err); box-shadow: var(--shadow-lg); } .scam-mark { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--err-soft); color: var(--err); font-size: 30px; font-weight: 700; line-height: 1; } .scam-stop h1 { text-align: center; font-size: 21px; margin-bottom: 12px; } .scam-list { list-style: none; margin: 14px 0 20px; padding: 0; } .scam-list li { padding: 12px 14px; border-radius: var(--radius); background: var(--err-soft); margin-bottom: 8px; } .scam-list li > div { margin: 4px 0 2px; } .scam-actions { justify-content: center; } button.danger { background: var(--err); border-color: var(--err); color: var(--err-text); font-weight: 600; } button.danger:hover { background: var(--err); border-color: var(--err); color: var(--err-text); filter: brightness(1.08); } /* ═══════════════ Финансы ═══════════════ */ .money-in { color: var(--ok); } .money-out { color: var(--err); } table.plain { width: 100%; } table.plain th, table.plain td { padding: 7px 0; border-bottom: 1px solid var(--border); white-space: nowrap; } table.plain td { padding-left: 16px; } table.plain th { font-weight: 500; color: var(--text); text-align: left; padding-right: 8px; } table.plain td.num { font-variant-numeric: tabular-nums; } table.plain tr:last-child th, table.plain tr:last-child td { border-bottom: 0; } .cat-list { list-style: none; margin: 0; padding: 0; } .cat-list li { padding: 8px 0; border-bottom: 1px solid var(--border); } .cat-list li:last-child { border-bottom: 0; } .cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 5px; } .cat-head b { font-variant-numeric: tabular-nums; white-space: nowrap; } .bar { display: block; height: 8px; border-radius: 99px; background: var(--accent); min-width: 3px; } .finance-table code { font-size: 12px; padding: 2px 6px; border-radius: 5px; background: var(--surface-3); } .finance-table td .note { margin-top: 2px; } /* Отметка об оплате в сверке вебу */ .paid-mark { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--ok-soft); font-size: 13.5px; } .paid-mark.partial { background: var(--warn-soft); } .paid-mark > span { margin-left: 6px; } .paid-tx { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .paid-tx code { font-size: 12px; word-break: break-all; } .offer-pay { min-width: 170px; font-size: 13px; } .offer-pay .paid-tx { margin-top: 2px; } .offer-pay .note { display: block; } /* Капы к доливу */ .caps-table td .bar-thin { height: 4px; margin-top: 3px; margin-left: auto; max-width: 90px; } .caps-table tr.note-row > td { border-top: 0; padding-top: 0; font-size: 13px; } .caps-table tr.note-row:hover > td { background: none; } /* Выбор колонок у широких таблиц */ /* Кнопка вставляется перед таблицей отдельным блоком, без отступа её рамка упиралась в шапку таблицы */ .col-picker { position: relative; display: inline-block; margin: 0 0 8px; } .col-picker > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13.5px; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; } .col-picker > summary::-webkit-details-marker { display: none; } .col-picker[open] > summary { border-color: var(--accent); } .col-picker-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; max-height: 60vh; overflow: auto; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .col-picker-body label.check { margin: 0; padding: 5px 4px; font-size: 13.5px; border-radius: 6px; } .col-picker-body label.check:hover { background: var(--surface-2); } .col-picker-foot { display: flex; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .pager .per-page { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); } .pager .per-page select { width: auto; margin: 0; min-height: 32px; padding: 3px 28px 3px 10px; font-size: 13px; } /* Сведение написаний «кто забрал» */ .rename-list { list-style: none; margin: 10px 0 14px; padding: 0; columns: 2; column-gap: 24px; } .rename-list li { break-inside: avoid; padding: 3px 0; font-size: 13.5px; } .rename-list code { font-size: 12.5px; padding: 1px 6px; border-radius: 5px; background: var(--surface-3); } @media (max-width: 720px) { .rename-list { columns: 1; } } .owner-group + .owner-group { margin-top: 12px; } .owner-variants { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; } .owner-variants label.check { margin: 0; } .owner-variants .badge { margin-left: 2px; } /* ═══════════════ Свои подсказки ═══════════════ */ /* Системная всплывашка из title= выглядит чужеродно и не показывается с клавиатуры */ .tip { position: fixed; top: 0; left: 0; z-index: 80; max-width: 320px; padding: 7px 11px; border-radius: var(--radius); pointer-events: none; background: var(--text); color: var(--bg); font-size: 13px; line-height: 1.45; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .12s; white-space: normal; overflow-wrap: anywhere; } .tip.shown { opacity: 1; } [data-tip] { cursor: help; } button[data-tip], a[data-tip], label[data-tip] { cursor: pointer; } @media (prefers-reduced-motion: reduce) { .tip { transition: none; } } /* ═══════════════ Подсказки при вводе ═══════════════ */ /* Системный не оформить, он вываливается целиком сразу при фокусе, а в справочнике на сотни названий это бесполезная простыня. */ .hints { /* Координаты считает app.js от самого поля. Абсолютное позиционирование тут не годится: поле не всегда лежит в родителе с position: relative — в форме фильтров это просто input в строке, и список уезжал к левому краю страницы. Ширина по содержимому, а не во всё поле: список коротких названий не должен растягиваться на всю форму. */ position: fixed; z-index: 40; width: max-content; min-width: 150px; max-height: 190px; overflow-y: auto; padding: 3px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .hint-item { padding: 4px 8px; border-radius: 5px; font-size: 13px; line-height: 1.4; color: var(--text-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hint-item b { font-weight: 600; color: var(--accent); } .hint-item:hover, .hint-item.active { background: var(--accent-soft); color: var(--accent-soft-text); } .hint-item.active b, .hint-item:hover b { color: var(--accent-soft-text); } /* ═══════════════ Комментарии ═══════════════ */ .comments { margin-top: 16px; } .comment-list { list-style: none; margin: 0 0 14px; padding: 0; } .comment { padding: 10px 0; border-bottom: 1px solid var(--border); } .comment:last-child { border-bottom: 0; } .comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; font-size: 13px; } .comment-head b { font-size: 13.5px; } .comment-head form { margin-left: auto; } .comment-text { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } .comment-form textarea { font: inherit; font-size: 14px; min-height: 60px; } .comment-form .actions { margin-top: 8px; } .comment-mark { margin-left: 4px; background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; } .comment-mark:hover { color: var(--accent-soft-text); } /* ═══════════════ Свёрнутое боковое меню ═══════════════ */ /* Узкая полоса вместо панели: разделы остаются под рукой, а таблицам достаётся почти двести пикселей ширины. Подписи не убираем из разметки, а прячем визуально — иначе скринридер получил бы безымянные ссылки. */ .nav-toggle { flex: none; color: var(--muted); } .nav-toggle .icon { transition: transform .15s; } body.nav-collapsed .nav-toggle .icon { transform: rotate(180deg); } @media (min-width: 961px) { body.nav-collapsed { --sidebar-w: 58px; } body.nav-collapsed .brand-name, body.nav-collapsed .nav-group, body.nav-collapsed .sidebar-user-text, body.nav-collapsed .nav-link > span:not(.icon) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.nav-collapsed .sidebar { padding-left: 8px; padding-right: 8px; } body.nav-collapsed .nav-link { justify-content: center; padding: 9px 0; } body.nav-collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; } body.nav-collapsed .nav-group { display: block; height: 1px; margin: 10px 0 0; } body.nav-collapsed .sidebar-user { flex-wrap: wrap; justify-content: center; gap: 6px; } body.nav-collapsed .sidebar-user .avatar { margin: 0 auto; } body.nav-collapsed .sidebar-head { flex-direction: column; gap: 6px; } } /* ═══════════════ Ширина прилипшей колонки ═══════════════ */ /* В одних таблицах в первой колонке короткий номер, в других — длинное название, поэтому её ширину можно тянуть за правый край шапки. Обрезка включается только после первой правки: без неё колонка живёт по содержимому, как и раньше. */ .table-wrap thead th:first-child { position: sticky; } .col-resized thead th:first-child, .col-resized tbody th[scope="row"] { width: var(--first-col); min-width: var(--first-col); max-width: var(--first-col); overflow: hidden; text-overflow: ellipsis; } .col-grip { position: absolute; top: 0; right: -3px; bottom: 0; width: 7px; padding: 0; border: 0; background: transparent; box-shadow: none; min-height: 0; cursor: col-resize; z-index: 5; border-radius: 0; } .col-grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 1px; background: var(--border-strong); opacity: 0; transition: opacity .12s; } .col-grip:hover::after, .col-grip:focus-visible::after, .col-resizing .col-grip::after { opacity: 1; } .col-grip:hover, .col-grip:focus-visible { background: transparent; } body.col-resizing { cursor: col-resize; user-select: none; } .bot-log { margin: 0 0 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; } /* Управление ботом */ .bot-wallet-team select { min-width: 150px; margin: 0; } .bot-wallet-team { white-space: nowrap; } /* Скамеры: причина длиннее названия, поэтому свободное место отдаём ей. Ячейка с width: 100% забирает остаток, прочие сжимаются по содержимому — иначе название растягивалось на две трети таблицы, а причина ломалась в столбик. */ .scammers-table td.reason { width: 100%; min-width: 320px; } .scammers-table th[scope="row"] { max-width: 280px; } /* Длинная причина растягивала строку на пол-экрана — показываем начало, остальное по клику */ .long-text > summary { cursor: pointer; list-style: none; } .long-text > summary::-webkit-details-marker { display: none; } .long-text > summary::after { content: " ещё"; color: var(--accent); font-weight: 500; white-space: nowrap; } .long-text[open] > summary { display: none; } /* ═══════════════ Кнопка темы ═══════════════ */ /* Иконка показывает, куда переключишь, а не где сейчас: в светлой теме — луна. */ .only-dark, .only-light { display: none; line-height: 0; } :root[data-theme="dark"] .only-dark { display: inline-flex; } :root[data-theme="light"] .only-light { display: inline-flex; } /* ═══════════════ Аватарка ═══════════════ */ .avatar-editor { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .avatar-editor h2 { margin: 0; } .avatar-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .avatar-editor-actions form { display: flex; align-items: center; gap: 8px; margin: 0; } .avatar-editor input[type=file] { margin: 0; max-width: 240px; } .name-with-avatar { display: inline-flex; align-items: center; gap: 8px; } /* ═══════════════ Администрирование ═══════════════ */ /* Свёрнутый список внизу меню: разделы только для админа не мозолят глаза. */ .nav-admin { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .nav-admin > summary { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; list-style: none; } .nav-admin > summary::-webkit-details-marker { display: none; } .nav-admin > summary::after { content: ""; margin-left: auto; width: 6px; height: 6px; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; } .nav-admin[open] > summary::after { transform: rotate(-135deg); } .nav-admin > summary:hover { color: var(--text); background: var(--surface-2); } .nav-admin > summary .icon { color: var(--muted); } body.nav-collapsed .nav-admin > summary { justify-content: center; padding: 9px 0; } body.nav-collapsed .nav-admin > summary::after { display: none; }