MCP/mcltspice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve oscilloscope panel label contrast for accessibility

Browse Source 
Bump opacity on section labels, knob labels, brand text, and
attribution bar. Slightly increase font sizes on smallest labels.
Maintains vintage aesthetic while meeting readable contrast levels.
This commit is contained in:
Ryan Malloy 2026-02-14 20:49:34 -07:00
parent b0db898ab4
commit c69874c5cb
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/src/styles/oscilloscope.css
View File

@ -50,7 +50,7 @@
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
color: var(--scope-label); color: var(--scope-label);
opacity: 0.75; opacity: 0.9;
} }
.scope-brand-model { .scope-brand-model {
@ -60,7 +60,7 @@
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--scope-label); color: var(--scope-label);
opacity: 0.55; opacity: 0.78;
} }
/* ── CRT bay (recessed dark area) ────────────────────────── */ /* ── CRT bay (recessed dark area) ────────────────────────── */
@ -195,12 +195,12 @@
.scope-section-label { .scope-section-label {
font-family: var(--sl-font-mono, ui-monospace, monospace); font-family: var(--sl-font-mono, ui-monospace, monospace);
font-size: 0.45rem; font-size: 0.5rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--scope-label); color: var(--scope-label);
opacity: 0.6; opacity: 0.88;
line-height: 1; line-height: 1;
} }
@ -232,11 +232,11 @@
.scope-knob-label { .scope-knob-label {
font-family: var(--sl-font-mono, ui-monospace, monospace); font-family: var(--sl-font-mono, ui-monospace, monospace);
font-size: 0.4rem; font-size: 0.45rem;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: var(--scope-label); color: var(--scope-label);
opacity: 0.5; opacity: 0.78;
line-height: 1; line-height: 1;
} }
@ -372,8 +372,9 @@
.scope-attribution { .scope-attribution {
font-family: var(--sl-font-mono, ui-monospace, monospace); font-family: var(--sl-font-mono, ui-monospace, monospace);
font-size: 0.45rem; font-size: 0.48rem;
color: var(--scope-panel-dark); color: var(--scope-label);
opacity: 0.72;
line-height: 1.4; line-height: 1.4;
text-align: center; text-align: center;
} }