205 lines
13 KiB
CSS
205 lines
13 KiB
CSS
/* Тест — только мелкие стили, цвета через токены ДС (var(--kt-ai-…)) */
|
|
|
|
#app { min-height: 100dvh; }
|
|
|
|
/* ── Экран входа ─────────────────────────────────────── */
|
|
.scr-entry {
|
|
min-height: 100dvh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: var(--kt-ai-space-8);
|
|
background: var(--kt-ai-bg);
|
|
}
|
|
.entry-card {
|
|
width: 100%;
|
|
max-width: 460px;
|
|
padding: var(--kt-ai-space-9) var(--kt-ai-space-8);
|
|
}
|
|
.entry-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-4);
|
|
margin-bottom: var(--kt-ai-space-8);
|
|
}
|
|
.entry-brand img { border-radius: var(--kt-ai-radius-xl); }
|
|
.entry-title { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
|
.entry-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
|
.entry-form { margin-top: var(--kt-ai-space-6); }
|
|
.entry-hint {
|
|
font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); line-height: var(--kt-ai-leading-normal);
|
|
padding: var(--kt-ai-space-4); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg);
|
|
margin-bottom: var(--kt-ai-space-6);
|
|
}
|
|
|
|
/* ── Экран теста ─────────────────────────────────────── */
|
|
#scr-test { max-width: 860px; margin: 0 auto; padding: var(--kt-ai-space-7) var(--kt-ai-space-7) 120px; }
|
|
.test-top {
|
|
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-4);
|
|
padding-bottom: var(--kt-ai-space-5); border-bottom: 1px solid var(--kt-ai-divider); margin-bottom: var(--kt-ai-space-6);
|
|
}
|
|
.test-top-fio { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
|
.test-top-dept { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
|
.test-top-right { display: flex; align-items: center; gap: var(--kt-ai-space-4); }
|
|
.test-top-score { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }
|
|
|
|
.test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kt-ai-space-7); }
|
|
.tq { border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-6); background: var(--kt-ai-card-bg, var(--kt-ai-bg)); }
|
|
.tq-head { display: flex; align-items: baseline; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-5); }
|
|
.tq-num {
|
|
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary);
|
|
font-size: var(--kt-ai-text-2xs); font-weight: var(--kt-ai-weight-bold); font-variant-numeric: tabular-nums;
|
|
}
|
|
.tq-q { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); line-height: var(--kt-ai-leading-normal); }
|
|
.tq-opts { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
|
|
.opt {
|
|
display: flex; align-items: flex-start; gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border);
|
|
border-radius: var(--kt-ai-radius-lg); cursor: pointer; font-size: var(--kt-ai-text-sm);
|
|
transition: border-color var(--kt-ai-dur-fast), background var(--kt-ai-dur-fast);
|
|
}
|
|
.opt:hover { background: var(--kt-ai-bg-hover); }
|
|
.opt:focus-visible { outline: none; border-color: var(--kt-ai-primary); box-shadow: var(--kt-ai-focus-shadow); }
|
|
.opt input { accent-color: var(--kt-ai-primary); margin-top: 2px; flex-shrink: 0; }
|
|
.opt[aria-checked="true"] { border-color: var(--kt-ai-primary); background: var(--kt-ai-primary-subtle); }
|
|
|
|
.test-foot {
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-5);
|
|
max-width: 860px; margin: 0 auto;
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-7);
|
|
background: var(--kt-ai-bg-elevated); border-top: 1px solid var(--kt-ai-border);
|
|
border-radius: var(--kt-ai-radius-2xl) var(--kt-ai-radius-2xl) 0 0;
|
|
}
|
|
.test-foot-count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }
|
|
|
|
/* ── Экран результата ────────────────────────────────── */
|
|
#scr-result { max-width: 860px; margin: 0 auto; padding: var(--kt-ai-space-8) var(--kt-ai-space-7) var(--kt-ai-space-10); }
|
|
.res-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-6); margin-bottom: var(--kt-ai-space-8); }
|
|
.res-head h1 { margin: 0; font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
|
.res-sub { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-top: var(--kt-ai-space-2); }
|
|
.res-score-card { flex-shrink: 0; padding: var(--kt-ai-space-6) var(--kt-ai-space-8); text-align: center; min-width: 150px; display: flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-2); }
|
|
.res-score-val { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
|
|
.res-score-label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
|
|
|
.res-wrong-head {
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
|
background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-border);
|
|
border-radius: var(--kt-ai-radius-xl); margin-bottom: var(--kt-ai-space-5);
|
|
font-size: var(--kt-ai-text-sm);
|
|
}
|
|
.res-wrong-head .kt-icon { color: var(--kt-ai-status-risk-fg); }
|
|
|
|
.res-list { display: flex; flex-direction: column; gap: var(--kt-ai-space-5); }
|
|
.resq {
|
|
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl);
|
|
padding: var(--kt-ai-space-6); background: var(--kt-ai-card-bg, var(--kt-ai-bg));
|
|
}
|
|
.resq[data-wrong="true"] { border-color: color-mix(in srgb, var(--kt-ai-status-risk-fg) 40%, var(--kt-ai-border)); }
|
|
.resq-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-4); }
|
|
.resq-q { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); flex: 1 1 100%; }
|
|
.resq-opts { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
|
|
.resq-opt {
|
|
display: flex; align-items: flex-start; gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-lg);
|
|
border: 1px solid transparent; font-size: var(--kt-ai-text-sm);
|
|
}
|
|
.resq-opt .mark {
|
|
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
font-size: var(--kt-ai-text-2xs); margin-top: 1px;
|
|
}
|
|
.resq-opt.is-correct { background: var(--kt-ai-status-ok-bg); border-color: color-mix(in srgb, var(--kt-ai-status-ok-fg) 30%, transparent); }
|
|
.resq-opt.is-correct .mark { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-fg-on-fill); }
|
|
.resq-opt.is-wrong { background: var(--kt-ai-status-risk-bg); border-color: color-mix(in srgb, var(--kt-ai-status-risk-fg) 30%, transparent); }
|
|
.resq-opt.is-wrong .mark { background: var(--kt-ai-status-risk-fg); color: var(--kt-ai-fg-on-fill); }
|
|
.resq-opt .exp-btn { margin-left: auto; flex-shrink: 0; }
|
|
.resq-cat { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
|
|
|
.res-actions {
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-5);
|
|
margin-top: var(--kt-ai-space-8); padding-top: var(--kt-ai-space-6);
|
|
border-top: 1px solid var(--kt-ai-divider);
|
|
}
|
|
|
|
/* ── Куратор: основные ───────────────────────────────── */
|
|
.cur-main { min-width: 0; display: flex; flex-direction: column; }
|
|
.cur-view {
|
|
width: 100%; max-width: var(--kt-ai-content-table, 1100px); margin-inline: auto;
|
|
padding: var(--kt-ai-stack-region, 32px) var(--kt-ai-stack-region, 32px) 48px;
|
|
}
|
|
.cur-view h2 { margin: 0 0 var(--kt-ai-space-5); font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
|
|
|
|
.person-row {
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-5);
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
|
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl);
|
|
cursor: pointer; transition: background var(--kt-ai-dur-fast); background: var(--kt-ai-bg);
|
|
}
|
|
.person-row:hover { background: var(--kt-ai-bg-hover); }
|
|
.person-row + .person-row { margin-top: var(--kt-ai-space-2); }
|
|
.person-fio { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
|
|
.person-dept { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 1px; }
|
|
.person-info { flex: 1; min-width: 0; }
|
|
.person-pct { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
|
|
.person-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
|
|
|
|
.vsplit { border: 0; border-top: 1px solid var(--kt-ai-divider); margin: var(--kt-ai-space-8) 0; }
|
|
.vsplit-h { font-size: var(--kt-ai-text-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--kt-ai-fg-faint); margin-bottom: var(--kt-ai-space-4); }
|
|
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--kt-ai-space-4); }
|
|
.cat {
|
|
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-4);
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
}
|
|
.cat .c { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
|
.cat .v { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
|
|
|
|
/* ── Drawer: вопросы и карточка специалиста ─────────── */
|
|
.drawer-body { padding: var(--kt-ai-space-6); display: flex; flex-direction: column; gap: var(--kt-ai-space-3); max-height: 100%; overflow-y: auto; }
|
|
.drawer-head { display: flex; align-items: flex-start; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-3); }
|
|
.drawer-head .t { flex: 1; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
|
|
.q-opt-row { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
|
|
.q-opt-row .kt-ai-icon-button { flex-shrink: 0; opacity: 0; transition: opacity var(--kt-ai-dur-fast); }
|
|
.q-opt-row:hover .kt-ai-icon-button { opacity: 1; }
|
|
.q-opt-row input[type="radio"] { flex-shrink: 0; }
|
|
.opt-move { display: flex; gap: 2px; flex-shrink: 0; }
|
|
|
|
.stat-card { display: flex; gap: var(--kt-ai-space-6); padding: var(--kt-ai-space-5); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-xl); margin-bottom: var(--kt-ai-space-5); }
|
|
.stat-card .s { display: flex; flex-direction: column; gap: 3px; }
|
|
.stat-card .v { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }
|
|
.stat-card .l { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
|
|
|
|
.attempt-line {
|
|
display: flex; align-items: center; gap: var(--kt-ai-space-4);
|
|
padding: var(--kt-ai-space-3) 0; font-size: var(--kt-ai-text-sm);
|
|
}
|
|
.attempt-line .d { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }
|
|
.attempt-line .sp { flex: 1; }
|
|
|
|
/* ── Модалка: разбор ошибки ──────────────────────────── */
|
|
.xp { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }
|
|
.xp .xp-row { display: flex; align-items: flex-start; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); }
|
|
.xp .xp-row .m {
|
|
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
|
|
display: inline-flex; align-items: center; justify-content: center; font-size: var(--kt-ai-text-2xs); margin-top: 1px;
|
|
}
|
|
.xp .xp-row.you { background: var(--kt-ai-status-risk-bg); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-3) var(--kt-ai-space-4); }
|
|
.xp .xp-row.you .m { background: var(--kt-ai-status-risk-fg); color: var(--kt-ai-fg-on-fill); }
|
|
.xp .xp-row.right { background: var(--kt-ai-status-ok-bg); border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-3) var(--kt-ai-space-4); }
|
|
.xp .xp-row.right .m { background: var(--kt-ai-status-ok-fg); color: var(--kt-ai-fg-on-fill); }
|
|
.xp .xp-note {
|
|
background: var(--kt-ai-primary-subtle); padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
|
border-radius: var(--kt-ai-radius-lg); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); line-height: var(--kt-ai-leading-normal);
|
|
}
|
|
|
|
/* ── Мелочь ──────────────────────────────────────────── */
|
|
.kt-ai-ghostlink { background: none; border: none; padding: 0; font: inherit; color: var(--kt-ai-primary); cursor: pointer; }
|
|
.kt-ai-spacer { flex: 1; }
|
|
@media (max-width: 639.98px) {
|
|
.res-head { flex-direction: column; }
|
|
.person-meta { text-align: left; }
|
|
.test-foot { padding-left: var(--kt-ai-space-4); padding-right: var(--kt-ai-space-4); }
|
|
}
|