130 lines
11 KiB
CSS
130 lines
11 KiB
CSS
/* Мелки поверх ДС: сетки, таблицы, файлы, журнал, шаги. Цвета — только токены. */
|
|
a.kt-ai-btn { text-decoration: none; }
|
|
button.kt-ai-btn { font: inherit; }
|
|
.kt-icon { width: 16px; height: 16px; display: block; }
|
|
|
|
/* ---------- layout ---------- */
|
|
.sb-side { display: flex; flex-direction: column; padding: var(--kt-ai-space-5) var(--kt-ai-space-4); gap: 2px; min-height: 100dvh; }
|
|
.sb-top { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: 0 var(--kt-ai-space-2) var(--kt-ai-space-6); }
|
|
.sb-top .kt-ai-avatar { width: 26px; height: 26px; font-size: 10px; flex: 0 0 auto; }
|
|
.sb-top .nm { min-width: 0; flex: 1; display: flex; flex-direction: column; }
|
|
.sb-top .nm b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); letter-spacing: -.01em; line-height: 1.25; }
|
|
.sb-top .nm span { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
|
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
|
|
.sb-nav .kt-ai-nav-item .lbl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
|
.sb-nav .kt-ai-nav-item .lbl small { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
|
.sb-foot { margin-top: auto; padding: var(--kt-ai-space-5) var(--kt-ai-space-2) 0; }
|
|
.sb-foot .meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
|
|
|
.topbar-title { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); min-width: 0; }
|
|
.topbar-title .t { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.topbar-title .sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; }
|
|
@media (max-width: 767.98px) { .topbar-title .sub, #deadlineChip { display: none; } }
|
|
|
|
.view { width: 100%; max-width: 1200px; margin-inline: auto; padding: var(--kt-ai-space-8); }
|
|
.page-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6); }
|
|
.page-head .ph-text { flex: 1; min-width: 0; }
|
|
.page-head h1 { margin: 0; font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; line-height: 1.15; }
|
|
.page-head .sub { margin-top: var(--kt-ai-space-3); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); max-width: 68ch; }
|
|
.page-head .ph-action { flex-shrink: 0; display: flex; gap: var(--kt-ai-space-4); flex-wrap: wrap; }
|
|
@media (max-width: 639.98px) { .page-head { flex-direction: column; gap: var(--kt-ai-space-5); } }
|
|
|
|
.grid-2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: var(--kt-ai-space-6); align-items: start; }
|
|
.grid-2-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--kt-ai-space-6); align-items: start; }
|
|
@media (max-width: 1023.98px) { .grid-2, .grid-2-rev { grid-template-columns: 1fr; } }
|
|
|
|
.kt-ai-card.block { padding: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-6); }
|
|
.block-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5); flex-wrap: wrap; }
|
|
.block-head h2 { margin: 0; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
|
.block-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
|
.block-head .spacer { flex: 1; }
|
|
.block-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin: -4px 0 var(--kt-ai-space-5); }
|
|
|
|
/* ---------- фильтры ---------- */
|
|
.filter-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-5); }
|
|
.filter-row .kt-ai-select-wrap { width: 220px; }
|
|
@media (max-width: 639.98px) { .filter-row .kt-ai-select-wrap { width: 100%; } }
|
|
.filter-note { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
|
|
|
/* ---------- таблицы ---------- */
|
|
.table-wrap { max-height: 560px; overflow: auto; border-bottom: 1px solid var(--kt-ai-divider); }
|
|
.kt-ai-table .col-compact { white-space: nowrap; }
|
|
.kt-ai-table tbody tr[data-clickable="true"] { cursor: pointer; }
|
|
.cell-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.delta-neg { color: var(--kt-ai-status-risk-fg); }
|
|
.delta-pos { color: var(--kt-ai-status-ok-fg); }
|
|
.cell-orig { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
|
|
|
/* отклонения >10% */
|
|
.cell-dev { box-shadow: inset 2px 0 0 var(--kt-ai-status-risk-fg); background: var(--kt-ai-status-risk-bg); }
|
|
/* ошибка единиц */
|
|
.cell-unit-w { box-shadow: inset 2px 0 0 var(--kt-ai-status-risk-fg); background: var(--kt-ai-status-risk-bg); cursor: pointer; }
|
|
.cell-unit-fixed { box-shadow: inset 2px 0 0 var(--kt-ai-chart-green); background: var(--kt-ai-status-ok-bg); }
|
|
|
|
/* ---------- файлы ---------- */
|
|
.file-list { display: flex; flex-direction: column; gap: 2px; max-height: 430px; overflow: auto; }
|
|
.file-list .kt-ai-row { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); align-items: center; gap: var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg); }
|
|
.file-list .f-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border); color: var(--kt-ai-fg-muted); flex: 0 0 auto; }
|
|
.file-list .f-name { min-width: 0; flex: 1; font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
|
.file-list .f-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); white-space: nowrap; }
|
|
|
|
/* ---------- прогресс ---------- */
|
|
.progress-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-3); }
|
|
.progress-head .cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
|
.progress-head b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
|
|
|
|
/* ---------- журнал ---------- */
|
|
.log-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); max-height: 460px; overflow: auto; }
|
|
.log-item { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; }
|
|
.log-item .log-time { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; width: 40px; flex: 0 0 auto; padding-top: 2px; }
|
|
.log-item .log-tag { flex: 0 0 auto; margin-top: 1px; }
|
|
.log-item .log-tag .kt-ai-chip { display: inline-flex; align-items: center; }
|
|
.log-item p { margin: 0; font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.5; }
|
|
.log-item p b { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
|
|
|
|
/* ---------- stepper ---------- */
|
|
.steps { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-6); }
|
|
.step { display: inline-flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-3) var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-elevated); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-weight: var(--kt-ai-weight-medium); cursor: pointer; transition: border-color var(--kt-ai-dur-fast), color var(--kt-ai-dur-fast); }
|
|
@media (max-width: 639.98px) { .step { padding: var(--kt-ai-space-2) var(--kt-ai-space-4); } .step-sep { display: none; } }
|
|
.step:hover:not([data-disabled="true"]) { border-color: var(--kt-ai-border-strong); color: var(--kt-ai-fg); }
|
|
.step[data-cur="true"] { border-color: var(--kt-ai-primary); color: var(--kt-ai-fg); background: var(--kt-ai-primary-subtle); }
|
|
.step[data-done="true"] { color: var(--kt-ai-fg); }
|
|
.step .ic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--kt-ai-bg-active); color: var(--kt-ai-fg-muted); font-size: 10px; font-weight: var(--kt-ai-weight-bold); font-variant-numeric: tabular-nums; }
|
|
.step[data-done="true"] .ic { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-bg); }
|
|
.step[data-cur="true"] .ic { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }
|
|
.step[data-disabled="true"] { opacity: .55; cursor: default; }
|
|
.step-sep { width: 14px; height: 1px; background: var(--kt-ai-border-strong); flex: 0 0 auto; }
|
|
|
|
/* ---------- записка ---------- */
|
|
.memo { padding: var(--kt-ai-space-7); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); }
|
|
.memo h3 { margin: 0 0 var(--kt-ai-space-3); font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
|
.memo p { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); line-height: 1.65; color: var(--kt-ai-fg-muted); }
|
|
.memo p b { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
|
|
.memo .memo-meta { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-faint); margin-bottom: var(--kt-ai-space-5); }
|
|
.memo .memo-dev { font-size: var(--kt-ai-text-sm); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
|
|
|
|
/* ---------- «О решении» ---------- */
|
|
.pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kt-ai-space-6); }
|
|
.pass-card .kv { display: grid; grid-template-columns: 130px 1fr; gap: var(--kt-ai-space-3) var(--kt-ai-space-5); }
|
|
.pass-card .kv dt { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); padding-top: 2px; }
|
|
.pass-card .kv dd { margin: 0; font-size: var(--kt-ai-text-sm); line-height: 1.55; }
|
|
.pass-card ol, .pass-card ul { margin: 0; padding-left: var(--kt-ai-space-6); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.55; }
|
|
.pass-card ol li, .pass-card ul li { min-width: 0; }
|
|
|
|
/* ---------- toast ---------- */
|
|
.toast-stack { position: fixed; bottom: var(--kt-ai-space-7); right: var(--kt-ai-space-7); display: flex; flex-direction: column; gap: var(--kt-ai-space-4); z-index: 2000; }
|
|
.toast { display: flex; align-items: center; gap: var(--kt-ai-space-4); width: 340px; max-width: calc(100vw - 48px); background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-xl); box-shadow: var(--kt-ai-shadow-lg); padding: var(--kt-ai-space-4) var(--kt-ai-space-5); font-size: var(--kt-ai-text-sm); animation: tok-in .18s ease; }
|
|
.toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kt-ai-primary); flex: 0 0 auto; }
|
|
.toast[data-tone="ok"]::before { background: var(--kt-ai-status-ok-fg); }
|
|
.toast[data-tone="warn"]::before { background: var(--kt-ai-status-warn-fg); }
|
|
@keyframes tok-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
|
|
|
/* ---------- mobile ---------- */
|
|
.sb-scrim { display: none; position: fixed; inset: 0; background: var(--kt-ai-overlay); z-index: 1400; }
|
|
@media (max-width: 831.98px) {
|
|
.sb-scrim.on { display: block; }
|
|
.sb-side { position: fixed; inset: auto 0 0 auto; width: 280px; z-index: 1500; transform: translateX(100%); transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard); background: var(--kt-ai-bg-elevated); box-shadow: var(--kt-ai-shadow-lg); }
|
|
.sb-side[data-open="true"] { transform: none; }
|
|
.view { padding: var(--kt-ai-space-6) var(--kt-ai-space-5) var(--kt-ai-space-10); }
|
|
}
|