diff --git a/apps/readest-app/src/__tests__/styles/eink-dropdown-toggle.test.ts b/apps/readest-app/src/__tests__/styles/eink-dropdown-toggle.test.ts new file mode 100644 index 00000000..8f0fde9d --- /dev/null +++ b/apps/readest-app/src/__tests__/styles/eink-dropdown-toggle.test.ts @@ -0,0 +1,40 @@ +import { describe, it, expect } from 'vitest'; +import { readFileSync } from 'fs'; +import { resolve } from 'path'; + +/** + * Regression guard for issue #4435 (button display under the e-ink screen). + * + * The Android "Choose New Folder" selector in the Change Data Location dialog is + * a `Dropdown` whose toggle carries `dropdown-toggle ... btn btn-ghost + * btn-outline`. Under `[data-eink='true']`, globals.css inverts `.btn-outline` + * to a solid fill (`background: base-content`, `color: base-100`). The dedicated + * `[data-eink='true'] .dropdown-toggle` rule then neutralizes the background + * back to transparent — but it used to leave the inverted white (`base-100`) + * text untouched, so the label became white-on-transparent (white-on-white): + * an empty-looking outlined box. + * + * Invariant: the e-ink `.dropdown-toggle` rule must reset BOTH the background + * (transparent) AND the text color (base-content), so a transparent-background + * toggle keeps a legible dark label regardless of any fill class it also wears. + */ +describe('e-ink dropdown-toggle legibility', () => { + const css = readFileSync(resolve(process.cwd(), 'src/styles/globals.css'), 'utf8'); + + const block = (() => { + const selector = "[data-eink='true'] .dropdown-toggle"; + const start = css.indexOf(selector); + expect(start, `expected globals.css to define ${selector}`).toBeGreaterThanOrEqual(0); + const open = css.indexOf('{', start); + const close = css.indexOf('}', open); + return css.slice(open + 1, close); + })(); + + it('neutralizes the toggle background to transparent', () => { + expect(block).toMatch(/background-color:\s*theme\('colors\.transparent'\)/); + }); + + it('resets the toggle text color to base-content so it stays legible', () => { + expect(block).toMatch(/color:\s*theme\('colors\.base-content'\)/); + }); +}); diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css index 329c1e2a..06fc0fe3 100644 --- a/apps/readest-app/src/styles/globals.css +++ b/apps/readest-app/src/styles/globals.css @@ -604,6 +604,11 @@ input[type='range'].slider-input { [data-eink='true'] .dropdown-toggle { background-color: theme('colors.transparent') !important; + /* A toggle that also carries a fill class (e.g. btn-outline) gets its label + inverted to base-100 by the rule above; with the background neutralized to + transparent that leaves white-on-white. Keep the text base-content so the + label stays legible (issue #4435). */ + color: theme('colors.base-content') !important; } [data-eink='true'] .opds-navigation .card {