slaguru666/RingBRP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pause overlay: tighten the caption, lift the field grid

Browse Source 
Both found by looking at the thing render, which nothing had done before — the earlier
work on this overlay was verified through the CSSOM because the browser pane would not
composite frames, so the geometry and timing were confirmed and the LOOK was not.

Michroma is already a wide face, and .4em on top of it set GAME PAUSED at 176px against
a 190px field: 93%, running bracket to bracket, so the readout was competing with the
lock for the same width. .22em measures 154px, 81%, leaving 18px clear at each bracket.
text-indent moves with it so the word stays optically centred.

The field grid was drawn at opacity .3, which composited over the void band is 1.44:1
against its own ground. On a dark table map that is not a faint grid, it is no grid at
all. .45 measures 1.80:1 — present as texture, still far below the 3.1:1 --rb-line is
chosen for, so the amber lock stays the only thing asking for attention.

Both measured in a browser with Michroma confirmed loaded, not estimated.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
slaguru666
2026-08-30 21:27:17 +01:00
co-authored by Claude Opus 5
parent 8d7508077c
commit 85c1062106
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/ringbrp.css
+11 -3
View File
@@ -1774,7 +1774,11 @@
radial-gradient(circle, transparent 0 71px, var(--rb-line) 71px 72px, transparent 72px),
repeating-linear-gradient(to right, var(--rb-line) 0 1px, transparent 1px 19px),
repeating-linear-gradient(to bottom, var(--rb-line) 0 1px, transparent 1px 19px);
opacity: .3;
/* --rb-line is chosen to give 3.1:1 at full strength; composited at .3 over the void
band it falls to 1.44:1, which on a dark table map is not a faint grid, it is no
grid. .45 measures 1.80:1 — present as texture, still quiet enough that the amber
lock is the only thing competing for attention. */
opacity: .45;
-webkit-mask: radial-gradient(circle, #000 32%, transparent 74%);
mask: radial-gradient(circle, #000 32%, transparent 74%);
}
@@ -1829,10 +1833,14 @@
#pause.paused figcaption {
font-family: var(--rb-display);
font-size: 21px;
letter-spacing: .4em;
/* Michroma is already a wide face, and .4em on top of it set GAME PAUSED at 176px
against a 190px field — 93%, running bracket to bracket, so the readout fought the
lock for the same width. .22em measures 154px, 81%, which sits inside the brackets
and still reads as a tracked instrument label. */
letter-spacing: .22em;
/* letter-spacing adds its gap after the last glyph too; pull the line back by one to
keep the word optically centred under the field */
text-indent: .4em;
text-indent: .22em;
text-transform: uppercase;
color: var(--rb-yellow);
line-height: 1.2;