Files
testpoint/static/css/assessment-workspace.css
2026-07-29 10:47:40 +00:00

36 lines
7.7 KiB
CSS

:root{--assessment-blue:#1264e8;--assessment-blue-soft:#eaf2ff;--assessment-ink:#10213e;--assessment-muted:#718097;--assessment-line:#dce5f0;--assessment-surface:#fff;--assessment-canvas:#f5f8fd}
.assessment-page{color:var(--assessment-ink);background:var(--assessment-canvas)}
.assessment-bar{position:relative;z-index:20;display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:24px;padding:12px clamp(18px,3.4vw,52px);border-bottom:1px solid var(--assessment-line);background:var(--assessment-surface);box-shadow:none}
.assessment-bar__title{display:flex;min-width:0;align-items:center;gap:12px}.assessment-bar__title>div{min-width:0}
.assessment-bar__title>div>span,.assessment-bar__title small{display:block;margin:0 0 3px;color:var(--assessment-blue);font-size:11px;font-weight:750;letter-spacing:.075em;line-height:1.2;text-transform:uppercase}
.assessment-bar__title h1{display:block;overflow:hidden;margin:0;color:var(--assessment-ink);font-size:16px;font-weight:750;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.assessment-bar__title p{display:block;overflow:hidden;max-width:360px;margin:2px 0 0;color:var(--assessment-muted);font-size:12px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.assessment-bar__back,.assessment-bar__icon{display:grid;width:36px;height:36px;flex:0 0 36px;place-items:center;border-radius:8px}
.assessment-bar__back{border:1px solid var(--assessment-line);color:#50647d;background:#fff;text-decoration:none}.assessment-bar__back:hover{color:var(--assessment-blue);border-color:#9fc2f2;background:#f6faff}
.assessment-bar__icon{color:var(--assessment-blue);background:var(--assessment-blue-soft);font-size:16px}
.assessment-page .exam-session-controls{display:flex;align-items:center;gap:10px}
.assessment-page .exam-fullscreen-button,.assessment-page .exam-retake-button,.assessment-bar__action button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid #cbd8e8;border-radius:8px;color:#405670;background:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.assessment-page .exam-retake-button{color:var(--assessment-blue);border-color:#a9c9f4;background:#f8fbff}.assessment-bar__action button{color:#fff;border-color:var(--assessment-blue);background:var(--assessment-blue)}
.assessment-page .exam-timer-wrap{min-width:94px;padding:5px 11px;border:1px solid var(--assessment-line);border-radius:8px;background:#f8fafc;text-align:center}
.assessment-page .exam-timer-wrap>span{color:var(--assessment-muted);font-size:10px}.assessment-page .exam-timer-wrap strong{color:var(--assessment-ink);font-size:16px}
.assessment-page--test:not(.exam-session--reading){min-height:calc(100vh - 76px)}.assessment-page--test:not(.exam-session--reading) .exam-session-form{padding-top:20px}
.assessment-page--test.exam-session--reading .exam-session-header{min-height:76px;padding:12px clamp(18px,3.4vw,52px)}.assessment-page--test.exam-session--reading .exam-session-form{height:calc(100vh - 76px)}
.assessment-page--test:not(.exam-session--reading) .listening-part-banner{max-width:920px;margin:0 auto 14px}.assessment-page--test:not(.exam-session--reading) .exam-workspace{padding-top:0}
.assessment-page--test .exam-question-card{border-color:var(--assessment-line);border-radius:10px;box-shadow:none}.assessment-page--test .exam-options label,.assessment-page--test .exam-text-input,.assessment-page--test .exam-textarea{border-radius:7px}
.assessment-page--review .reader-review-head{height:88px;grid-template-columns:minmax(300px,1.3fr) minmax(150px,.55fr) minmax(175px,.65fr) auto}
.assessment-page--review .reader-review-workspace{height:calc(100% - 150px)}.assessment-page--review .reader-head-icon{width:36px;height:36px;flex-basis:36px;border-radius:8px}
.assessment-page--review .assessment-metric{padding-left:20px;border-left:1px solid var(--assessment-line)}.assessment-page--review .reader-review-card{border-radius:10px;box-shadow:none}
.assessment-bar--results{min-height:88px}.assessment-bar__summary{display:flex;align-items:center;gap:8px;margin-left:auto}.assessment-bar__summary span{padding:7px 9px;border-radius:7px;color:#52657d;background:#f1f5fa;font-size:11px;font-weight:650}
.assessment-page--review.results-page{padding:0 0 64px}.assessment-page--review .results-shell{width:min(1080px,calc(100% - 40px));padding-top:28px}
.assessment-page--review .results-header h2{margin:4px 0 7px;font-size:24px}.assessment-page--review .results-summary article,.assessment-page--review .answer-review{border-radius:10px;box-shadow:none}
.assessment-page--review .answer-card{padding:20px 0}.assessment-page--review .answer-response{border:1px solid #e5ebf3;border-radius:7px;background:#f8fafc}
.assessment-page--review .results-actions .results-primary{color:#fff;border-color:var(--assessment-blue);background:var(--assessment-blue)}
.assessment-page .exam-nav-button,.assessment-page .exam-bottom-submit,.assessment-page .exam-submit-area button,.assessment-page--review .reader-review-pager button,.assessment-page--review .reader-show-evidence,.assessment-page--review .results-actions a{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid #b9cff0;border-radius:8px;color:var(--assessment-blue);background:#fff;font:inherit;font-size:12px;font-weight:700;line-height:1;text-decoration:none;box-shadow:none;cursor:pointer}
.assessment-page #question-next,.assessment-page .exam-bottom-submit,.assessment-page .exam-submit-area button,.assessment-page--review .reader-review-pager #reader-next,.assessment-page--review .results-actions .results-primary{color:#fff;border-color:var(--assessment-blue);background:var(--assessment-blue)}
.assessment-page #question-next:hover,.assessment-page .exam-bottom-submit:hover,.assessment-page .exam-submit-area button:hover,.assessment-page--review .reader-review-pager #reader-next:hover,.assessment-page--review .results-actions .results-primary:hover{border-color:#0e56ca;background:#0e56ca}
.assessment-page .exam-nav-button:hover:not(:disabled),.assessment-page--review .reader-review-pager button:hover:not(:disabled),.assessment-page--review .reader-show-evidence:hover,.assessment-page--review .results-actions a:hover{color:#0e56ca;border-color:#86afea;background:#f4f8ff}
.assessment-page .exam-nav-button:disabled,.assessment-page--review .reader-review-pager button:disabled{color:#93a1b4;border-color:#dce3ec;background:#f4f6f8;opacity:1;cursor:not-allowed}
.assessment-page--review .reader-show-evidence{width:max-content;margin-top:9px}.assessment-page--review .reader-show-evidence.is-unmatched{color:#6f7d90;border-color:#d6dee8;background:#f5f7fa;cursor:default}
@media(max-width:900px){.assessment-bar{gap:14px}.assessment-bar__title p,.assessment-bar__summary{display:none}.assessment-page--review .reader-review-head{height:78px;grid-template-columns:1fr auto}.assessment-page--review .reader-review-workspace{height:calc(100% - 140px)}.assessment-page--review .assessment-metric{display:none}}
@media(max-width:680px){.assessment-bar{min-height:68px;padding:10px 14px}.assessment-bar__icon,.assessment-page .exam-fullscreen-button span,.assessment-page .exam-retake-button span{display:none}.assessment-bar__title h1{max-width:42vw;font-size:14px}.assessment-page .exam-session-controls{gap:6px}.assessment-page .exam-fullscreen-button,.assessment-page .exam-retake-button{width:36px;padding:0}.assessment-page .exam-timer-wrap{min-width:74px;padding-inline:7px}.assessment-bar--results .assessment-bar__action button{width:38px;padding:0;font-size:0}.assessment-bar--results .assessment-bar__action button i{font-size:14px}.assessment-page--review .results-shell{width:min(100% - 28px,1080px);padding-top:22px}.assessment-page--review .results-header h2{font-size:21px}}