bvandeusen
6104452d2e
Vuetify 4 is a Material-Design-3 styling refresh with revert snippets, not a component-API overhaul. FC's exposure was small: - Bump vuetify ^4, vite-plugin-vuetify ^2.1.0, vue ^3.5, engines node>=24. - Restore the dropped global CSS reset (minimal reset from the upgrade guide) in Vuetify's own low-precedence reset layer, so FC's margin-zeroing assumptions hold. - v-row prop→utility: 'dense' → density=compact (×3), align=center → class=align-center. - v-snackbar: multi-line removed → min-height=68. - v-autocomplete #item slot: item→internalItem (item now aliases raw) in TagPicker + GalleryFilterBar (item.raw.* → internalItem.raw.*). ACCEPTED (cosmetic, operator reviews live per plan #158): MD3 typography (text-body-2 ×73), non-uppercase buttons (v4 dropped the uppercase default), MD3 elevation. CI verifies BUILD only — the LOOK is the live-review pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
52 lines
2.9 KiB
CSS
52 lines
2.9 KiB
CSS
/* 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
|
|
`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.
|
|
|
|
`!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)) !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);
|
|
}
|
|
|
|
/* Canonical muted/secondary text token (DRY pattern sweep 2026-06-09).
|
|
Was redefined identically in 12 component <style scoped> blocks; now one
|
|
global utility. Muted text uses the explicit on-surface-variant (vellum)
|
|
token, NOT opacity — Vuetify's text-medium-emphasis is opacity-based and is
|
|
deliberately not used here. `.fc-muted` is a custom class Vuetify never
|
|
emits, so no specificity/reorder fight — no !important needed. */
|
|
.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
|
|
|
|
/* Vuetify 4 dropped its global CSS reset (normalisation moved into each
|
|
component). FC's layouts assumed the reset zeroed margins on text elements, so
|
|
restore just that — the "minimal reset" from the v4 upgrade guide — inside
|
|
Vuetify's own reset layer, which is low precedence so component + app styles
|
|
still win over it. Batch-4 Vuetify 3→4 (#1449). */
|
|
@layer vuetify-core.reset {
|
|
ul, ol, figure, details, summary { padding: 0; margin: 0; }
|
|
h1, h2, h3, h4, h5, h6, p { margin: 0; }
|
|
}
|