/** * Дизайн-система admin-finance. * * Собрана по макетам «Global Finance» / «FinTrack Corporate» (пять экранов: * счета, платёжный календарь, настройки организации, команда, дашборд). * Её опознавательные признаки, если придётся править: * * 1. Светлый сайдбар с тонкой линией справа — не тёмная колонка. * 2. Антиква (--font-display) на заголовках и крупных суммах, гротеск — * на интерфейсе. Это главный признак: на одном гротеске экран * немедленно перестаёт быть похож на макет. * 3. Акцент нейтральный тёмный (--accent), а не цветной: цвет здесь * занят данными — приход, расход, тревога. * 4. Ровно одна тёмная карточка-акцент (.kpi.hero) на экран. * 5. Скругления 12px у карточек, 8px у контролов; тени еле заметные. * * Палитра данных (--in / --out) осталась бирюзово-янтарной, а не зелёно- * оранжевой как в макете: зелёный против оранжевого — худшая пара при * дейтеранопии, и валидатор различимости её не пропускал. На глаз разница * с макетом незаметна. * * Светлая тема по умолчанию, тёмная — через prefers-color-scheme или явный * переключатель (data-theme на ). */ :root { /* Плоскости. Сайдбар в макетах светлый, почти как фон страницы, и отделён тонкой линией — тёмная навигационная колонка из прошлой версии забирала весь визуальный вес себе, хотя главное на экране — цифры. */ --plane: #f6f7f9; --surface: #ffffff; --surface-2: #f3f4f6; --ink: #111827; --ink-2: #4b5563; --ink-3: #9ca3af; --rule: #e5e7eb; --axis: #d1d5db; /* Акцент — почти чёрный, а не цветной: в макетах им залиты и первичная кнопка, и активный пункт меню, и карточка главного показателя. Цвет на этих экранах несёт смысл (приход/расход/тревога), поэтому интерфейсу остаётся нейтральный тёмный. */ --accent: #111827; --accent-2: #1f2937; --accent-ink: #ffffff; /* Данные. Приход — глубокий зелёно-бирюзовый: в макете он зелёный, но чистая зелень против оранжевого — худшая пара при дейтеранопии. Синяя составляющая сохраняет различимость и на глаз читается тем же зелёным. */ --in: #0d9488; --in-dim: rgba(13,148,136,.12); --out: #ea7317; --out-dim: rgba(234,115,23,.14); --good: #059669; --good-dim: #d1fae5; --crit: #dc2626; --crit-dim: #fee2e2; --warn: #d97706; --warn-dim: #fef3c7; --nav: #111827; --nav-ink: #9ca3af; --nav-rule: #e5e7eb; --nav-grp: #9ca3af; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-lg: 0 4px 6px -2px rgba(16,24,40,.03), 0 12px 16px -4px rgba(16,24,40,.08); --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Заголовки и крупные суммы в макетах набраны антиквой — именно она задаёт «бухгалтерский» характер, которого не даёт гротеск. Georgia берём первой: она есть на каждой Windows и macOS, содержит полную кириллицу и по рисунку это та же переходная антиква. Внешние шрифты подключить нельзя — CSP разрешает только `font-src 'self' data:`. */ --font-display: Georgia, "PT Serif", "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --plane: #0d0f10; --surface: #17181a; --surface-2: #1f2124; --ink: #f9fafb; --ink-2: #c7cbd1; --ink-3: #8b9098; --rule: #2a2d31; --axis: #3a3e44; --accent: #f9fafb; --accent-2: #e5e7eb; --accent-ink: #111827; --in: #2dd4bf; --in-dim: rgba(45,212,191,.16); --out: #fb923c; --out-dim: rgba(251,146,60,.18); --good: #34d399; --good-dim: rgba(52,211,153,.16); --crit: #f87171; --crit-dim: rgba(248,113,113,.16); --warn: #fbbf24; --warn-dim: rgba(251,191,36,.16); --nav: #f9fafb; --nav-ink: #8b9098; --nav-rule: #2a2d31; --nav-grp: #6b7280; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 4px 6px -2px rgba(0,0,0,.4), 0 12px 16px -4px rgba(0,0,0,.6); } } :root[data-theme="dark"] { --plane: #0d0f10; --surface: #17181a; --surface-2: #1f2124; --ink: #f9fafb; --ink-2: #c7cbd1; --ink-3: #8b9098; --rule: #2a2d31; --axis: #3a3e44; --accent: #f9fafb; --accent-2: #e5e7eb; --accent-ink: #111827; --in: #2dd4bf; --in-dim: rgba(45,212,191,.16); --out: #fb923c; --out-dim: rgba(251,146,60,.18); --good: #34d399; --good-dim: rgba(52,211,153,.16); --crit: #f87171; --crit-dim: rgba(248,113,113,.16); --warn: #fbbf24; --warn-dim: rgba(251,191,36,.16); --nav: #f9fafb; --nav-ink: #8b9098; --nav-rule: #2a2d31; --nav-grp: #6b7280; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 4px 6px -2px rgba(0,0,0,.4), 0 12px 16px -4px rgba(0,0,0,.6); } *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light dark; } /* Пользователь мог попросить систему не анимировать интерфейс (укачивание, вестибулярные расстройства) — переходы контролов ему не нужны. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; background: var(--plane); color: var(--ink); } a { color: var(--in); } /* Шкала заголовков. Ступень между h1 и h2 была в 5px — на странице с карточками заголовок раздела и заголовок карточки читались как один уровень. Разводим: h1 крупнее, h2 остаётся плотным. */ /* Нижний отступ сохранён: на двадцати существующих страницах за h1 сразу идёт содержимое, и обнуление здесь склеило бы заголовок с ним. Внутри .page-head отступ схлопывается — там за заголовком идёт пояснение. */ /* Антиква на заголовках — главный признак макетов: «Аналитика», «Октябрь 2023», «Реквизиты организации» набраны ею, и именно она отличает этот интерфейс от любой админки на системном гротеске. */ h1 { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 16px; line-height: 1.15; color: var(--ink); } h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; line-height: 1.25; } h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.005em; } /* Шапка страницы: слева заголовок и пояснение, справа действия. В макетах это общий приём — «Transactions» с кнопками импорта справа, «Profit & Loss» с выбором периода и экспортом. Раньше действия жили вперемешку с содержимым и на каждой странице оказывались в своём месте. */ .page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; } .page-head > .page-head-main { flex: 1 1 320px; min-width: 0; } .page-head h1 { margin-bottom: 0; } .page-head > .page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .page-head .lead { color: var(--ink-3); font-size: 13.5px; margin: 6px 0 0; max-width: 80ch; } /* Счётчик неразобранных рядом с основным действием: он не кнопка, но и не просто текст — по нему уходят в очередь разбора. */ .pending-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--crit); background: var(--crit-dim); color: var(--crit); font-size: 13px; text-decoration: none; white-space: nowrap; } .pending-chip:hover { background: var(--crit); color: #fff; } .pending-chip b { font-variant-numeric: tabular-nums; } /* ── назначение статьи прямо в реестре ───────────────────────────────── Раньше неразобранная операция показывала серую надпись «не разобрано», и чтобы поставить статью, надо было уйти на отдельный экран очереди. Теперь строка сама предлагает действие. */ .chip-assign { height: 26px; padding: 0 9px; font-size: 12.5px; background: transparent; color: var(--crit); border: 1px dashed var(--crit); border-radius: 999px; white-space: nowrap; } .chip-assign:hover { background: var(--crit); color: #fff; border-style: solid; filter: none; } .cat-cell .cat-pick { display: flex; align-items: center; gap: 8px; max-width: none; } .cat-cell .cat-pick select { height: var(--control-h-sm); min-width: 190px; font-size: 13px; } /* Пока запрос в пути — гасим ячейку, чтобы по ней не кликали дважды. */ .htmx-request.cat-cell, .cat-cell.htmx-request { opacity: .5; } /* ── каркас: сайдбар + контент ─────────────────────────────────────── */ .shell { display: grid; grid-template-columns: 256px minmax(0,1fr); min-height: 100vh; } @media (max-width: 980px) { .shell { grid-template-columns: minmax(0,1fr); } } /* Сайдбар светлый, отделён линией, и разложен на три пояса: марка и главное действие сверху, разделы посередине, служебные ссылки прижаты вниз (`margin-top:auto`) — ровно как во всех пяти макетах. */ .rail { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-right: 1px solid var(--rule); padding: 20px 16px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } @media (max-width: 980px) { .rail { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 12px; gap: 6px; border-right: 0; border-bottom: 1px solid var(--rule); } .rail .rail-cta, .rail .rail-foot, .rail .brand span { display: none; } .rail .rail-nav { flex-direction: row; } } .rail .brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; text-decoration: none; color: var(--ink); } .rail .brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 16px; font-weight: 700; } .rail .brand-text { min-width: 0; } .rail .brand-text b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); } .rail .brand-text span { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 1px; } /* Главное действие раздела — тёмная кнопка во всю ширину под маркой («+ New Report» / «+ New Entry» в макетах). */ .rail .rail-cta { width: 100%; margin: 0 0 16px; height: 42px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; gap: 7px; } .rail .rail-nav { display: flex; flex-direction: column; gap: 2px; } .rail .rail-nav a { display: flex; align-items: center; gap: 11px; position: relative; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 14px; white-space: nowrap; } .rail .rail-nav a svg { flex: none; opacity: .75; } .rail .rail-nav a:hover { background: var(--surface-2); color: var(--ink); } /* Активный раздел — заливка плюс тёмный язычок у правого края колонки: в макетах он выступает за границу сайдбара и работает указателем на содержимое справа. */ .rail .rail-nav a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; } .rail .rail-nav a[aria-current="page"] svg { opacity: 1; } .rail .rail-nav a[aria-current="page"]::after { content: ""; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 3px; height: 24px; border-radius: 3px 0 0 3px; background: var(--accent); } @media (max-width: 980px) { .rail .rail-nav a[aria-current="page"]::after { display: none; } } .rail .rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; } .rail .rail-foot a, .rail .rail-foot button { display: flex; align-items: center; gap: 11px; justify-content: flex-start; padding: 9px 12px; border-radius: var(--radius-sm); height: auto; background: none; border: 0; width: 100%; color: var(--ink-2); text-decoration: none; font-size: 14px; cursor: pointer; } .rail .rail-foot a:hover, .rail .rail-foot button:hover { background: var(--surface-2); color: var(--ink); filter: none; } .rail .rail-foot form { display: block; max-width: none; gap: 0; margin: 0; } main.content { min-width: 0; } /* ── верхняя полоса ────────────────────────────────────────────────── Поиск слева, утилитарные иконки и первичные действия справа — общая рамка всех пяти макетов. */ .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; } .topbar .spacer { flex: 1 1 auto; } .topbar .bal { font-family: var(--font-display); font-weight: 700; font-size: 20px; } .stmt { font-size: 11px; color: var(--ink-3); } .stmt b { color: var(--good); font-weight: 500; } /* Поле поиска с лупой-подложкой. Ширина ограничена: во всю полосу оно выглядит как поле ввода страницы, а не как элемент шапки. */ .topbar-search { display: block; max-width: 380px; flex: 1 1 260px; margin: 0; } .topbar-search input[type="search"] { font: inherit; font-size: 13.5px; width: 100%; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; } .topbar-search input[type="search"]:focus-visible { outline: none; background-color: var(--surface); border-color: var(--axis); box-shadow: 0 0 0 3px var(--in-dim); } @media (max-width: 720px) { .topbar-search { display: none; } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 36px; height: 36px; border-radius: var(--radius-sm); flex: none; color: var(--ink-2); text-decoration: none; background: none; border: 0; cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); filter: none; } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; } /* Красная точка на колокольчике — есть неразобранные операции. */ .icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--crit); border: 1.5px solid var(--surface); } .topbar-sep { width: 1px; height: 24px; background: var(--rule); margin: 0 4px; flex: none; } .user-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; text-decoration: none; } .user-name { font-size: 13.5px; color: var(--ink-2); } @media (max-width: 640px) { .user-name { display: none; } } .themebtn { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; background: transparent; color: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); height: 36px; padding: 0 12px; cursor: pointer; } .themebtn:hover { background: var(--surface-2); color: var(--ink); filter: none; } /* ── вкладки раздела ─────────────────────────────────────────────────── Второй уровень навигации. Появился, когда сайдбар свернули с девятнадцати пунктов до шести: внутренние экраны раздела переехали сюда, и переход между отчётами перестал требовать поиска глазами по всему столбцу. Полоса прокручивается вбок — у «Справочников» семь вкладок, и на узком экране они не должны переноситься в три ряда. */ .subnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--rule); } .subnav a { flex: none; padding: 13px 4px 11px; margin-right: 20px; font-size: 14px; text-decoration: none; color: var(--ink-3); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .subnav a:hover { color: var(--ink); } /* Активная вкладка — тёмное подчёркивание в цвет акцента (макет «Настройки организации»), а не цветное: цвет на этих экранах занят данными. */ .subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .page { max-width: 1280px; margin: 0 auto; padding: 32px 28px 64px; } .page.wide { max-width: none; } .crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; } .crumbs a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--axis); } .crumbs a:hover { color: var(--ink); border-color: var(--ink); } /* Микроподпись над значением: прописные, разрядка, серый. В макетах ею подписан каждый показатель — «ОБЩИЙ ДОХОД», «ПРОГНОЗ ЛИКВИДНОСТИ». */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; } /* ── карточки ───────────────────────────────────────────────────────── */ .body { display: grid; gap: 20px; } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 20px; overflow: hidden; } .card-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 22px 12px; } .card-hd h2 { margin: 0; flex: 1 1 auto; } /* Широкая таблица (сопоставление статей при миграции) прокручивается внутри карточки. Без этого её обрезал overflow:hidden у .card, и на узком экране до правых колонок с select'ами было просто не добраться. */ .card-bd { padding: 22px; overflow-x: auto; } .card-hd + .card-bd { padding-top: 0; } .card-bd > *:first-child { margin-top: 0; } /* модификаторы для предупреждений внутри карточки (платёжный календарь) */ .card.warn { border-left: 4px solid var(--warn); } .card.crit { border-left: 4px solid var(--crit); } .card.good { border-left: 4px solid var(--good); } /* ── плитки разделов (главная) ─────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .tile { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; text-decoration: none; box-shadow: var(--shadow); } .tile:hover { border-color: var(--axis); box-shadow: var(--shadow-lg); } .tile .tile-name { display: block; color: var(--ink); font-size: 15px; font-weight: 600; margin-top: 8px; } .tile .tile-desc { color: var(--ink-3); font-size: 13px; margin-top: 4px; } .tile .tile-ico { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } /* ── показатели (KPI) ────────────────────────────────────────────────── Каждый показатель — отдельная карточка, значение набрано антиквой и крупно: в макетах именно эти цифры держат весь экран. */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 24px; } .kpi { position: relative; overflow: hidden; padding: 20px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); } @media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 460px) { .kpis { grid-template-columns: 1fr; } } .kpi-val { display: block; font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -.02em; line-height: 1.1; margin: 2px 0 8px; } .kpi-val.in { color: var(--in); } .kpi-val.out { color: var(--out); } .kpi-sub { font-size: 12.5px; color: var(--ink-3); } .kpi-sub.up { color: var(--good); } .kpi-sub.down { color: var(--crit); } /* Показатель, ради которого открывают экран, — тёмной заливкой. В каждом макете такая карточка ровно одна: «CASH BOX», «ПРОГНОЗ ЛИКВИДНОСТИ», «ЧИСТАЯ ПРИБЫЛЬ». Больше одной — и выделение перестаёт работать. */ .kpi.hero { background: var(--accent); border-color: var(--accent); } .kpi.hero .eyebrow { color: rgba(255,255,255,.62); } .kpi.hero .kpi-val { color: var(--accent-ink); } .kpi.hero .kpi-sub { color: rgba(255,255,255,.62); } .kpi.hero .kpi-sub.up { color: #34d399; } .kpi.hero .kpi-sub.down { color: #fca5a5; } :root[data-theme="dark"] .kpi.hero .eyebrow, :root[data-theme="dark"] .kpi.hero .kpi-sub { color: rgba(17,24,39,.66); } /* Дельта к прошлому периоду — пилюлей с подложкой, как в макетах. */ .kpi-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; margin-right: 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--good-dim); color: var(--good); } .kpi-delta.down { background: var(--crit-dim); color: var(--crit); } .kpi.hero .kpi-delta { background: rgba(255,255,255,.14); color: #fff; } .dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 860px) { .dash-cols { grid-template-columns: 1fr; } } /* ── сегментированный переключатель / текстовые кнопки ──────────────── */ .seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } /* Высота задаётся здесь явно, чтобы