ui: the navbar measures its foreground instead of assuming one
The bar's background is the one surface a user picks -- twelve colour names,
which each theme resolves to twelve of its own colours. Forty-eight
backgrounds, and the links and status icons were drawn on all of them in a
single token, `--btn-text`, which is near-black in three of the four themes.
Night's `--brown` is #451212. A near-black glyph on it is 1.33:1. Nine of
night's twelve colours and seven of amber's sat below 4.5:1, and twelve of the
forty-eight below 3:1 -- icons the same colour as the bar behind them.
So the foreground is measured against the background the theme actually
resolved, choosing between that theme's own `--btn-text`, `--black` and
`--white`. Its own, not literal ones: a white pixel in night mode undoes the
dark adaptation the theme exists to protect, so night's "white" is #ff8a8a.
Measuring at runtime rather than shipping an `--on-red` token per colour also
means the custom YAML themes still ahead get this for free.
Nothing is below 3:1 any more and the worst case is 3.27:1, up from 1.33:1.
No combination is worse than it was.
Ten of the forty-eight are still under 4.5:1 and no foreground will lift them:
a monochrome theme resolves all twelve names onto one ramp, and a mid-tone of a
hue cannot carry text of that same hue. That shortfall is in the palette, so
/theme-sample now draws all twelve bars with the measured ratio printed beside
each one, calling out the ten -- it is a decision to make while looking at them.
The WCAG primitives move to themes/contrast so theme code can measure a colour
without importing Common.js, which pulls in half the component library.
Common.js forwards `contrastRatio` with a delegating function rather than a bare
re-export: six specs mock it with `{...jest.requireActual('./Common')}`, the
spread invokes every getter, and those spreads run re-entrantly while the module
is still evaluating -- a re-export getter fires before its import binding exists
and takes the whole suite down.
Tested: navColors.test.js measures all forty-eight against the palette parsed
out of tokens.css, and holds Nav.js to the call by source since neither bar is
reachable from a test that could measure it. ui-layout.cy.js measures the
painted result in a real browser in all four themes and holds it against the
number the component reports. Reverting to the fixed foreground reddens four
jest cases and three cypress ones.
1115 jest / 62 suites, 177 in ui-layout.cy.js, clean npm run build.
2026-08-02 14:07:19 -06:00
|
|
|
/* Nav bar: a hand-rolled flexbox bar (was a Semantic Menu). The user-chosen background
|
|
|
|
|
and the foreground measured against it are set inline (see themes/navColors); this
|
|
|
|
|
stylesheet only supplies structure and hover affordances. */
|
2026-07-30 13:15:43 -06:00
|
|
|
.wrolpi-navbar {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: stretch;
|
ui: the last Semantic UI file, and the stylesheet with it
ControllerPage was the final call site; Theme.tsx then had nothing left to wrap,
so it drops from 861 lines to 338 -- the provider that resolves the theme, stamps
`data-theme` and `data-media-filter`, persists both and hands Mantine our tokens.
Everything below that was Semantic wrappers.
The dark-mode compatibility props went with them. `i`, `s`, `t` and `inverted`
existed so unmigrated components could borrow Semantic's dark treatment, and
they carried hardcoded greys -- #1B1C1D, #dddddd, #eeeeee -- which is exactly
what the token themes replaced. Three call sites in Common.js were still
injecting the #eeeeee one into links.
Then `semantic-ui-offline/semantic.min.css` came out of App.js. That took more
with it than expected, and looking at the running app is the only reason it was
caught:
Every link lost its colour and gained the browser's underline and visited
purple. The dashboard's load averages and section headings were underlined
and purple. Links now take `--blue`, which remaps per theme, and underline
only on hover -- many of them wrap cards, posters and icons.
`box-sizing: border-box` disappeared, which silently changes the size of every
padded element in the app. Semantic's reset had been providing it.
The navigation bar overflowed a 1000px viewport with `nowrap` and cut "Admin"
off the right edge -- the one link a user needs to reach the settings that fix
a broken WROLPi. Semantic's menu wrapped; ours does now too.
The gzipped CSS bundle is 47.5 kB, and one call site was still leaning on
Semantic's grid classes -- now a flex column, since all three of its callers
pass library components.
The ratchet stays rather than being deleted. At zero it asserts four things: no
file imports Semantic UI, none calls its toast library, none leans on its
stylesheet, and no file reaches back through Theme.tsx. It can go when the
packages are uninstalled.
Theme.test.js is deleted, but not before porting the two behaviours it
protected: that Button forwards a ref to the real DOM element (a class-component
ref once crashed the Control page, because portals call `node.contains`), and
that the progress percentage stays readable on every bar colour.
2026-07-30 13:41:05 -06:00
|
|
|
/*
|
|
|
|
|
* Wraps rather than clipping. Semantic's menu wrapped, and with this many items the
|
|
|
|
|
* bar overflows a 1000px viewport -- `nowrap` cut "Admin" off the right edge, which
|
|
|
|
|
* is the one link a user needs to reach the settings that fix a broken WROLPi.
|
|
|
|
|
*/
|
|
|
|
|
flex-wrap: wrap;
|
2026-07-30 13:15:43 -06:00
|
|
|
min-height: 3.4em;
|
|
|
|
|
padding: 0 0.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrolpi-navbar-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
gap: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrolpi-navbar-link,
|
|
|
|
|
.wrolpi-navbar-link-button {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
ui: the last Semantic UI file, and the stylesheet with it
ControllerPage was the final call site; Theme.tsx then had nothing left to wrap,
so it drops from 861 lines to 338 -- the provider that resolves the theme, stamps
`data-theme` and `data-media-filter`, persists both and hands Mantine our tokens.
Everything below that was Semantic wrappers.
The dark-mode compatibility props went with them. `i`, `s`, `t` and `inverted`
existed so unmigrated components could borrow Semantic's dark treatment, and
they carried hardcoded greys -- #1B1C1D, #dddddd, #eeeeee -- which is exactly
what the token themes replaced. Three call sites in Common.js were still
injecting the #eeeeee one into links.
Then `semantic-ui-offline/semantic.min.css` came out of App.js. That took more
with it than expected, and looking at the running app is the only reason it was
caught:
Every link lost its colour and gained the browser's underline and visited
purple. The dashboard's load averages and section headings were underlined
and purple. Links now take `--blue`, which remaps per theme, and underline
only on hover -- many of them wrap cards, posters and icons.
`box-sizing: border-box` disappeared, which silently changes the size of every
padded element in the app. Semantic's reset had been providing it.
The navigation bar overflowed a 1000px viewport with `nowrap` and cut "Admin"
off the right edge -- the one link a user needs to reach the settings that fix
a broken WROLPi. Semantic's menu wrapped; ours does now too.
The gzipped CSS bundle is 47.5 kB, and one call site was still leaning on
Semantic's grid classes -- now a flex column, since all three of its callers
pass library components.
The ratchet stays rather than being deleted. At zero it asserts four things: no
file imports Semantic UI, none calls its toast library, none leans on its
stylesheet, and no file reaches back through Theme.tsx. It can go when the
packages are uninstalled.
Theme.test.js is deleted, but not before porting the two behaviours it
protected: that Button forwards a ref to the real DOM element (a class-component
ref once crashed the Control page, because portals call `node.contains`), and
that the progress percentage stays readable on every bar colour.
2026-07-30 13:41:05 -06:00
|
|
|
/* Tightened from 1.1em: the bar has eleven links plus nine indicators. */
|
|
|
|
|
padding: 0 0.8em;
|
2026-07-30 13:15:43 -06:00
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
font: inherit;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrolpi-navbar-link:hover,
|
|
|
|
|
.wrolpi-navbar-link-button:hover {
|
ui: the last Semantic UI file, and the stylesheet with it
ControllerPage was the final call site; Theme.tsx then had nothing left to wrap,
so it drops from 861 lines to 338 -- the provider that resolves the theme, stamps
`data-theme` and `data-media-filter`, persists both and hands Mantine our tokens.
Everything below that was Semantic wrappers.
The dark-mode compatibility props went with them. `i`, `s`, `t` and `inverted`
existed so unmigrated components could borrow Semantic's dark treatment, and
they carried hardcoded greys -- #1B1C1D, #dddddd, #eeeeee -- which is exactly
what the token themes replaced. Three call sites in Common.js were still
injecting the #eeeeee one into links.
Then `semantic-ui-offline/semantic.min.css` came out of App.js. That took more
with it than expected, and looking at the running app is the only reason it was
caught:
Every link lost its colour and gained the browser's underline and visited
purple. The dashboard's load averages and section headings were underlined
and purple. Links now take `--blue`, which remaps per theme, and underline
only on hover -- many of them wrap cards, posters and icons.
`box-sizing: border-box` disappeared, which silently changes the size of every
padded element in the app. Semantic's reset had been providing it.
The navigation bar overflowed a 1000px viewport with `nowrap` and cut "Admin"
off the right edge -- the one link a user needs to reach the settings that fix
a broken WROLPi. Semantic's menu wrapped; ours does now too.
The gzipped CSS bundle is 47.5 kB, and one call site was still leaning on
Semantic's grid classes -- now a flex column, since all three of its callers
pass library components.
The ratchet stays rather than being deleted. At zero it asserts four things: no
file imports Semantic UI, none calls its toast library, none leans on its
stylesheet, and no file reaches back through Theme.tsx. It can go when the
packages are uninstalled.
Theme.test.js is deleted, but not before porting the two behaviours it
protected: that Button forwards a ref to the real DOM element (a class-component
ref once crashed the Control page, because portals call `node.contains`), and
that the progress percentage stays readable on every bar colour.
2026-07-30 13:41:05 -06:00
|
|
|
/* A translucent black works on every navbar colour, light or dark. */
|
|
|
|
|
background: rgba(0, 0, 0, 0.12);
|
2026-07-30 13:15:43 -06:00
|
|
|
}
|
|
|
|
|
|
ui: the corner icons opt out of the bar's foreground, so make them stop
Measuring the foreground against the bar is worth nothing if the icons ignore
it, and two of them did -- the search glyph and the hamburger came out blue on
every bar in every theme while the rest of the bar was correct.
Neither inherits. An anchor takes `a {color: var(--blue)}` from tokens.css,
which outranks an inherited value however the bar sets it; the search glyph is
an anchor. A Mantine ActionIcon paints `--ai-color`, its own themed blue, and
Mantine writes that variable INLINE on the element, so a stylesheet declaring it
loses every time -- the painted property has to be set instead. The status
icons that link to /admin are anchors too, and only looked right because they
carry an inline colour of their own, which still wins and is meant to.
The test that claimed to cover this read `querySelector('...svg')`: one element,
the first, which was a plain inheriting Icon. It asserted every icon and
measured the only one that was never broken. It now reads querySelectorAll,
asserts the count, and checks all four -- and reddens in all four themes with
the rule removed, naming --blue as the value it found.
The gallery sample was wrong in the same direction: it used an IconButton for
the search icon, so it showed the ActionIcon fault twice and hid the anchor
fault entirely. It now carries all three shapes the real bar puts in that
corner.
1115 jest / 62 suites, 177 in ui-layout.cy.js, clean npm run build.
2026-08-02 14:12:39 -06:00
|
|
|
/*
|
|
|
|
|
* Everything in the bar takes the bar's foreground.
|
|
|
|
|
*
|
|
|
|
|
* `color: inherit` on the links alone was not enough, because two of the things in the
|
|
|
|
|
* corner do not inherit at all and both came out blue on every bar in every theme:
|
|
|
|
|
*
|
|
|
|
|
* - An anchor takes `a {color: var(--blue)}` from tokens.css, which outranks an inherited
|
|
|
|
|
* value however the bar sets it. The search glyph is an anchor, and so is every status
|
|
|
|
|
* icon that links to /admin -- those only looked right because they carry an inline
|
|
|
|
|
* colour of their own, which still wins here and is meant to.
|
|
|
|
|
* - A Mantine ActionIcon paints `--ai-color`, its own themed blue. The hamburger and the
|
|
|
|
|
* theme toggle are ActionIcons. The variable is no use as a hook: Mantine writes it
|
|
|
|
|
* INLINE on the element, so a stylesheet declaring it loses every time (the same trap
|
|
|
|
|
* as `--group-justify` on Pagination). The painted property has to be set instead, and
|
|
|
|
|
* `html` lifts this over Mantine's own single-class rule.
|
|
|
|
|
*
|
|
|
|
|
* Measuring the foreground against the bar is worth nothing if the icons opt out of it.
|
|
|
|
|
*/
|
|
|
|
|
.wrolpi-navbar a,
|
|
|
|
|
html .wrolpi-navbar .mantine-ActionIcon-root {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* The bar's own hover, rather than a blue tint from Mantine's palette. */
|
|
|
|
|
html .wrolpi-navbar .mantine-ActionIcon-root:hover {
|
|
|
|
|
background: rgba(0, 0, 0, 0.12);
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
ui: the navbar corner was nudged rather than laid out, and it showed
Three faults in the bar, all reproduced by measurement before being fixed.
The indicators sat low. The slot carried `marginTop: 0.8em`, a nudge left over
from Semantic's menu; the corner centres its children, and a top margin is part
of the margin box being centred, so it applied as a ~6px downward shift. It
read as an error on the hotspot and the theme picker but not on share or search,
which is why it survived: an IconButton is a square ActionIcon that centres its
glyph exactly, while a bare-icon anchor sits high inside a line box that
reserves descender space for text that is not there. The nudge cancelled that
out on one shape and was pure error on the other. Both are laid out now --
flex, centred, no nudge -- and the anchors get `display: flex` so they hug their
glyph instead of a text line.
Help and Admin highlighted only a box around their text while Videos and
Statistics highlighted the full height. Same class, same rules, different
parent: the bar stretches its children, but the corner is a nested flex
container that centres its own, so a link inside it was sized to its content.
The hover background is painted on the link box, so that box IS the affordance.
The bar broke onto a second line at certain widths. Two measurement errors that
only overlap in a narrow band, which is why it appeared while resizing rather
than always. useOverflowNav measured the WRAPPER's offsetWidth and subtracted
only the home link and the corner, missing the bar's own `padding: 0 0.25em` --
about 8px it believed it had. And the hidden "More" placeholder it measured was
a plain button with no dropdown caret, about 21px narrower than the button that
eventually rendered. The placeholder is now the same component as the real
trigger, so the two cannot drift again.
Tested in ui-layout.cy.js against the real <DesktopNav/>, which takes its
colours, home link and indicators as props and so needs none of NavBar's polling
hooks. Indicator centres are measured against the bar's centre rather than each
other, because three things can be equally and consistently wrong and were. The
wrap case sweeps 1180px down to 640px in 6px steps -- a spot check steps over a
band that narrow. All three failed first: share 3.4px high, Help 24.8px against
a 54.4px bar, and two rows at 1156px.
Confirmed on the running app: every indicator at 0.0px from the bar's centre,
Help and Admin at the full 54.4px, and no wrap anywhere from 1500px to 780px.
1115 jest / 62 suites, 182 in ui-layout.cy.js, clean npm run build.
2026-08-02 14:25:04 -06:00
|
|
|
/*
|
|
|
|
|
* One status indicator's slot. Laid out rather than nudged: see NavIconWrapper in Nav.js
|
|
|
|
|
* for the 0.8em top margin this replaces and why it looked correct on half the indicators.
|
|
|
|
|
*/
|
|
|
|
|
.wrolpi-navbar-icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left: 1.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* An anchor in the corner hugs its glyph instead of a text line box.
|
|
|
|
|
*
|
|
|
|
|
* A line box reserves descender space for text that is not there, which leaves an icon
|
|
|
|
|
* sitting about 3px above the centre of the box being centred -- the share and search
|
|
|
|
|
* glyphs, but not the hotspot or theme picker, which are square ActionIcons that centre
|
|
|
|
|
* their own glyph. That difference is what made a single top margin look right on some
|
|
|
|
|
* indicators and wrong on others.
|
|
|
|
|
*/
|
|
|
|
|
.wrolpi-navbar-right a {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* A link in the corner fills the bar's height, as one outside it does.
|
|
|
|
|
*
|
|
|
|
|
* Help and Admin highlighted only a box around their text while Videos and Statistics
|
|
|
|
|
* highlighted the full height. Same class and same rules; the difference is the parent.
|
|
|
|
|
* The bar stretches its children, but the corner is a nested flex container that centres
|
|
|
|
|
* its own, so a link inside it was sized to its content. The hover background is painted
|
|
|
|
|
* on the link box, so this is the hover affordance itself and not just its outline.
|
|
|
|
|
*/
|
|
|
|
|
.wrolpi-navbar-right .wrolpi-navbar-link,
|
|
|
|
|
.wrolpi-navbar-right .wrolpi-navbar-link-button {
|
|
|
|
|
align-self: stretch;
|
|
|
|
|
}
|
|
|
|
|
|
2021-11-01 16:42:52 -06:00
|
|
|
.channel-edit {
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
padding: 0.75em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.channel-edit:hover {
|
|
|
|
|
background-color: #7abaff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::-ms-clear {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-control-clear {
|
|
|
|
|
z-index: 10;
|
|
|
|
|
pointer-events: auto;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
pre.wrap-text {
|
|
|
|
|
white-space: pre-wrap; /* Since CSS 2.1 */
|
|
|
|
|
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
|
|
|
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.duration-overlay {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 4px;
|
|
|
|
|
right: 4px;
|
|
|
|
|
color: black;
|
2023-04-01 11:52:41 -06:00
|
|
|
background: #ffffff;
|
2021-11-01 16:42:52 -06:00
|
|
|
padding: 0px 4px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.no-link-underscore {
|
|
|
|
|
text-decoration: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
ui: cards get legible titles, contained posters, and meta beside the title
Four defects on /videos, /docs and /archives.
Titles were invisible outside light. `.card-link` carried a literal
`color: black` from before the themes existed -- about 1.1:1 on the dark,
night and amber panels. It applies to every card title and to the
channel/author/domain line beside it. The date was fine, since it takes
`--muted` from the card body, which is what made this look like a card
bug rather than a link bug. Titles now take `--text`: they are links,
but they are the card's text, not a wall of blue.
Posters were cropped, not mis-proportioned. The image carried a fixed
290x163 box; a card in the default grid is about 233px wide and Mantine's
Card sets `overflow: hidden`, so the browser painted the middle 233px of
a 290px image. The ratio was right in the layout tree and wrong on
screen. Replaced with caps on both axes -- the card's width and
`--card-poster-max-height: 200px` -- with `width`/`height` left `auto` so
the pair behaves as "contain". Bounding the width alone was tried first
and is not enough: a square thumbnail then stands as tall as the card is
wide, and a portrait book cover taller still.
The meta line was foot-anchored, so on /docs a PDF with no author had its
date shoved up to 55px below the title, at the bottom of a card that was
tall only because of its neighbour in the row. It now sits directly
under the title.
Archive cards read buttons-then-domain, because the buttons were children
and the meta was what got pushed to the foot. Card gains an `actions`
slot, rendered last and anchored to the foot, so a row lines its buttons
up however many lines each title took.
Gallery gains a poster row covering all five ratios and a row showing
meta/actions against unequal titles.
1076 jest tests, 145 in ui-layout.cy.js, clean build. Every new guard was
checked against a planted regression: dropping the height cap reddens the
square and portrait cases and leaves 16:9 green; `width: 100%` reddens
containment; restoring `color: black` reddens dark/night/amber and leaves
light green; re-anchoring the meta and swapping the slot order redden both
the jest order test and the cypress geometry tests.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-02 09:16:31 -06:00
|
|
|
/*
|
|
|
|
|
* A card's title and its author/channel/domain line are links, but they are the card's
|
|
|
|
|
* text -- they take the body colour rather than the link colour, so a grid of cards reads
|
|
|
|
|
* as titles and not as a wall of blue. This was a literal `black` until the themes
|
|
|
|
|
* arrived, which left every title at about 1.1:1 on the dark, night and amber panels.
|
|
|
|
|
*/
|
2022-01-03 15:13:02 -07:00
|
|
|
.card-link {
|
ui: cards get legible titles, contained posters, and meta beside the title
Four defects on /videos, /docs and /archives.
Titles were invisible outside light. `.card-link` carried a literal
`color: black` from before the themes existed -- about 1.1:1 on the dark,
night and amber panels. It applies to every card title and to the
channel/author/domain line beside it. The date was fine, since it takes
`--muted` from the card body, which is what made this look like a card
bug rather than a link bug. Titles now take `--text`: they are links,
but they are the card's text, not a wall of blue.
Posters were cropped, not mis-proportioned. The image carried a fixed
290x163 box; a card in the default grid is about 233px wide and Mantine's
Card sets `overflow: hidden`, so the browser painted the middle 233px of
a 290px image. The ratio was right in the layout tree and wrong on
screen. Replaced with caps on both axes -- the card's width and
`--card-poster-max-height: 200px` -- with `width`/`height` left `auto` so
the pair behaves as "contain". Bounding the width alone was tried first
and is not enough: a square thumbnail then stands as tall as the card is
wide, and a portrait book cover taller still.
The meta line was foot-anchored, so on /docs a PDF with no author had its
date shoved up to 55px below the title, at the bottom of a card that was
tall only because of its neighbour in the row. It now sits directly
under the title.
Archive cards read buttons-then-domain, because the buttons were children
and the meta was what got pushed to the foot. Card gains an `actions`
slot, rendered last and anchored to the foot, so a row lines its buttons
up however many lines each title took.
Gallery gains a poster row covering all five ratios and a row showing
meta/actions against unequal titles.
1076 jest tests, 145 in ui-layout.cy.js, clean build. Every new guard was
checked against a planted regression: dropping the height cap reddens the
square and portrait cases and leaves 16:9 green; `width: 100%` reddens
containment; restoring `color: black` reddens dark/night/amber and leaves
light green; re-anchoring the meta and swapping the slot order redden both
the jest order test and the cypress geometry tests.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-02 09:16:31 -06:00
|
|
|
color: var(--text);
|
2021-11-01 16:42:52 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center-me {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
2022-08-06 05:22:07 +00:00
|
|
|
|
|
|
|
|
div.inverted {
|
|
|
|
|
background-color: #1B1C1D;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 49px;
|
|
|
|
|
height: 23px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle input {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider {
|
|
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: rgb(166, 166, 166);
|
|
|
|
|
-webkit-transition: .4s;
|
|
|
|
|
transition: .4s;
|
|
|
|
|
border-radius: 34px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
height: 22px;
|
|
|
|
|
width: 22px;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: white;
|
|
|
|
|
-webkit-transition: .4s;
|
|
|
|
|
transition: .4s;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider.disabled:before {
|
|
|
|
|
background-color: #CCCCCC;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + .slider {
|
2023-04-06 11:42:07 -06:00
|
|
|
background-color: #6435C9FF;
|
2022-08-06 05:22:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input.inverted:checked + .slider.inverted {
|
2023-04-06 11:42:07 -06:00
|
|
|
background-color: #6435C9AA;
|
2022-08-06 05:22:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input.disabled + .slider {
|
|
|
|
|
background-color: rgb(147, 147, 147);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + .slider:before {
|
|
|
|
|
-webkit-transform: translateX(26px);
|
|
|
|
|
-ms-transform: translateX(26px);
|
|
|
|
|
transform: translateX(26px);
|
|
|
|
|
}
|
2023-01-31 18:08:07 -07:00
|
|
|
|
2026-03-12 17:48:35 -06:00
|
|
|
.inverted-progress-text.ui.indicating.progress .bar > .progress,
|
|
|
|
|
.inverted-progress-text.ui.progress > .label {
|
|
|
|
|
color: white !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Light bar colors (yellow, olive) need dark text on the bar — must override inverted-progress-text. */
|
|
|
|
|
.light-bar-progress-text.ui.indicating.progress .bar > .progress,
|
|
|
|
|
.light-bar-progress-text.ui.progress .bar > .progress {
|
|
|
|
|
color: rgba(0, 0, 0, 0.85) !important;
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-15 13:18:45 -06:00
|
|
|
/* File preview Modal.Actions toolbar.
|
|
|
|
|
Single layout that works at every viewport — buttons keep their order at any width.
|
|
|
|
|
On narrow screens, the tags selector wraps to its own line while the button groups stay together. */
|
|
|
|
|
.preview-toolbar {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.preview-toolbar-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.25em;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.preview-toolbar-tags {
|
|
|
|
|
flex: 1 1 200px;
|
|
|
|
|
min-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Caps preview content to fit inside the file-preview Modal.
|
|
|
|
|
300px reserves room for pathContent <pre>, Modal.Header, Modal.Actions row,
|
|
|
|
|
inner content (e.g. STL dimensions banner), and modal padding.
|
|
|
|
|
Use 100dvh so mobile browser chrome (URL bar) is accounted for. */
|
|
|
|
|
.preview-fit {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100dvh - 300px);
|
|
|
|
|
max-height: calc(100dvh - 300px);
|
|
|
|
|
min-height: 240px;
|
2023-01-31 18:08:07 -07:00
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
2026-04-15 13:18:45 -06:00
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2023-01-31 18:08:07 -07:00
|
|
|
}
|
|
|
|
|
|
2026-06-09 19:44:35 -06:00
|
|
|
/* Fresnel (Media) wraps iframes in a div which would otherwise shrink to the
|
|
|
|
|
default iframe size; make it fill the preview so the iframe's 100% works. */
|
|
|
|
|
.preview-fit .fresnel-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-31 18:08:07 -07:00
|
|
|
td.file-path {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
ui: give tables a real header, drop the column grid, quiet the row rules
Three things the file browser made obvious.
The header was not a surface. Mantine gives thead no background at all, so
the header painted whatever was behind the table -- which is exactly what an
unstriped body row paints. Against a striped body it read as one more stripe,
and bold type was the only thing distinguishing it. It now carries `--head`,
the token that already means "recessed surface", with a full-strength 2px rule
under it: the header/body division is the one line in a table that carries
meaning, so it is the one allowed to be loud.
Column borders are gone. A line around every cell is a lot of ink to repeat
what the column headings already say, and it was half of why the header
disappeared -- a bordered header cell looks like a cell in a grid.
Row rules were `--border`, the same weight as the outline around the table, so
a long table read as a stack of boxes. They now use `--table-line`, a new
token per theme sitting between the surface and `--border`. The table outline
is not a row rule and keeps `--border`; Mantine draws both from
`--table-border-color`, so that had to be restated.
In the file browser an icon and a filename are inline siblings in one cell. An
inline SVG sits on the text baseline, so a 24px glyph beside 13px text hung
above it -- the icon looked centred in the row and the name looked like it was
resting on the icon's floor. `vertical-align: middle` centres it, and the
margin is a gap that was never there at all: the folder icon touched the first
letter of its own name.
Cypress now loads App.css, as the app does. Without it a spec covering the
file browser rows measures a component the app never renders.
One jest test and eleven browser tests, each checked red against a planted
regression. Two notes for the next person:
- `html .mantine-Table-table` is specificity, not decoration. Mantine
declares --table-border-color on its own hashed class, which ties with
`.mantine-Table-table` and wins on source order.
- the "quieter than the outline" test measures both lines against `--panel`.
Nothing paints <html> under a mounted component, so measuring against the
root background compares them to black, which ranks the *paler* line as the
louder one -- the assertion passed backwards until it was pointed at the
surface the rules actually sit on.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-01 16:46:50 -06:00
|
|
|
/*
|
|
|
|
|
* The row is an icon followed by a filename, as inline siblings. An inline SVG
|
|
|
|
|
* sits on the text baseline by default, so a 24px glyph next to 13px text hangs
|
|
|
|
|
* well above it and the name looks like it is resting on the icon's floor.
|
|
|
|
|
* `middle` centres the glyph against the text instead.
|
|
|
|
|
*
|
|
|
|
|
* The margin is the gap that was never there: the folder icon touched the first
|
|
|
|
|
* letter of its own name, and two icons (a folder and its ignored marker) touched
|
|
|
|
|
* each other.
|
|
|
|
|
*/
|
|
|
|
|
td.file-path > svg {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
margin-right: 0.35em;
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-31 18:08:07 -07:00
|
|
|
/* Necessary until react-semantic-toasts is upgraded to Node 18 */
|
|
|
|
|
.ui-alerts {
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 2060;
|
|
|
|
|
padding: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ui-alerts.top-right {
|
|
|
|
|
top: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
}
|
2023-02-15 20:58:07 -07:00
|
|
|
|
|
|
|
|
textarea.otp {
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-icon {
|
|
|
|
|
min-height: 163px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 53px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-icon.inverted {
|
|
|
|
|
background-color: #222222;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-18 22:03:45 -06:00
|
|
|
.modal .inverted {
|
|
|
|
|
border-color: #888888;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal .header.inverted {
|
|
|
|
|
color: #DDDDDD !important;
|
|
|
|
|
background-color: #171616 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal .content.inverted {
|
|
|
|
|
color: #DDDDDD !important;
|
|
|
|
|
border-color: #888888 !important;
|
|
|
|
|
background-color: #171616 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.modal .actions.inverted {
|
|
|
|
|
color: #DDDDDD !important;
|
|
|
|
|
border-color: #888888 !important;
|
|
|
|
|
background-color: #171616 !important;
|
|
|
|
|
}
|
|
|
|
|
|
2023-07-21 14:50:32 -06:00
|
|
|
.modal.inverted i.close {
|
|
|
|
|
color: #DDDDDD !important;
|
|
|
|
|
}
|
|
|
|
|
|
2026-06-28 16:38:43 -06:00
|
|
|
/* The accordion has no background of its own; it inherits whatever container it sits in (Modal
|
|
|
|
|
content #171616, Segment #1B1C1D, the page body, etc.). This matches how the light theme already
|
|
|
|
|
renders accordions (transparent), and avoids a darker band when the parent isn't #171616.
|
|
|
|
|
Direct children only, so nested components that use the `content`/`title` class names (e.g. a
|
|
|
|
|
Message's Message.Content) are not affected. */
|
|
|
|
|
.ui.inverted.accordion,
|
Move One-Time Pad encryption to the browser (#479)
* Move One-Time Pad encryption to the browser; delete backend OTP module
OTP encryption/decryption is now performed entirely in the browser so
messages, keys, and generated pads never leave the originating device.
- Add app/src/components/otp.js: a JS port of the former modules/otp/lib.py
(encrypt/decrypt, message formatting, validation, and secure pad
generation via crypto.getRandomValues with rejection sampling).
- Encrypt/Decrypt now run live as the user types or pastes, with inline
error messages instead of submit buttons.
- Generate New Pad builds the printable HTML locally (blob URL) instead of
hitting /api/otp/html.
- Migrate all backend OTP tests to app/src/components/otp.test.js with
identical data.
- Delete the modules/otp backend module and its blueprint registration.
* Revoke the One-Time Pad blob URL after the new tab loads
Addresses a minor blob-handle leak: handleGenerateNewPad created an object
URL on every click but never released it.
* Let users choose the One-Time Pad character set
Add an "Advanced" accordion under the buttons with three options: A-Z,
A-Z/0-9 (default, unchanged), and a custom character set. The chosen set is
shared by encrypt, decrypt, and pad generation.
- otp.js: parameterize encrypt/decrypt/generate on the alphabet (default
OTP_CHARS for back-compat); add OTP_CHARS_ALPHA and validateCharset; input
is auto-uppercased only when the set is all-uppercase, so custom sets with
lowercase are case-sensitive; the printable pad is labeled with its set.
- Apps.js: lift charset state into OTP(); gate encrypt/decrypt/generate on a
valid set with inline validation errors.
- otp.test.js: add A-Z, custom round-trip, auto-uppercase, validateCharset,
and pad-label tests.
* Scope inverted-accordion dark background to direct children
The rule forcing #171616 on .ui.inverted.accordion .title/.content used a
descendant selector, so it leaked onto any nested element using the `content`
class — e.g. an ErrorMessage's Message.Content rendered inside SimpleAccordion
got a dark band behind its text. Scope to direct children so the accordion
still styles its own title/content but not nested components.
* Add optional error-detection checksum to the One-Time Pad
Adapts the position-weighted checksum from otp-checksum.md to the
frontend-only OTP. checksum = sum(position * value) mod N, parameterized on
the selected character set (N = chars.length), so it follows whichever pad
alphabet is chosen. Position weighting catches transposition errors.
- otp.js: add calculateChecksum/appendChecksum/verifyChecksum.
- Apps.js: opt-in "Append error-detection checksum" toggle in Advanced
(default off). When on, encrypt appends a checksum char; decrypt verifies
it, warns on mismatch, and still shows the decrypted text.
- otp.test.js: checksum unit tests, charset-variation, and end-to-end vectors.
* Show compact checksum status instead of a large warning box
Replace the bulky semantic-ui WarningMessage on decrypt with a small inline
status line: a green check + "Checksum is valid" or a red x + "Checksum is
invalid", shown whenever the checksum option is on and a message is being
decrypted.
* Fix checksum-mode decrypt truncating messages without a checksum
When the "Append error-detection checksum" option was on, Decrypt always
stripped the last ciphertext character before decrypting, so a message that
carried no trailing checksum (wrong sender setting, body pasted alone, etc.)
lost its final character and decrypted to garbage.
Add stripChecksum(received, chars), which removes the trailing character only
when it actually verifies as the checksum of the preceding characters; a
message without a valid checksum is returned intact and flagged invalid. The
decrypt UI now uses it.
Also broaden test coverage:
- stripChecksum tests, including a regression for the truncation bug.
- validation error classes (InvalidOTP/Plaintext/Ciphertext) and the
longer-than-OTP length guards.
- deterministic encrypt/decrypt roundtrip fuzz across several character sets.
- generateMessage character-count and charset-membership checks.
- end-to-end checksummed encrypt -> format -> strip -> decrypt flow.
Use a dedicated InvalidMessage error for the checksum helpers instead of the
misleading InvalidPlaintext.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-06-13 13:52:18 -06:00
|
|
|
.ui.inverted.accordion > .title,
|
|
|
|
|
.ui.inverted.accordion > .content {
|
2026-06-28 16:38:43 -06:00
|
|
|
background-color: transparent !important;
|
2026-03-05 16:18:03 -07:00
|
|
|
}
|
|
|
|
|
|
2026-07-09 15:19:47 -06:00
|
|
|
/* Semantic UI paints a definition table's empty corner cell white (background on the inverted
|
|
|
|
|
variant, white box-shadows on the celled/plain variants) to fake a "cut-out" corner on a white
|
|
|
|
|
page. Our dark theme has a dark page, so the corner must be transparent with no shadow. */
|
|
|
|
|
.ui.inverted.definition.table thead:not(.full-width) th:first-child,
|
|
|
|
|
.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,
|
|
|
|
|
.ui.inverted.celled.definition.table thead:not(.full-width) th:first-child,
|
|
|
|
|
.ui.inverted.celled.definition.table tfoot:not(.full-width) th:first-child {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
box-shadow: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-25 16:03:09 -07:00
|
|
|
/* Mobile-responsive Confirm modal */
|
|
|
|
|
.ui.modal.themed-confirm {
|
|
|
|
|
max-width: 95vw;
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-15 20:58:07 -07:00
|
|
|
.clickable {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2023-04-18 22:03:45 -06:00
|
|
|
|
|
|
|
|
.segment.inverted {
|
|
|
|
|
border: 1px solid #ffffff22 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inverted label {
|
|
|
|
|
color: #DDDDDD !important;
|
2023-11-02 10:07:49 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.table-ellipsis td.column-ellipsis {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
max-width: 0; /* Ensures the content doesn't exceed the cell's width */
|
2023-11-04 15:57:13 -06:00
|
|
|
min-width: 25em; /* About iPhone SE width */
|
2023-11-02 10:07:49 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.card-title-ellipsis {
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
2023-11-21 13:01:52 -07:00
|
|
|
|
|
|
|
|
.search-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-input {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-clear {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
2024-06-25 17:05:41 -06:00
|
|
|
|
|
|
|
|
.icon.divider {
|
|
|
|
|
color: rgb(0, 0, 0, 0.4) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divider.inverted {
|
|
|
|
|
color: rgb(255, 255, 255, 0.6) !important;
|
|
|
|
|
}
|
2024-08-02 11:56:06 -06:00
|
|
|
|
|
|
|
|
.video-player {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0 auto; /* Center the video horizontally */
|
|
|
|
|
}
|
2025-01-22 08:33:05 -07:00
|
|
|
|
2026-04-14 15:00:49 -06:00
|
|
|
.audio-poster-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.audio-poster-overlay {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
color: rgba(255, 255, 255, 0.85);
|
|
|
|
|
text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
2025-01-22 08:33:05 -07:00
|
|
|
table.ratio-table td.equal-width {
|
|
|
|
|
width: 48%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table.ratio-table td.min-width {
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
2025-12-02 15:33:46 -07:00
|
|
|
|
|
|
|
|
/* CollectionEditForm styles */
|
|
|
|
|
.required-indicator {
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-button-spacing {
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Form loading skeleton */
|
|
|
|
|
.form-skeleton-field {
|
|
|
|
|
margin-bottom: 1.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-skeleton-label {
|
|
|
|
|
height: 14px;
|
|
|
|
|
width: 80px;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-skeleton-input {
|
|
|
|
|
height: 38px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-skeleton-textarea {
|
|
|
|
|
height: 80px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-skeleton-button {
|
|
|
|
|
height: 42px;
|
|
|
|
|
width: 100px;
|
|
|
|
|
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes skeleton-shimmer {
|
|
|
|
|
0% {
|
|
|
|
|
background-position: -200% 0;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
background-position: 200% 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Dark mode skeleton */
|
|
|
|
|
.inverted .form-skeleton-label,
|
|
|
|
|
.inverted .form-skeleton-input,
|
|
|
|
|
.inverted .form-skeleton-textarea,
|
|
|
|
|
.inverted .form-skeleton-button {
|
|
|
|
|
background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
|
|
|
}
|
2025-12-07 09:17:30 -07:00
|
|
|
|
test: one place for fixtures, real providers instead of mocked context modules
Specs had no shared vocabulary for the app's data or its contexts, so each one
rebuilt both. A settings object was written out by hand wherever one was needed,
twenty-odd keys at a time, and nothing held those copies to each other or to the
API. Contexts were worse: to render a consumer a spec mocked the whole context
module, which replaces every export including the providers, so each spec
reinvented the pieces it still needed. One supplies a `Media` that always
reports desktop -- quietly leaving that component's mobile branch untested -- and
one hand-writes a context as a bare `_currentValue` with no provider, working only
because useContext reads that React internal.
test-fixtures.js is now the single definition of both, shared by jest, the
Cypress component specs, and e2e intercept bodies, so the three cannot disagree
about what the API returns. Every fixture is a function taking overrides; a
shared mutable object lets one test change what the next one sees.
The drift this prevents was already real. The theme fixture supplied `i`, `s`
and `t` holding hardcoded Semantic greys for months after ThemeProvider stopped
supplying them, and ThemeContext still declared all four. So the fixture agreed
with the tests, and with nothing else: FileBrowser was reading `inverted` off the
context and pasting the resulting `undefined` into a className, which is why the
file browser's footer -- near-white #f9fafb, with a `.inverted` dark variant that
nothing could select any more -- stayed light in dark, night and amber. A white
bar pinned to the bottom of the screen in night mode costs the user exactly the
dark adaptation the theme exists to protect. It takes tokens now.
test-fixtures.test.js holds each fixture to its context's declared shape in both
directions, so a property added to one and forgotten in the other fails a test.
Two failed attempts are recorded in test-utils.js because both were instructive.
Importing Tags.js and FileWorkerStatusContext.js so the harness could supply
those providers broke eight suites: it put both into the module graph of every
spec ahead of that spec's own mocks, and components bound to a second instance of
a mocked module -- a different jest.fn() than the test had configured, so a hook
mocked to return a value returned undefined, in a file no test mentions.
Requiring them lazily fixed that and not its mirror image: useContext read a
different TagsContext than the harness had required, so the provider was ignored
and the context default won. A harness must not change what a spec imports, so
it owns only contexts/contexts.js and a spec passes any other context itself.
DomainTagging is converted off the `_currentValue` fake as proof, and now asserts
the tag name a user sees rather than a test id its own mock invented. The five
remaining specs are listed in a ratchet so the count can only fall.
974 jest, 15 browser component, 46 e2e, clean cache-busted build, tsc clean.
Fixtures are confirmed absent from the shipped bundle.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-30 16:30:49 -06:00
|
|
|
/*
|
|
|
|
|
* Sticky footer for the file browser.
|
|
|
|
|
*
|
|
|
|
|
* These were two hardcoded Semantic greys with `.inverted` selecting the dark one, but
|
|
|
|
|
* nothing has set `.inverted` since ThemeProvider stopped supplying it -- so the footer stayed
|
|
|
|
|
* at near-white `#f9fafb` in dark, night and amber. In night mode a white bar pinned to the
|
|
|
|
|
* bottom of the screen costs the user the dark adaptation the whole theme exists to protect.
|
|
|
|
|
* Tokens have no such failure mode: there is one rule and each theme fills it in.
|
|
|
|
|
*/
|
2025-12-07 09:17:30 -07:00
|
|
|
.sticky-footer {
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
padding: 0.5em 1em;
|
test: one place for fixtures, real providers instead of mocked context modules
Specs had no shared vocabulary for the app's data or its contexts, so each one
rebuilt both. A settings object was written out by hand wherever one was needed,
twenty-odd keys at a time, and nothing held those copies to each other or to the
API. Contexts were worse: to render a consumer a spec mocked the whole context
module, which replaces every export including the providers, so each spec
reinvented the pieces it still needed. One supplies a `Media` that always
reports desktop -- quietly leaving that component's mobile branch untested -- and
one hand-writes a context as a bare `_currentValue` with no provider, working only
because useContext reads that React internal.
test-fixtures.js is now the single definition of both, shared by jest, the
Cypress component specs, and e2e intercept bodies, so the three cannot disagree
about what the API returns. Every fixture is a function taking overrides; a
shared mutable object lets one test change what the next one sees.
The drift this prevents was already real. The theme fixture supplied `i`, `s`
and `t` holding hardcoded Semantic greys for months after ThemeProvider stopped
supplying them, and ThemeContext still declared all four. So the fixture agreed
with the tests, and with nothing else: FileBrowser was reading `inverted` off the
context and pasting the resulting `undefined` into a className, which is why the
file browser's footer -- near-white #f9fafb, with a `.inverted` dark variant that
nothing could select any more -- stayed light in dark, night and amber. A white
bar pinned to the bottom of the screen in night mode costs the user exactly the
dark adaptation the theme exists to protect. It takes tokens now.
test-fixtures.test.js holds each fixture to its context's declared shape in both
directions, so a property added to one and forgotten in the other fails a test.
Two failed attempts are recorded in test-utils.js because both were instructive.
Importing Tags.js and FileWorkerStatusContext.js so the harness could supply
those providers broke eight suites: it put both into the module graph of every
spec ahead of that spec's own mocks, and components bound to a second instance of
a mocked module -- a different jest.fn() than the test had configured, so a hook
mocked to return a value returned undefined, in a file no test mentions.
Requiring them lazily fixed that and not its mirror image: useContext read a
different TagsContext than the harness had required, so the provider was ignored
and the context default won. A harness must not change what a spec imports, so
it owns only contexts/contexts.js and a spec passes any other context itself.
DomainTagging is converted off the `_currentValue` fake as proof, and now asserts
the tag name a user sees rather than a test id its own mock invented. The five
remaining specs are listed in a ratchet so the count can only fall.
974 jest, 15 browser component, 46 e2e, clean cache-busted build, tsc clean.
Fixtures are confirmed absent from the shipped bundle.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-07-30 16:30:49 -06:00
|
|
|
background-color: var(--panel);
|
|
|
|
|
border-top: 1px solid var(--border);
|
2025-12-07 09:17:30 -07:00
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-26 11:28:10 -07:00
|
|
|
/* Drag selection visual feedback for FileBrowser */
|
|
|
|
|
tr.drag-selecting td {
|
|
|
|
|
background-color: rgba(33, 133, 208, 0.15) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inverted tr.drag-selecting td {
|
|
|
|
|
background-color: rgba(33, 133, 208, 0.25) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Drag deselection visual feedback (red tint) */
|
|
|
|
|
tr.drag-deselecting td {
|
|
|
|
|
background-color: rgba(219, 40, 40, 0.15) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inverted tr.drag-deselecting td {
|
|
|
|
|
background-color: rgba(219, 40, 40, 0.25) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Prevent text selection during drag */
|
|
|
|
|
.file-browser-dragging {
|
|
|
|
|
user-select: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
}
|
2026-02-08 10:57:12 -07:00
|
|
|
|
2026-07-03 11:17:11 -06:00
|
|
|
/* Filter input and collapse-all button: right-aligned on desktop, full width on mobile (below). */
|
|
|
|
|
.file-browser-filter-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
margin-bottom: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Double the default input width on desktop. */
|
|
|
|
|
.ui.input.file-browser-filter {
|
|
|
|
|
width: 34em;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-09 16:11:44 -06:00
|
|
|
@media only screen and (max-width: 700px) {
|
|
|
|
|
.hide-on-mobile {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
2026-07-03 11:17:11 -06:00
|
|
|
|
|
|
|
|
.file-browser-filter-container {
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Fill the row, but stay on one line with the collapse-all button. */
|
|
|
|
|
.ui.input.file-browser-filter {
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
2026-03-09 16:11:44 -06:00
|
|
|
}
|
|
|
|
|
|
2026-02-08 10:57:12 -07:00
|
|
|
/* Ensure step icons are always visible, even when disabled */
|
|
|
|
|
.ui.steps .step.disabled > .icon,
|
|
|
|
|
.ui.steps .step.disabled > i.icon,
|
|
|
|
|
.ui.steps .disabled.step > .icon,
|
|
|
|
|
.ui.steps .disabled.step > i.icon {
|
|
|
|
|
opacity: 0.45 !important;
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
visibility: visible !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
height: auto !important;
|
|
|
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ensure the icon glyph (::before) is visible for disabled steps */
|
|
|
|
|
.ui.steps .step.disabled > .icon:before,
|
|
|
|
|
.ui.steps .step.disabled > i.icon:before,
|
|
|
|
|
.ui.steps .disabled.step > .icon:before,
|
|
|
|
|
.ui.steps .disabled.step > i.icon:before {
|
|
|
|
|
opacity: 0.45 !important;
|
|
|
|
|
visibility: visible !important;
|
|
|
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
|
|
|
}
|
|
|
|
|
|
Add CSV/PDF export and a search filter to Inventory
New Export tab with two client-side formats (no new dependencies):
- CSV: the raw items table (RFC-4180 quoting, UTF-8 BOM for Excel), generated
entirely in the browser. The download anchor is attached to the DOM and the
object URL is revoked on the next tick for cross-browser robustness.
- PDF: a printable full-inventory table followed by a group-by summary table,
via the browser's print dialog ("Save as PDF"). The summary's grouping is
chosen in the Export tab.
Search filter: a box on its own line under the inventory selector filters the
active inventory across every column's displayed value (case-insensitive;
whitespace-separated terms are AND-ed). It narrows the whole view — Items
table, Summary aggregation, and Export/PDF — while edits/adds in the table
still operate on the full inventory, so filtering never drops data.
Summary/export grouping:
- The group-by aggregation is extracted into a shared summarize.js (field-role
detection + count-aware totals via units.js + calories), now the single
source of truth for the Summary tab, the PDF summary, and the ration
calculator. findCaloriesKey/findCountKey moved here from RationCalculator
(re-exported for back-compat).
- The Sum selector now offers number and calories fields in addition to
quantity: number/calories are summed as a plain column total, while quantity
stays count-aware and unit-compacted and the dedicated Calories column stays
count-aware.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 11:00:01 -06:00
|
|
|
|
|
|
|
|
/* Inventory "PDF" export: the printable table is hidden on screen and becomes the only
|
|
|
|
|
visible content when printing, so a user can use the browser dialog to Save as PDF. */
|
|
|
|
|
.inventory-print {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media print {
|
|
|
|
|
body * {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print,
|
|
|
|
|
.inventory-print * {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print h1 {
|
|
|
|
|
font-size: 18pt;
|
|
|
|
|
margin: 0 0 0.25em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print h2 {
|
|
|
|
|
font-size: 13pt;
|
|
|
|
|
margin: 1.25em 0 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print-meta {
|
|
|
|
|
font-size: 9pt;
|
|
|
|
|
color: #444;
|
|
|
|
|
margin: 0 0 0.75em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
font-size: 10pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print th,
|
|
|
|
|
.inventory-print td {
|
|
|
|
|
border: 1px solid #999;
|
|
|
|
|
padding: 4px 6px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Repeat the header row at the top of each printed page. */
|
|
|
|
|
.inventory-print thead {
|
|
|
|
|
display: table-header-group;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inventory-print tr {
|
|
|
|
|
page-break-inside: avoid;
|
|
|
|
|
}
|
Add a recommended Food Storage example, a Ration tab, and a supply planner
Build on the rebuilt config-only Inventory with three related additions.
Recommended example inventory:
- A fresh install now seeds the "Food Storage" example with the recommended
one-adult / one-year (~3,000 kcal/day) emergency food supply (60 items,
~1.12M kcal), instead of an empty inventory.
- The counts are layered on top of the shipped food catalog (single source of
per-package nutrition) via RECOMMENDED_ONE_YEAR_FOOD_COUNTS, joined at seed
time by recommended_food_storage_items().
- Genericized the two remaining brand names in the catalog defaults
(Velveeta -> Processed Cheese, Spam -> Canned Lunch Meat) so both the catalog
and the seeded inventory stay brand-free.
Ration tab (split out of Summary):
- Moved the Ration Estimate (People / Daily Calories / estimate table) out of
the increasingly long Summary tab into its own "Ration" tab, shown only for
inventories that have a calories field.
Supply planner ("Plan More Supply"):
- A slider picks a target duration longer than the current estimate; the whole
inventory is scaled up proportionally (every item by the same factor, mix
kept balanced) into a sortable shopping list of what to buy.
- Any split package rounds UP to a whole one (ceil), matching the "1.6 buckets
-> buy 1 more" rule.
- The shopping list is exportable as CSV (reusing toCSV) and PDF (reusing the
print-to-PDF path, scoped via body.printing-shopping so only the list prints
-- no inventory or summary).
Search filter:
- Moved the items search out of the top toolbar (which implied it filtered
every tab) into the Items tab, so it clearly narrows Items only;
Summary/Ration/Export/print always use the full inventory.
Aggregation/role helpers (findNameKey, planSupplyPurchase) live in summarize.js,
the single source of truth shared by Summary, export, and the ration views.
All new pure functions and UI flows are covered by tests.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 12:39:58 -06:00
|
|
|
|
|
|
|
|
/* The supply-plan shopping list reuses the .inventory-print element styling (h1/table/etc.) but is a separate
|
|
|
|
|
printable block. By default (e.g. the Export tab's whole-inventory PDF) it is hidden; it becomes the ONLY
|
|
|
|
|
printed block when the supply plan toggles `body.printing-shopping` just before window.print(). */
|
|
|
|
|
.shopping-print,
|
|
|
|
|
.shopping-print * {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
.shopping-print {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
body.printing-shopping .inventory-print:not(.shopping-print),
|
|
|
|
|
body.printing-shopping .inventory-print:not(.shopping-print) * {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
body.printing-shopping .inventory-print:not(.shopping-print) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
body.printing-shopping .shopping-print,
|
|
|
|
|
body.printing-shopping .shopping-print * {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
body.printing-shopping .shopping-print {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
Add CSV/PDF export and a search filter to Inventory
New Export tab with two client-side formats (no new dependencies):
- CSV: the raw items table (RFC-4180 quoting, UTF-8 BOM for Excel), generated
entirely in the browser. The download anchor is attached to the DOM and the
object URL is revoked on the next tick for cross-browser robustness.
- PDF: a printable full-inventory table followed by a group-by summary table,
via the browser's print dialog ("Save as PDF"). The summary's grouping is
chosen in the Export tab.
Search filter: a box on its own line under the inventory selector filters the
active inventory across every column's displayed value (case-insensitive;
whitespace-separated terms are AND-ed). It narrows the whole view — Items
table, Summary aggregation, and Export/PDF — while edits/adds in the table
still operate on the full inventory, so filtering never drops data.
Summary/export grouping:
- The group-by aggregation is extracted into a shared summarize.js (field-role
detection + count-aware totals via units.js + calories), now the single
source of truth for the Summary tab, the PDF summary, and the ration
calculator. findCaloriesKey/findCountKey moved here from RationCalculator
(re-exported for back-compat).
- The Sum selector now offers number and calories fields in addition to
quantity: number/calories are summed as a plain column total, while quantity
stays count-aware and unit-compacted and the dedicated Calories column stays
count-aware.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 11:00:01 -06:00
|
|
|
}
|