fix(ui): tooltip readability — dark bg + parchment text (was light-on-light)
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.
This commit is contained in:
@@ -3,6 +3,9 @@ import { createPinia } from 'pinia'
|
||||
import { createVuetify } from 'vuetify'
|
||||
import 'vuetify/styles'
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
// App-global CSS overrides — imported AFTER vuetify/styles so equal-
|
||||
// specificity rules (e.g. the tooltip readability fix) win by source order.
|
||||
import './styles/app.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router.js'
|
||||
|
||||
Reference in New Issue
Block a user