53 lines
3.2 KiB
CSS
53 lines
3.2 KiB
CSS
/* Свой стиль — только сетка и мелочи; цвета и размеры — токены KT AI. */
|
|
|
|
.ds-brand { display:flex; align-items:center; gap:var(--kt-ai-space-3); padding:2px 6px var(--kt-ai-space-5); }
|
|
.ds-brand img { height:26px; width:auto; flex-shrink:0; }
|
|
.ds-brand .brand-label { font-size:var(--kt-ai-text-sm); font-weight:var(--kt-ai-weight-semibold); color:var(--kt-ai-fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.ds-nav { display:flex; flex-direction:column; gap:2px; }
|
|
|
|
.ds-burger { display:none; }
|
|
.ds-topbar-title { display:flex; align-items:baseline; gap:var(--kt-ai-space-3); min-width:0; }
|
|
.ds-topbar-title strong { font-size:var(--kt-ai-text-lg); font-weight:var(--kt-ai-weight-semibold); letter-spacing:-.01em; white-space:nowrap; }
|
|
.ds-topbar-title span { font-size:var(--kt-ai-text-xs); color:var(--kt-ai-fg-muted); white-space:nowrap; }
|
|
@media (max-width: 639.98px) {
|
|
.ds-burger { display:inline-flex; }
|
|
.ds-topbar-title span { display:none; }
|
|
}
|
|
|
|
.ds-view { width:100%; max-width:1200px; margin-inline:auto; padding:var(--kt-ai-space-8) var(--kt-ai-space-8) var(--kt-ai-space-11); }
|
|
@media (max-width: 639.98px) { .ds-view { padding:var(--kt-ai-space-5) var(--kt-ai-space-5) var(--kt-ai-space-9); } }
|
|
|
|
.ds-screen { display:none; }
|
|
.ds-screen[data-active="true"] { display:block; }
|
|
|
|
.ds-grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--kt-ai-space-6); margin-top:var(--kt-ai-space-6); }
|
|
|
|
.ds-filters { display:flex; align-items:center; gap:var(--kt-ai-space-4); flex-wrap:wrap; }
|
|
.ds-filters .kt-ai-select { width:auto; min-width:150px; }
|
|
.ds-filters .ds-reset { margin-left:auto; }
|
|
|
|
.ds-chart-wrap { position:relative; }
|
|
.ds-chart-legend { display:flex; gap:var(--kt-ai-space-5); flex-wrap:wrap; margin-top:var(--kt-ai-space-4); font-size:var(--kt-ai-text-xs); color:var(--kt-ai-fg-muted); }
|
|
.ds-chart-legend .sw { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
|
|
|
|
.ds-donut { display:flex; gap:var(--kt-ai-space-6); align-items:center; }
|
|
.ds-donut svg { width:128px; height:128px; flex-shrink:0; }
|
|
.ds-donut-list { flex:1; min-width:0; }
|
|
.ds-donut-row { display:flex; align-items:center; gap:var(--kt-ai-space-3); padding:4px 0; font-size:var(--kt-ai-text-xs); }
|
|
.ds-donut-row .sw { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
|
|
.ds-donut-row .lbl { flex:1; min-width:0; line-height:1.3; }
|
|
.ds-donut-row .val { font-variant-numeric:tabular-nums; font-weight:var(--kt-ai-weight-semibold); }
|
|
.ds-donut-row .pc { width:38px; text-align:right; color:var(--kt-ai-fg-muted); font-variant-numeric:tabular-nums; }
|
|
|
|
.ds-h3 { font-size:var(--kt-ai-text-md); font-weight:var(--kt-ai-weight-semibold); color:var(--kt-ai-fg); margin:var(--kt-ai-space-8) 0 var(--kt-ai-space-4); }
|
|
.ds-muted { color:var(--kt-ai-fg-muted); }
|
|
.ds-num { font-variant-numeric:tabular-nums; }
|
|
|
|
@media (max-width: 831.98px) {
|
|
#sidebar[data-open="true"]::after {
|
|
content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: var(--kt-ai-sidebar-width, 240px);
|
|
background: var(--kt-ai-bg); opacity: .5; z-index: -1;
|
|
}
|
|
.ds-brand { justify-content:center; }
|
|
}
|