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

32
listify-client/src/app/workspace-page.scss
View File

@@ -1,6 +1,7 @@
.workspace-page {
width: min(100%, 1120px);
max-width: 100%;
min-height: calc(100dvh - 56px);
margin: 0 auto;
padding: 1rem;
overflow-x: hidden;
@@ -11,15 +12,16 @@
align-items: stretch;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
margin-bottom: 1.25rem;
padding: 0.75rem 0;
min-width: 0;
}
.page-header h1 {
overflow-wrap: anywhere;
margin: 0;
font-size: 1.6rem;
font-weight: 500;
font-size: 1.55rem;
font-weight: 600;
}
.page-header p {
@@ -29,8 +31,11 @@
.state-card,
.empty-state {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--mat-sys-surface-container-low) 94%, white);
background: var(--mat-sys-surface);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.state-card mat-card-content,
@@ -77,13 +82,24 @@
.template-card {
min-width: 0;
max-width: 100%;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--mat-sys-surface-container-low) 94%, white);
background: var(--mat-sys-surface);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
}
.template-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
.template-card mat-card-header {
min-width: 0;
padding-bottom: 0.35rem;
padding-bottom: 0.25rem;
}
.template-card mat-card-title,
@@ -95,6 +111,7 @@
margin: 0.5rem 0 0;
color: var(--mat-sys-on-surface-variant);
overflow-wrap: anywhere;
line-height: 1.45;
}
.template-meta {
@@ -151,6 +168,7 @@
@media (min-width: 701px) {
.workspace-page {
min-height: calc(100dvh - 64px);
padding: 2rem;
}
@@ -158,7 +176,7 @@
align-items: center;
flex-direction: row;
justify-content: space-between;
margin-bottom: 1.5rem;
margin-bottom: 1.75rem;
}
.page-header h1 {