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

Extract glass system into shared CSS utilities and design tokens

Browse Source 
Centralize all hardcoded rgba color values into CSS custom properties
and extract glass/glow styles into reusable utility classes (.glass,
.glass-inner, .glow-border, .glow-border--animated) in main.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nitrix
2026-03-09 18:35:36 +01:00
parent 29974704d0
commit 019ead7be3
7 changed files with 133 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<template>
<div
class="event-card"
class="event-card glass"
:class="{ 'event-card--past': isPast, 'event-card--swiping': isSwiping }"
:style="swipeStyle"
@touchstart="onTouchStart"
@@ -93,22 +93,12 @@ function onTouchEnd() {
.event-card {
display: flex;
align-items: center;
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 {
opacity: 0.6;
filter: saturate(0.5);
@@ -140,7 +130,7 @@ function onTouchEnd() {
.event-card__time {
font-size: 0.8rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
color: var(--color-text-secondary);
}
.event-card__badge {
@@ -158,8 +148,8 @@ function onTouchEnd() {
}
.event-card__badge--attendee {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
background: var(--color-glass-strong);
color: var(--color-text-bright);
}
.event-card__delete {
@@ -172,7 +162,7 @@ function onTouchEnd() {
background: none;
border: none;
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.5);
color: var(--color-text-muted);
cursor: pointer;
border-radius: 50%;
transition: color 0.15s ease, background 0.15s ease;