web/src/assets/vuetify3-compat.css
Rama main · réplica de lectura del repositorio original.
/*
* Vuetify 3 (Material Design 2) compatibility layer for Vuetify 4.
*
* Vuetify 4 adopts Material Design 3, which changes the type scale, elevation,
* and container widths/centering. This app's design targets the MD2 look, so we
* restore the v3 appearance here. These rules are intentionally unlayered so they
* win over Vuetify 4's @layer styles without needing !important.
*
* See docs/plans/vuetify-4-migration-plan.md (decision: keep the v3 look).
*/
/* ------------------------------------------------------------------ *
* 1. Inputs: restore the "solo" filled + elevated box (MD2 elevation-2).
* MD3 flattens the solo variant to a 1px shadow; v3 used elevation-2.
* ------------------------------------------------------------------ */
.v-field--variant-solo,
.v-field--variant-solo-filled {
box-shadow:
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
background: rgb(var(--v-theme-surface));
}
/* ------------------------------------------------------------------ *
* 2. Containers: MD3 shrank max-widths and dropped auto-centering
* (margin 0), pinning content to the left. Restore v3 centering
* and width. Fluid containers stay full-bleed.
* ------------------------------------------------------------------ */
.v-container:not(.v-container--fluid) {
max-width: 1200px;
margin-inline: auto;
}
/* ------------------------------------------------------------------ *
* 3. Typography: restore the Material Design 2 type scale so headings,
* stat numbers, and captions keep their v3 sizes/weights.
* ------------------------------------------------------------------ */
.text-h1 { font-size: 6rem; font-weight: 300; line-height: 6rem; letter-spacing: -0.015625em; }
.text-h2 { font-size: 3.75rem; font-weight: 300; line-height: 3.75rem; letter-spacing: -0.0083333333em; }
.text-h3 { font-size: 3rem; font-weight: 400; line-height: 3.125rem; letter-spacing: normal; }
.text-h4 { font-size: 2.125rem; font-weight: 400; line-height: 2.5rem; letter-spacing: 0.0073529412em; }
.text-h5 { font-size: 1.5rem; font-weight: 400; line-height: 2rem; letter-spacing: normal; }
.text-h6 { font-size: 1.25rem; font-weight: 500; line-height: 2rem; letter-spacing: 0.0125em; }
/* body/subtitle font-size lives in the scoped block in section 8 (it must
out-rank an App.vue !important rule); only weight/line-height/tracking here. */
.text-subtitle-1 { font-weight: 400; line-height: 1.75rem; letter-spacing: 0.009375em; }
.text-subtitle-2 { font-weight: 500; line-height: 1.375rem; letter-spacing: 0.0071428571em; }
.text-body-1 { font-weight: 400; line-height: 1.5rem; letter-spacing: 0.03125em; }
.text-body-2 { font-weight: 400; line-height: 1.25rem; letter-spacing: 0.0178571429em; }
.text-caption { font-size: 0.75rem; font-weight: 400; line-height: 1.25rem; letter-spacing: 0.0333333333em; }
.text-overline { font-size: 0.75rem; font-weight: 500; line-height: 2rem; letter-spacing: 0.1666666667em; text-transform: uppercase; }
/* ------------------------------------------------------------------ *
* 4. Chip groups: MD3 collapsed the inter-chip spacing to 0, running
* toggle chips together ("This WeekThis Month..."). Restore v3 gaps.
* ------------------------------------------------------------------ */
.v-chip-group .v-chip {
margin: 4px 8px 4px 0;
}
/* ------------------------------------------------------------------ *
* 5. Input messages: restore v3 horizontal padding under fields.
* ------------------------------------------------------------------ */
.v-input__details {
padding-inline: 16px;
}
/* ------------------------------------------------------------------ *
* 6. Font-weight utilities: Vuetify 4 layers these, so unlayered rules
* (including our own typography above) override them and `font-weight-bold`
* rendered as 400. Re-assert them with !important so bold/medium text is
* weighted correctly everywhere. Placed after the type scale on purpose.
* ------------------------------------------------------------------ */
.font-weight-thin { font-weight: 100 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-regular { font-weight: 400 !important; }
.font-weight-medium { font-weight: 500 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-black { font-weight: 900 !important; }
.font-italic { font-style: italic !important; }
/* ------------------------------------------------------------------ *
* 7. Component defaults MD3 changed: restore v3 list-item padding and the
* list-title / chip / field sizing.
* ------------------------------------------------------------------ */
.v-list-item {
padding-block: 4px;
padding-inline: 16px;
}
.v-list-item-title {
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.009375em;
}
.v-chip {
font-size: 0.75rem;
padding-inline: 10px;
}
.v-field {
font-size: 1rem;
padding-inline-start: 12px;
}
/* ------------------------------------------------------------------ *
* 8. A global App.vue rule forces `.text-body-2 { font-size: 13px !important }`.
* In v1.3.0 that style was scoped and never reached child components (so
* Vuetify's 14px won); in the v4 build it applies globally and shrinks body
* text by 1px. Out-specify it (higher specificity + !important) to keep v3's
* 14px, and pin the sibling body/subtitle sizes to the MD2 scale.
* ------------------------------------------------------------------ */
.v-application .text-body-1 { font-size: 1rem !important; }
.v-application .text-body-2 { font-size: 0.875rem !important; }
.v-application .text-subtitle-1 { font-size: 1rem !important; }
.v-application .text-subtitle-2 { font-size: 0.875rem !important; }
/* ------------------------------------------------------------------ *
* 9. App bar: give the toolbar content comfortable inline padding so the
* logo and action icons don't sit flush against the screen edges.
* ------------------------------------------------------------------ */
.v-app-bar .v-toolbar__content {
padding-inline: 20px;
}
/* ------------------------------------------------------------------ *
* 10. Field text size. Vuetify 4 renders the actual input/textarea text
* (.v-field__input) at ~14px — and smaller under density="compact" —
* which is hard to read while typing. Setting font-size on .v-field
* alone does NOT reach the input, so pin it here (16px also avoids iOS
* tap-to-zoom). Applies to every field type app-wide.
* ------------------------------------------------------------------ */
.v-field .v-field__input {
font-size: 1rem;
}
/* ------------------------------------------------------------------ *
* 11. Button horizontal padding. In the v4 build, text/elevated buttons
* render with 0 inline padding — labels sit flush to the edges, saved
* only by min-width. Restore Vuetify's per-size padding; icon buttons
* stay square (excluded).
* ------------------------------------------------------------------ */
.v-btn--size-x-small:not(.v-btn--icon) { padding-inline: 8px; }
.v-btn--size-small:not(.v-btn--icon) { padding-inline: 12px; }
.v-btn--size-default:not(.v-btn--icon) { padding-inline: 16px; }
.v-btn--size-large:not(.v-btn--icon) { padding-inline: 20px; }
.v-btn--size-x-large:not(.v-btn--icon) { padding-inline: 24px; }