nitrix/fete
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases 13 Wiki Activity

Apply glassmorphism styling to event cards on list view

Browse Source 
Replace solid white event cards with glass-effect cards featuring
backdrop blur, semi-transparent gradient backgrounds, and light
borders that blend with the Electric Dusk gradient background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nitrix
2026-03-09 17:50:20 +01:00
parent 752d153cd4
commit e203ecf687
4 changed files with 57 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/EventCard.vue
View File

@@ -93,11 +93,20 @@ function onTouchEnd() {
.event-card {
display: flex;
align-items: center;
background: var(--color-card);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: var(--spacing-md) var(--spacing-lg);
gap: var(--spacing-sm);
transition: background 0.2s ease, border-color 0.2s ease;
}
.event-card:hover {
background: var(--color-glass-hover);
border-color: rgba(255, 255, 255, 0.3);
}
.event-card--past {
@@ -122,7 +131,7 @@ function onTouchEnd() {
.event-card__title {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
color: var(--color-text-on-gradient);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -131,7 +140,7 @@ function onTouchEnd() {
.event-card__time {
font-size: 0.8rem;
font-weight: 400;
color: #888;
color: rgba(255, 255, 255, 0.7);
}
.event-card__badge {
@@ -149,8 +158,8 @@ function onTouchEnd() {
}
.event-card__badge--attendee {
background: #e0e0e0;
color: #555;
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
}
.event-card__delete {
@@ -163,7 +172,7 @@ function onTouchEnd() {
background: none;
border: none;
font-size: 1.2rem;
color: #bbb;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
border-radius: 50%;
transition: color 0.15s ease, background 0.15s ease;