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

Apply glassmorphism to ConfirmDialog overlay and surface

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nitrix
2026-03-09 19:00:39 +01:00
parent 831ffc071a
commit e6c4a21f65
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/ConfirmDialog.vue
View File

@@ -75,7 +75,7 @@ watch(
.confirm-dialog__overlay { .confirm-dialog__overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.4); background: var(--color-glass-overlay);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -84,9 +84,12 @@ watch(
} }
.confirm-dialog { .confirm-dialog {
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(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: var(--radius-card); border-radius: var(--radius-card);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
padding: var(--spacing-xl); padding: var(--spacing-xl);
max-width: 320px; max-width: 320px;
width: 100%; width: 100%;
@@ -98,13 +101,13 @@ watch(
.confirm-dialog__title { .confirm-dialog__title {
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 700; font-weight: 700;
color: var(--color-text); color: var(--color-text-on-gradient);
} }
.confirm-dialog__message { .confirm-dialog__message {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
color: #666; color: var(--color-text-soft);
} }
.confirm-dialog__actions { .confirm-dialog__actions {
@@ -130,8 +133,9 @@ watch(
} }
.confirm-dialog__btn--cancel { .confirm-dialog__btn--cancel {
background: #e8e8e8; background: var(--color-glass);
color: #555; border: 1px solid var(--color-glass-border);
color: var(--color-text-on-gradient);
} }
.confirm-dialog__btn--confirm { .confirm-dialog__btn--confirm {