/* Дизайн-токены в стиле http://tech:8012/ поверх Bootstrap 5.3. Тёмная тема — через data-bs-theme на (переключатель в шапке). */ :root { --surface-1: #fcfcfb; --page-plane: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --border: rgba(11, 11, 11, 0.10); --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b; /* Переопределения Bootstrap */ --bs-body-bg: var(--page-plane); --bs-body-color: var(--text-primary); --bs-border-color: var(--border); --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } [data-bs-theme="dark"] { --surface-1: #1a1a19; --page-plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --border: rgba(255, 255, 255, 0.10); --bs-body-bg: var(--page-plane); --bs-body-color: var(--text-primary); --bs-border-color: var(--border); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--text-secondary); --bs-tertiary-bg: var(--surface-1); } body { background: var(--page-plane); } /* Карточки и «секции» */ .card { background: var(--surface-1); border-color: var(--border); border-radius: var(--bs-border-radius); } .card-stat .display-6 { font-weight: 600; font-variant-numeric: tabular-nums; } /* Таблицы: плоские, тонкие линии, приглушённая шапка как в референсе */ .table { --bs-table-bg: transparent; --bs-table-border-color: var(--gridline); } .table > :not(caption) > * > * { border-bottom-color: var(--gridline); } .table thead th { text-transform: uppercase; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-muted); border-bottom: 1px solid var(--gridline); } table.table-sm td, table.table-sm th { vertical-align: middle; } /* Числа — моноширинными цифрами, ровными столбиками */ .num, .text-end { font-variant-numeric: tabular-nums; } /* Обёртка-панель для таблицы (вид «секции» из референса) */ .panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--bs-border-radius); padding: 16px 16px 4px; } /* Панель-«шапка» над таблицей: поля строки под курсором */ .detail-head { position: sticky; top: 0; z-index: 3; padding: 12px 16px; } .detail-head .dh-title { font-weight: 600; font-size: 15px; margin-bottom: 8px; } .detail-head .dh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; font-size: 13px; } .detail-head .dh-grid > div { display: flex; gap: 8px; min-width: 0; } .detail-head .dh-grid > div > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-head .dh-label { flex: none; color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.02em; align-self: center; } /* Таблица анализа: метрики 1:1 с образцом + залипающая шапка */ .table-ref { font-size: 13px; } .table-ref thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-1); padding: 10px 10px 8px; vertical-align: bottom; white-space: nowrap; } .table-ref tbody { user-select: none; } /* двойной клик открывает акт, а не выделяет текст */ .table-ref tbody td { padding: 10px; vertical-align: top; } .table-ref td.sum { white-space: nowrap; } /* сумма всегда в одну строку */ .table-ref .row-meta { margin-top: 2px; line-height: 1.35; } .table-ref tbody tr { cursor: pointer; } /* Моноширинный текст (URL, хосты, имена сущностей) */ .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; } /* Результат «Теста» базы: список имён сущностей */ .entity-list { max-height: 320px; overflow: auto; white-space: pre; border: 1px solid var(--border); border-radius: var(--bs-border-radius-sm); padding: 8px 10px; background: var(--page-plane); } /* Курсор-строка (перемещается стрелками) */ .row-cursor > td { background: rgba(42, 120, 214, 0.10) !important; } [data-bs-theme="dark"] .row-cursor > td { background: rgba(57, 135, 229, 0.18) !important; } /* Строки статусов в таблице анализа */ .status-candidate_off { background: rgba(250, 178, 25, 0.12) !important; } .status-disabled td { color: var(--text-muted); } .status-disabled .company-name { text-decoration: line-through; } /* Кликабельный статус: кнопка в виде «пилюли» */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; white-space: nowrap; } .status-pill:hover { border-color: var(--text-muted); } .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .status-pill.is-active { color: var(--status-good); } .status-pill.is-active .dot { background: var(--status-good); } .status-pill.is-candidate{ color: var(--status-warning); } .status-pill.is-candidate .dot { background: var(--status-warning); } .status-pill.is-disabled { color: var(--text-muted); } .status-pill.is-disabled .dot { background: var(--text-muted); } /* Кликабельная задолженность: раскрывает образующие её документы */ .debt-link { cursor: pointer; } .debt-link > span { text-decoration: underline dotted; text-underline-offset: 2px; } /* Даты образующих красную задолженность документов — столбиком под суммой */ .debt-dates { margin-top: 4px; line-height: 1.3; } .debt-dates span { display: block; font-size: .78rem; color: var(--text-muted); } /* Позиции документа задолженности: разворот по двойному клику в модалке */ .debt-doc { cursor: pointer; } .debt-pos-wrap { background: rgba(128, 128, 128, .08); padding: 2px 8px; } .debt-pos-table { font-size: .85rem; } .debt-pos-table th { font-weight: 600; } /* Страница «Задолженность»: Клиент → Контрагент → Договор → документы */ .arr-client { border-left: 3px solid var(--status-warning, #d9a406); } .arr-ctr { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px; font-weight: 600; } .arr-contract { margin-top: 6px; } .arr-docs { font-size: .9rem; } .arr-docs td { padding: 4px 8px; vertical-align: top; }