UI: the live logger's theme, app-wide (manager pages included) #14

Merged

hermes-agent merged 1 commit from feature/global-theme into main

2026-10-29 15:38:40 +00:00

hermes-agent commented

2026-10-29 15:33:01 +00:00

Owner

The owner approved the live logging panel's theme and asked for the same look on every page, manager pages included.

Approach

No template-by-template restyling: the logger's token system became the CSS base layer, so every page inherits it with zero template churn.

Tokens now cover the page itself (page background/text, accent green, danger, accent contrast) in both colour schemes. The old hardcoded values that mismatched the theme (#ccc borders, #666 hints, #b00020, the flat #0b6 button) are gone.
Everything restyled from tokens: forms (fieldsets as panels with uppercase legends), inputs/selects (logger-field recipe app-wide, focus ring unchanged), buttons (accent + hover), tables (logger-style uppercase header strip, gentle zebra, row hover), headings (accent underline under the h1), links and hints.
A generic .badge class makes the logger's band-badge recipe reusable.
Content width 48rem → 60rem for the manager's multi-column tables; the logger keeps its 80rem bar.
Print documents stay paper: summary sheet, monthly/yearly results and the NLC report always render on a white sheet even in a dark OS — body.document re-pins the light palette inside the dark media query, so a dark-OS heading cannot land white-on-white again (same incident class as the original token fix). The print stylesheet hides interactive chrome.

Verified in the browser, light and dark

Manager dashboard, monthly results, live start page, live entry bar with an open session, NLC report under a forced dark OS (white sheet, readable headings). Screenshots reviewed in-session.

Tests

307 passing — CSS-only change plus verified rendering on the running stack.

The owner approved the live logging panel's theme and asked for the same look on every page, manager pages included. ## Approach No template-by-template restyling: the logger's token system became the CSS **base layer**, so every page inherits it with zero template churn. - Tokens now cover the page itself (page background/text, accent green, danger, accent contrast) in both colour schemes. The old hardcoded values that mismatched the theme (`#ccc` borders, `#666` hints, `#b00020`, the flat `#0b6` button) are gone. - Everything restyled from tokens: **forms** (fieldsets as panels with uppercase legends), **inputs/selects** (logger-field recipe app-wide, focus ring unchanged), **buttons** (accent + hover), **tables** (logger-style uppercase header strip, gentle zebra, row hover), **headings** (accent underline under the h1), links and hints. - A generic `.badge` class makes the logger's band-badge recipe reusable. - Content width 48rem → 60rem for the manager's multi-column tables; the logger keeps its 80rem bar. - **Print documents stay paper**: summary sheet, monthly/yearly results and the NLC report always render on a white sheet even in a dark OS — `body.document` re-pins the light palette inside the dark media query, so a dark-OS heading cannot land white-on-white again (same incident class as the original token fix). The print stylesheet hides interactive chrome. ## Verified in the browser, light and dark Manager dashboard, monthly results, live start page, live entry bar with an open session, NLC report under a forced dark OS (white sheet, readable headings). Screenshots reviewed in-session. ## Tests 307 passing — CSS-only change plus verified rendering on the running stack.

hermes-agent added 1 commit

2026-10-29 15:33:01 +00:00

feat(ui): the live logger's theme is now the app-wide design language e6716bc71e

The owner approved the logging panel's theme and asked for it everywhere,
manager pages included. Instead of restyling template by template, the live
panel's token system became the base layer, so every page inherits it:

- The token block gains page-level tokens (page bg/text, accent green, danger)
  in both colour schemes, and body paints itself with them - the old hardcoded
  #ccc/#666/#b00020/#0b6 values that mismatched the theme are gone.
- Forms, buttons, tables, headings, links and hints are token-based now:
  fieldsets render as panels with uppercase legends, buttons use the accent
  with hover, table headers get the logger's uppercase label strip, rows get a
  gentle zebra + hover. A generic .badge (the band-badge recipe) is available.
- Content width goes 48rem -> 60rem: the manager's multi-column tables do not
  fit 48rem; the logger keeps its own 80rem bar width.
- Print documents (summary sheet, monthly/yearly results, NLC report) always
  render on a white sheet even when the OS is dark - body.document pins the
  light palette inside the dark media query, because a dark-OS h1 on a forced
  white page repeats the white-on-white incident class. Print CSS hides
  interactive chrome (header, lang switch, buttons, download lists).

Verified in the browser, light and dark, on: manager dashboard, monthly results,
live start page, live entry bar with an open session, and the NLC report under a
dark OS (white sheet, readable). Tests: 307 (unaffected).

hermes-agent merged commit bdcfe4739a into main

2026-10-29 15:38:40 +00:00

hermes-agent referenced this pull request from a commit

2026-10-29 15:38:40 +00:00

Merge pull request 'UI: the live logger's theme, app-wide (manager pages included)' (#14) from feature/global-theme into main

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

public/vrza-contestrobot!14

No description provided.

Rows
Columns