53 lines
3.7 KiB
CSS
53 lines
3.7 KiB
CSS
/* Приложение: дашборд розничных продаж. Токены из ДС, hex не пишем. */
|
|
|
|
/* ---- каркас экрана ---- */
|
|
.kt-ai-screen { padding: var(--kt-ai-space-8); max-width: var(--kt-ai-content-wide); }
|
|
|
|
.kt-ai-topbar { border-bottom: 1px solid var(--kt-ai-divider); }
|
|
.kt-ai-topbar-title { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); }
|
|
.kt-ai-topbar-h1 { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); margin: 0; }
|
|
|
|
.kt-ai-brand { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-2) var(--kt-ai-space-2) var(--kt-ai-space-6); }
|
|
.kt-ai-brand-name { font-weight: var(--kt-ai-weight-medium); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); }
|
|
.kt-ai-sidebar-foot { margin-top: auto; padding: var(--kt-ai-space-4) var(--kt-ai-space-5); }
|
|
|
|
/* ---- график ---- */
|
|
.kt-ai-chart-card { padding: var(--kt-ai-pad-card); }
|
|
.kt-ai-chart { display: flex; align-items: flex-end; gap: var(--kt-ai-space-3); height: 200px; padding: var(--kt-ai-space-5) var(--kt-ai-space-2) 0; }
|
|
.cc-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-3); height: 100%; justify-content: flex-end; }
|
|
.cc-bar { width: 100%; max-width: 28px; border-radius: 2px 2px 0 0; background: var(--kt-ai-chart-blue); cursor: pointer; transition: opacity var(--kt-ai-dur-fast); }
|
|
.cc-bar:hover { opacity: .82; }
|
|
.cc-bar[data-series="green"] { background: var(--kt-ai-chart-green); }
|
|
.cc-bar[data-series="orange"] { background: var(--kt-ai-chart-orange); }
|
|
.cc-label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
|
|
|
.kt-ai-chart-title { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); margin: 0; }
|
|
.kt-ai-chart-legend { display: flex; gap: var(--kt-ai-space-5); flex-wrap: wrap; margin-top: var(--kt-ai-space-5); }
|
|
.kt-ai-legend-item { display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
|
.kt-ai-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
|
|
|
|
/* ---- структура (mix) ---- */
|
|
.kt-ai-mix { display: flex; flex-direction: column; gap: var(--kt-ai-space-5); }
|
|
.kt-ai-mix-row { display: grid; grid-template-columns: 110px 1fr 56px; gap: var(--kt-ai-space-4); align-items: center; }
|
|
.kt-ai-mix-name { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.kt-ai-mix-track { height: 10px; background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-full); overflow: hidden; }
|
|
.kt-ai-mix-fill { height: 100%; border-radius: var(--kt-ai-radius-full); }
|
|
.kt-ai-mix-pct { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
|
|
|
|
/* ---- таблицы ---- */
|
|
.kt-ai-table th.rt, .kt-ai-table td.rt { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.kt-ai-table th.sortable { cursor: pointer; user-select: none; }
|
|
.kt-ai-table th.sortable:hover { color: var(--kt-ai-fg); }
|
|
.kt-ai-table th[aria-sort]::after { content: " ↓"; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
|
.kt-ai-table th[aria-sort="descending"]::after { content: " ↑"; }
|
|
|
|
/* ---- мобильный ---- */
|
|
@media (max-width: 640px) {
|
|
.kt-ai-screen { padding: var(--kt-ai-space-5); }
|
|
.kt-ai-mix-row { grid-template-columns: 78px 1fr 46px; }
|
|
.kt-ai-chart { height: 170px; gap: var(--kt-ai-space-2); }
|
|
.kk-col-hidden-mobile { display: none; }
|
|
.kk-search-mobile { width: 100% !important; }
|
|
#search-months { width: 100% !important; }
|
|
}
|