fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Standardize global empty-state UI component

Browse Source
This commit is contained in:
Felix Schneider
2026-03-11 21:38:15 +01:00
parent 51e9a5c19a
commit a1c7c9cf7d
7 changed files with 147 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/css/base/variables.base.css
View File

@@ -311,6 +311,10 @@
--app-card-box-shadow: var(--app-box-shadow);
--app-card-sectioning-background-color: rgb(251, 251.5, 252.25);
--app-details-card-open-summary-bg: var(--app-card-sectioning-background-color);
--app-empty-border-color: var(--app-muted-border-color);
--app-empty-bg: var(--app-card-background-color);
--app-empty-text: var(--app-color);
--app-empty-hint: var(--app-muted-color);
--app-dropdown-background-color: #fff;
--app-dropdown-border-color: #eff1f4;
--app-dropdown-box-shadow: var(--app-box-shadow);

44
web/css/components/app-empty-state.css Normal file
View File

@@ -0,0 +1,44 @@
@layer components {
.app-empty-state {
border: 1px dashed var(--app-empty-border-color);
border-radius: var(--app-border-radius);
background: var(--app-empty-bg);
color: var(--app-empty-text);
padding: calc(var(--app-spacing) * 0.875) var(--app-spacing);
display: grid;
gap: calc(var(--app-spacing) * 0.35);
text-align: center;
}
.app-empty-state[data-size="compact"] {
padding: calc(var(--app-spacing) * 0.625) calc(var(--app-spacing) * 0.75);
gap: calc(var(--app-spacing) * 0.25);
}
.app-empty-state[data-align="left"] {
text-align: left;
}
.app-empty-state-message {
margin: 0;
color: var(--app-empty-text);
font-size: 0.95rem;
line-height: 1.4;
}
.app-empty-state-hint {
margin: 0;
color: var(--app-empty-hint);
font-size: 0.85rem;
line-height: 1.3;
}
.app-empty-state-action {
justify-self: center;
margin-top: calc(var(--app-spacing) * 0.15);
}
.app-empty-state[data-align="left"] .app-empty-state-action {
justify-self: start;
}
}