danvics/pdf-quiz-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

fix: the study objective was near-white on near-white

Browse source 
The section bar is a light surface inside a dark navbar, and `.navbar`
sets a near-white text colour for that dark background. Everything in
the light bar inherited it: the study objective, its dropdown, the
counts. The section links had their own colour override and looked fine,
which is why it went unnoticed for so long.

`.navbar a`, `.navbar button` and their hovers are scoped to
`.navbar-primary` — the dark bar they were written for — rather than to
everything beneath it, which was also giving the switcher a translucent
white border on a white surface. And the section bar sets its own text
colour rather than inheriting one meant for a dark ground.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TqXevQJhxFrM7jJg82cgZN
This commit is contained in:
Daniel 2026-09-12 00:55:52 +02:00
parent 1b996b0a3d
commit b8b80877ac
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/index.css
View file

@ -177,6 +177,12 @@ html, body { overflow-x: hidden; }
/* A shade off the page, so the bar reads as a surface rather than as the top
of the content — white on white left it looking like a stray row of links. */
background: linear-gradient(var(--card-bg), var(--bg));
/* A light surface inside a dark navbar, and `.navbar` sets a near-white text
colour for that dark background. Everything in here inherited it — the
study objective and its dropdown especially — so it was near-white on
near-white and barely legible. The links had their own override and looked
fine, which is why it went unnoticed. */
color: var(--text);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
height: 46px;
@ -209,9 +215,12 @@ html, body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { .navbar-sections { transition: none; } }
[data-theme="markdown"] .navbar .logo { color: #d4a96a; }
.nav-burger { display: none; background: none !important; border: 0 !important; cursor: pointer; color: var(--navbar-fg); padding: 6px; flex-direction: column; gap: 5px; opacity: 0.85; }
.navbar a { color: var(--navbar-fg); text-decoration: none; font-size: 0.83rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s, background 0.15s; }
.navbar a:hover { background: rgba(255,255,255,0.09); opacity: 1 !important; }
.navbar button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--navbar-fg); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; font-family: inherit; }
/* Scoped to the dark bar. These were `.navbar a` and `.navbar button`, which
also caught everything in the light section bar beneath it — near-white text
and a translucent white border, on a white surface. */
.navbar-primary a { color: var(--navbar-fg); text-decoration: none; font-size: 0.83rem; padding: 6px 10px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s, background 0.15s; }
.navbar-primary a:hover { background: rgba(255,255,255,0.09); opacity: 1 !important; }
.navbar-primary button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--navbar-fg); padding: 5px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; white-space: nowrap; font-family: inherit; }
/* ── Cards ──────────────────────────────────────────────────── */
.card {