bvandeusen/FabledCurator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Merge pull request 'Tooltip !important fix — 104cac5 follow-up after Vite CSS reorder' (#34) from dev into main

Browse Source
This commit was merged in pull request #34.
This commit is contained in:
bvandeusen
2026-05-30 00:02:24 -04:00
parent f256f587ee 36f8ec80fd
commit 2886fa4997
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/app.css
+17 -5
View File
@@ -1,5 +1,8 @@
/* App-global overrides. Imported in main.js AFTER 'vuetify/styles' so
these win on equal selector specificity by source order. */
/* App-global overrides. Imported in main.js after 'vuetify/styles', but
Vite's production bundler reorders CSS chunks so source order is not a
reliable winner against node_modules CSS at equal specificity. Rules
here either out-specify Vuetify's default or use !important on the
exact properties that need to win. */
/* Tooltip readability fix (operator-flagged 2026-05-28).
Vuetify's default v-tooltip pairs `on-surface-variant` TEXT with an
@@ -12,10 +15,19 @@
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. */
correct while making every tooltip in the app legible.
`!important` on the contrast properties: this rule ties Vuetify's
default at specificity (.v-tooltip > .v-overlay__content), and in a
Vite production build the node_modules CSS can land after app.css in
the final stylesheet regardless of import order, so source-order wins
aren't reliable. !important removes that fragility for the two
properties whose drift made tooltips unreadable; the cosmetic border
and shadow don't need it (Vuetify doesn't set them). Operator
re-flagged 2026-05-29 on the deployed :latest after PR #33. */
.v-tooltip > .v-overlay__content {
background: rgb(var(--v-theme-surface-bright)); /* slate #2C313A */
color: rgb(var(--v-theme-on-surface)); /* parchment #E8E4D8 */
background: rgb(var(--v-theme-surface-bright)) !important; /* slate #2C313A */
color: rgb(var(--v-theme-on-surface)) !important; /* 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);
}