110 lines
5.8 KiB
CSS
110 lines
5.8 KiB
CSS
/* Дашборд розничных продаж — только сетка и отступы; цветов — токены kt-ai */
|
||
|
||
.kt-ai-topbar {
|
||
position: sticky; top: 0; z-index: var(--kt-ai-z-sticky);
|
||
display: flex; align-items: center; gap: var(--kt-ai-space-6);
|
||
height: 56px; padding: 0 var(--kt-ai-space-8);
|
||
background: var(--kt-ai-bg-elevated);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
}
|
||
.kt-ai-topbar .crumb { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-faint); }
|
||
.kt-ai-topbar .crumb strong { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-semibold); }
|
||
|
||
.kt-ai-page-title-block { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
|
||
.kt-ai-page-title-block .kt-ai-sub { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); }
|
||
|
||
.kt-ai-toolbar { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; }
|
||
|
||
.kt-ai-kpi-strip { padding: 0; }
|
||
.kt-ai-kpi-strip .kt-ai-kpi { flex: 1 1 130px; }
|
||
.kt-ai-kpi .value[data-revisit] {
|
||
cursor: pointer; text-decoration: underline dotted;
|
||
text-underline-offset: 3px; min-width: 0; overflow: hidden;
|
||
text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
|
||
.row-go { color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-base); }
|
||
.kt-ai-table tr[data-city]:hover { background: var(--kt-ai-bg-soft); }
|
||
|
||
/* ---- города: строка с мини-баром доли ---- */
|
||
.city-cell { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
|
||
.city-name { font-weight: var(--kt-ai-weight-medium); font-size: var(--kt-ai-text-sm); }
|
||
.city-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
.share-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 110px; }
|
||
.share-value { font-variant-numeric: tabular-nums; font-size: var(--kt-ai-text-sm); }
|
||
.share-track {
|
||
display: block;
|
||
width: 100%; height: 4px; border-radius: var(--kt-ai-radius-full);
|
||
background: var(--kt-ai-bg-active); overflow: hidden;
|
||
}
|
||
.share-fill { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-chart-blue); }
|
||
|
||
.growth-up { color: var(--kt-ai-status-ok-fg); }
|
||
.growth-down { color: var(--kt-ai-status-risk-fg); }
|
||
.growth-flat { color: var(--kt-ai-fg-muted); }
|
||
|
||
/* ---- фильтры-чипы ---- */
|
||
.kt-ai-filterbar { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; align-items: center; }
|
||
.chips-row { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
|
||
|
||
/* ---- график: столбцы ---- */
|
||
.kt-ai-chart-card {
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-2xl);
|
||
background: var(--kt-ai-card-bg);
|
||
padding: var(--kt-ai-pad-card);
|
||
}
|
||
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
|
||
.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); margin-top: 2px; }
|
||
.cc-bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
|
||
.cc-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
|
||
.cc-bar > i {
|
||
display: block; width: 100%; min-height: 3px;
|
||
background: var(--cc-color, var(--kt-ai-chart-blue));
|
||
border-radius: 2px; opacity: .85;
|
||
transition: opacity var(--kt-ai-dur-fast);
|
||
}
|
||
.cc-bar:hover > i, .cc-bar[data-kt-tip-open="true"] > i { opacity: 1; }
|
||
.cc-axis { display: flex; gap: 6px; margin-top: var(--kt-ai-space-3); }
|
||
.cc-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
||
|
||
/* ---- сетка карточек на детально-городском экране ---- */
|
||
.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-stack-block); align-items: start; }
|
||
.city-grid .kt-ai-chart-card, .city-grid .kt-ai-card { margin-bottom: 0; }
|
||
|
||
/* ---- товарная матрица ---- */
|
||
.cat-cell { display: flex; flex-direction: column; gap: 2px; }
|
||
.cat-name { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
||
.cat-share { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
|
||
/* ---- вывод ---- */
|
||
.kt-ai-conclusion { margin-top: 0; padding-top: var(--kt-ai-space-6); }
|
||
.kt-ai-conclusion .text { font-size: var(--kt-ai-text-sm); line-height: 1.6; color: var(--kt-ai-fg-muted); max-width: 78ch; }
|
||
.kt-ai-conclusion .text + .text { margin-top: var(--kt-ai-space-4); }
|
||
|
||
/* мини-бар доли позиции в «Топе позиций» */
|
||
.cta-bar { display: block; height: 6px; margin-top: 6px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-active); overflow: hidden; }
|
||
.cta-bar span { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--cc-color, var(--kt-ai-chart-green)); }
|
||
|
||
/* ---- пустое состояние ---- */
|
||
.kt-ai-empty { padding: var(--kt-ai-space-11) var(--kt-ai-space-8); text-align: center; color: var(--kt-ai-fg-muted); }
|
||
.kt-ai-empty .kt-icon { margin-bottom: var(--kt-ai-space-4); }
|
||
.kt-ai-empty p { margin: 0 0 var(--kt-ai-space-4); }
|
||
|
||
/* ---- мобильная ширина ---- */
|
||
@media (max-width: 639.98px) {
|
||
.kt-ai-topbar { padding: 0 var(--kt-ai-space-6); }
|
||
.kt-ai-work-column { padding: var(--kt-ai-space-8) var(--kt-ai-space-5) var(--kt-ai-space-10); }
|
||
.kt-ai-toolbar { flex-direction: column; align-items: stretch; }
|
||
.kt-ai-toolbar .kt-ai-segmented { width: 100%; }
|
||
.kt-ai-toolbar .kt-ai-segmented .seg { flex: 1 1 auto; text-align: center; }
|
||
.city-grid { grid-template-columns: 1fr; }
|
||
.cc-bars { gap: 4px; }
|
||
.cc-axis { gap: 4px; }
|
||
|
||
/* на мобильном таблица городов уезжает в горизонтальный скролл */
|
||
.kt-ai-table-wrap { overflow-x: auto; }
|
||
.kt-ai-table { min-width: 560px; }
|
||
}
|