/* ============================================================================ «Учёт выплат» — дизайн интерфейса (продакшен-бандл дизайн-системы) ---------------------------------------------------------------------------- Источник правды — дизайн-система в .claude/skills/«Учёт выплат — Design System» (исходники tokens/ + base/ + grid/). Этот файл — её перенос в продакшен: имена классов совпадают 1:1, поэтому макеты переносятся в шаблоны Jinja без переименований. Слои в порядке подключения: 1) Токены (цвет, типографика, скругления/тени/плотность) 2) Базовый интерфейс (раскладка, кнопки, формы, бейджи, карточки, .table) 3) Широкие таблицы (.grid: закреп. шапка/столбцы/итог, плотность, валюта) 4) Продакшен-специфичные добавления (отчёты) ЗАФИКСИРОВАННЫЕ РЕШЕНИЯ (по умолчанию, без data-* на ): • Шрифт ............ Golos Text (локальные woff2, /static/fonts.css) • Тема (палитра) ... Корпоративная «Индиго» (холодный фон, синий акцент) • Акцент ........... фирменный синий #2e3f9e (в числах — затемнённый --accent-deep) • Деталь бренда .... оранжевый #eb532a — только мелкие детали, НЕ кнопки • Плотность строк .. snug • Метка валюты ..... цветной тег (₽ скрыт) Альтернативные палитры — атрибутом data-theme на : paper (историческая «Бумага», teal) · slate · graphite. ============================================================================ */ /* ==================================================================== 1 · ТОКЕНЫ — ЦВЕТ По умолчанию — КОРПОРАТИВНАЯ «Индиго» (палитра фирменных иллюстраций: синий/индиго/голубой; оранжевый бренда — только в мелких деталях). ==================================================================== */ :root { /* ── Корпоративная «Индиго» (по умолчанию) ── */ --bg: #f4f5fa; /* холодный светлый перивинкл */ --panel: #ffffff; /* поверхности: панели, карточки, таблицы */ --ink: #1a2046; /* текст с индиго-подтоном */ --muted: #646b8c; /* вторичный текст, подписи */ --line: #e1e4f0; /* разделители, рамки */ --accent: #2e3f9e; /* фирменный синий: кнопки, активный пункт меню, ссылки */ --accent-ink: #ffffff; /* оранжевый бренда — мелкие фирменные детали (полоска hero, стрелка сортировки, подчёркивание вкладки, счётчик выбора), НЕ кнопки */ --brand-orange: #eb532a; --detail-accent: var(--brand-orange); --detail-accent-soft: #ff9d76; /* счётчик «выбрано N» на тёмной панели */ /* ── Семантические статусы ── */ --green: #15784b; --green-bg: #e6f1ee; /* подтверждено / успех */ --red: #c0362c; --red-bg: #fbeae8; /* опасное действие / ошибка */ --amber: #946a00; --amber-bg: #f8f0d8; /* черновик / внимание */ --blue: #2e3f9e; --blue-bg: #e9ecf9; /* информация / EUR */ --orange: #c14a12; --orange-bg: #fcebe1; /* отложено / требует решения */ --gray-bg: #eaecf4; /* нейтральный бейдж */ /* ── Производные согласованные тона (считаются от палитры) ── */ --surface-2: color-mix(in srgb, var(--ink) 4.5%, var(--panel)); /* шапки таблиц */ --surface-3: color-mix(in srgb, var(--ink) 7%, var(--panel)); /* строка итога */ --row-hover: color-mix(in srgb, var(--accent) 5%, var(--panel)); --accent-wash: color-mix(in srgb, var(--accent) 8%, var(--panel)); /* акцентная подложка */ --accent-ring: color-mix(in srgb, var(--accent) 42%, var(--panel));/* фокус-кольцо */ --accent-hov: color-mix(in srgb, var(--accent) 86%, #000); /* ховер primary */ --accent-deep: color-mix(in srgb, var(--accent) 68%, #000); /* акцент в числах — темнее */ --sidebar-bg: color-mix(in srgb, var(--accent) 8%, var(--bg)); /* бледный оттенок акцента */ /* ── Семантические алиасы ── */ --text-body: var(--ink); --text-muted: var(--muted); --surface-app: var(--bg); --surface-card: var(--panel); --border-default: var(--line); --muted-zero: #a9aec7; /* нулевые суммы в таблицах */ /* ── Цвета каналов выплат (тонировка маркера) ── */ --chan-emp: #2e3f9e; /* Трудовой кодекс — фирменный синий */ --chan-sz: #15784b; /* Самозанятый */ --chan-fx: #946a00; /* Валюта */ --chan-fl: #7c5cd6; /* Физлицо */ --chan-crypto: #f05a29; /* Крипта — фирменный оранжевый */ } /* ── Альтернативные палитры (data-theme на ) ── */ /* «Бумага» — тёплый off-white + teal; палитра исторического продакшена. */ :root[data-theme="paper"] { --bg: #f5f3ee; --ink: #24211d; --muted: #756f64; --line: #e7e2d6; --accent: #0f766e; --detail-accent: var(--accent); --detail-accent-soft: #fff; --green: #1f7a5b; --green-bg: #e6f1ea; --red: #b3463a; --red-bg: #f6e7e2; --amber: #946a00; --amber-bg: #f6efdc; --blue: #1967d2; --blue-bg: #e8f0fe; --orange: #b1490f; --orange-bg: #f9e9de; --gray-bg: #eef0f2; --muted-zero: #aab2bd; --chan-emp: #2563eb; --chan-sz: #137333; --chan-fx: #8a6d00; --chan-fl: #8b5cf6; } :root[data-theme="slate"] { --bg: #f3f4f7; --ink: #1b2230; --muted: #687085; --line: #e5e8ee; --accent: #2e62e6; --detail-accent: var(--accent); --detail-accent-soft: #fff; --green: #15784b; --green-bg: #e6f4ec; --red: #c0362c; --red-bg: #fbeae8; --amber: #946a00; --amber-bg: #fbf2da; } :root[data-theme="graphite"] { --bg: #eceef1; --ink: #12161d; --muted: #5a6271; --line: #dde0e6; --accent: #2747b8; --detail-accent: var(--accent); --detail-accent-soft: #fff; --green: #166a45; --green-bg: #e7f1ea; --red: #b23026; --red-bg: #f8e7e4; --amber: #8a6300; --amber-bg: #f8efd6; } /* ==================================================================== 1 · ТОКЕНЫ — ТИПОГРАФИКА (Golos Text, табличные цифры) Шрифт грузится локально из /static/fonts.css (внешний @import не нужен). ==================================================================== */ :root { --font-ui: 'Golos Text', system-ui, "Segoe UI", Roboto, sans-serif; --font-num: var(--font-ui); /* числа тем же шрифтом, но tabular-nums */ /* Шкала (база body = 15px) */ --text-h1: 1.5rem; /* заголовок страницы, w700, ls -0.015em */ --text-h2: 1.15rem; /* заголовок секции */ --text-sm: .9rem; /* кнопки, ячейки, навигация */ --text-small: .85rem; /* подписи, hints */ --text-xs: .78rem; /* шапки таблиц (uppercase), лейблы карточек */ --text-num-hero: 1.8rem; /* число в карточке-счётчике, w700 */ --text-num-strip: 1.35rem; /* число в сводной полосе, w700 */ } /* ==================================================================== 1 · ТОКЕНЫ — СКРУГЛЕНИЯ, ТЕНИ, ПЛОТНОСТЬ ТАБЛИЦ, РАСКЛАДКА ==================================================================== */ :root { /* Скругления */ --radius: 10px; /* панели, карточки, формы */ --radius-btn: 8px; /* кнопки, инпуты, пункты меню, вкладки */ --radius-icon: 7px; /* иконочные кнопки 30×30 */ --radius-tag: 5px; /* метка валюты, code */ --radius-pill: 999px; /* бейджи статусов */ /* Тени — едва заметные, от чернил палитры */ --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent); --sticky-shadow: 6px 0 8px -6px rgba(15,23,42,.18); /* отбивка заморож. столбца */ --sticky-shadow-r: -6px 0 8px -6px rgba(15,23,42,.18); /* Плотность широких таблиц (по умолчанию — snug) */ --grid-row-pad-y: .45rem; --grid-row-pad-x: .8rem; --grid-font: .88rem; /* Раскладка */ --sidebar-w: 230px; --main-pad: 1.5rem 2rem; --main-max: 1200px; } /* Переключатели плотности (data-density на контейнере таблицы) */ [data-density="compact"] { --grid-row-pad-y: .35rem; --grid-font: .86rem; } [data-density="snug"] { --grid-row-pad-y: .45rem; --grid-font: .88rem; } [data-density="regular"] { --grid-row-pad-y: .55rem; --grid-font: .9rem; } [data-density="comfy"] { --grid-row-pad-y: .8rem; --grid-font: .95rem; } /* ==================================================================== 2 · БАЗОВЫЙ ИНТЕРФЕЙС (раскладка, кнопки, формы, бейджи, карточки) ==================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ui); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: var(--text-h1); margin: 0 0 1rem; letter-spacing: -.015em; } h2 { font-size: var(--text-h2); margin: 1.5rem 0 .75rem; } .muted { color: var(--muted); } .small { font-size: .85rem; } code { background: var(--gray-bg); padding: .1rem .35rem; border-radius: var(--radius-tag); font-size: .85em; } /* числа — табличные */ .table .num, table.grid .num, table.grid tfoot th, .sumstrip .val, .card-num, .money, .money .cur { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* ---------- Раскладка ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--line); padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } .sidebar nav a { color: var(--ink); padding: .45rem .6rem; border-radius: var(--radius-btn); font-size: .95rem; } .sidebar nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); text-decoration: none; } .sidebar nav a.active { background: var(--accent); color: var(--accent-ink); } .nav-group { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 1rem .6rem .3rem; } .main { flex: 1 1 auto; padding: var(--main-pad); max-width: var(--main-max); min-width: 0; } .main.main--wide { max-width: none; } /* ---------- Бренд-метка ---------- */ .brand { display: flex; align-items: center; gap: .55rem; font-size: 1rem; letter-spacing: -.01em; padding: .25rem .5rem 1rem; } .brand .mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-icon); background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; letter-spacing: -.02em; } .brand .mark-txt { font-weight: 600; } .brand .mark-svg, .mark-svg { display: block; flex: 0 0 auto; } .mark-kassa { width: auto; } .brand.auth-brand { justify-content: center; padding-bottom: 1rem; } /* ---------- Заголовок страницы с действием ---------- */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .toolbar h1 { margin: 0; } .toolbar-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; } /* ---------- Строка фильтров (мгновенное применение, без «Применить») ---------- */ .filter-bar .filter-lbl { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } .filter-bar .filter-note { margin-left: auto; text-align: right; } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: var(--radius-btn); border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: .9rem; font-family: inherit; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--bg); text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hov); border-color: var(--accent-hov); } .btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, var(--panel)); background: var(--red-bg); } .btn-danger:hover { background: color-mix(in srgb, var(--red) 14%, var(--panel)); } .btn-sm { padding: .25rem .55rem; font-size: .82rem; } .btn-block { width: 100%; justify-content: center; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-icon); border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: .95rem; text-decoration: none; } .iconbtn:hover { background: var(--bg); } .iconbtn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, var(--panel)); background: var(--red-bg); } .iconbtn.danger:hover { background: color-mix(in srgb, var(--red) 14%, var(--panel)); } .act-btns { display: inline-flex; gap: .3rem; justify-content: flex-end; } .row-actions { display: inline-flex; gap: .35rem; } /* ---------- Иконки (фирменные + Lucide, CSS-маска → currentColor) ---------- */ .icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.15em; background-color: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; } .btn .icon, .iconbtn .icon { width: 15px; height: 15px; vertical-align: -.2em; } .btn .icon { margin-left: -.1rem; opacity: .9; } .btn-primary .icon { opacity: 1; } .btn-sm .icon { width: 13px; height: 13px; } .money .icon { width: 11px; height: 11px; vertical-align: baseline; margin-left: .25rem; opacity: .65; } /* Фирменные иконки действий (локальные SVG в /static/icons/, маска → currentColor) */ .icon-check { --icon-url: url(/static/icons/check.svg); } .icon-pencil { --icon-url: url(/static/icons/pencil.svg); } .icon-trash { --icon-url: url(/static/icons/trashcan.svg); } .icon-plus { --icon-url: url(/static/icons/plus.svg); } .icon-eye { --icon-url: url(/static/icons/eye.svg); } .icon-time { --icon-url: url(/static/icons/time.svg); } .icon-settings { --icon-url: url(/static/icons/settings.svg); } .icon-download { --icon-url: url(/static/icons/download.svg); } .icon-allocate { --icon-url: url(/static/icons/arrow-left-right.svg); } .icon-key { --icon-url: url(/static/icons/key.svg); } /* ---------- Иллюстрации и аватары ---------- */ .empty .empty-illu { width: 130px; max-height: 120px; display: block; margin: 0 auto .8rem; } .auth-illu { width: 150px; display: block; margin: .2rem auto .9rem; } .person-cell { display: inline-flex; align-items: center; gap: .55rem; } .avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; } /* Панель «С чего начать» с гербом компании справа */ .start-panel { display: flex; align-items: center; gap: 1.5rem; } .start-panel-txt { flex: 1 1 auto; min-width: 0; } .start-panel-art { width: 110px; flex: 0 0 auto; margin-right: .8rem; } /* ---------- Контекстная панель выбора (массовые действия) ---------- */ .selection-bar { position: sticky; bottom: .9rem; z-index: 40; width: fit-content; margin: .9rem auto 0; display: flex; align-items: center; gap: .9rem; background: var(--ink); color: #fff; border-radius: var(--radius-pill); padding: .4rem .45rem .4rem 1rem; box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 18%, transparent); } .selection-bar[hidden] { display: none; } /* атрибут hidden должен прятать панель, несмотря на display:flex выше */ .selection-bar .selection-count { font-size: .88rem; white-space: nowrap; color: color-mix(in srgb, #fff 75%, transparent); } .selection-bar .selection-count b { color: var(--detail-accent-soft, #fff); font-variant-numeric: tabular-nums; } .selection-bar .selection-actions { display: flex; gap: .4rem; } .selection-bar .btn { border-color: transparent; } .selection-bar .btn:not(.btn-primary):not(.btn-danger) { background: color-mix(in srgb, #fff 14%, transparent); color: #fff; } .selection-bar .btn:not(.btn-primary):not(.btn-danger):hover { background: color-mix(in srgb, #fff 22%, transparent); } .selection-clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: color-mix(in srgb, #fff 75%, transparent); cursor: pointer; padding: 0; } .selection-clear:hover { background: color-mix(in srgb, #fff 14%, transparent); color: #fff; } /* ---------- Панель / простая таблица ---------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; overflow-x: auto; } .panel-pad { padding: 1.25rem 1.5rem; } .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; } .table tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--row-hover); } .table .num { text-align: right; } .table .actions { text-align: right; white-space: nowrap; } .table th .sort-link { color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; } .table th .sort-link:hover { color: var(--accent); text-decoration: none; } .sort-arrow { color: var(--detail-accent, var(--accent)); font-size: .8em; } /* ---------- Карточки-счётчики ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); } .card-num { font-size: var(--text-num-hero); font-weight: 700; } .card-label { color: var(--muted); font-size: .85rem; } .card-hero { border-left: 4px solid var(--detail-accent, var(--accent)); } .card-hero .card-num { color: var(--accent-deep); } .card-hero:hover { background: var(--accent-wash); text-decoration: none; } /* Компактные карточки-счётчики (карточка человека и пр.) */ .cards-fit { grid-template-columns: repeat(auto-fit, minmax(0, max-content)); gap: .75rem; } .card-compact { padding: .55rem .95rem; } .card-compact .card-num { font-size: 1.25rem; white-space: nowrap; } .card-compact .card-label { font-size: .78rem; } .card .card-num { min-width: 0; } .card-ico { width: 22px; height: 22px; display: block; margin-bottom: .45rem; } .card-compact .card-ico { width: 18px; margin-bottom: .25rem; } /* ---------- Карточка человека ---------- */ .person-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .person-head h1 { margin: 0; } .profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem 1.5rem; margin: 1rem 0; } .profile-grid .k { color: var(--muted); font-size: .8rem; } .profile-grid .v { font-weight: 500; } /* ---------- Формы ---------- */ .form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; box-shadow: var(--shadow); max-width: 680px; } .field { margin-bottom: 1rem; } .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; } .field .hint { color: var(--muted); font-size: .8rem; margin-top: .25rem; } .field input[type=text], .field input[type=number], .field input[type=date], .field input[type=email], .field input[type=password], .field select, .field textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-btn); font-size: .95rem; font-family: inherit; background: #fff; color: var(--ink); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); } .field-check { display: flex; align-items: center; gap: .5rem; } .field-check input { width: 1.1rem; height: 1.1rem; } .field-check label { margin: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-actions { display: flex; gap: .6rem; margin-top: 1.25rem; } /* ---------- Бейджи ---------- */ .badge { display: inline-block; padding: .15rem .5rem; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600; } .badge-green { background: var(--green-bg); color: var(--green); } .badge-red { background: var(--red-bg); color: var(--red); } .badge-amber { background: var(--amber-bg); color: var(--amber); } .badge-gray { background: var(--gray-bg); color: var(--muted); } .badge-blue { background: var(--blue-bg); color: var(--blue); } .badge-orange { background: var(--orange-bg); color: var(--orange); } /* ---------- Flash ---------- */ .flashes { margin-bottom: 1rem; } .flash { padding: .6rem .9rem; border-radius: var(--radius-btn); margin-bottom: .5rem; font-size: .9rem; } .flash-success { background: var(--green-bg); color: var(--green); } .flash-error { background: var(--red-bg); color: var(--red); } .flash-info { background: var(--blue-bg); color: var(--blue); } /* ---------- Пустое состояние ---------- */ .empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; } /* ---------- Блок пользователя в сайдбаре ---------- */ .sidebar-user { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); } .su-name { font-weight: 600; font-size: .9rem; } .su-role { margin-top: .25rem; } /* ---------- Вход ---------- */ .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); } .auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; width: 100%; max-width: 360px; } /* ---------- Вкладки отчётов ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .tab { padding: .45rem .8rem; border-radius: var(--radius-btn) var(--radius-btn) 0 0; color: var(--ink); font-size: .9rem; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; } .tab:hover { background: var(--panel); text-decoration: none; } .tab.active { background: var(--panel); border-color: var(--line); font-weight: 600; color: var(--accent); box-shadow: inset 0 -2px 0 0 var(--detail-accent, var(--accent)); } /* ---------- Панель выбора периода / фильтры ---------- */ .period-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; } .period-bar select, .grid-toolbar select { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-btn); font-family: inherit; font-size: .9rem; background: #fff; color: var(--ink); } .period-bar input[type=search] { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-btn); font-family: inherit; font-size: .9rem; background: #fff; color: var(--ink); min-width: 210px; } .period-bar .period-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; white-space: nowrap; } .period-bar .period-check input { width: 1rem; height: 1rem; } /* ---------- Массовые действия (чекбоксы) ---------- */ .check-col { width: 34px; text-align: center; } .check-col input { width: 1.1rem; height: 1.1rem; } .bulk-bar { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; min-height: 1.8rem; } /* ---------- Прочее ---------- */ .section-head { display: flex; align-items: center; justify-content: space-between; margin: 1.5rem 0 .6rem; } .section-head h2 { margin: 0; } .back-link { display: inline-block; margin-bottom: .75rem; font-size: .9rem; } .name-cell { font-weight: 400; letter-spacing: -.005em; } .name-cell .dept { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; } /* ==================================================================== 3 · ШИРОКИЕ ТАБЛИЦЫ (.grid: закреп. шапка/столбцы/итог, плотность, валюта) ==================================================================== */ /* ---------- Сводная полоса (ключевые числа всегда наверху) ---------- */ .sumstrip { display: flex; flex-wrap: wrap; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1rem; } .sumstrip .cell { flex: 1 1 0; min-width: 150px; padding: .7rem 1rem; border-left: 1px solid var(--line); } .sumstrip .cell:first-child { border-left: none; } .sumstrip .lbl { color: var(--muted); font-size: .78rem; } .sumstrip .val { font-size: var(--text-num-strip); font-weight: 700; line-height: 1.25; } .sumstrip .val.accent { color: var(--accent-deep); } .sumstrip .val .cur { font-size: .8rem; font-weight: 600; color: var(--muted); margin-left: .15rem; } .sumstrip .cell.hero { background: var(--accent-wash); } /* ---------- Закреплённый тулбар (фильтры + массовые действия) ---------- */ .grid-toolbar { position: sticky; top: 0; z-index: 30; background: var(--bg); padding: .25rem 0 .6rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .grid-toolbar .spacer { flex: 1 1 auto; } .grid-toolbar .bulkcount { color: var(--muted); font-size: .85rem; } .grid-toolbar form.filters { display: contents; } /* ---------- Скролл-контейнер таблицы ---------- */ .grid-scroll { position: relative; max-height: calc(100vh - 230px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overscroll-behavior: contain; scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) var(--surface-2); } /* скролл-контейнер фокусируем с клавиатуры (Tab → стрелки/PgUp/PgDn) */ .grid-scroll:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; } /* всегда видимая полоса прокрутки — горизонтальный скролл обнаружим сразу */ .grid-scroll::-webkit-scrollbar { width: 12px; height: 12px; } .grid-scroll::-webkit-scrollbar-track { background: var(--surface-2); } .grid-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 26%, transparent); border: 3px solid var(--surface-2); border-radius: 999px; } .grid-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 40%, transparent); } .grid-scroll::-webkit-scrollbar-corner { background: var(--surface-2); } table.grid { width: 100%; border-collapse: separate; border-spacing: 0; } table.grid th, table.grid td { padding: var(--grid-row-pad-y) var(--grid-row-pad-x); font-size: var(--grid-font); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); background: var(--panel); } table.grid .num { text-align: right; white-space: nowrap; } table.grid tbody tr:hover td { background: var(--row-hover); } /* шапка */ table.grid thead th { position: sticky; top: 0; z-index: 20; background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--line); } table.grid thead th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); } table.grid thead th .sort-link { color: inherit; display: inline-flex; align-items: center; gap: .25rem; } table.grid thead th .sort-link:hover { color: var(--accent); text-decoration: none; } /* итоговая строка */ table.grid tfoot th { position: sticky; bottom: 0; z-index: 20; background: var(--surface-3); font-weight: 700; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: none; } table.grid tfoot th::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); } /* ---------- Заморозка столбцов ---------- */ .col-check { width: 44px; text-align: center; } .col-name { min-width: 190px; } table.grid [data-stick="check"] { position: sticky; left: 0; z-index: 10; } table.grid [data-stick="name"] { position: sticky; left: 44px; z-index: 10; } table.grid [data-stick="act"] { position: sticky; right: 0; z-index: 10; text-align: right; } [data-nocheck] table.grid [data-stick="name"] { left: 0; } table.grid thead [data-stick] { z-index: 25; } table.grid tfoot [data-stick] { z-index: 25; } table.grid tbody td[data-stick] { background: var(--panel); } table.grid tbody tr:hover td[data-stick] { background: var(--row-hover); } table.grid thead th[data-stick] { background: var(--surface-2); } table.grid tfoot th[data-stick] { background: var(--surface-3); } /* даты/имена в закреплённом 1-м столбце — обычным цветом */ table.grid td[data-stick="name"] a { color: var(--ink); } table.grid td[data-stick="name"] a:hover { color: var(--ink); } /* тени-отбивки при горизонтальной прокрутке */ [data-freeze="on"] table.grid [data-stick="name"]::after { content: ""; position: absolute; top: 0; bottom: -1px; right: -1px; width: 8px; pointer-events: none; box-shadow: var(--sticky-shadow); opacity: 0; transition: opacity .15s; } [data-freeze="on"][data-scrolled-x="on"] table.grid [data-stick="name"]::after { opacity: 1; } [data-stickact="on"] table.grid [data-stick="act"]::before { content: ""; position: absolute; top: 0; bottom: -1px; left: -1px; width: 8px; pointer-events: none; box-shadow: var(--sticky-shadow-r); opacity: 0; transition: opacity .15s; } [data-stickact="on"][data-scrolled-xe="on"] table.grid [data-stick="act"]::before { opacity: 1; } /* выключатели */ [data-freeze="off"] table.grid [data-stick="name"], [data-freeze="off"] table.grid [data-stick="check"] { position: static; } [data-stickact="off"] table.grid [data-stick="act"] { position: static; } [data-stickhead="off"] table.grid thead th { position: static; } [data-sticktot="off"] table.grid tfoot th { position: static; } /* ---------- Денежная ячейка: число + валюта ---------- */ .money { white-space: nowrap; } .money .cur { color: var(--muted); font-size: .82em; margin-left: .2rem; } .muted-zero { color: var(--muted-zero); } .money.foreign { font-weight: 500; } .cur-tag { display: inline-block; margin-left: .35rem; padding: .03rem .34rem; border-radius: var(--radius-tag); font-size: .68rem; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; border: 1px solid transparent; } .cur-USD { background: var(--green-bg); color: var(--green); border-color: #bfe3c9; } .cur-EUR { background: var(--blue-bg); color: var(--blue); border-color: #c5d8fb; } .cur-GBP, .cur-OTH { background: var(--amber-bg); color: var(--amber); border-color: #f0e1a8; } /* ---------- Канал как метка с цветным маркером ---------- */ .chan { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; } .chan .chan-ico { width: 17px; height: 17px; flex: 0 0 auto; display: block; } .chan .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); } .chan-emp .dot { background: var(--chan-emp); } .chan-sz .dot { background: var(--chan-sz); } .chan-fx .dot { background: var(--chan-fx); } .chan-fl .dot { background: var(--chan-fl); } .chan-crypto .dot { background: var(--chan-crypto); } /* ---------- Группировка начислений по человеку ---------- */ table.grid tbody tr.sub-row .sub-mark { color: var(--muted); padding-left: .75rem; } table.grid tbody tr.subtotal-row td { background: var(--surface-2); font-weight: 600; color: var(--muted); border-top: 1px solid var(--line); } table.grid tbody tr.subtotal-row td[data-stick], table.grid tbody tr.subtotal-row:hover td, table.grid tbody tr.subtotal-row:hover td[data-stick] { background: var(--surface-2); } /* ==================================================================== 4 · ПРОДАКШЕН-СПЕЦИФИЧНЫЕ ДОБАВЛЕНИЯ Мелкие правила под конкретную разметку шаблонов (FastAPI + Jinja), которых нет в дизайн-системе. ==================================================================== */ /* Утилиты (замена точечных инлайн-стилей в шаблонах) */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: .75rem; } .mt-3 { margin-top: 1rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .w-full { width: 100%; } .text-right { text-align: right; } .text-center { text-align: center; } .fw-400 { font-weight: 400; } .inherit-color { color: inherit; } .block { display: block; } .inline-form { display: inline; } .lead-note { margin-top: -.5rem; } .text-danger { color: var(--red); } /* Отчёты: заголовок секции ближе к таблице и примечание под ней */ .section-head.report-head { margin: 1.25rem 0 .4rem; } .report-note { margin: -.25rem 0 1.25rem; } /* Выделенный столбец (например «За год» в годовой сводной) — жирным */ table.grid th.strong, table.grid td.strong { font-weight: 700; } /* Карточка человека — герой текущей договорённости (на руки / общий ФОТ) + премии. Главное на странице: «на руки» крупно и акцентом, ФОТ — рядом; «основа» спрятана в «Изменить». Премии — отдельной строкой (переменные/условные не входят в фикс. суммы). */ .salary-hero { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--detail-accent, var(--accent)); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; margin-bottom: .8rem; } .salary-hero .sh-block { min-width: 0; } .sh-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .sh-net { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--accent-deep); font-variant-numeric: tabular-nums; white-space: nowrap; } .sh-fot { font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .sh-sub { font-size: .8rem; margin-top: .15rem; } .sh-sep { align-self: stretch; width: 1px; background: var(--line); } .sh-meta { margin-left: auto; text-align: right; } .sh-meta .btn { margin-left: .4rem; } .sh-prem { flex-basis: 100%; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; padding-top: .8rem; border-top: 1px solid var(--line); } .prem-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .prem-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent-deep); white-space: nowrap; } .prem-chip b { font-weight: 600; font-variant-numeric: tabular-nums; } .prem-chip .ic { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .prem-chip.cond { background: var(--amber-bg); color: var(--amber); } .subhead { font-size: 1.05rem; color: var(--muted); } /* Поле ввода суммы в таблице переменных премий за месяц. */ .amt-input { width: 130px; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-btn); font-family: inherit; font-size: .92rem; text-align: right; font-variant-numeric: tabular-nums; background: #fff; color: var(--ink); } .amt-input:focus { outline: 2px solid var(--accent-ring); border-color: var(--accent); } .amt-input:disabled { background: var(--bg); color: var(--muted); } /* ============================================================================ КОМПАКТНАЯ «ШАПКА» СПИСКОВ (Начисления / Выплаты / Отчёты) Убирает 3–4 объёмных ряда над таблицей и отдаёт высоту самой таблице. Новые имена классов не пересекаются с существующими — это надстройка. ============================================================================ */ /* немного плотнее внешние поля страницы у списков */ .main.compact { padding: 1rem 1.6rem 1.4rem; } /* Ряд 1 · крошка + H1 + переключатель месяца + действия */ .pagebar { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .7rem; } .pagebar .pb-main { min-width: 0; } .pagebar .crumb { font-size: .8rem; color: var(--muted); margin-bottom: .1rem; } .pagebar .crumb a { color: var(--muted); } .pagebar h1 { font-size: 1.3rem; line-height: 1.15; margin: 0; display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; } .pagebar h1 .sub { font-size: .95rem; font-weight: 400; color: var(--muted); letter-spacing: 0; } .pagebar .pb-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; } /* переключатель периода рядом с заголовком */ .monthnav { display: inline-flex; align-items: center; gap: .25rem; margin-left: .15rem; } .monthnav a { width: 27px; height: 27px; border-radius: var(--radius-icon); border: 1px solid var(--line); background: var(--panel); color: var(--ink); display: grid; place-items: center; font-size: .95rem; text-decoration: none; } .monthnav a:hover { background: var(--bg); } /* Ряд 2 · сегмент-вкладки (слева) + тонкая полоса чисел (справа) */ .headrow { display: flex; align-items: center; gap: 1rem; margin-bottom: .55rem; flex-wrap: wrap; } .headrow .spacer { flex: 1 1 auto; } .segtabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 2px; gap: 2px; } .segtabs a { padding: .28rem .7rem; border-radius: 6px; font-size: .85rem; color: var(--ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; } .segtabs a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); text-decoration: none; } .segtabs a.active { background: var(--panel); box-shadow: var(--shadow); font-weight: 600; color: var(--accent); } .segtabs .pill { font-size: .72rem; font-weight: 700; background: var(--accent-wash); color: var(--accent-deep); border-radius: 999px; padding: 0 .4rem; } /* тонкая полоса ключевых чисел — вдвое ниже прежних карточек (.sumstrip) */ .statrail { display: inline-flex; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .statrail .s { display: flex; flex-direction: column; justify-content: center; padding: .3rem .9rem; border-left: 1px solid var(--line); } .statrail .s:first-child { border-left: none; } .statrail .s .l { font-size: .7rem; color: var(--muted); line-height: 1.15; white-space: nowrap; } .statrail .s .v { font-size: 1.02rem; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; } .statrail .s.hero { background: var(--accent-wash); } .statrail .s.hero .v { color: var(--accent-deep); } .statrail .s .v .cur { font-size: .72rem; font-weight: 600; color: var(--muted); margin-left: .1rem; } .statrail .s .v .dim { color: var(--muted); font-weight: 600; } /* Ряд 3 · тонкая закреплённая строка фильтров (без отдельного ряда массовых действий) */ .filterline { position: sticky; top: 0; z-index: 31; background: var(--bg); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .15rem 0 .55rem; } .filterline .fl-lbl { color: var(--muted); font-size: .85rem; } .filterline select, .filterline input[type=search] { padding: .34rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-btn); font-family: inherit; font-size: .86rem; background: #fff; color: var(--ink); } .filterline input[type=search] { min-width: 200px; } .filterline .spacer { flex: 1 1 auto; } .filterline .fl-note { color: var(--muted); font-size: .82rem; white-space: nowrap; } .filterline .fl-note b { color: var(--ink); font-variant-numeric: tabular-nums; } /* таблица получает почти всю высоту: шапка ~120px вместо ~290px. (массовые действия — плавающей таблеткой .selection-bar, она уже есть выше) */ .compact .grid-scroll { max-height: calc(100vh - 132px); } .compact.has-foot-note .grid-scroll { max-height: calc(100vh - 150px); }