Give Requests its own colour instead of leaving 4 fastext entries plain
All checks were successful
Deploy / deploy (push) Successful in 21s
All checks were successful
Deploy / deploy (push) Successful in 21s
Plain ink for Watch/Requests/Activity/Settings read as flat and unfinished, not deliberate — user feedback: "the new colors are awful and basically the same color." Requests gets magenta (--pending) back: not an arbitrary reuse, it's the same colour a request already carries once approved elsewhere in the app, and Requests genuinely is "waiting on a human." That's the real ceiling though — the locked eight teletext colours leave exactly five legible as text on black (blue fails contrast, black is invisible on black), so Watch/Activity/Settings still share plain ink rather than a sixth colour that doesn't exist in this palette.
This commit is contained in:
parent
59beb9490f
commit
8500fba745
3 changed files with 32 additions and 23 deletions
16
CLAUDE.md
16
CLAUDE.md
|
|
@ -105,12 +105,16 @@ the user's Unraid home server. Server-side project directory is still named
|
||||||
under the header on every page but the index — those pages carry no
|
under the header on every page but the index — those pages carry no
|
||||||
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. Only
|
line, since its body already lists every destination once. The
|
||||||
those original four (Index/Library/Discover/System) carry an `r`/
|
original four (Index/Library/Discover/System) keep their `r`/`g`/
|
||||||
`g`/`y`/`c` keyboard shortcut and a colour swatch — colour is
|
`y`/`c` keyboard shortcut and colour; Requests also gets a colour
|
||||||
semantic everywhere else in this app, so the other four entries
|
(magenta, `--pending`) without a shortcut — a deliberate fit, not
|
||||||
render in plain ink rather than reusing one of the four colours for
|
an arbitrary fifth pick, since Requests already is "waiting on a
|
||||||
a destination it doesn't mean. Whichever entry matches the current
|
human" everywhere else magenta appears. That's the ceiling: the
|
||||||
|
locked eight colours leave exactly five that read as legible text
|
||||||
|
on black (blue fails contrast there, black is invisible), so Watch/
|
||||||
|
Activity/Settings share plain ink rather than a sixth colour that
|
||||||
|
doesn't exist in this palette. Whichever entry matches the current
|
||||||
page renders as a `.fastext-here` span instead of a link — a page
|
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.
|
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
|
||||||
|
|
|
||||||
30
app.py
30
app.py
|
|
@ -1304,20 +1304,24 @@ def service_urls():
|
||||||
|
|
||||||
|
|
||||||
# Every destination, for the top of every page but the index. Order
|
# Every destination, for the top of every page but the index. Order
|
||||||
# matches nav_items. Colour is semantic everywhere else in this app
|
# matches nav_items. The locked eight teletext colours leave exactly
|
||||||
# (red = off-air, magenta = needs a decision, ...), so only the four
|
# five that read as text on black without inventing a ninth tone or
|
||||||
# that still carry a real teletext keyboard shortcut (r/g/y/c) get a
|
# borrowing a colour that already means something else here: the four
|
||||||
# colour swatch; the rest render in plain ink rather than borrowing
|
# with a real keyboard shortcut (r/g/y/c), plus magenta for Requests —
|
||||||
# one of the four colours for a destination it doesn't mean.
|
# not arbitrary, it's the same --pending magenta a request already
|
||||||
|
# shows once approved elsewhere, and Requests IS "waiting on a human".
|
||||||
|
# Blue fails contrast as text and black is invisible on black, so the
|
||||||
|
# three destinations left over (Watch/Activity/Settings) share plain
|
||||||
|
# ink rather than a sixth colour that doesn't exist in this palette.
|
||||||
FULL_FASTEXT = [
|
FULL_FASTEXT = [
|
||||||
("k-red", "r", "100", "Index", "/"),
|
("k-red", "r", "100", "Index", "/"),
|
||||||
("", "", "101", "Watch", "/watch"),
|
("", "", "101", "Watch", "/watch"),
|
||||||
("k-green", "g", "102", "Library", "/library"),
|
("k-green", "g", "102", "Library", "/library"),
|
||||||
("k-yellow", "y", "103", "Discover", "/discover"),
|
("k-yellow", "y", "103", "Discover", "/discover"),
|
||||||
("", "", "104", "Requests", "/requests"),
|
("k-magenta", "", "104", "Requests", "/requests"),
|
||||||
("k-cyan", "c", "105", "System", "/system"),
|
("k-cyan", "c", "105", "System", "/system"),
|
||||||
("", "", "106", "Activity", "/activity"),
|
("", "", "106", "Activity", "/activity"),
|
||||||
("", "", "900", "Settings", "/settings"),
|
("", "", "900", "Settings", "/settings"),
|
||||||
]
|
]
|
||||||
|
|
||||||
# The index's own closing row: just the four letter keys, since the
|
# The index's own closing row: just the four letter keys, since the
|
||||||
|
|
|
||||||
|
|
@ -533,10 +533,11 @@ a.tt-row:focus-visible .tt-row-sub { color: var(--tt-black); }
|
||||||
color: var(--ink-dim);
|
color: var(--ink-dim);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.fastext .k-red { color: var(--alert); }
|
.fastext .k-red { color: var(--alert); }
|
||||||
.fastext .k-green { color: var(--ok); }
|
.fastext .k-green { color: var(--ok); }
|
||||||
.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 a:hover, .fastext a:focus-visible {
|
.fastext a:hover, .fastext a:focus-visible {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue