Прохождение теста: один вопрос на экран, прогресс сверху, мобильная вёрстка
Made-with: Cursor
This commit is contained in:
Константин Лебединский
@@ -1024,3 +1024,309 @@ body.ui-legacy .attempts-card-list__main p + p {
|
||||
body.ui-legacy .attempts-card-list__action {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Прохождение теста: один вопрос, прогресс сверху, удобно с телефона ─── */
|
||||
.attempt-root {
|
||||
max-width: var(--max-content);
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.attempt-back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.attempt-flow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
min-height: min(70dvh, 900px);
|
||||
}
|
||||
|
||||
.attempt-progress-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 15;
|
||||
padding-top: max(0.25rem, env(safe-area-inset-top, 0px));
|
||||
padding-bottom: 0.65rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--surface-container-low) 0%,
|
||||
var(--surface-container-low) 72%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.attempt-progress-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.attempt-progress-label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--on-surface-variant);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.attempt-timer {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.attempt-progress-track {
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--outline-variant) 45%, transparent);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attempt-progress-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 75%, #fff));
|
||||
transition: width 0.22s ease;
|
||||
}
|
||||
|
||||
.attempt-title {
|
||||
margin: 0.65rem 0 0.25rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.attempt-subtitle {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.attempt-stage {
|
||||
flex: 1 1 auto;
|
||||
min-height: 12rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.attempt-q-card {
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.attempt-q-card__meta {
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.attempt-q-num {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.attempt-q-text {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.45;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.attempt-q-badge {
|
||||
display: inline-block;
|
||||
margin-left: 0.35rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.attempt-q-badge--ok {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.attempt-q-badge--bad {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.attempt-q-options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.attempt-opt-row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.attempt-opt-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.65rem;
|
||||
padding: 0.85rem 1rem;
|
||||
min-height: 2.75rem;
|
||||
border-radius: 0.85rem;
|
||||
border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
|
||||
background: var(--surface);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.attempt-opt-label:hover:not(.attempt-opt-label--locked) {
|
||||
border-color: color-mix(in srgb, var(--primary) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--primary) 5%, var(--surface));
|
||||
}
|
||||
|
||||
.attempt-opt-label--locked {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.attempt-opt-input {
|
||||
margin-top: 0.2rem;
|
||||
flex-shrink: 0;
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.attempt-opt-text {
|
||||
flex: 1;
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.attempt-mark {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.attempt-mark--ok {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.attempt-mark--bad {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.attempt-answer-actions {
|
||||
margin-top: 1.25rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.attempt-reply-btn {
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.attempt-footer-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 12;
|
||||
margin-top: auto;
|
||||
padding-top: 0.65rem;
|
||||
padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
|
||||
margin-left: -0.25rem;
|
||||
margin-right: -0.25rem;
|
||||
padding-left: max(0.25rem, env(safe-area-inset-left, 0px));
|
||||
padding-right: max(0.25rem, env(safe-area-inset-right, 0px));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
color-mix(in srgb, var(--surface-container-low) 92%, transparent) 28%,
|
||||
var(--surface-container-low) 100%
|
||||
);
|
||||
border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent);
|
||||
}
|
||||
|
||||
.attempt-footer-inner {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.attempt-footer-spacer {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.attempt-footer-btn {
|
||||
min-height: 2.75rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.attempt-footer-btn[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.attempt-error-box {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.attempt-result-card {
|
||||
padding: 1.25rem 1.35rem;
|
||||
}
|
||||
|
||||
.attempt-result-title {
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.attempt-passed {
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.attempt-failed {
|
||||
font-weight: 700;
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.attempt-hint-verdict {
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.attempt-hint-verdict--ok {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.attempt-hint-verdict--bad {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
body.ui-modern .attempt-flow {
|
||||
min-height: min(75dvh, 880px);
|
||||
}
|
||||
|
||||
body.ui-modern .attempt-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
body.ui-legacy .attempt-flow {
|
||||
min-height: min(72dvh, 820px);
|
||||
}
|
||||
|
||||
body.ui-legacy .attempt-progress-head {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--surface) 0%,
|
||||
var(--surface) 78%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
body.ui-legacy .attempt-footer-bar {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
color-mix(in srgb, var(--surface) 94%, transparent) 35%,
|
||||
var(--surface) 100%
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user