feat(mail): center-align action button in email template

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-14 00:49:41 +02:00
parent 172a6a12d3
commit ef195a6777
14 changed files with 336 additions and 141 deletions

View File

@@ -47,3 +47,26 @@
.bg-custom-background {
background-color: rgb(var(--v-table-header-color));
}
// ---------------------------------------------------------------------------
// Vuexy (Bootstrap 5) parity — spacing + horizontal rules in cards
// (e.g. form-layouts-horizontal “Form separator”)
// ---------------------------------------------------------------------------
.my-6 {
margin-block-end: 1.5rem !important;
margin-block-start: 1.5rem !important;
}
.mx-n6 {
margin-inline-end: -1.5rem !important;
margin-inline-start: -1.5rem !important;
}
// BS: `.card hr { color: var(--bs-card-border-color); }` — Vuetify card border token
.v-card .v-card-text hr {
border: 0;
border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
color: rgba(var(--v-border-color), var(--v-border-opacity));
opacity: 1;
}

View File

@@ -1,3 +1,58 @@
.v-card-subtitle {
color: rgba(var(--v-theme-on-background), 0.55);
}
/* Card border shadow — colored bottom border with hover effect */
.v-card[class*="card-border-shadow-"] {
position: relative;
overflow: visible;
border-block-end: none;
transition: box-shadow 0.3s ease;
&::after {
position: absolute;
border-radius: inherit;
block-size: 100%;
border-block-end: 0.125rem solid var(--card-border-bottom-color, rgba(var(--v-theme-on-surface), 0.12));
content: "";
inline-size: 100%;
inset-block-end: 0;
inset-inline-start: 0;
pointer-events: none;
transition: border-color 0.3s ease, border-width 0.3s ease;
}
&:hover {
box-shadow: 0 0.25rem 1.125rem rgba(var(--v-theme-on-surface), 0.16) !important;
&::after {
border-color: var(--card-hover-border-bottom-color, rgba(var(--v-theme-on-surface), 0.3));
border-block-end-width: 0.1875rem;
}
}
}
.v-card.card-border-shadow-primary {
--card-border-bottom-color: rgba(var(--v-theme-primary), 0.38);
--card-hover-border-bottom-color: rgb(var(--v-theme-primary));
}
.v-card.card-border-shadow-warning {
--card-border-bottom-color: rgba(var(--v-theme-warning), 0.38);
--card-hover-border-bottom-color: rgb(var(--v-theme-warning));
}
.v-card.card-border-shadow-info {
--card-border-bottom-color: rgba(var(--v-theme-info), 0.38);
--card-hover-border-bottom-color: rgb(var(--v-theme-info));
}
.v-card.card-border-shadow-success {
--card-border-bottom-color: rgba(var(--v-theme-success), 0.38);
--card-hover-border-bottom-color: rgb(var(--v-theme-success));
}
.v-card.card-border-shadow-error {
--card-border-bottom-color: rgba(var(--v-theme-error), 0.38);
--card-hover-border-bottom-color: rgb(var(--v-theme-error));
}