Colour Watch's fastext label, not just its swatch
All checks were successful
Deploy / deploy (push) Successful in 22s
All checks were successful
Deploy / deploy (push) Successful in 22s
Swatch-only blue read as unfinished next to the other five fully- coloured entries. The word now carries the colour like every other key, same currentColor mechanism as the rest — accepting blue's ~2.4:1 contrast on black as a known, deliberate exception to the 4.5:1 bar everything else here clears.
This commit is contained in:
parent
5dd49c505c
commit
9fba4f210e
3 changed files with 35 additions and 39 deletions
32
CLAUDE.md
32
CLAUDE.md
|
|
@ -106,21 +106,23 @@ the user's Unraid home server. Server-side project directory is still named
|
||||||
other nav, so it needs no scroll to reach. The index overrides it
|
other nav, so it needs no scroll to reach. The index overrides it
|
||||||
with `HOME_FASTEXT`, the original four-entry row, as its own closing
|
with `HOME_FASTEXT`, the original four-entry row, as its own closing
|
||||||
line, since its body already lists every destination once. Every
|
line, since its body already lists every destination once. Every
|
||||||
destination gets its own distinct mark — the locked eight colours
|
destination gets its own distinct mark. Six get a flat colour, text
|
||||||
only give five that read as legible text on black, so getting to
|
and swatch both: Index/Library/Discover/System keep their `r`/`g`/
|
||||||
eight took three treatments: five flat colours as text+swatch
|
`y`/`c` shortcut; Requests gets magenta/`--pending` with no
|
||||||
(Index/Library/Discover/System keep their `r`/`g`/`y`/`c` shortcut;
|
shortcut (a deliberate fit — Requests already is "waiting on a
|
||||||
Requests gets magenta/`--pending` with no shortcut — a deliberate
|
human" everywhere else magenta appears); Watch gets blue (`.k-blue`)
|
||||||
fit, since Requests already is "waiting on a human" everywhere else
|
with no shortcut. Blue is a known exception to the app's own 4.5:1
|
||||||
magenta appears); Watch gets blue as a swatch-only accent (`.k-blue`
|
text-contrast bar (it clears ~2.4:1 on black) — kept anyway, at the
|
||||||
— blue fails contrast as body text, so only the small cell carries
|
visitor's request, over the alternative of a swatch-only accent
|
||||||
it, not the row's own label); Activity gets an ordered-dither swatch
|
that read as unfinished next to six fully-coloured neighbours.
|
||||||
(`.k-dither`, same mechanism as `--dither-mid`) rather than a flat
|
Activity gets an ordered-dither swatch (`.k-dither`, same mechanism
|
||||||
colour. Settings alone keeps plain ink with no swatch treatment —
|
as `--dither-mid`) instead of a flat colour — the one other legal
|
||||||
deliberately, as the one page with no live status of its own.
|
way to get a distinct mark without a ninth hue. Settings alone
|
||||||
Whichever entry matches the current page renders as a
|
keeps plain ink with no swatch treatment — deliberately, as the one
|
||||||
`.fastext-here` span instead of a link — a page linking to itself
|
page with no live status of its own. Whichever entry matches the
|
||||||
did nothing, so it isn't offered as a click.
|
current page renders as a `.fastext-here` span instead of a link —
|
||||||
|
a page linking to itself did nothing, so it isn't offered as a
|
||||||
|
click.
|
||||||
- **Nothing is clipped, hidden, or sticky.** All seven page numbers and
|
- **Nothing is clipped, hidden, or sticky.** All seven page numbers and
|
||||||
every fastext entry stay visible at every width, reflowing to another
|
every fastext entry stay visible at every width, reflowing to another
|
||||||
row rather than scrolling, truncating, or folding into a menu. No
|
row rather than scrolling, truncating, or folding into a menu. No
|
||||||
|
|
|
||||||
33
app.py
33
app.py
|
|
@ -1304,25 +1304,20 @@ def service_urls():
|
||||||
|
|
||||||
|
|
||||||
# Every destination, for the top of every page but the index, each
|
# Every destination, for the top of every page but the index, each
|
||||||
# with its own distinct treatment. Order matches nav_items. The
|
# with its own distinct treatment. Order matches nav_items. Six of the
|
||||||
# locked eight teletext colours only give five that read as full-
|
# eight get a flat colour, text and swatch both: the four with a real
|
||||||
# saturation text on black (blue fails contrast there), so getting all
|
# keyboard shortcut (r/g/y/c), plus magenta for Requests (the same
|
||||||
# eight distinct without inventing a ninth colour takes three
|
# --pending magenta a request already shows once approved elsewhere —
|
||||||
# treatments, not one:
|
# Requests IS "waiting on a human") and blue for Watch. Blue is ~2.4:1
|
||||||
# - Five flat colours, text and swatch both: the four with a real
|
# contrast on black, well under the 4.5:1 every other body text here
|
||||||
# keyboard shortcut (r/g/y/c), plus magenta for Requests — not
|
# clears — a known, deliberate exception, not an oversight; it's set
|
||||||
# arbitrary, it's the same --pending magenta a request already
|
# this way because coloured-icon-only for Watch read as unfinished
|
||||||
# shows once approved elsewhere, and Requests IS "waiting on a
|
# next to six fully-coloured neighbours. Activity gets an ordered
|
||||||
# human".
|
# dither swatch instead of a flat colour, the one other legal way to
|
||||||
# - Blue as a swatch-only accent (Watch): legible as a small solid
|
# get a distinct mark out of this palette without smuggling in a ninth
|
||||||
# cell — "the physical coloured button on the remote" — but not as
|
# hue. Settings alone keeps plain ink — deliberately, as the one page
|
||||||
# the row's own text colour, where it fails contrast.
|
# with no live status of its own, so it's the one that gets no colour
|
||||||
# - An ordered dither swatch (Activity): the one other legal way to
|
# rather than an arbitrary leftover.
|
||||||
# get a distinct mark out of this palette per base.css's own first
|
|
||||||
# discipline, without smuggling in a ninth hue.
|
|
||||||
# Settings keeps plain ink deliberately — the one purely administrative
|
|
||||||
# destination with no live status of its own, so it's the one page
|
|
||||||
# that gets no colour at all rather than an arbitrary last one.
|
|
||||||
FULL_FASTEXT = [
|
FULL_FASTEXT = [
|
||||||
("k-red", "r", "100", "Index", "/"),
|
("k-red", "r", "100", "Index", "/"),
|
||||||
("k-blue", "", "101", "Watch", "/watch"),
|
("k-blue", "", "101", "Watch", "/watch"),
|
||||||
|
|
|
||||||
|
|
@ -560,11 +560,10 @@ a.tt-row:focus-visible .tt-row-sub { color: var(--tt-black); }
|
||||||
.fastext .k-yellow { color: var(--voice); }
|
.fastext .k-yellow { color: var(--voice); }
|
||||||
.fastext .k-cyan { color: var(--live); }
|
.fastext .k-cyan { color: var(--live); }
|
||||||
.fastext .k-magenta { color: var(--pending); }
|
.fastext .k-magenta { color: var(--pending); }
|
||||||
/* Blue fails contrast as body text on black, so it marks the swatch
|
/* Pure blue on black is ~2.4:1 contrast — well under the 4.5:1 every
|
||||||
only — the button cap's colour, not the printed label — while the
|
other body text in this app clears — but the word carries the
|
||||||
row's own text stays legible ink. */
|
colour like every other key here, at the visitor's request. */
|
||||||
.fastext .k-blue::before { background: var(--field); }
|
.fastext .k-blue { color: var(--field); }
|
||||||
.fastext .k-blue:hover, .fastext .k-blue:focus-visible { background: var(--field); }
|
|
||||||
/* The one other legal way to get a distinct mark out of eight colours
|
/* The one other legal way to get a distinct mark out of eight colours
|
||||||
without a ninth: an ordered dither, same mechanism as --dither-mid,
|
without a ninth: an ordered dither, same mechanism as --dither-mid,
|
||||||
in place of a flat swatch. */
|
in place of a flat swatch. */
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue