bvandeusen
104cac5dca
Operator-flagged 2026-05-28: tooltips (e.g. the action buttons in Subscriptions → Subscriptions) render near-white-on-near-white, unreadable. Cause: Vuetify's default v-tooltip pairs `on-surface-variant` text with an `surface-variant` background. FC's theme deliberately maps `on-surface-variant` to vellum (#C2BFB4 — a light cream, the correct muted-text token for captions/hints on the dark page) but never defines `surface-variant`, so Vuetify auto-generates a light-ish tooltip background. Light text on light bg. Fix is tooltip-specific so it doesn't disturb the (correctly light) muted-text token elsewhere. New app-global stylesheet frontend/src/styles/app.css, imported in main.js AFTER vuetify/styles (equal-specificity rule wins by source order), overrides `.v-tooltip > .v-overlay__content` to a dark elevated panel (surface-bright = slate #2C313A) with high-contrast parchment text (#E8E4D8) + a subtle border + shadow. Applies to every tooltip in the app, so the fix is consistent rather than per-component.
22 lines
1.1 KiB
CSS
22 lines
1.1 KiB
CSS
/* App-global overrides. Imported in main.js AFTER 'vuetify/styles' so
|
|
these win on equal selector specificity by source order. */
|
|
|
|
/* Tooltip readability fix (operator-flagged 2026-05-28).
|
|
Vuetify's default v-tooltip pairs `on-surface-variant` TEXT with an
|
|
`surface-variant` BACKGROUND. FC's theme deliberately maps
|
|
`on-surface-variant` to vellum (#C2BFB4 — a light cream, correct for
|
|
muted captions/hints on the dark page) but never defines
|
|
`surface-variant`, so Vuetify auto-generates a light-ish background:
|
|
light text on light bg → near-white-on-near-white, unreadable.
|
|
|
|
Tooltips want the inverse of muted body text — a dark, slightly
|
|
elevated panel with the HIGH-contrast parchment text. Fixing it here
|
|
(not by changing on-surface-variant) keeps captions/empty-states
|
|
correct while making every tooltip in the app legible. */
|
|
.v-tooltip > .v-overlay__content {
|
|
background: rgb(var(--v-theme-surface-bright)); /* slate #2C313A */
|
|
color: rgb(var(--v-theme-on-surface)); /* parchment #E8E4D8 */
|
|
border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.25);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
}
|