ux: centralize ui-card modifiers

This commit is contained in:
Marco Allegretti 2026-01-29 20:20:44 +01:00
parent dfb80980b1
commit 09efdab83b
2 changed files with 21 additions and 17 deletions

View file

@ -389,6 +389,24 @@
box-shadow: var(--shadow-sm);
}
.ui-card-soft {
background: rgba(255, 255, 255, 0.03);
}
.ui-card-pad-md {
padding: 1.1rem;
}
.ui-card-interactive {
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.ui-card-interactive:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
background: rgba(255, 255, 255, 0.05);
}
.ui-card-glass {
background: var(--ui-glass-bg);
border-color: var(--ui-glass-border);

View file

@ -270,20 +270,6 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
gap: 1rem;
}
.delegation-card, .delegate-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 1.1rem;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.delegation-card:hover, .delegate-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-hover);
background: rgba(255, 255, 255, 0.05);
}
.delegation-card header {
display: flex;
justify-content: space-between;
@ -657,7 +643,7 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
const safeId = escapeHtml(d.id);
return `
<div class="delegation-card">
<div class="delegation-card ui-card ui-card-soft ui-card-interactive ui-card-pad-md">
<header>
<span class="delegate-name">→ ${safeName}</span>
<span class="scope-badge">${scopeLabel}</span>
@ -708,7 +694,7 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
const createdAt = d.created_at ? new Date(d.created_at).toLocaleDateString() : '';
return `
<div class="delegation-card">
<div class="delegation-card ui-card ui-card-soft ui-card-interactive ui-card-pad-md">
<header>
<span class="delegate-name">← ${safeName}</span>
<span class="scope-badge">${scopeLabel}</span>
@ -747,7 +733,7 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
const votes = Number(d.total_votes_cast) || 0;
return `
<div class="delegate-card">
<div class="delegate-card ui-card ui-card-soft ui-card-interactive ui-card-pad-md">
<div class="delegate-info">
<h3>${safeName}</h3>
<p class="bio">${safeBio}</p>