Print stylesheet: light surfaces for options/inputs, print buttons

Exam/solution pages print clean via browser print-to-PDF: interactive
chrome hidden, questions unhidden, ink-friendly colors. Options printed
as black bars without the surface override — .opt/.chk/inputs/palette
now forced white. Verified with print-media emulation screenshot.
This commit is contained in:
dev 2026-10-13 08:28:54 +05:30
parent 32f5e7a440
commit 338aa2e8ef
2 changed files with 39 additions and 1 deletions

View file

@ -755,6 +755,7 @@ pub fn result(ctx: &Ctx, user: &str, _attempt_id: &str, a: &Analysis, rows: &[Ro
<p style="margin-top:18px;display:flex;gap:8px;flex-wrap:wrap">
<a class="btn" href="{b}/history">all papers</a>
<a class="btn" href="{b}/dashboard">dashboard</a>
<button class="btn" type="button" onclick="window.print()">print / PDF</button>
<a class="btn primary" href="{b}/build">new paper</a>
</p>"#,
score = a.score,
@ -946,7 +947,7 @@ pub fn shared(ctx: &Ctx, title: &str, duration: i64, questions: &[Question], pap
)
};
let body = format!(
r#"<h1>{title}</h1><p class="meta">{count} questions · {dur} minutes · no answers or scores on this page.</p>{cta}<div style="margin-top:16px">{qs}</div>"#,
r#"<h1>{title}</h1><p class="meta">{count} questions · {dur} minutes · no answers or scores on this page.</p>{cta}<p><button class="btn" type="button" onclick="window.print()">print / PDF</button></p><div style="margin-top:16px">{qs}</div>"#,
title = esc(title),
count = questions.len(),
dur = duration,

View file

@ -238,3 +238,40 @@ input[type=text],input[type=email],input[type=number],select{min-height:44px;pad
.signin-or{display:flex;align-items:center;gap:12px;max-width:420px;margin:18px 0 4px;color:var(--dim);font-size:.75rem}
.signin-or::before,.signin-or::after{content:"";flex:1;height:1px;background:var(--border)}
.signin-or span{padding:0 2px}
/* ===== print: paper + solutions on paper =====
Purpose: students print a paper to solve offline and a key to check.
Hide everything interactive (nav, palette, buttons, forms); force light
ink-friendly colors since KaTeX/printer output assumes dark-on-light;
one question per page break where sensible, never split an option row. */
@media print {
.topbar, .tabbar, footer, .exam-bar, .cbt-side, .opt-actions,
.mistake-row, .pal-fab, #pal-toggle, form button, .btn, .subj-timer-bar,
.exam-progress, .cbt-count, .legend, script {
display: none !important;
}
body { background: #fff !important; color: #000 !important; padding: 0 !important; }
.card, .qpane, details.card {
background: #fff !important; color: #000 !important;
border: 1px solid #999 !important; box-shadow: none !important;
break-inside: avoid;
}
/* Option rows, checkboxes, inputs and palette tiles carry their own dark
surfaces — without this they print as solid black bars. */
.opt, .opt.sel, .chk, .chapter-hd, .subj-timer,
input[type=text], input[type=email], input[type=number], select, textarea,
.pal, .pal.ans, .pal.rev, .pal.skip, .seg, .bar {
background: #fff !important; color: #000 !important;
border-color: #999 !important; box-shadow: none !important;
}
input[type=radio], input[type=checkbox] { accent-color: #000 !important; }
.qpane { display: block !important; }
.qpane[hidden] { display: block !important; }
.stem, p, summary, span, div, td, th, li, h1, h2, h3 { color: #000 !important; }
.dim, .meta { color: #333 !important; }
.ok-t, .warn-t, .bad-t { color: #000 !important; font-weight: bold; }
a { color: #000 !important; text-decoration: none !important; }
.katex { color: #000 !important; }
.table-wrap { overflow: visible !important; }
@page { margin: 14mm; }
}