369 lines
9.9 KiB
CSS
369 lines
9.9 KiB
CSS
/* Дашборд KPI — свои стили поверх ДС. Цвета и размеры — только токены. */
|
||
/* Слайды презентации */
|
||
|
||
.kt-deck {
|
||
min-height: 100dvh;
|
||
padding-top: 74px;
|
||
padding-bottom: 70px;
|
||
}
|
||
|
||
.kt-slide {
|
||
display: none;
|
||
}
|
||
|
||
.kt-slide.is-active {
|
||
display: block;
|
||
}
|
||
|
||
.kt-slide-inner {
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: var(--kt-ai-space-8) 20px var(--kt-ai-space-12);
|
||
}
|
||
|
||
/* Заголовок слайда */
|
||
.slide-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--kt-ai-space-4);
|
||
flex-wrap: wrap;
|
||
margin-bottom: var(--kt-ai-space-2);
|
||
}
|
||
|
||
.slide-head h2 {
|
||
font-size: clamp(22px, 3vw, 30px);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.slide-sub {
|
||
color: var(--kt-ai-fg-muted);
|
||
font-size: var(--kt-ai-text-md);
|
||
margin-bottom: var(--kt-ai-space-7);
|
||
max-width: 78ch;
|
||
}
|
||
|
||
/* Кольцо NPS */
|
||
.nps-block { display: flex; align-items: center; gap: var(--kt-ai-space-5); }
|
||
|
||
.nps-donut { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
|
||
|
||
.nps-donut svg { width: 100%; height: 100%; display: block; }
|
||
|
||
.nps-donut .ring-bg { stroke: var(--kt-ai-border); }
|
||
.nps-donut .ring-fg { stroke: var(--kt-ai-brand-blue); stroke-linecap: round; transition: stroke-dashoffset 600ms ease; }
|
||
|
||
.kt-ai-kpi[data-tone="blue"] { border-color: var(--kt-ai-brand-blue); box-shadow: inset 0 0 0 1px var(--kt-ai-brand-blue); }
|
||
.kt-ai-kpi[data-tone="blue"] .label { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
|
||
.kt-ai-kpi[data-tone="blue"] .value { color: var(--kt-ai-brand-blue); }
|
||
|
||
.kpi-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--kt-ai-space-5);
|
||
margin-top: var(--kt-ai-space-7);
|
||
}
|
||
|
||
.kpi-row .kt-ai-card { text-align: left; }
|
||
|
||
.delta {
|
||
font-size: var(--kt-ai-text-2xs);
|
||
font-weight: var(--kt-ai-weight-medium);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.delta.ok { color: var(--kt-ai-status-ok-fg); }
|
||
.delta.warn { color: var(--kt-ai-status-warn-fg); }
|
||
|
||
/* Топ-регионы на первом экране */
|
||
.regions-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: var(--kt-ai-space-4);
|
||
}
|
||
|
||
.region-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: var(--kt-ai-space-4);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--vibe-card-radius);
|
||
background: var(--kt-ai-card-bg);
|
||
cursor: pointer;
|
||
transition: border-color 120ms ease, box-shadow 120ms ease;
|
||
text-align: left;
|
||
font: inherit;
|
||
}
|
||
|
||
.region-row:hover { border-color: var(--kt-ai-border-strong); }
|
||
|
||
.region-row.is-active { border-color: var(--kt-ai-brand-blue); box-shadow: var(--kt-ai-focus-shadow); }
|
||
|
||
.region-row .r-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); }
|
||
.region-row .r-val { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }
|
||
|
||
/* Слайдер (динамический график) */
|
||
.chart-slider {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
outline: none;
|
||
}
|
||
|
||
.chart-slider::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--kt-ai-bg-elevated);
|
||
border: 2px solid var(--kt-ai-brand-blue);
|
||
cursor: pointer;
|
||
box-shadow: var(--kt-ai-card-shadow);
|
||
}
|
||
|
||
.chart-slider::-moz-range-thumb {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--kt-ai-bg-elevated);
|
||
border: 2px solid var(--kt-ai-brand-blue);
|
||
cursor: pointer;
|
||
box-shadow: var(--kt-ai-card-shadow);
|
||
}
|
||
|
||
.chart-slider:focus-visible { box-shadow: var(--kt-ai-focus-shadow); }
|
||
|
||
.slider-scale {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: var(--kt-ai-text-2xs);
|
||
color: var(--kt-ai-fg-faint);
|
||
font-variant-numeric: tabular-nums;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* Кастомные графики */
|
||
.kt-chart { position: relative; }
|
||
|
||
.cc-bars {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 6px;
|
||
height: 200px;
|
||
padding-top: 18px;
|
||
}
|
||
|
||
.cc-bars .cc-bar {
|
||
flex: 1;
|
||
min-width: 14px;
|
||
background: var(--kt-ai-chart-blue);
|
||
border-radius: 2px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
transition: opacity 120ms ease;
|
||
}
|
||
|
||
.cc-bars .cc-bar:hover, .cc-bars .cc-bar:focus-visible { opacity: .78; outline: none; }
|
||
.cc-bars .cc-bar.is-dim { background: var(--kt-ai-chart-bar-fill); opacity: 1; }
|
||
.cc-bars .cc-bar.is-dim:hover { opacity: .9; }
|
||
|
||
.cc-labels {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.cc-labels span {
|
||
flex: 1;
|
||
min-width: 14px;
|
||
text-align: center;
|
||
font-size: var(--kt-ai-text-2xs);
|
||
color: var(--kt-ai-fg-faint);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Горизонтальные полосы регионов */
|
||
.cc-hbars { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }
|
||
|
||
.cc-hbar-row {
|
||
display: grid;
|
||
grid-template-columns: 160px 1fr auto;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-4);
|
||
}
|
||
|
||
.cc-hbar-row .h-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); }
|
||
|
||
.cc-hbar-track {
|
||
position: relative;
|
||
height: 20px;
|
||
background: var(--kt-ai-bg-sunken);
|
||
border-radius: 2px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.cc-hbar-fill {
|
||
position: absolute;
|
||
inset: 0 auto 0 0;
|
||
background: var(--kt-ai-chart-blue);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
transition: opacity 120ms ease;
|
||
}
|
||
|
||
.cc-hbar-fill:hover, .cc-hbar-fill:focus-visible { opacity: .78; outline: none; }
|
||
|
||
.cc-hbar-row .h-val {
|
||
font-size: var(--kt-ai-text-sm);
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--kt-ai-fg);
|
||
min-width: 72px;
|
||
text-align: right;
|
||
}
|
||
|
||
/* Дуги услуг */
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--kt-ai-space-5);
|
||
}
|
||
|
||
.service-card { text-align: left; }
|
||
|
||
.service-head { display: flex; align-items: center; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-4); }
|
||
|
||
.service-ic {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--kt-ai-radius-lg);
|
||
display: grid;
|
||
place-items: center;
|
||
flex-shrink: 0;
|
||
background: var(--kt-ai-primary-subtle);
|
||
color: var(--kt-ai-fg);
|
||
}
|
||
|
||
.service-ic svg { width: 18px; height: 18px; }
|
||
|
||
.service-name { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-medium); }
|
||
|
||
.arc-row { display: flex; align-items: center; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-3); }
|
||
|
||
.arc { width: 120px; height: 72px; flex-shrink: 0; }
|
||
.arc svg { width: 100%; height: 100%; display: block; }
|
||
.arc .arc-bg { fill: none; stroke: var(--kt-ai-border); stroke-width: 10; }
|
||
.arc .arc-fg { fill: none; stroke-width: 10; stroke-linecap: butt; transition: stroke-dashoffset 600ms ease; }
|
||
|
||
.arc-info { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
|
||
.arc-info .a-val { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
||
.arc-info .a-sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
||
|
||
/* Навигация слайдов */
|
||
.deck-nav {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 16px;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-4);
|
||
background: var(--kt-ai-card-bg);
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
padding: 6px var(--kt-ai-space-4) 6px 6px;
|
||
box-shadow: var(--kt-ai-card-shadow);
|
||
z-index: var(--kt-ai-z-sticky);
|
||
}
|
||
|
||
.deck-dots { display: flex; gap: 6px; }
|
||
|
||
.deck-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--kt-ai-border);
|
||
border: none;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
transition: background 120ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.deck-dot:hover { background: var(--kt-ai-border-strong); }
|
||
.deck-dot.is-active { background: var(--kt-ai-brand-blue); transform: scale(1.25); }
|
||
|
||
.deck-arrow {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--kt-ai-card-border);
|
||
background: var(--kt-ai-bg-elevated);
|
||
display: grid;
|
||
place-items: center;
|
||
cursor: pointer;
|
||
color: var(--kt-ai-fg);
|
||
transition: background 120ms ease, opacity 120ms ease;
|
||
}
|
||
|
||
.deck-arrow:hover { background: var(--kt-ai-bg-hover); }
|
||
.deck-arrow:disabled { opacity: .35; cursor: default; }
|
||
.deck-arrow svg { width: 16px; height: 16px; }
|
||
|
||
.deck-counter {
|
||
font-size: var(--kt-ai-text-xs);
|
||
color: var(--kt-ai-fg-muted);
|
||
font-variant-numeric: tabular-nums;
|
||
min-width: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Шапка с логотипом */
|
||
.page-brand { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
|
||
.page-brand img { height: 26px; display: block; }
|
||
.page-brand .brand-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); }
|
||
|
||
.period-chip {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.period-chip .ic { display: grid; place-items: center; }
|
||
.period-chip .ic svg { width: 14px; height: 14px; }
|
||
|
||
/* Подпись источника данных */
|
||
.slide-foot {
|
||
margin-top: var(--kt-ai-space-9);
|
||
padding-top: var(--kt-ai-space-4);
|
||
border-top: 1px solid var(--kt-ai-divider);
|
||
font-size: var(--kt-ai-text-2xs);
|
||
color: var(--kt-ai-fg-faint);
|
||
display: flex;
|
||
gap: var(--kt-ai-space-4);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* Адаптив */
|
||
@media (max-width: 832px) {
|
||
.cc-hbar-row { grid-template-columns: 110px 1fr auto; }
|
||
.cc-hbar-row .h-name { font-size: var(--kt-ai-text-sm); }
|
||
.slide-head h2 { font-size: 22px; }
|
||
.nps-block { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.kpi-row { grid-template-columns: 1fr; }
|
||
.services-grid { grid-template-columns: 1fr; }
|
||
.cc-bars { height: 160px; gap: 4px; }
|
||
.cc-labels span { font-size: 10px; }
|
||
.deck-nav { gap: var(--kt-ai-space-3); padding: 6px var(--kt-ai-space-3) 6px 6px; width: calc(100% - 24px); justify-content: center; }
|
||
.deck-counter { min-width: 32px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.nps-donut .ring-fg, .arc .arc-fg, .cc-bars .cc-bar, .cc-hbar-fill, .deck-dot { transition: none; }
|
||
}
|