:root { /* Акцент из утверждённого дизайна (2a): зелёный oklch(0.5 0.12 155) и фон панелей */ --fl-accent: #1e7a4f; --fl-accent-dark: #175f3d; --fl-bg: #eef1f2; --fl-text: #1c2430; --fl-muted: #7b8794; /* Поверхности и линии — переопределяются тёмной темой */ --fl-card: #fff; --fl-card2: #f6f8f9; --fl-soft: #eef1f2; --fl-hover: #f3f6f4; --fl-line: #f0f3f5; --fl-text2: #525f6e; --fl-contrast: #1c2430; --fl-contrast-text: #fff; /* Цвета серий графиков: SVG красится инлайн-атрибутами, hex оттуда из dark-CSS не перекрасить — поэтому переменные с парой для тёмной темы */ --fl-chart-net: #1e7a4f; --fl-chart-debt: #c0503a; --fl-chart-forecast: #d99a2b; } /* ===== Тёмная тема (переключатель в навбаре, хранится в localStorage) ===== */ [data-bs-theme="dark"] { --fl-bg: #14181d; --fl-text: #dee4ea; --fl-muted: #8f9aa6; --fl-card: #1d242c; --fl-card2: #242c35; --fl-soft: #2a323c; --fl-hover: #262f38; --fl-line: #2b343d; --fl-text2: #b8c2cc; --fl-contrast: #dfe5ea; --fl-contrast-text: #14181d; /* Осветлённые серии графиков: тёмные хеки на карточке #1d242c не добирают контраста 3:1 */ --fl-chart-net: #4dbd85; --fl-chart-debt: #e0755f; --fl-chart-forecast: #e5b45c; } /* ===== Шрифт интерфейса (настройка пользователя, data-font на ) ===== Эмодзи-шрифты держатся в конце КАЖДОГО стека: на них нарисованы иконки категорий, счетов и действий. --bs-body-font-family переопределяется здесь же, поэтому за переменной следуют и все компоненты бутстрапа, а не только текст страницы. */ :root { --fl-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --fl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, var(--fl-font-emoji); --bs-body-font-family: var(--fl-font); } html[data-font="inter"] { --fl-font: "Inter", system-ui, sans-serif, var(--fl-font-emoji); } html[data-font="golos"] { --fl-font: "Golos Text", system-ui, sans-serif, var(--fl-font-emoji); } html[data-font="roboto"] { --fl-font: "Roboto", system-ui, sans-serif, var(--fl-font-emoji); } html[data-font="opensans"] { --fl-font: "Open Sans", system-ui, sans-serif, var(--fl-font-emoji); } html[data-font="manrope"] { --fl-font: "Manrope", system-ui, sans-serif, var(--fl-font-emoji); } html[data-font="plexsans"] { --fl-font: "IBM Plex Sans", system-ui, sans-serif, var(--fl-font-emoji); } html[data-font="jetbrains"] { --fl-font: "JetBrains Mono", ui-monospace, monospace, var(--fl-font-emoji); } body { font-family: var(--fl-font); } /* ===== Боковая навигация ===== Переменные объявлены на html (а не на :root) намеренно: все переопределения ниже тоже идут через html, поэтому побеждает порядок следования, а не специфичность. ОДНА переменная задаёт и ширину панели, и отступ контента — поэтому меню всегда поджимает страницу, а не наезжает на неё. Плата за это: пороги раскладок считаются от ширины ОКНА, поэтому для развёрнутого состояния они сдвинуты на ширину меню (см. блок «Пороги раскладок при развёрнутом меню» ниже). */ html { --fl-side-rail: 58px; --fl-side-full: 232px; --fl-side-drawer: 280px; --fl-side-w: var(--fl-side-full); --fl-topbar-h: 0px; font-size: 14px; } html.fl-side-collapsed { --fl-side-w: var(--fl-side-rail); } /* Одинаковая специфичность с правилом выше — побеждает порядок, а не вес селектора */ @media (max-width: 1100px) { html, html.fl-side-collapsed { --fl-side-w: 0px; --fl-topbar-h: 52px; } } /* Гость (страница входа): навигации нет вовсе */ body.fl-no-side { --fl-side-w: 0px; --fl-topbar-h: 0px; } .fl-page { padding-left: var(--fl-side-w); padding-top: var(--fl-topbar-h); transition: padding-left .15s ease; } /* Ссылка для клавиатуры: 7 пунктов меню теперь предшествуют контенту в DOM */ .fl-skip { position: absolute; left: -9999px; z-index: 2200; padding: 8px 14px; background: var(--fl-card); border-radius: 0 0 8px 0; } .fl-skip:focus { left: 0; top: 0; } .fl-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045; /* выше плавающей кнопки (1040), ниже модалок (1050/1055) */ /* Та же переменная, что и в отступе контента, — страница и панель всегда совпадают */ width: var(--fl-side-w); display: flex; flex-direction: column; background: var(--fl-card); border-right: 1px solid var(--fl-line); overflow: hidden; transition: width .15s ease; } .fl-side-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 0; } .fl-side-head .fl-side-brand { flex: 1 1 auto; min-width: 0; padding-top: 0; padding-bottom: 0; } .fl-side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* низкий экран (телефон в ландшафте) — пункты не обрезаются */ overflow-x: hidden; } .fl-side-foot { flex: 0 0 auto; border-top: 1px solid var(--fl-line); padding-top: 4px; } .fl-side-brand, .fl-side-link, .fl-side-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0 9px 16px; border: 0; background: none; color: var(--fl-text2); text-decoration: none; font-size: 13.5px; text-align: left; white-space: nowrap; cursor: pointer; } .fl-side-link:hover, .fl-side-btn:hover { background: var(--fl-hover); color: var(--fl-text); } /* Текущий раздел: подсветка + полоса слева — в свёрнутом рельсе фон почти не читается */ .fl-side-link.active { color: var(--fl-accent-dark); background: color-mix(in srgb, var(--fl-accent) 10%, var(--fl-card)); box-shadow: inset 3px 0 0 var(--fl-accent); } [data-bs-theme="dark"] .fl-side-link.active { color: var(--fl-chart-net); } .fl-side-icon { flex: 0 0 26px; font-size: 17px; line-height: 1; text-align: center; } /* ▦/▤ — не эмодзи, а геометрические знаки текстового шрифта: без добавки они мельче соседей */ .fl-side-glyph { font-size: 15px; } .fl-side-logo { width: 24px; height: 24px; } /* Подпись существует всегда (нужна скринридеру), в свёрнутом виде просто не видна */ .fl-side-label { min-width: 0; overflow: hidden; transition: opacity .12s ease; } html.fl-side-collapsed .fl-side-label { opacity: 0; } .fl-side-pin { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fl-muted); font-size: 15px; line-height: 1; cursor: pointer; transition: transform .15s ease, background .1s ease; } .fl-side-pin:hover { background: var(--fl-hover); color: var(--fl-text); } /* В свёрнутом виде логотип прячется, а кнопка встаёт по центру рельса и разворачивает шеврон */ html.fl-side-collapsed .fl-side-head { justify-content: center; padding-right: 0; } html.fl-side-collapsed .fl-side-brand { display: none; } html.fl-side-collapsed .fl-side-pin { transform: rotate(180deg); } /* Полоса с бургером и затемнение — только на узких экранах */ .fl-topbar, .fl-side-backdrop { display: none; } .fl-guest-theme { position: absolute; top: 8px; right: 12px; z-index: 5; text-decoration: none; font-size: 18px; } @media (max-width: 1100px) { .fl-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1035; height: var(--fl-topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--fl-card); border-bottom: 1px solid var(--fl-line); } .fl-topbar-brand { display: flex; align-items: center; gap: 8px; color: var(--fl-text); text-decoration: none; } .fl-burger { border: 0; background: none; font-size: 22px; line-height: 1; padding: 6px 10px; color: var(--fl-text); cursor: pointer; } /* Шторка: transform на самой панели, а НЕ на обёртке контента — иначе фиксированные элементы (плавающая кнопка, тосты, модалки) получили бы новый контейнер и сломались */ .fl-sidebar { width: var(--fl-side-drawer); transform: translateX(-100%); transition: transform .16s ease; box-shadow: none; } html.fl-side-open .fl-sidebar { transform: none; box-shadow: 0 0 30px rgba(16, 24, 40, .35); } /* В шторке всегда полный вид: свёрнутый рельс на телефоне бессмыслен */ html.fl-side-collapsed .fl-side-label { opacity: 1; } html.fl-side-collapsed .fl-side-head { justify-content: flex-start; } html.fl-side-collapsed .fl-side-brand { display: flex; } .fl-side-pin { display: none; } .fl-side-backdrop { display: block; position: fixed; inset: 0; z-index: 1044; background: rgba(16, 24, 40, .45); } .fl-side-backdrop[hidden] { display: none; } /* Тап-таргеты меню крупнее пальца */ .fl-side-link, .fl-side-btn { padding: 12px 0 12px 18px; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .fl-sidebar, .fl-page, .fl-side-label, .fl-side-pin { transition: none; } } /* ===== Пороги раскладок при развёрнутом меню ===== Развёрнутое меню отнимает у контента 174px (232 − 58), а все медиазапросы проекта считаются от ширины ОКНА. Поэтому для развёрнутого состояния каждый порог сдвинут ровно на эту разницу — иначе колонки схлопывались бы позже, чем нужно, и содержимое вылезало бы за карточки. Правила действуют только выше 1100px: ниже меню — шторка, и контент оно уже не поджимает. */ @media (min-width: 1101px) and (max-width: 1454px) { /* 1280 + 174 */ html:not(.fl-side-collapsed) .fl-dash-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1101px) and (max-width: 1574px) { /* 1400 + 174, компактный режим */ html:not(.fl-side-collapsed).fl-compact .fl-dash-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1101px) and (max-width: 1274px) { /* 1100 + 174 */ html:not(.fl-side-collapsed) .fl-dash-grid, html:not(.fl-side-collapsed) .fl-dash-grid3, html:not(.fl-side-collapsed) .fl-top-grid, html:not(.fl-side-collapsed) .fl-stats-grid, html:not(.fl-side-collapsed) .fl-charts-grid, html:not(.fl-side-collapsed) .fl-stats-charts { grid-template-columns: minmax(0, 1fr); } } /* Порог 900px (настройки, категории, коммуналка) сдвигать не нужно: 900 + 174 = 1074, а это уже ниже 1101px, где меню превращается в шторку и контент не поджимает. */ @media print { .fl-topbar, .fl-sidebar, .fl-side-backdrop, .fl-skip { display: none !important; } .fl-page { padding-left: 0; padding-top: 0; } } @media (min-width: 768px) { html { font-size: 16px; } } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; background: var(--fl-bg); color: var(--fl-text); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--fl-accent); color: #fff; font-weight: 700; font-size: 14px; } .brand-logo { width: 28px; height: 28px; } /* Страница входа: минималистичный блок по центру экрана */ .fl-login-wrap { min-height: calc(100vh - 150px); display: flex; align-items: center; justify-content: center; padding: 24px 12px; } .fl-login-card { width: 100%; max-width: 380px; padding: 28px; } .fl-login-logo { width: 56px; height: 56px; } .btn-success { background-color: var(--fl-accent); border-color: var(--fl-accent); } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--fl-accent-dark); border-color: var(--fl-accent-dark); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--fl-card), 0 0 0 0.25rem var(--fl-accent); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ===== Настройки (дизайн 3b) ===== */ .fl-settings-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; } .fl-settings-nav { padding: 8px; font-weight: 600; font-size: 14px; } .fl-nav-item { padding: 9px 12px; border-radius: 8px; color: var(--fl-text2); cursor: pointer; } .fl-nav-item:hover { background: var(--fl-hover); } .fl-nav-item.active { background: #e8f5ee; color: var(--fl-accent-dark); } /* Карточка виджета. Подложка (--card-tint) НЕ заливает карточку, а подмешивается к её фону: --fl-card белый в светлой теме и тёмный в тёмной, поэтому один сохранённый цвет даёт мягкую пастель на белом и приглушённый тон на тёмном — «засветить» интерфейс произвольным цветом из колорпикера невозможно. Переменные ставит обёртка секции (DashboardVm.WidgetStyle); без них карточка выглядит ровно как раньше. */ .fl-card { background: color-mix(in srgb, var(--card-tint, var(--fl-card)) 12%, var(--fl-card)); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); } /* Старые браузеры без color-mix (до 2023): обычный фон карточки вместо подложки */ @supports not (background: color-mix(in srgb, red 10%, white)) { .fl-card { background: var(--fl-card); } } /* Масштаб шрифта виджета: 1em наследуется, поэтому при значении по умолчанию (1) размеры не меняются. Строки с жёстко заданными px этим не задеваются. */ [style*="--card-fs-scale"] .fl-card { font-size: calc(1em * var(--card-fs-scale, 1)); } /* Масштаб внутренних отступов: у бутстраповских утилит padding с !important, поэтому переопределяем тоже с ним — иначе не победить */ [style*="--card-pad-scale"] .fl-card > .p-3, [style*="--card-pad-scale"] .fl-card > .px-3 { padding-left: calc(1rem * var(--card-pad-scale, 1)) !important; padding-right: calc(1rem * var(--card-pad-scale, 1)) !important; } [style*="--card-pad-scale"] .fl-card > .p-3 { padding-top: calc(1rem * var(--card-pad-scale, 1)) !important; padding-bottom: calc(1rem * var(--card-pad-scale, 1)) !important; } [style*="--card-pad-scale"] .fl-card > .pb-3 { padding-bottom: calc(1rem * var(--card-pad-scale, 1)) !important; } [style*="--card-pad-scale"] .fl-card > .pb-2 { padding-bottom: calc(.5rem * var(--card-pad-scale, 1)) !important; } [style*="--card-pad-scale"] .fl-card > .pb-1 { padding-bottom: calc(.25rem * var(--card-pad-scale, 1)) !important; } [style*="--card-pad-scale"] .fl-card > .pt-0 { padding-top: 0 !important; } .fl-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; vertical-align: middle; white-space: nowrap; } .fl-badge-green { background: #e8f5ee; color: #1e7a4f; } .fl-badge-red { background: #fdf0ee; color: #b04a35; } .fl-badge-blue { background: #eaf1fb; color: #3f6394; } .fl-badge-teal { background: #dff2ef; color: #1b6d62; } .fl-badge-purple { background: #ece9f7; color: #6f6694; } .fl-badge-orange { background: #fef3e2; color: #a9772d; } .fl-badge-gray { background: var(--fl-soft); color: var(--fl-muted); } /* Тёмная тема: те же оттенки, но приглушённо-тёмный фон и светлый текст */ [data-bs-theme="dark"] .fl-badge-green { background: #1d3a2c; color: #86cba8; } [data-bs-theme="dark"] .fl-badge-red { background: #3d2723; color: #e6a293; } [data-bs-theme="dark"] .fl-badge-blue { background: #24344b; color: #9dbbe3; } [data-bs-theme="dark"] .fl-badge-teal { background: #17352f; color: #7cc9bc; } [data-bs-theme="dark"] .fl-badge-purple { background: #2e2a40; color: #b3aad4; } [data-bs-theme="dark"] .fl-badge-orange { background: #3a301f; color: #d9b36a; } /* Горизонтальный скролл внутри карточки, а не у страницы: у строк настроек (счета, долги, валюты) фиксированные колонки суммарно ~820px, и с появлением бокового рельса они начинают не влезать уже на ноутбуках, а не только на телефоне. В широком окне правило безвредно — контент помещается, полоса не появляется. */ .fl-table { font-size: 13px; overflow-x: auto; } .fl-table > div { width: max-content; min-width: 100%; } .fl-table-head { color: var(--fl-muted); font-size: 10.5px; font-weight: 600; border-bottom: 1px solid var(--fl-line); padding: 0 18px 7px; } .fl-accounts-row { display: grid; grid-template-columns: 26px minmax(0, 1.4fr) 110px 60px 130px 150px 80px 55px 80px; gap: 0 12px; align-items: center; } .fl-debts-row { display: grid; grid-template-columns: 26px minmax(0, 1.2fr) 130px 70px 130px 75px minmax(0, 1.3fr) 110px; gap: 0 12px; align-items: center; } .fl-debt-hist-row { display: grid; grid-template-columns: 60px 90px 100px minmax(0, 1.4fr) minmax(0, 1fr) 30px; gap: 0 10px; align-items: center; } .fl-table-row { padding: 9px 18px; border-bottom: 1px solid var(--fl-line); } .fl-table-row:last-child { border-bottom: 0; } /* Ручка перетаскивания: ⠿ красится серым, а зона захвата на обычном тексте (название статьи планирования) меняет только курсор */ .fl-drag { color: #c4ccd2; } .fl-drag, .fl-drag-zone { cursor: grab; } .fl-dragging { opacity: .4; } .fl-muted { opacity: .55; } .fl-yes { color: var(--fl-accent); } .fl-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .08); vertical-align: middle; } .fl-row-actions { display: flex; gap: 8px; justify-content: flex-end; white-space: nowrap; } .fl-row-actions a { text-decoration: none; color: var(--fl-muted); } .fl-row-actions a:hover { color: var(--fl-text); text-decoration: none; } .fl-row-actions a.fl-danger:hover { color: #c4522e; } .fl-cat-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--fl-line); font-size: 13px; } .fl-categories-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } /* overflow-x: на телефоне фикс-колонки строк валют шире карточки — скроллятся внутри списка, не растягивая страницу */ .fl-currencies-scroll { max-height: 460px; overflow-y: auto; overflow-x: auto; } .fl-cur-row { display: grid; grid-template-columns: 70px 1fr 100px 90px 80px 60px; gap: 0 12px; align-items: center; padding: 7px 18px; border-bottom: 1px solid var(--fl-line); font-size: 13px; } .fl-cur-row:last-child { border-bottom: 0; } .fl-swatch-pick input { display: none; } .fl-swatch-pick .fl-swatch { width: 22px; height: 22px; cursor: pointer; } .fl-swatch-pick input:checked + .fl-swatch { outline: 2px solid var(--fl-contrast); outline-offset: 1px; } .fl-swatch-custom { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border: 1px dashed #b3bcc4; } /* ===== Дашборд (дизайн 2a) ===== */ /* Во всех сетках-раскладках — minmax(0, ·) вместо голого 1fr: у 1fr минимум auto, и один нестискиваемый ряд внутри виджета (nowrap-сумма + имя) растягивал колонку, а с ней все карточки — шире экрана телефона */ .fl-top-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; } .fl-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; } .fl-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } /* Карточки счетов: по 2 в строку; при нечётном количестве первая — во всю строку */ .fl-acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .fl-acc-card { background: var(--fl-card2); border: 1px solid rgba(0, 0, 0, .06); border-radius: 10px; padding: 7px 12px; } .fl-acc-wide { grid-column: 1 / -1; } .fl-group-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--fl-muted); padding: 10px 0 4px; border-bottom: 1px solid var(--fl-line); margin-bottom: 2px; } .fl-acc-sub { font-size: 10.5px; color: rgba(28, 36, 48, .55); } .fl-income { color: var(--fl-accent); } .fl-expense { color: #b04a35; } .fl-saving { color: #3f6394; } /* Лог списком, а не таблицей: значок вида, название с подписью, справа сумма и дата. Колонками это было до конца августа 2026 — длинные названия типов («Корректировка кубышки») не влезали в свои 92px и наезжали на счёт, а комментарий висел отдельной строкой под счётом вместо колонки, которая ему предназначалась */ .fl-op-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--fl-line); font-size: 13px; } /* Название и подпись — единственная тянущаяся часть строки: сумма, дата и действия держат свою ширину, обрезается только текст */ .fl-op-main { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; } .fl-op-title { font-weight: 600; /* Плотнее обычного: в логе таких строк два десятка подряд, и лишние пара пикселей межстрочного дают лишний экран прокрутки */ line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-op-arrow { color: var(--fl-muted); font-weight: 400; } .fl-op-sub { display: flex; align-items: center; /* Переносится, а не обрезается: в узкой колонке дашборда подпись целиком не влезает, а комментарий стоит в ней последним и исчезал бы первым */ flex-wrap: wrap; gap: 2px 6px; min-width: 0; /* Не muted: здесь теперь стоит счёт операции, по которому лог сканируют глазами, а 11px цветом подсказки не дотягивают до порога читаемости */ overflow: hidden; font-size: 11px; line-height: 1.3; color: var(--fl-text2); } /* Бейдж уступает место тексту рядом только когда сам помещается: иначе длинное название вида («Корректировка кубышки») наезжало бы на сумму — ровно то, из-за чего и разошлась старая табличная вёрстка */ .fl-op-sub > .fl-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Цвет линий для текста слишком блёклый — точка-разделитель должна быть видна */ .fl-op-dim { color: var(--fl-muted); } /* Символ валюты при сумме — тише самой цифры, читать надо её */ .fl-op-cur { font-weight: 600; opacity: .65; } .fl-op-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-op-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } /* Кнопки строки держат общую ширину, чтобы суммы соседних строк вставали на одинаковом расстоянии от края. Именно min-width, а не width: на телефоне у кнопок крупные зоны нажатия, и в жёсткие 62px они бы сжались друг на друга */ .fl-op-row > .fl-row-actions { flex: none; min-width: 62px; } /* Выбор шрифта интерфейса: карточка-образец на каждый вариант */ .fl-font-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .fl-font-option { display: block; padding: 8px 10px; border: 1px solid var(--fl-line); border-radius: 9px; cursor: pointer; margin: 0; } .fl-font-option:hover { background: var(--fl-hover); } .fl-font-option.sel { border-color: var(--fl-accent); background: color-mix(in srgb, var(--fl-accent) 8%, var(--fl-card)); } /* Образец рисуется своим шрифтом — стеки те же, что и у html[data-font=...] */ .fl-font-sample { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 2px; } .fl-font-sample[data-font="inter"] { font-family: "Inter", sans-serif; } .fl-font-sample[data-font="golos"] { font-family: "Golos Text", sans-serif; } .fl-font-sample[data-font="roboto"] { font-family: "Roboto", sans-serif; } .fl-font-sample[data-font="opensans"] { font-family: "Open Sans", sans-serif; } .fl-font-sample[data-font="manrope"] { font-family: "Manrope", sans-serif; } .fl-font-sample[data-font="plexsans"] { font-family: "IBM Plex Sans", sans-serif; } .fl-font-sample[data-font="jetbrains"] { font-family: "JetBrains Mono", monospace; } .fl-font-name { display: block; font-size: 12.5px; font-weight: 600; } .fl-font-note { display: block; font-size: 11px; color: var(--fl-muted); line-height: 1.3; } /* Чек-лист закрытия периода */ .fl-check-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--fl-line); font-size: 13px; } .fl-check-row:first-child { border-top: 0; } .fl-check-mark { color: var(--fl-accent); font-weight: 700; } .fl-check-warn .fl-check-mark { color: #d99a2b; } /* Цифры, которые расшифровываются кликом (строка статистики, легенда доната, день) */ .fl-drill { cursor: pointer; } .fl-spend-row.fl-drill:hover, .fl-legend-row.fl-drill:hover { background: var(--fl-hover); } /* Поиск по истории: форма фильтров и список результатов */ .fl-search-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--fl-line); } .fl-search-form input[type="search"] { flex: 2 1 220px; } .fl-search-form select { flex: 1 1 150px; width: auto; } .fl-search-form input[type="date"] { flex: 0 1 150px; } .fl-search-results { max-height: 52vh; overflow-y: auto; } .fl-search-row { display: grid; grid-template-columns: 62px minmax(0, 1.5fr) minmax(0, 1fr) 110px 90px; gap: 0 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--fl-line); font-size: 12.5px; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .fl-search-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date amount" "what what" "acc period"; row-gap: 2px; } .fl-search-row > :nth-child(1) { grid-area: date; } .fl-search-row > :nth-child(2) { grid-area: what; } .fl-search-row > :nth-child(3) { grid-area: acc; } .fl-search-row > :nth-child(4) { grid-area: amount; text-align: right; } .fl-search-row > :nth-child(5) { grid-area: period; text-align: right; } } /* Полоса-уведомление над дашбордом (незакрытые периоды и подобное) */ .fl-notice { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-left: 3px solid #d99a2b; border-radius: 0 8px 8px 0; background: color-mix(in srgb, #d99a2b 12%, var(--fl-card)); font-size: 13px; line-height: 1.45; } /* Метка операции, чья дата выпала за границы периода */ .fl-op-outside { color: #d99a2b; cursor: help; } /* Стоп-сигналы при вводе операции: предупреждают, не блокируют */ .fl-warn-box { margin-top: 8px; padding: 7px 10px; border-left: 3px solid #d99a2b; border-radius: 0 6px 6px 0; background: color-mix(in srgb, #d99a2b 12%, var(--fl-card)); font-size: 12px; line-height: 1.4; color: var(--fl-text); } .fl-inline-form .fl-warn-box { flex-basis: 100%; margin-top: 4px; } .fl-op-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; } .fl-op-income { background: #e8f5ee; color: #1e7a4f; } .fl-op-expense-i { background: #fdf0ee; color: #b04a35; } .fl-op-saving { background: #eaf1fb; color: #3f6394; } .fl-op-transfer { background: var(--fl-soft); color: var(--fl-text2); } .fl-op-storage { background: #dff2ef; color: #1b6d62; } .fl-op-adjust { background: #fef3e2; color: #a9772d; } /* Тёмная тема: иконки видов операций — приглушённо-тёмные, символ светлый */ [data-bs-theme="dark"] .fl-op-income { background: #1d3a2c; color: #86cba8; } [data-bs-theme="dark"] .fl-op-expense-i { background: #3d2723; color: #e6a293; } [data-bs-theme="dark"] .fl-op-saving { background: #24344b; color: #9dbbe3; } [data-bs-theme="dark"] .fl-op-storage { background: #17352f; color: #7cc9bc; } [data-bs-theme="dark"] .fl-op-adjust { background: #3a301f; color: #d9b36a; } .fl-op-date { flex: none; width: 40px; text-align: right; font-size: 11px; color: #9aa6b2; } /* В логе дата стоит под суммой и своей колонкой не выравнивается — фиксированные 40px оставлены модалкам поиска и расшифровки, где дата открывает строку */ .fl-op-row .fl-op-date { width: auto; } .fl-log-filter { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; background: var(--fl-soft); color: var(--fl-text2); cursor: pointer; } .fl-log-filter.active { background: var(--fl-contrast); color: var(--fl-contrast-text); } .fl-chip-pick input, .fl-type-pick input { display: none; } .fl-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid #dbe1e5; border-radius: 8px; background: var(--fl-card); color: var(--fl-text2); cursor: pointer; } .fl-chip-pick input:checked + .fl-chip { border: 1.5px solid var(--fl-accent); color: var(--fl-text); } .fl-type-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 6px; background: var(--fl-soft); color: var(--fl-muted); cursor: pointer; } .fl-type-pick input:checked + .fl-type-chip { background: var(--fl-card); color: var(--fl-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); outline: 1px solid #dbe1e5; } /* ===== Этап 3: бюджет, планирование, доходы, статистика трат ===== */ .fl-dash-grid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; } .fl-mode-switch { display: inline-flex; background: var(--fl-soft); border-radius: 8px; padding: 3px; font-size: 12px; font-weight: 600; } .fl-mode-btn { padding: 4px 14px; border-radius: 6px; color: var(--fl-muted); cursor: pointer; } .fl-mode-btn.active { background: var(--fl-card); color: var(--fl-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .fl-budget-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--fl-line); font-size: 13px; } .fl-budget-total { border-top: 1px solid #dbe1e5; } .fl-dotted { border-bottom: 1px dashed #b3bcc4; } .fl-budget-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .fl-tile { background: var(--fl-soft); border-radius: 8px; padding: 8px 10px; } .fl-tile-accent { background: #fdf6dd; } .fl-tile-accent .fl-tile-label { color: #8a7a3b; } .fl-tile-danger { background: #fdf0ee; } .fl-tile-danger .fl-tile-label { color: #b04a35; } .fl-tile-label { font-size: 10.5px; color: var(--fl-muted); font-weight: 600; } .fl-tile-value { font-weight: 700; font-size: 13px; margin-top: 2px; } /* Планирование колонками: чекбокс | название | «база» | сумма | действия */ .fl-plan-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 52px 105px 44px; gap: 0 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--fl-line); font-size: 13px; } /* Категория статьи — подпись под названием (имя статьи бывает вольным) */ .fl-plan-cat { font-size: 11.5px; line-height: 1.35; color: var(--fl-muted); } /* Числа: табличные цифры и без переносов — суммы стоят по одной линии */ .fl-num { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Bootstrap-обрезка текста внутри флекса: у flex-элемента min-width:auto, и без этого правила text-truncate не сжимается, а распирает строку (виджет «Цели» так растягивал весь дашборд шире экрана телефона) */ .d-flex > .text-truncate { min-width: 0; } .fl-plan-done { color: #9aa6b2; } .fl-plan-check { flex: none; width: 16px; height: 16px; border: 1.5px solid #cfd6db; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; text-decoration: none; color: transparent; } .fl-plan-check.checked { background: var(--fl-accent); border-color: var(--fl-accent); color: #fff; } /* Статистика трат: колонки «потрачено | выделено», числа выровнены по левому краю колонок */ .fl-spend-row { display: grid; grid-template-columns: minmax(90px, 1.2fr) 1fr 96px 96px; gap: 8px; align-items: center; padding: 7px 0; font-size: 12.5px; } .fl-spend-head { font-size: 10px; font-weight: 600; letter-spacing: .05em; color: #9aa6b2; padding-bottom: 0; } .fl-spend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-spend-bar-col { min-width: 0; } .fl-spend-bar { display: block; height: 6px; background: var(--fl-soft); border-radius: 3px; overflow: hidden; } /* Соседние строки статистики отделены серой полоской (правка заказчика) */ .fl-spend-row + .fl-spend-row { border-top: 1px solid var(--fl-line); } /* Широкий бар с подписью «осталось …» внутри */ .fl-spend-bar-wide { position: relative; height: 17px; border-radius: 6px; } .fl-spend-bar-label { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: 10px; font-weight: 600; color: var(--fl-text); white-space: nowrap; overflow: hidden; } /* В широких барах заливка пастельная — тёмная подпись читается на любом статусе. В тёмной теме наоборот: приглушённо-тёмная заливка под светлый текст темы. */ .fl-spend-bar-wide > .fl-bar-ok { background: #bfe0cd; } .fl-spend-bar-wide > .fl-bar-warn { background: #f3ddab; } .fl-spend-bar-wide > .fl-bar-over { background: #f3c1b5; } /* Пастельные версии шкалы: в широком баре поверх заливки идёт тёмная подпись */ .fl-spend-bar-wide > .fl-bar-s1 { background: #a8d5bd; } .fl-spend-bar-wide > .fl-bar-s2 { background: #bfe0cd; } .fl-spend-bar-wide > .fl-bar-s3 { background: #d2ead9; } .fl-spend-bar-wide > .fl-bar-s4 { background: #e2f1e7; } .fl-spend-bar-wide > .fl-bar-none { background: #e4e9ec; } .fl-spend-bar-wide > .fl-bar-x1 { background: #f6e4b4; } .fl-spend-bar-wide > .fl-bar-x2 { background: #f7d2b0; } .fl-spend-bar-wide > .fl-bar-x3 { background: #f3c1b5; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-ok { background: #2e5340; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-warn { background: #5c4a22; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-over { background: #5c332a; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-s1 { background: #24523a; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-s2 { background: #2e5340; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-s3 { background: #385d49; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-s4 { background: #436853; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-none { background: #3a434b; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-x1 { background: #5c4a22; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-x2 { background: #5e3f26; } [data-bs-theme="dark"] .fl-spend-bar-wide > .fl-bar-x3 { background: #5c332a; } .fl-spend-bar span { display: block; height: 100%; border-radius: 3px; } .fl-bar-ok { background: var(--fl-accent); } .fl-bar-warn { background: #d99a2b; } .fl-bar-over { background: #c0503a; } /* Шкала остатка: зелёный, пока тратить ещё есть что — от насыщенного (потрачена малая часть) к светлому у нуля. Жёлтый и дальше появляются ТОЛЬКО за нулём: раньше «осталось немного» красилось предупреждающим цветом и читалось как перерасход */ .fl-bar-s1 { background: #1a6b45; } .fl-bar-s2 { background: #2fae74; } .fl-bar-s3 { background: #63c496; } .fl-bar-s4 { background: #9bd8ba; } /* Трата по категории без выделенного бюджета: ни хорошо, ни плохо — нейтрально */ .fl-bar-none { background: #c9d2d8; } [data-bs-theme="dark"] .fl-bar-none { background: #46505a; } /* Перерасход по величине: слегка, заметно, много */ .fl-bar-x1 { background: #e0a02c; } .fl-bar-x2 { background: #e8722c; } .fl-bar-x3 { background: #c0503a; } .fl-spend-col { text-align: left; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Прокрутка таблицы накоплений внутри карточки: сжаться ниже min-content она не может */ .fl-sav-scroll { overflow-x: auto; } /* Накопления: настоящая таблица — колонки выравниваются по контенту и не едут */ .fl-sav-table { width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; /* separate + spacing: между строками-пилюлями нужен зазор и скругления */ border-collapse: separate; border-spacing: 0 2px; } .fl-sav-table th { font-size: 10px; font-weight: 600; letter-spacing: .05em; color: #9aa6b2; padding: 4px 0 4px 10px; text-align: left; } .fl-sav-table th:first-child { padding-left: 0; } .fl-sav-table td { padding: 6px 0 6px 10px; vertical-align: baseline; } .fl-sav-table td:first-child { padding-left: 0; } /* Строка счёта подсвечена его цветом на всю ширину (пилюля) */ .fl-sav-table .fl-sav-row td { background: var(--row-bg, transparent); } .fl-sav-table .fl-sav-row td:first-child { border-radius: 7px 0 0 7px; padding-left: 8px; } .fl-sav-table .fl-sav-row td:last-child { border-radius: 0 7px 7px 0; } /* Тёмная тема: пастель пилюли приглушается тёмным слоем (оттенок остаётся), текст светлый. Фон задан через var(--row-bg) — на десктопе на td, на мобильном на самой строке */ [data-bs-theme="dark"] .fl-sav-row[style*="--row-bg"], [data-bs-theme="dark"] .fl-sav-row[style*="--row-bg"] td { background-image: linear-gradient(rgba(13, 17, 23, .78), rgba(13, 17, 23, .78)); color: var(--fl-text); } [data-bs-theme="dark"] .fl-sav-row[style*="--row-bg"] td .text-muted { color: rgba(222, 228, 234, .55) !important; } [data-bs-theme="dark"] .fl-sav-row[style*="--row-bg"] td::before { color: rgba(222, 228, 234, .55); } .fl-sav-table .fl-num { white-space: nowrap; } .fl-sav-table .fl-sav-group td { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--fl-muted); border-top: 0; border-bottom: 1px solid var(--fl-line); padding-top: 10px; padding-bottom: 4px; } /* Распределение накоплений: колонки как у статистики трат — имя+% | бар | ПЛАН | ФАКТ */ .fl-alloc-row { display: grid; grid-template-columns: minmax(90px, 1.3fr) 1fr 96px 96px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--fl-line); font-size: 12.5px; font-variant-numeric: tabular-nums; } .fl-alloc-row.fl-spend-head { border-top: 0; } /* Образец цвета цифры показывает ЧИСТЫЙ цвет: к тексту он применяется целиком, в отличие от подложки карточки, которая подмешивается к фону. Двойной класс — чтобы перебить .fl-sw, объявленный ниже по файлу */ .fl-sw.fl-sw-solid { background: var(--sw); } /* Цвет цифры в конструкторе: две палитры подряд не должны слипаться */ .fl-num-colors { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--fl-line); border-radius: 10px; } /* Колонка дашборда — сетка из 12 долей: виджет занимает --card-span долей (по умолчанию все двенадцать), поэтому суженные соседи автоматически встают в одну строку */ .fl-col-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); /* rem, а не px: в компактном виде корневой шрифт меньше, и отступы сжимаются вместе с ним — ровно так вёл себя прежний gap-3 бутстрапа */ gap: 1rem; align-content: start; } .fl-col-grid > [data-section] { grid-column: span var(--card-span, 12); /* Карточка тянется на всю высоту строки: два виджета рядом выглядят как одна плашка */ display: flex; flex-direction: column; min-width: 0; } .fl-col-grid > [data-section] > .fl-card { flex: 1 1 auto; } /* Свёрнутая карточка не должна тянуться до высоты соседа по строке: иначе сворачивание оставляет пустую плашку вместо полоски заголовка */ .fl-col-grid > [data-section]:has(.fl-collapsed) { align-self: start; } /* ===== Мини-виджеты конструктора: одна цифра, минимум обвязки ===== */ .fl-mini { padding: calc(14px * var(--card-pad-scale, 1)); } .fl-mini-title { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--fl-muted); } .fl-mini-big { /* Крупные размеры в узкой доле колонки не должны вылезать за карточку */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: calc(26px * var(--num-scale, 1)); font-weight: 800; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Вид «строкой»: подпись и цифра в одну линию, самый плотный вариант */ .fl-mini-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .fl-mini-line .fl-mini-title { text-transform: none; font-size: 13px; color: inherit; } .fl-mini-num { font-size: calc(16px * var(--num-scale, 1)); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .fl-mini-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .fl-mini-pct { font-size: 12px; font-weight: 700; color: var(--fl-muted); width: 38px; text-align: right; } .fl-mini-hint { font-size: 11.5px; color: var(--fl-muted); margin-top: 4px; } /* Пополнения накоплений: внёс | начислено | итого */ .fl-inflow-row { display: grid; /* Четыре колонки в узкой карточке: ширину диктует шапка «НАЧИСЛЕНО», поэтому она набрана мельче обычной (см. ниже), а имя счёта обрезается многоточием */ grid-template-columns: minmax(44px, 1fr) 76px 78px 78px; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--fl-line); font-size: 12.5px; font-variant-numeric: tabular-nums; } .fl-inflow-row.fl-spend-head { border-top: 0; padding-bottom: 0; /* Мельче и без разрядки: «НАЧИСЛЕНО» — самое длинное слово таблицы */ font-size: 9.5px; letter-spacing: 0; } /* Бадж итога живёт в колонке фиксированной ширины — боковые поля уже, чем в «Распределении накоплений», иначе крупная сумма вылезает за колонку */ .fl-inflow-row .fl-badge-total { padding: 3px 6px; } /* Прочерк вместо нуля: пустая клетка не должна перетягивать внимание */ .fl-nil { color: var(--fl-muted); opacity: .55; font-weight: 400; } /* Доходы: колонки ПЛАН | ФАКТ — единый подход со статистикой трат */ .fl-inc-row { display: grid; grid-template-columns: minmax(90px, 1fr) 96px 96px; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--fl-line); font-size: 13px; font-variant-numeric: tabular-nums; } .fl-inc-row.fl-spend-head { border-top: 0; padding-bottom: 0; } /* Цели: строка с прогрессом; чекбоксы счетов в модалке — колонками */ .fl-goal-row { padding: 8px 0; border-top: 1px solid var(--fl-line); font-size: 13px; font-variant-numeric: tabular-nums; } .fl-goal-row:first-child { border-top: 0; } .fl-goal-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 16px; padding: 4px 0 8px; } /* Пользовательские карточки статистики в «Накоплениях» */ .fl-stat-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .fl-stat-card { position: relative; } .fl-stat-card-actions { position: absolute; top: 6px; right: 8px; display: none; gap: 6px; } .fl-stat-card:hover .fl-stat-card-actions { display: flex; } .fl-stat-card-actions a { text-decoration: none; color: var(--fl-muted); font-size: 12px; } .fl-stat-card-actions a.fl-danger:hover { color: #c4522e; } .fl-stat-card-add { border: 1px dashed #c4ccd2; background: transparent; border-radius: 8px; color: var(--fl-muted); font-size: 12px; font-weight: 600; min-height: 52px; cursor: pointer; } .fl-stat-card-add:hover { background: var(--fl-hover); color: var(--fl-text); } /* Эмодзи-пикер */ .fl-emoji-pick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .fl-emoji-btn { border: 1px solid #dbe1e5; background: var(--fl-card); border-radius: 6px; padding: 1px 7px; font-size: 16px; line-height: 1.4; cursor: pointer; } .fl-emoji-btn:hover { background: var(--fl-hover); } /* Имя счёта в цветной «пилюле» — чтобы цвет не выглядел вторым чекбоксом */ .fl-acc-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--fl-soft); border: 1px solid rgba(0, 0, 0, .07); font-size: 12px; font-weight: 600; vertical-align: baseline; } /* Burn-бар «Бюджет на траты — сгорание» (дизайн 2a) */ .fl-burn-bar { position: relative; height: 28px; background: var(--fl-soft); border-radius: 8px; overflow: hidden; } .fl-burn-fill { position: absolute; inset: 0 auto 0 0; background: var(--fl-accent); border-radius: 8px 0 0 8px; } .fl-burn-over { background: #c0503a; } .fl-burn-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fl-contrast); } .fl-burn-label-left, .fl-burn-label-right { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11.5px; font-weight: 700; } .fl-burn-label-left { left: 12px; color: #fff; } .fl-burn-label-right { right: 12px; color: var(--fl-muted); font-weight: 600; } /* Инлайн-форма операции в логе: визуально отделена панелью быстрого ввода */ .fl-inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 16px 12px; padding: 10px 12px; background: #f4f7f5; border: 1px dashed #c4d3c9; border-radius: 10px; } .fl-inline-form::before { content: "Быстрый ввод"; flex-basis: 100%; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fl-muted); } .fl-inline-form select { max-width: 150px; } /* Категорий много, и названия длиннее, чем у типов и счетов: в 150px список получался тесным. Только для ПК: на телефоне селекты идут во всю ширину, а правило с двумя классами перебило бы мобильное по специфичности */ @media (min-width: 701px) { .fl-inline-form select.fl-il-cat { max-width: 230px; flex: 1 1 190px; } } /* Сумма занимает весь остаток первой строки: в фиксированные 110px не влезали ни разрядность крупной траты, ни выражение вида «1590+230*3» */ .fl-il-amount { flex: 1; min-width: 110px; } .fl-il-date { width: 130px; } .fl-il-comment { flex: 1; min-width: 110px; } @media (max-width: 1280px) { .fl-dash-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 1100px) { .fl-dash-grid, .fl-dash-grid3, .fl-top-grid { grid-template-columns: minmax(0, 1fr); } .fl-stats-grid { grid-template-columns: minmax(0, 1fr); } /* Телефон: колонок нет, поэтому сетки «растворяются» и все секции становятся детьми одной колонки — только так порядок можно задать сквозным, поверх деления на колонки, которое на узком экране уже ничего не значит */ .fl-dash { display: flex; flex-direction: column; gap: 1rem; } .fl-dash .fl-dash-grid3, .fl-dash .fl-col-grid { display: contents; } /* Настроенные виджеты (1…N) идут первыми, ненастроенные — после них, сохраняя порядок колонок. Поэтому значение по умолчанию большое, а не ноль */ .fl-dash > [data-section], .fl-dash .fl-col-grid > [data-section] { order: var(--m-order, 999); } .fl-dash [data-mobile="hidden"] { display: none; } /* Секция стала flex-элементом, а не гридовым: там align-self управляет ГОРИЗОНТАЛЬНОЙ осью, и правило для свёрнутых карточек сжало бы их по ширине до заголовка */ .fl-dash .fl-col-grid > [data-section]:has(.fl-collapsed) { align-self: auto; } /* Доли ширины действуют только в гриде: во flex-колонке карточка занимает всю ширину */ .fl-dash .fl-col-grid > [data-section] { width: 100%; } /* mt-3 у зон при display:contents не работает — расстояние держит gap контейнера */ .fl-dash > .mt-3 { margin-top: 0 !important; } /* Компактный вид держит две колонки до 900px — там сетка ещё настоящая, и «растворять» её нельзя: правила ниже включаются только когда колонка действительно одна */ @media (max-width: 1100px) { html.fl-compact .fl-dash .fl-dash-grid3, html.fl-compact .fl-dash .fl-col-grid { display: grid; } } @media (max-width: 900px) { html.fl-compact .fl-dash .fl-dash-grid3, html.fl-compact .fl-dash .fl-col-grid { display: contents; } } } /* ===== Компактный вид дашборда (класс на , настройка пользователя) ===== Четыре трека вместо трёх: узкие 1–2 отданы планированию, широкий 3 — счетам и логу, 4 — статистике (раскладку собирает DashboardVm.TrackWidgets). Селекторы с html.fl-compact специфичнее базовых, поэтому порядок важен только внутри самого блока: правила ниже идут от широких экранов к узким, чтобы срабатывало последнее подходящее. */ html.fl-compact .fl-dash-grid3 { grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.15fr); gap: 10px; } html.fl-compact .fl-card { border-radius: 9px; } /* Корневой шрифт — единственный рычаг, сжимающий rem-овые отступы бутстрапа (p-3, gap-3) и его типографику разом. Размеры внутри виджетов заданы в px и не меняются. */ @media (min-width: 1401px) { html.fl-compact { font-size: 14px; } /* Числовые колонки в 4-колоночном режиме: фиксированные 96px не влезают в узкий трек. Только здесь: ниже 1401px компакт даёт 2 колонки, а на телефоне у этих строк своя карточная раскладка, которую эти правила перебили бы. */ html.fl-compact .fl-spend-row, html.fl-compact .fl-alloc-row { grid-template-columns: minmax(70px, 1.2fr) 1fr 80px 80px; } html.fl-compact .fl-inc-row { grid-template-columns: minmax(70px, 1fr) 80px 80px; } html.fl-compact .fl-inflow-row { grid-template-columns: minmax(40px, 1fr) 74px 74px 74px; gap: 6px; } html.fl-compact .fl-plan-row { grid-template-columns: 16px minmax(0, 1fr) 46px 86px 40px; } /* Вертикальный ритм строк — главный источник высоты дашборда: в логе таких строк два десятка подряд. Сжимаем отступы и на полпункта шрифт: ближе к плотности книги. */ html.fl-compact .fl-op-row, html.fl-compact .fl-spend-row { padding-top: 4px; padding-bottom: 4px; } html.fl-compact .fl-budget-row, html.fl-compact .fl-inc-row, html.fl-compact .fl-alloc-row, html.fl-compact .fl-plan-row { padding-top: 3px; padding-bottom: 3px; } html.fl-compact .fl-goal-row { padding-top: 5px; padding-bottom: 5px; } html.fl-compact .fl-acc-card { padding: 5px 10px; } html.fl-compact .fl-op-row, html.fl-compact .fl-budget-row, html.fl-compact .fl-inc-row, html.fl-compact .fl-plan-row, html.fl-compact .fl-goal-row { font-size: 12.5px; } html.fl-compact .fl-spend-row, html.fl-compact .fl-alloc-row { font-size: 12px; } /* Шапки колонок используют те же классы строк, поэтому правила выше перебивали их собственный мелкий кегль — подписи переставали влезать в числовые колонки и наезжали друг на друга. Возвращаем размер шапки явно, ПОСЛЕ правил строк. */ html.fl-compact .fl-spend-head { font-size: 10px; } } @media (max-width: 1400px) { html.fl-compact .fl-dash-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 900px) { html.fl-compact .fl-dash-grid3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .fl-settings-grid, .fl-categories-grid { grid-template-columns: minmax(0, 1fr); } } /* ===== Этап 7: мастер нового периода (дизайн 3c) ===== */ .fl-wiz-steps { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; } .fl-wiz-step { display: flex; align-items: center; gap: 7px; color: #9aa6b2; user-select: none; } .fl-wiz-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--fl-soft); color: var(--fl-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; } .fl-wiz-step.active { color: var(--fl-text); } .fl-wiz-step.active .fl-wiz-dot { background: var(--fl-contrast); color: var(--fl-contrast-text); } .fl-wiz-step.done { color: var(--fl-accent); cursor: pointer; } .fl-wiz-step.done .fl-wiz-dot { background: var(--fl-accent); color: #fff; } .fl-wiz-line { flex: 1; height: 2px; background: var(--fl-line); } .fl-wiz-band { background: #f5f8f6; border: 1px solid #e8efe9; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--fl-text2); } .fl-wiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; } @media (max-width: 800px) { .fl-wiz-grid { grid-template-columns: 1fr; } } .fl-wiz-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--fl-line); font-size: 13px; } .fl-acc-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 auto; } /* ===== Этап 8: сворачивание виджетов ===== */ .fl-collapse-btn { cursor: pointer; color: #b3bcc4; margin-left: 7px; font-size: 11px; display: inline-block; user-select: none; transition: transform .15s; } /* Кликабельный заголовок виджета (сворачивание) — класс вешает initDashCollapse */ .fl-collapse-title { cursor: pointer; user-select: none; } .fl-collapse-btn:hover { color: var(--fl-text); } .fl-card.fl-collapsed > :not(:first-child) { display: none; } .fl-card.fl-collapsed > :first-child { padding-bottom: 16px !important; } .fl-card.fl-collapsed .fl-collapse-btn { transform: rotate(-90deg); } /* ===== Кастомный выпадающий список (select.js) поверх нативных