501 lines
9.4 KiB
CSS
501 lines
9.4 KiB
CSS
.kt-ai-brand-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-3);
|
|
padding: var(--kt-ai-space-4);
|
|
margin-bottom: var(--kt-ai-space-4);
|
|
}
|
|
|
|
.kt-ai-brand-logo {
|
|
height: 24px;
|
|
width: auto;
|
|
}
|
|
|
|
.kt-ai-brand-label {
|
|
font-size: var(--kt-ai-text-xs);
|
|
color: var(--kt-ai-fg);
|
|
font-weight: var(--kt-ai-weight-medium);
|
|
}
|
|
|
|
.kt-ai-sidebar-nav {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-2);
|
|
}
|
|
|
|
.kt-ai-sidebar-footer {
|
|
padding: var(--kt-ai-space-4);
|
|
border-top: 1px solid var(--kt-ai-divider);
|
|
margin-top: auto;
|
|
}
|
|
|
|
.kt-ai-topbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-4);
|
|
}
|
|
|
|
.kt-ai-topbar-crumb {
|
|
font-size: var(--kt-ai-text-sm);
|
|
color: var(--kt-ai-fg-muted);
|
|
}
|
|
|
|
.kt-ai-topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-3);
|
|
}
|
|
|
|
.kt-ai-screen {
|
|
padding: var(--kt-ai-space-8) var(--kt-ai-space-10) var(--kt-ai-space-12);
|
|
animation: kt-fade-in 0.16s ease;
|
|
}
|
|
|
|
@keyframes kt-fade-in {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
.kt-ai-summary-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
gap: var(--kt-ai-space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
.kt-ai-ai-log {
|
|
position: sticky;
|
|
top: var(--kt-ai-space-6);
|
|
max-height: calc(100dvh - 120px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.kt-ai-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--kt-ai-space-3);
|
|
margin-bottom: var(--kt-ai-space-4);
|
|
}
|
|
|
|
.kt-ai-card-title {
|
|
font-size: var(--kt-ai-text-lg);
|
|
font-weight: var(--kt-ai-weight-semibold);
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
|
|
.kt-ai-card-sub {
|
|
font-size: var(--kt-ai-text-sm);
|
|
color: var(--kt-ai-fg-muted);
|
|
margin-bottom: var(--kt-ai-space-6);
|
|
}
|
|
|
|
.kt-ai-ai-log-list {
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-3);
|
|
flex: 1;
|
|
}
|
|
|
|
.kt-ai-log-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-2);
|
|
padding: var(--kt-ai-space-3);
|
|
background: var(--kt-ai-bg-soft);
|
|
border: 1px solid var(--kt-ai-divider);
|
|
border-radius: var(--kt-ai-radius-xl);
|
|
font-size: var(--kt-ai-text-xs);
|
|
color: var(--kt-ai-fg-muted);
|
|
}
|
|
|
|
.kt-ai-log-item .log-time {
|
|
font-size: var(--kt-ai-text-2xs);
|
|
color: var(--kt-ai-fg-faint);
|
|
}
|
|
|
|
.kt-ai-log-item .log-text {
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
|
|
.kt-ai-log-item .log-src {
|
|
font-size: var(--kt-ai-text-2xs);
|
|
color: var(--kt-ai-fg-faint);
|
|
}
|
|
|
|
.kt-ai-cell-warning {
|
|
background: var(--kt-ai-status-warn-bg);
|
|
box-shadow: inset 0 0 0 1px var(--kt-ai-status-warn-fg);
|
|
border-radius: var(--kt-ai-radius-sm);
|
|
}
|
|
|
|
.kt-ai-cell-editable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.kt-ai-cell-editable:hover {
|
|
background: var(--kt-ai-bg-hover);
|
|
}
|
|
|
|
.kt-ai-cell-manual {
|
|
background: var(--kt-ai-bg-soft);
|
|
}
|
|
|
|
.kt-ai-cell-actions {
|
|
display: flex;
|
|
gap: var(--kt-ai-space-1);
|
|
}
|
|
|
|
.kt-ai-verify-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 340px;
|
|
gap: var(--kt-ai-space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
.kt-ai-card-section {
|
|
margin-bottom: var(--kt-ai-space-6);
|
|
}
|
|
|
|
.kt-ai-field {
|
|
margin-bottom: var(--kt-ai-space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-2);
|
|
}
|
|
|
|
.kt-ai-field label {
|
|
font-size: var(--kt-ai-text-xs);
|
|
color: var(--kt-ai-fg-muted);
|
|
}
|
|
|
|
.kt-ai-recheck-result {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-3);
|
|
border-radius: var(--kt-ai-radius-xl);
|
|
background: var(--kt-ai-bg-soft);
|
|
margin-bottom: var(--kt-ai-space-4);
|
|
font-size: var(--kt-ai-text-sm);
|
|
}
|
|
|
|
.kt-ai-recheck-diff {
|
|
color: var(--kt-ai-fg);
|
|
font-weight: var(--kt-ai-weight-medium);
|
|
}
|
|
|
|
.kt-ai-recheck-status {
|
|
font-size: var(--kt-ai-text-xs);
|
|
}
|
|
|
|
.kt-ai-drawer-actions {
|
|
display: flex;
|
|
gap: var(--kt-ai-space-3);
|
|
margin-top: var(--kt-ai-space-6);
|
|
}
|
|
|
|
.kt-ai-drawer-actions .kt-ai-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.kt-ai-recheck-log {
|
|
margin-top: var(--kt-ai-space-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-3);
|
|
}
|
|
|
|
.kt-ai-recheck-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-4);
|
|
font-size: var(--kt-ai-text-xs);
|
|
color: var(--kt-ai-fg-muted);
|
|
padding: var(--kt-ai-space-3);
|
|
background: var(--kt-ai-bg-soft);
|
|
border-radius: var(--kt-ai-radius-lg);
|
|
}
|
|
|
|
.kt-ai-recheck-item .ok {
|
|
color: var(--kt-ai-status-ok-fg);
|
|
}
|
|
|
|
.kt-ai-recheck-item .bad {
|
|
color: var(--kt-ai-status-risk-fg);
|
|
}
|
|
|
|
.kt-ai-dash-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 340px;
|
|
gap: var(--kt-ai-space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
.kt-ai-chart {
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
padding: var(--kt-ai-space-4);
|
|
position: relative;
|
|
}
|
|
|
|
.kt-ai-chart .bar {
|
|
flex: 1;
|
|
max-width: 28px;
|
|
min-width: 6px;
|
|
background: var(--kt-ai-chart-blue);
|
|
border-radius: 2px;
|
|
transition: height 0.3s ease;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.kt-ai-chart .bar .bar-label {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
font-size: var(--kt-ai-text-2xs);
|
|
color: var(--kt-ai-fg-muted);
|
|
transform: rotate(-45deg);
|
|
width: 80px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
.kt-ai-chat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 440px;
|
|
}
|
|
|
|
.kt-ai-chat-log {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-3);
|
|
padding: var(--kt-ai-space-4);
|
|
background: var(--kt-ai-bg-soft);
|
|
border-radius: var(--kt-ai-radius-xl);
|
|
}
|
|
|
|
.kt-ai-chat-msg {
|
|
padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
|
|
border-radius: var(--kt-ai-radius-xl);
|
|
font-size: var(--kt-ai-text-sm);
|
|
max-width: 85%;
|
|
line-height: var(--kt-ai-leading-normal);
|
|
}
|
|
|
|
.kt-ai-chat-bot {
|
|
background: var(--kt-ai-card-bg);
|
|
border: 1px solid var(--kt-ai-card-border);
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
|
|
.kt-ai-chat-user {
|
|
background: var(--kt-ai-status-info-bg);
|
|
color: var(--kt-ai-fg);
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.kt-ai-chat-input {
|
|
display: flex;
|
|
gap: var(--kt-ai-space-3);
|
|
margin-top: var(--kt-ai-space-4);
|
|
}
|
|
|
|
.kt-ai-chat-input .kt-ai-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.kt-ai-about {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: var(--kt-ai-space-6);
|
|
}
|
|
|
|
.kt-ai-about-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--kt-ai-space-4);
|
|
}
|
|
|
|
.about-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-1);
|
|
}
|
|
|
|
.about-field label {
|
|
font-size: var(--kt-ai-text-2xs);
|
|
color: var(--kt-ai-fg-muted);
|
|
}
|
|
|
|
.about-field span {
|
|
font-size: var(--kt-ai-text-sm);
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
|
|
.kt-ai-about-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-3);
|
|
}
|
|
|
|
.kt-ai-about-list li {
|
|
position: relative;
|
|
padding-left: var(--kt-ai-space-6);
|
|
font-size: var(--kt-ai-text-sm);
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
|
|
.kt-ai-about-list li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 7px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--kt-ai-primary);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.kt-ai-summary-layout,
|
|
.kt-ai-verify-layout,
|
|
.kt-ai-dash-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.kt-ai-ai-log {
|
|
position: static;
|
|
max-height: 320px;
|
|
}
|
|
.kt-ai-chat-card {
|
|
height: 380px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.kt-ai-screen {
|
|
padding: var(--kt-ai-space-6);
|
|
}
|
|
.kt-ai-kpi-strip[data-cards="true"] {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* === Дополнительные детали === */
|
|
|
|
.kt-ai-btn--margin-bottom {
|
|
margin-bottom: var(--kt-ai-space-4);
|
|
}
|
|
|
|
.kt-ai-metric-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.kt-ai-metric-name {
|
|
font-weight: var(--kt-ai-weight-medium);
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
|
|
.kt-ai-metric-source {
|
|
font-size: var(--kt-ai-text-2xs);
|
|
color: var(--kt-ai-fg-faint);
|
|
}
|
|
|
|
.kt-ai-cell {
|
|
padding: var(--kt-ai-space-2) var(--kt-ai-space-3);
|
|
border-radius: var(--kt-ai-radius-sm);
|
|
}
|
|
|
|
.kt-ai-cell-editable {
|
|
padding: var(--kt-ai-space-2) var(--kt-ai-space-3);
|
|
border-radius: var(--kt-ai-radius-sm);
|
|
cursor: pointer;
|
|
transition: background 0.1s ease;
|
|
}
|
|
|
|
.kt-ai-cell-editable:hover {
|
|
background: var(--kt-ai-bg-hover);
|
|
}
|
|
|
|
.kt-ai-row-actions {
|
|
display: flex;
|
|
gap: var(--kt-ai-space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.kt-ai-status-cell {
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.kt-ai-status-cell-in {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: var(--kt-ai-space-2);
|
|
}
|
|
|
|
.kt-ai-status-cell-in .kt-ai-cell-actions {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.file-cell {
|
|
font-size: var(--kt-ai-text-xs);
|
|
color: var(--kt-ai-fg-muted);
|
|
max-width: 260px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.kt-ai-table td .kt-ai-chip {
|
|
margin-right: var(--kt-ai-space-2);
|
|
}
|
|
|
|
.kt-ai-chart .bar {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.kt-ai-chart .bar:hover {
|
|
opacity: 0.85;
|
|
background: var(--kt-ai-chart-green);
|
|
}
|
|
|
|
/* tooltip via data-kt-tip (простой, свой, чтобы не тянуть лишний скрипт) */
|
|
.kt-ai-chart .bar[data-kt-tip]:hover::after {
|
|
content: attr(data-kt-tip);
|
|
position: absolute;
|
|
bottom: calc(100% + 6px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--kt-ai-fg);
|
|
color: var(--kt-ai-bg);
|
|
padding: 4px 10px;
|
|
border-radius: var(--kt-ai-radius-lg);
|
|
font-size: var(--kt-ai-text-2xs);
|
|
white-space: nowrap;
|
|
z-index: 50;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.kt-ai-topbar-spacer {
|
|
flex: 1;
|
|
}
|