bastian/listify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui

Browse Source
This commit is contained in:
Bastian Wagner
2026-06-10 14:15:16 +02:00
parent 6ca54fa2d8
commit 93a91c7bf6
14 changed files with 264 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
listify-client/src/app/app.scss
View File

@@ -2,9 +2,9 @@
display: block;
min-height: 100dvh;
background:
linear-gradient(135deg, rgba(20, 105, 84, 0.12), transparent 36%),
linear-gradient(315deg, rgba(123, 92, 40, 0.12), transparent 34%),
var(--mat-sys-surface);
linear-gradient(140deg, color-mix(in srgb, var(--mat-sys-primary) 14%, transparent), transparent 38%),
linear-gradient(320deg, color-mix(in srgb, var(--mat-sys-tertiary) 12%, transparent), transparent 36%),
var(--mat-sys-surface-container);
}
.app-toolbar {
@@ -14,8 +14,8 @@
height: 56px;
min-height: 56px;
padding-inline: 0.75rem;
border-bottom: 1px solid var(--mat-sys-outline-variant);
background: color-mix(in srgb, var(--mat-sys-surface) 92%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
background: color-mix(in srgb, var(--mat-sys-surface) 88%, transparent);
color: var(--mat-sys-on-surface);
backdrop-filter: blur(14px);
}
@@ -31,7 +31,15 @@
}
.brand mat-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid color-mix(in srgb, var(--mat-sys-primary) 16%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
color: var(--mat-sys-primary);
font-size: 22px;
}
.menu-button {
@@ -68,8 +76,9 @@
.sidebar {
width: min(82vw, 280px);
border-right: 1px solid var(--mat-sys-outline-variant);
background: color-mix(in srgb, var(--mat-sys-surface-container-low) 96%, white);
border-right: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
background: color-mix(in srgb, var(--mat-sys-surface) 92%, transparent);
backdrop-filter: blur(14px);
}
.sidebar nav {
@@ -112,8 +121,8 @@
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.25rem;
padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--mat-sys-outline-variant);
background: color-mix(in srgb, var(--mat-sys-surface) 96%, transparent);
border-top: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
background: color-mix(in srgb, var(--mat-sys-surface) 90%, transparent);
backdrop-filter: blur(14px);
}