128 lines
11 KiB
CSS
128 lines
11 KiB
CSS
/* Сбор и анализ HR-показателей — мелкая вёрстка.
|
||
Компоненты и цвета рисует ДС; здесь — сетки, ритм и узкие блоки. */
|
||
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
button.kt-ai-btn { font: inherit; }
|
||
|
||
/* --- sidebar --- */
|
||
.sb-side { display: flex; flex-direction: column; min-height: 100dvh; }
|
||
.sb-top { display: flex; align-items: center; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-6) var(--kt-ai-space-5) var(--kt-ai-space-4); }
|
||
.sb-top img { width: 24px; height: 24px; object-fit: contain; border-radius: var(--kt-ai-radius-lg); flex-shrink: 0; }
|
||
.sb-top .nm { display: flex; flex-direction: column; min-width: 0; }
|
||
.sb-top .nm b { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-semibold); line-height: 1.2; }
|
||
.sb-top .nm span { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.sb-nav { flex: 1; padding: var(--kt-ai-space-2) var(--kt-ai-space-4); }
|
||
.sb-nav .kt-ai-nav-item .lbl { display: flex; flex-direction: column; min-width: 0; }
|
||
.sb-nav .kt-ai-nav-item .lbl b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); color: inherit; }
|
||
.sb-nav .kt-ai-nav-item .lbl small { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
||
.sb-foot { padding: var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-divider); }
|
||
|
||
/* --- topbar --- */
|
||
.kt-ai-topbar .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); 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: 639.98px) { .topbar-title .sub { display: none; } }
|
||
|
||
/* --- рабочая область --- */
|
||
.view { width: 100%; max-width: var(--kt-ai-content-table); margin: 0 auto; padding: var(--kt-ai-stack-region) var(--kt-ai-stack-region) var(--kt-ai-space-11); display: flex; flex-direction: column; gap: var(--kt-ai-stack-group); }
|
||
@media (max-width: 639.98px) { .view { padding: var(--kt-ai-stack-group) var(--kt-ai-space-6) var(--kt-ai-space-10); } }
|
||
.page-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-6); flex-wrap: wrap; }
|
||
.page-head .ph-text { flex: 1; min-width: 240px; }
|
||
.page-head h1 { margin: 0; font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
||
.page-head .sub { margin-top: var(--kt-ai-space-2); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); }
|
||
.page-head .ph-spacer { flex: 1; }
|
||
@media (max-width: 639.98px) { .page-head h1 { font-size: var(--kt-ai-text-lg); } }
|
||
|
||
/* --- блоки-карточки --- */
|
||
.block-head { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin: calc(-1 * var(--kt-ai-pad-card)) calc(-1 * var(--kt-ai-pad-card)) var(--kt-ai-space-5); }
|
||
.block-title { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
|
||
.cap { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.block-head .spacer { flex: 1; }
|
||
.kt-ai-card.block { margin: 0; }
|
||
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--kt-ai-stack-block); }
|
||
.grid-2-rev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--kt-ai-stack-block); }
|
||
@media (max-width: 1023.98px) { .grid-2, .grid-2-rev { grid-template-columns: 1fr; } }
|
||
|
||
/* --- фильтры --- */
|
||
.filter-row { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; }
|
||
.filter-row .kt-ai-select-wrap { width: 190px; }
|
||
.filter-note { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.seg-ok { color: var(--kt-ai-status-ok-fg); font-weight: var(--kt-ai-weight-semibold); }
|
||
.seg-err { color: var(--kt-ai-status-risk-fg); font-weight: var(--kt-ai-weight-semibold); }
|
||
|
||
/* --- таблицы --- */
|
||
.table-wrap { max-height: 540px; overflow: auto; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
table.kt-ai-table th.num, table.kt-ai-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||
.cell-sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
tr.editing td { background: var(--kt-ai-bg-soft); }
|
||
tr.editing input { height: 28px; width: 110px; }
|
||
.cell-form { color: var(--kt-ai-status-risk-fg); }
|
||
|
||
/* --- файлы и журнал --- */
|
||
.file-list { display: flex; flex-direction: column; }
|
||
.file-list .kt-ai-row { padding: var(--kt-ai-space-4) var(--kt-ai-space-3); }
|
||
.f-ic { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-soft); color: var(--kt-ai-fg-muted); }
|
||
.f-ic .kt-icon { width: 15px; height: 15px; }
|
||
.f-name { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.f-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.log-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
|
||
.log-item { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-3) 0; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.log-item:last-child { border-bottom: none; }
|
||
.log-time { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); padding-top: 2px; flex-shrink: 0; }
|
||
.log-item p { margin: 0; font-size: var(--kt-ai-text-sm); line-height: var(--kt-ai-leading-normal); }
|
||
.log-ai { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
||
|
||
/* --- загрузка файлов --- */
|
||
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-8); border: 1px dashed var(--kt-ai-border-strong); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-soft); text-align: center; }
|
||
.dropzone .dz-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg-muted); }
|
||
.dropzone .dz-ic .kt-icon { width: 18px; height: 18px; }
|
||
.dropzone b { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
||
.dropzone .dz-hint { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
|
||
/* --- график --- */
|
||
.chart-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-stack-block); }
|
||
@media (max-width: 1023.98px) { .chart-cards { grid-template-columns: 1fr; } }
|
||
.cc-head { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-4); }
|
||
.cc-title { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
|
||
.cc-sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.cc-bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 20px; }
|
||
.cc-bars .bar { flex: 1; min-width: 14px; max-width: 28px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--kt-ai-space-2); }
|
||
.cc-bars .bar-fill { width: 100%; min-height: 3px; background: var(--kt-ai-chart-blue); border-radius: 2px 2px 0 0; }
|
||
.cc-bars .bar span { font-size: 9px; color: var(--kt-ai-fg-faint); font-variant-numeric: tabular-nums; line-height: 1.1; }
|
||
.chart-legend { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-4); }
|
||
.chart-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
|
||
|
||
/* --- заключение (анализ и проверка) --- */
|
||
.report-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--kt-ai-stack-block); align-items: start; }
|
||
@media (max-width: 1023.98px) { .report-wrap { grid-template-columns: 1fr; } }
|
||
.report-doc { background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-6); }
|
||
.report-doc h3 { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
|
||
.report-doc p { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-md); line-height: 1.65; color: var(--kt-ai-fg); }
|
||
.report-doc p:last-child { margin-bottom: 0; }
|
||
textarea.report-text { width: 100%; min-height: 420px; font-family: var(--kt-ai-font-sans); font-size: var(--kt-ai-text-md); line-height: 1.65; color: var(--kt-ai-fg); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); background: var(--kt-ai-bg-elevated); padding: var(--kt-ai-space-6); resize: vertical; }
|
||
.report-meta { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
|
||
.report-side { display: flex; flex-direction: column; gap: var(--kt-ai-stack-block); }
|
||
.hist-item { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-3) 0; border-bottom: 1px solid var(--kt-ai-divider); }
|
||
.hist-item:last-child { border-bottom: none; }
|
||
.hist-item .h-time { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); padding-top: 2px; flex-shrink: 0; }
|
||
.hist-item p { margin: 0; font-size: var(--kt-ai-text-sm); line-height: var(--kt-ai-leading-normal); }
|
||
|
||
/* --- О решении --- */
|
||
.pass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--kt-ai-stack-block); }
|
||
.pass-grid .block-head { margin-top: calc(-1 * var(--kt-ai-pad-card)); }
|
||
.kv { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: var(--kt-ai-space-3) var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); }
|
||
.kv dt { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); padding-top: 1px; }
|
||
.kv dd { margin: 0; }
|
||
.pass-grid ul, .pass-grid ol { margin: 0; padding-left: var(--kt-ai-space-6); font-size: var(--kt-ai-text-sm); display: flex; flex-direction: column; gap: var(--kt-ai-space-3); color: var(--kt-ai-fg); }
|
||
.steps-list { padding: 0; margin: 0; counter-reset: st; display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }
|
||
.steps-list li { list-style: none; display: flex; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); align-items: flex-start; }
|
||
.steps-list .kt-ai-num-badge { flex-shrink: 0; margin-top: 1px; }
|
||
|
||
/* --- мобильный sidebar --- */
|
||
.sb-scrim { display: none; }
|
||
@media (max-width: 831.98px) {
|
||
.sb-scrim.on { display: block; position: fixed; inset: 0; background: var(--kt-ai-overlay); z-index: 35; }
|
||
.sb-side { position: fixed; z-index: 40; width: 260px; max-width: 85vw; top: 0; bottom: 0; transform: translateX(-105%); transition: transform var(--kt-ai-dur-base) var(--kt-ai-ease-standard); }
|
||
.sb-side[data-open="true"] { transform: translateX(0); }
|
||
}
|