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

Apply glassmorphism to BottomSheet and RSVP bar status

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nitrix
2026-03-09 18:57:30 +01:00
parent 5dd7cb3fb8
commit 831ffc071a
4 changed files with 54 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/BottomSheet.vue
View File

@@ -45,7 +45,7 @@ watch(
.sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
background: var(--color-glass-overlay);
display: flex;
align-items: flex-end;
justify-content: center;
@@ -53,7 +53,11 @@ watch(
}
.sheet {
background: var(--color-card);
background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
border: 1px solid var(--color-glass-border);
border-bottom: none;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 20px 20px 0 0;
padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
width: 100%;
@@ -67,7 +71,7 @@ watch(
.sheet__handle {
width: 36px;
height: 4px;
background: #ccc;
background: var(--color-glass-border-hover);
border-radius: 2px;
align-self: center;
flex-shrink: 0;

7
frontend/src/components/RsvpBar.vue
View File

@@ -78,13 +78,16 @@ defineEmits<{
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
background: var(--color-card);
background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
border: 1px solid var(--color-glass-border);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-card);
padding: var(--spacing-md) var(--spacing-lg);
box-shadow: var(--shadow-card);
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text);
color: var(--color-text-on-gradient);
}
.rsvp-bar__check {