221 lines
5.8 KiB
CSS
221 lines
5.8 KiB
CSS
/* Дашборд розничных продаж — только сетка, отступы и мелкие детали.
|
||
Основные стили — из дизайн-системы (kt-ai-*) и vibe-theme.css. */
|
||
|
||
/* Шапка приложения (topbar) */
|
||
.app-shell {
|
||
min-height: 100dvh;
|
||
background: var(--kt-ai-bg);
|
||
color: var(--kt-ai-fg);
|
||
font-family: var(--kt-ai-font-sans);
|
||
font-size: var(--kt-ai-text-sm);
|
||
line-height: var(--kt-ai-leading-normal);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.app-topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: var(--kt-ai-z-sticky);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-4);
|
||
padding: var(--kt-ai-space-4) var(--kt-ai-space-8);
|
||
background: var(--kt-ai-bg-elevated);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
}
|
||
.app-topbar .brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-4);
|
||
min-width: 0;
|
||
}
|
||
.app-topbar .brand img {
|
||
height: 26px;
|
||
width: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
.app-topbar .brand .nm {
|
||
font-size: var(--kt-ai-text-md);
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
letter-spacing: -.01em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.app-topbar .spacer { flex: 1; }
|
||
|
||
.app-content {
|
||
max-width: var(--kt-ai-content-wide);
|
||
margin: 0 auto;
|
||
padding: var(--kt-ai-space-8);
|
||
}
|
||
|
||
/* Панель фильтров */
|
||
.filterbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
gap: var(--kt-ai-space-5);
|
||
margin-bottom: var(--kt-ai-space-7);
|
||
}
|
||
.filterbar .kt-ai-field {
|
||
margin-bottom: 0;
|
||
min-width: 130px;
|
||
}
|
||
.filterbar .field-period { flex: 1 1 170px; max-width: 220px; }
|
||
.filterbar .field-group { flex: 1 1 220px; max-width: 300px; }
|
||
.filterbar .field-search { flex: 2 1 260px; }
|
||
|
||
/* Кастомная ячейка KPI — карточкой с очень мягкой тенью (стандартный стиль) */
|
||
.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi {
|
||
padding: var(--kt-ai-space-5);
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
background: var(--kt-ai-bg-elevated);
|
||
box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
|
||
}
|
||
|
||
/* Тона значений в KPI */
|
||
.value.up { color: var(--kt-ai-status-ok-fg); }
|
||
.value.down { color: var(--kt-ai-status-risk-fg); }
|
||
|
||
/* Тона в таблице */
|
||
.tone { display: inline-block; margin-left: var(--kt-ai-space-2); font-size: var(--kt-ai-text-2xs); }
|
||
.tone.ok { color: var(--kt-ai-status-ok-fg); }
|
||
.tone.warn { color: var(--kt-ai-status-warn-fg); }
|
||
.tone.risk { color: var(--kt-ai-status-risk-fg); }
|
||
.tone.up { color: var(--kt-ai-status-ok-fg); }
|
||
.tone.down { color: var(--kt-ai-status-risk-fg); }
|
||
.tone.flat { color: var(--kt-ai-fg-faint); }
|
||
td .tone { margin-left: var(--kt-ai-space-2); }
|
||
|
||
/* Сетка экранов */
|
||
.dash-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 320px;
|
||
gap: var(--kt-ai-space-7);
|
||
align-items: start;
|
||
}
|
||
.dash-col-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--kt-ai-space-7);
|
||
min-width: 0;
|
||
}
|
||
.dash-col-side {
|
||
position: sticky;
|
||
top: var(--kt-ai-space-8);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--kt-ai-space-6);
|
||
}
|
||
|
||
/* Заголовок карточки с деталями */
|
||
.detail-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--kt-ai-space-4);
|
||
padding: var(--kt-ai-space-5) var(--kt-ai-space-6);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
}
|
||
|
||
/* Легенда линейного графика */
|
||
.chart-legend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-5);
|
||
flex-shrink: 0;
|
||
}
|
||
.chart-legend span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-3);
|
||
font-size: var(--kt-ai-text-2xs);
|
||
color: var(--kt-ai-fg-muted);
|
||
white-space: nowrap;
|
||
}
|
||
.chart-legend i {
|
||
width: 10px;
|
||
height: 3px;
|
||
border-radius: 2px;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Донат */
|
||
.donut-flex {
|
||
display: flex;
|
||
gap: var(--kt-ai-space-6);
|
||
align-items: center;
|
||
}
|
||
.donut-legend { flex: 1; min-width: 0; }
|
||
.donut-legend-row {
|
||
display: grid;
|
||
grid-template-columns: 12px minmax(0, 1fr) auto 44px;
|
||
gap: var(--kt-ai-space-3);
|
||
align-items: baseline;
|
||
padding: 4px 0;
|
||
font-size: var(--kt-ai-text-xs);
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
}
|
||
.donut-legend-row:last-child { border-bottom: none; }
|
||
.donut-legend-row .dot {
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 3px;
|
||
align-self: center;
|
||
}
|
||
.donut-legend-row .nm {
|
||
font-size: var(--kt-ai-text-xs);
|
||
color: var(--kt-ai-fg-muted);
|
||
line-height: 1.3;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.donut-legend-row .val {
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.donut-legend-row .pct {
|
||
text-align: right;
|
||
color: var(--kt-ai-fg-faint);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Подвал */
|
||
.app-foot {
|
||
max-width: var(--kt-ai-content-wide);
|
||
margin: 0 auto;
|
||
padding: var(--kt-ai-space-6) var(--kt-ai-space-8) var(--kt-ai-space-9);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-4);
|
||
font-size: var(--kt-ai-text-2xs);
|
||
color: var(--kt-ai-fg-faint);
|
||
}
|
||
.app-foot .spacer { flex: 1; }
|
||
|
||
/* ---------- Адаптив ---------- */
|
||
|
||
@media (max-width: 1080px) {
|
||
.dash-grid { grid-template-columns: minmax(0, 1fr); }
|
||
.dash-col-side {
|
||
position: static;
|
||
order: -1;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.app-topbar { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); }
|
||
.app-content { padding: var(--kt-ai-space-5); padding-top: var(--kt-ai-space-6); }
|
||
.filterbar { gap: var(--kt-ai-space-4); }
|
||
.filterbar .field-period { flex: 1 1 42%; max-width: none; }
|
||
.filterbar .field-group { flex: 1 1 55%; max-width: none; }
|
||
.filterbar .field-search { flex: 1 1 100%; }
|
||
.kt-ai-banner { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.app-topbar .brand .nm { font-size: var(--kt-ai-text-sm); }
|
||
}
|