/* * Стандарт интерфейса Dashboard (docs/ui-guidelines.md, разделы 15-21). * Подключается отдельно и действует ТОЛЬКО на страницах с . * Страницы без этой метки остаются в прежнем виде, поэтому страницы переводятся и выкладываются по одной. * Когда все страницы будут переведены, правила переносятся в dashboard-ui.css, а префикс .ds снимается. */ .dashboard-icon { width: var(--dashboard-icon-size-md, 16px); height: var(--dashboard-icon-size-md, 16px); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: var(--dashboard-icon-stroke, 1.5); stroke-linecap: round; stroke-linejoin: round; } [data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .dashboard-icon-sm .dashboard-icon, .dashboard-icon.dashboard-icon-sm { width: var(--dashboard-icon-size-sm, 14px); height: var(--dashboard-icon-size-sm, 14px); } .dashboard-icon-lg .dashboard-icon, .dashboard-icon.dashboard-icon-lg { width: var(--dashboard-icon-size-lg, 20px); height: var(--dashboard-icon-size-lg, 20px); } .dashboard-icon-button-danger:hover, .dashboard-icon-button-danger:focus-visible { background: #fdeeee; border-color: rgba(208, 68, 68, .35); color: var(--dashboard-danger-color); } /* Числовой стандарт интерфейса (docs/ui-guidelines.md, раздел 20). Эталон: 100% браузерного зума выглядит как прежние 65%; основной текст не мельче 12 px. */ :root { --dashboard-fs-xs: 11px; --dashboard-fs-sm: 12px; /* основной текст, таблицы, кнопки, поля */ --dashboard-fs-md: 13px; /* подзаголовки, описания страницы */ --dashboard-fs-lg: 15px; /* заголовок блока/карточки */ --dashboard-fs-xl: 18px; /* заголовок раздела, логотип */ --dashboard-fs-title: 22px; /* заголовок страницы (h1) */ --dashboard-line-height: 1.35; --dashboard-sp-1: 4px; --dashboard-sp-2: 6px; --dashboard-sp-3: 8px; --dashboard-sp-4: 12px; --dashboard-sp-5: 16px; --dashboard-sp-6: 24px; --dashboard-control-h: 30px; /* кнопки, поля, селекты */ --dashboard-control-h-sm: 26px; /* компактные кнопки в таблицах */ --dashboard-control-pad-x: 12px; --dashboard-radius-control: 8px; --dashboard-radius-card: 12px; --dashboard-icon-size-sm: 14px; --dashboard-icon-size-md: 16px; --dashboard-icon-size-lg: 20px; --dashboard-icon-stroke: 1.5; --dashboard-icon-btn: 30px; --dashboard-icon-btn-sm: 26px; --dashboard-primary-hover: #47a96c; } .ds .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dashboard-sp-2); min-height: var(--dashboard-control-h); border: 1px solid var(--dashboard-border-color); border-radius: var(--dashboard-radius-control); padding: 0 var(--dashboard-control-pad-x); background: var(--dashboard-card-bg); color: var(--dashboard-text-color); font: inherit; font-size: var(--dashboard-fs-sm); font-weight: 700; line-height: var(--dashboard-line-height); text-decoration: none; white-space: nowrap; cursor: pointer; } .ds .btn-sm { min-height: var(--dashboard-control-h-sm); padding: 0 10px; } .ds .btn:hover:not(:disabled), .ds .btn:focus-visible { border-color: #bfe4c9; background: #f4fbf4; } .ds .btn-primary { border-color: var(--dashboard-color-primary); background: var(--dashboard-color-primary); color: #083b22; box-shadow: none; } .ds .btn-primary:hover:not(:disabled), .ds .btn-primary:focus-visible { border-color: var(--dashboard-primary-hover); background: var(--dashboard-primary-hover); } .ds .btn-secondary { border-color: var(--dashboard-border-color); background: var(--dashboard-card-bg); color: var(--dashboard-text-color); box-shadow: none; } .ds .btn-danger { border-color: rgba(208, 68, 68, .28); background: var(--dashboard-card-bg); color: var(--dashboard-danger-color); box-shadow: none; } .ds .btn-danger:hover:not(:disabled), .ds .btn-danger:focus-visible { border-color: rgba(208, 68, 68, .5); background: #fdeeee; } .ds .btn:disabled { cursor: not-allowed; opacity: .55; } .ds .icon-button { width: var(--dashboard-icon-btn); min-width: var(--dashboard-icon-btn); height: var(--dashboard-icon-btn); min-height: var(--dashboard-icon-btn); border-radius: var(--dashboard-radius-control); } .ds .icon-button svg { width: var(--dashboard-icon-size-md); height: var(--dashboard-icon-size-md); } .ds .icon-button-sm { width: var(--dashboard-icon-btn-sm); min-width: var(--dashboard-icon-btn-sm); height: var(--dashboard-icon-btn-sm); min-height: var(--dashboard-icon-btn-sm); } /* Единый стандарт таблиц (docs/ui-guidelines.md, раздел 18). Размеры меняются только токенами. */ :root { --dashboard-table-font-size: var(--dashboard-fs-sm); --dashboard-table-head-bg: #eef8ef; --dashboard-table-head-color: #496455; --dashboard-table-head-weight: 700; --dashboard-table-cell-pad-y: 6px; --dashboard-table-cell-pad-x: 8px; --dashboard-table-hover-bg: #f4fbf4; --dashboard-table-min-width: 0; --dashboard-table-radius: var(--dashboard-radius-card); } .ds .dashboard-table-wrap { overflow-x: auto; border: 1px solid var(--dashboard-border-color); border-radius: var(--dashboard-table-radius); background: var(--dashboard-card-bg); } .ds .dashboard-table { width: 100%; min-width: var(--dashboard-table-min-width); border-collapse: collapse; background: var(--dashboard-card-bg); color: var(--dashboard-text-color); font-size: var(--dashboard-table-font-size); line-height: 1.35; } .ds .dashboard-table th, .ds .dashboard-table td { padding: var(--dashboard-table-cell-pad-y) var(--dashboard-table-cell-pad-x); border-bottom: 1px solid var(--dashboard-border-color); text-align: left; vertical-align: middle; } .ds .dashboard-table th { background: var(--dashboard-table-head-bg); color: var(--dashboard-table-head-color); font-weight: var(--dashboard-table-head-weight); text-transform: none; letter-spacing: 0; white-space: nowrap; } .ds .dashboard-table tbody tr:hover { background: var(--dashboard-table-hover-bg); } .ds .dashboard-table tbody tr:last-child td { border-bottom: 0; } /* числа и суммы справа, действия справа */ .ds .dashboard-table .num, .ds .dashboard-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .ds .dashboard-table .actions, .ds .dashboard-table th.actions { text-align: right; white-space: nowrap; } .ds .dashboard-table .actions > * + * { margin-left: var(--dashboard-space-sm); } /* плотный вариант для больших данных */ .ds .dashboard-table.is-dense { --dashboard-table-cell-pad-y: 4px; --dashboard-table-cell-pad-x: 6px; --dashboard-table-font-size: var(--dashboard-fs-xs); } /* пустое состояние: что здесь будет и что делать дальше */ .ds .dashboard-table-empty { padding: 28px 16px; text-align: center; color: var(--dashboard-muted-text-color); } .ds .form-field { display: grid; gap: var(--dashboard-sp-1); } .ds .form-label, .ds label.form-label { display: block; margin-bottom: var(--dashboard-sp-1); color: var(--dashboard-muted-text-color); font-size: var(--dashboard-fs-sm); font-weight: 600; line-height: 1.25; } .ds .form-label .info-tooltip, .ds label .info-tooltip { vertical-align: middle; transform: translateY(-1px); } .ds .form-input { box-sizing: border-box; width: 100%; min-height: var(--dashboard-control-h); border: 1px solid var(--dashboard-border-color); border-radius: var(--dashboard-radius-control); padding: 0 10px; background: var(--dashboard-card-bg); color: var(--dashboard-text-color); font: inherit; font-size: var(--dashboard-fs-sm); } .ds textarea.form-input { padding: var(--dashboard-sp-2) 10px; min-height: 60px; resize: vertical; } .ds .form-input:focus-visible { outline: none; border-color: var(--dashboard-color-primary); box-shadow: 0 0 0 2px rgba(82, 185, 121, .2); } .ds .form-input::placeholder { color: #94a39a; } /* вкладки: та же кнопка, активная светло-зелёная */ .ds .btn.active, .ds .btn.is-active { border-color: #65b985; background: #e8f7ea; color: #083b22; } /* ---- панели-карточки (docs/ui-guidelines.md, раздел 21). Старый .dashboard-card (без разделителя шапки) остаётся у страниц, которые ещё не переведены; при переводе их на стандарт заменить на .dashboard-panel. ---- */ .ds .dashboard-panel { overflow: hidden; border: 1px solid var(--dashboard-border-color); border-radius: var(--dashboard-radius-card); background: var(--dashboard-panel-bg); box-shadow: 0 1px 2px rgba(20, 60, 35, .04), 0 6px 18px rgba(20, 60, 35, .04); } .ds .dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--dashboard-sp-4); padding: var(--dashboard-sp-4) var(--dashboard-sp-5); border-bottom: 1px solid var(--dashboard-border-color); background: linear-gradient(180deg, #fbfefb, #f6fbf6); } .ds .dashboard-panel-header:last-child { border-bottom: 0; } .ds .dashboard-panel-title { display: flex; align-items: center; gap: var(--dashboard-sp-3); margin: 0; font-size: var(--dashboard-fs-lg); font-weight: 700; line-height: 1.25; } .ds .dashboard-panel-title .dashboard-icon-chip { flex: 0 0 auto; } .ds .dashboard-panel-subtitle { margin: 3px 0 0; color: var(--dashboard-muted-text-color); font-size: var(--dashboard-fs-sm); } .ds .dashboard-panel-body { padding: var(--dashboard-sp-5); } .ds .dashboard-panel-body--flush { padding: 0; } /* маленькая зелёная плашка с иконкой перед заголовком */ .ds .dashboard-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #e8f7ea; color: var(--dashboard-color-primary-strong); } /* ---- заголовок страницы ---- */ .ds .dashboard-page-title { display: flex; align-items: center; gap: var(--dashboard-sp-4); } .ds .dashboard-page-title h1 { margin: 0; font-size: var(--dashboard-fs-title); line-height: 1.2; } .ds .dashboard-page-title .dashboard-icon-chip { width: 34px; height: 34px; border-radius: 10px; } .ds .dashboard-page-title .dashboard-icon-chip .dashboard-icon { width: var(--dashboard-icon-size-lg); height: var(--dashboard-icon-size-lg); } .ds .dashboard-page-lead { margin: var(--dashboard-sp-2) 0 0; color: var(--dashboard-muted-text-color); font-size: var(--dashboard-fs-md); } /* ---- бейджи статусов ---- */ .ds .dashboard-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #eef2ef; color: #52625a; font-size: var(--dashboard-fs-xs); font-weight: 700; line-height: 1.5; white-space: nowrap; } .ds .dashboard-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; } .ds .dashboard-badge.is-success { background: #e4f6ea; color: #17733f; } .ds .dashboard-badge.is-warning { background: #fdf3d8; color: #8a5a06; } .ds .dashboard-badge.is-danger { background: #fdeaea; color: #b42323; } .ds .dashboard-badge.is-info { background: #e6effb; color: #1d4f91; } .ds .dashboard-badge.is-neutral { background: #eef2ef; color: #52625a; } /* ---- пустое состояние ---- */ .ds .dashboard-empty { display: grid; justify-items: center; gap: var(--dashboard-sp-2); padding: 28px var(--dashboard-sp-5); text-align: center; color: var(--dashboard-muted-text-color); } /* внутри прокручиваемой таблицы пустое состояние остаётся в видимой части */ .ds .dashboard-table td > .dashboard-empty { position: sticky; left: 0; box-sizing: border-box; width: min(100%, calc(100vw - 64px)); margin: 0; } .ds .dashboard-table td:has(> .dashboard-empty) { padding: 0; } .ds .dashboard-empty .dashboard-icon-chip { width: 40px; height: 40px; border-radius: 12px; } .ds .dashboard-empty .dashboard-icon-chip .dashboard-icon { width: var(--dashboard-icon-size-lg); height: var(--dashboard-icon-size-lg); } .ds .dashboard-empty strong { color: var(--dashboard-text-color); font-size: var(--dashboard-fs-md); } .ds .dashboard-empty p { margin: 0; font-size: var(--dashboard-fs-sm); } /* ---- плавные переходы ---- */ .ds .btn, .ds .icon-button, .ds .dashboard-table tbody tr, .ds .form-input { transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease; } @media (prefers-reduced-motion: reduce) { .ds .btn, .ds .icon-button, .ds .dashboard-table tbody tr, .ds .form-input { transition: none; } } /* ---- модальное окно (docs/ui-guidelines.md, раздел 6) ---- */ .ds .dashboard-dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--dashboard-sp-6); background: rgba(16, 24, 40, .48); } .ds .dashboard-dialog-backdrop[hidden] { display: none; } .ds .dashboard-dialog { width: min(680px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--dashboard-border-color); border-radius: var(--dashboard-radius-card); background: var(--dashboard-card-bg); box-shadow: 0 24px 72px rgba(16, 24, 40, .25); } .ds .dashboard-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dashboard-sp-5); padding: var(--dashboard-sp-4) var(--dashboard-sp-5); border-bottom: 1px solid var(--dashboard-border-color); background: linear-gradient(180deg, #fbfefb, #f6fbf6); } .ds .dashboard-dialog-head h2 { margin: 0; font-size: var(--dashboard-fs-lg); } .ds .dashboard-dialog-body { padding: var(--dashboard-sp-5); } .ds .dashboard-dialog-actions { display: flex; justify-content: flex-end; gap: var(--dashboard-sp-3); } /* ---- подпись поля, оборачивающая поле ---- */ .ds label.form-field { display: grid; gap: var(--dashboard-sp-1); color: var(--dashboard-muted-text-color); font-size: var(--dashboard-fs-sm); font-weight: 600; line-height: 1.25; } .ds .form-input { font-weight: 400; } .ds textarea.form-input { min-height: 72px; } /* ссылки-кнопки: размер считается вместе с рамкой, как у button */ .ds .btn { box-sizing: border-box; } /* в таблице жирным выделяется только название строки (полужирный 600), остальное обычным весом */ .ds .dashboard-table td strong, .ds .dashboard-table td b { font-weight: 600; } /* третичная кнопка: только текст, без рамки и заливки (Отмена, Сбросить) */ .ds .btn.btn-ghost { border-color: transparent; background: transparent; color: var(--dashboard-muted-text-color); box-shadow: none; } .ds .btn.btn-ghost:hover:not(:disabled), .ds .btn.btn-ghost:focus-visible { background: #f1f6f2; border-color: transparent; color: var(--dashboard-text-color); } /* ---- главная кнопка: глубокий зелёный, белый текст, лёгкая тень (решение Максима, 2026-09-25) ---- */ .ds .btn.btn-primary { border-color: #236a43; background: #2a7a4f; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 60, 35, .25); } .ds .btn.btn-primary:hover:not(:disabled) { border-color: #1d5a38; background: #236a43; } .ds .btn.btn-primary:active:not(:disabled) { background: #1d5a38; box-shadow: none; } .ds .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(42, 122, 79, .35); } .ds .btn:disabled, .ds .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; } /* опасное действие: красный текст; красная заливка только в окне подтверждения */ .ds .btn.btn-danger-solid { border-color: #b93a3a; background: #d04444; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(120, 30, 30, .25); } .ds .btn.btn-danger-solid:hover:not(:disabled) { background: #b93a3a; } /* иконка удаления в строке: спокойная, краснеет при наведении (не красная постоянно) */ .ds .icon-button.icon-button-danger:hover, .ds .icon-button.icon-button-danger:focus-visible { border-color: rgba(208, 68, 68, .4); background: #fdeeee; color: var(--dashboard-danger-color); } /* сохранение: кнопка занята */ .ds .btn.is-loading { position: relative; pointer-events: none; opacity: .85; } .ds .btn.is-loading::before { content: ""; width: 12px; height: 12px; margin-right: 6px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: dashboard-spin .7s linear infinite; } .ds .btn.btn-secondary.is-loading::before, .ds .btn.btn-ghost.is-loading::before { border-color: rgba(20, 37, 27, .25); border-top-color: var(--dashboard-text-color); } @keyframes dashboard-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ds .btn.is-loading::before { animation: none; } } /* ссылки в таблицах и карточках: цвет портала, подчёркивание только при наведении (не синие браузерные) */ .ds .dashboard-table td a:not(.btn), .ds .dashboard-panel-subtitle a, .ds .dashboard-panel-body p a:not(.btn) { color: var(--dashboard-color-primary-strong); text-decoration: none; } .ds .dashboard-table td a:not(.btn):hover, .ds .dashboard-panel-subtitle a:hover, .ds .dashboard-panel-body p a:not(.btn):hover { text-decoration: underline; } .ds .dashboard-empty[hidden] { display: none; }