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

major update

Browse Source
This commit is contained in:
Felix Schneider
2026-03-04 15:56:58 +01:00
parent 16759a2732
commit 8f4dd5840d
478 changed files with 24313 additions and 8201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
web/css/components/app-active-filter-chips.css Normal file
View File

@@ -0,0 +1,86 @@
@layer components {
.app-active-filters {
margin: 0 0 0.875rem;
}
.app-active-filters-inner {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.app-filter-chip-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
align-items: center;
}
.app-filter-chip-list li {
margin: 0;
padding: 0;
list-style: none;
}
.app-filter-chip {
-webkit-appearance: none;
appearance: none;
font: inherit;
border: 1px solid var(--app-form-element-border-color);
background: var(--app-form-element-background-color);
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.65rem;
font-size: 0.78rem;
line-height: 1.15;
font-weight: 500;
color: var(--app-form-element-color);
--app-background-color: var(--app-form-element-background-color);
--app-border-color: var(--app-form-element-border-color);
--app-color: var(--app-form-element-color);
cursor: pointer;
transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, color 160ms ease;
}
.app-filter-chip:hover {
border-color: var(--app-primary, #1d4ed8);
background: var(--app-card-background-color, #fff);
color: var(--app-form-element-color);
--app-color: var(--app-form-element-color);
transform: translateY(-1px);
}
.app-filter-chip:focus-visible {
outline: 2px solid var(--app-primary, #1d4ed8);
outline-offset: 2px;
color: var(--app-form-element-color);
--app-color: var(--app-form-element-color);
}
.app-filter-chip:active {
color: var(--app-form-element-color);
--app-color: var(--app-form-element-color);
}
.app-filter-chip i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 999px;
font-size: 0.58rem;
background: var(--app-muted-border-color);
}
.app-filter-chip-clear {
border-style: dashed;
--app-color: var(--app-muted-color);
}
}

5
web/css/components/app-details-titlebar.css
View File

@@ -39,6 +39,11 @@
white-space: nowrap;
}
.app-details-titlebar .app-detail-unsaved-indicator {
margin: 0;
white-space: nowrap;
}
.app-details-titlebar h1 i {
background: var(--app-background-color);
width: 35px;

57
web/css/components/app-details-validation-summary.css Normal file
View File

@@ -0,0 +1,57 @@
@layer components {
.app-details-errors {
padding-block-start: 1rem;
}
.app-details-validation-summary {
--app-validation-summary-border-color: var(--app-notice-error-border-color);
--app-validation-summary-background-color: var(--app-notice-error-background-color);
--app-validation-summary-title-color: var(--app-notice-error-color);
--app-validation-summary-link-color: var(--app-contrast);
margin: 0;
border: 1px solid var(--app-validation-summary-border-color);
border-left-width: 4px;
border-radius: var(--app-border-radius);
background: var(--app-validation-summary-background-color);
padding: calc(var(--app-spacing) * 0.75) calc(var(--app-spacing) * 1);
color: var(--app-color);
display: grid;
gap: calc(var(--app-spacing) * 0.55);
}
.app-details-validation-summary:focus-visible {
outline: 2px solid var(--app-validation-summary-border-color);
outline-offset: 2px;
}
.app-details-validation-summary-title {
margin: 0;
font-weight: 600;
color: var(--app-validation-summary-title-color);
}
.app-details-validation-summary-list {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: calc(var(--app-spacing) * 0.35);
}
.app-details-validation-summary-list li {
margin: 0;
list-style: disc;
}
.app-details-validation-summary-link {
color: var(--app-validation-summary-link-color);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color 120ms ease;
}
.app-details-validation-summary-link:hover,
.app-details-validation-summary-link:focus-visible {
color: var(--app-validation-summary-title-color);
}
}

184
web/css/components/app-filter-drawer.css Normal file
View File

@@ -0,0 +1,184 @@
@layer components {
.app-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body.filter-drawer-open {
overflow: hidden;
overscroll-behavior: none;
}
.app-filter-drawer {
position: fixed;
inset: 0;
z-index: 2100;
display: flex;
justify-content: flex-end;
background: rgba(15, 23, 42, 0.35);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.app-filter-drawer[hidden] {
display: none;
}
.app-filter-drawer-panel {
display: flex;
flex-direction: column;
width: min(420px, 100vw);
height: 100%;
background: var(--app-card-background-color, #fff);
border-left: 1px solid
var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
}
.app-filter-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.45rem;
padding: 0.5rem 0.65rem;
border-bottom: 1px solid
var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
}
.app-filter-drawer-header h2 {
margin: 0;
font-size: 0.8125rem;
line-height: 1.2;
}
.app-filter-drawer-header .icon-button {
min-height: auto;
padding: 0.2rem 0.4rem;
margin: 0;
}
.app-filter-drawer-body {
--app-drawer-field-gap: 0.35rem;
--app-drawer-row-gap: 1.1rem;
--app-drawer-control-height: calc(
1rem * var(--app-line-height) + var(--app-form-element-spacing-vertical) * 2 +
var(--app-border-width) * 2
);
flex: 1;
overflow: auto;
padding: 1rem 1rem 1.1rem;
display: grid;
align-content: start;
gap: var(--app-drawer-row-gap);
}
.app-filter-drawer-body .app-list-toolbar {
margin-bottom: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--app-drawer-row-gap);
}
.app-filter-drawer-body .app-list-toolbar > * {
width: 100% !important;
}
.app-filter-drawer-body .app-list-toolbar > * > * {
width: 100% !important;
}
.app-filter-drawer-body .app-list-toolbar > * > * > * {
width: 100% !important;
}
.app-filter-drawer-body .app-list-toolbar .app-field,
.app-filter-drawer-body .app-list-toolbar > label {
width: 100%;
display: grid;
gap: var(--app-drawer-field-gap);
align-items: start;
margin: 0 !important;
}
.app-filter-drawer-body .app-list-toolbar .app-field > span,
.app-filter-drawer-body .app-list-toolbar > label > span {
margin: 0 !important;
line-height: 1.2;
}
.app-filter-drawer-body .app-list-toolbar input:not([type="hidden"]),
.app-filter-drawer-body .app-list-toolbar select,
.app-filter-drawer-body .app-list-toolbar textarea {
width: 100% !important;
box-sizing: border-box;
min-height: var(--app-drawer-control-height);
margin: 0 !important;
}
.app-filter-drawer-body .app-list-toolbar .multi-select {
width: 100% !important;
margin: 0 !important;
line-height: var(--app-line-height);
--input-min-height: var(--app-drawer-control-height);
}
.app-filter-drawer-body .app-list-toolbar .multi-select .multi-select-header {
min-height: var(--app-drawer-control-height);
margin: 0 !important;
padding-top: var(--app-form-element-spacing-vertical);
padding-bottom: var(--app-form-element-spacing-vertical);
box-sizing: border-box;
}
.app-filter-drawer-body
.app-list-toolbar
.multi-select
.multi-select-options {
margin-top: 0.25rem;
}
.app-filter-drawer-body
.app-list-toolbar
.multi-select
.multi-select-header-placeholder,
.app-filter-drawer-body
.app-list-toolbar
.multi-select
.multi-select-header-option {
line-height: 1.2;
}
.app-filter-drawer-body #address-book-custom-filters {
margin: 0;
}
.app-filter-drawer-footer {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
gap: 0.4rem;
padding: 0.9rem 1rem 1.1rem;
border-top: 1px solid
var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
}
.app-filter-drawer-footer > button {
width: 100%;
margin: 0;
}
@media (max-width: 768px) {
.app-filter-drawer-panel {
width: 100vw;
border-left: 0;
}
}
}

14
web/css/components/app-flash.css
View File

@@ -16,6 +16,7 @@
position: relative;
overflow: hidden;
color: var(--app-notice-border-color);
margin-block: calc(var(--app-spacing) * .75);
}
#async-messages .notice {
@@ -32,6 +33,7 @@
position: relative;
overflow: hidden;
color: var(--app-notice-border-color);
margin-block: 0;
}
@@ -111,10 +113,6 @@
margin: 0;
}
.app-details-errors {
padding-block-start: 1rem;
}
/* .flash-stack:has(.notice) {
margin-top: var(--app-spacing);
} */
@@ -126,6 +124,14 @@
margin-bottom: 0;
}
.flash-stack .notice {
margin-block: 0;
}
.flash-stack .notice + .notice {
margin-top: calc(var(--app-spacing) * .5);
}
.notice li {
list-style: none;
}

130
web/css/components/app-list-toolbar.css
View File

@@ -1,79 +1,85 @@
@layer components {
.app-list-toolbar {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 10px;
margin-bottom: calc(var(--app-spacing) * 1);
}
.app-list-toolbar {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 10px;
margin-bottom: calc(var(--app-spacing) * 1);
}
.app-list-toolbar > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: 13px !important;
height: auto !important;
}
.app-list-toolbar > * > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: 13px !important;
height: auto !important;
}
.app-list-toolbar > * > * > *{
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: 13px !important;
height: auto !important;
}
.app-list-toolbar > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: 13px !important;
height: auto !important;
}
.app-list-toolbar > * > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: 13px !important;
height: auto !important;
}
.app-list-toolbar > * > * > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: 13px !important;
height: auto !important;
}
.app-list-toolbar
input:not(
[type="checkbox"],
.app-list-toolbar [type="radio"],
.app-list-toolbar [type="range"],
.app-list-toolbar [type="file"]
):is(
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"]
) {
width: auto;
}
.app-list-toolbar > button {
padding: 6px 10px;
}
.app-list-toolbar > label > span {
display: block;
font-size: 11px !important;
}
.app-list-toolbar
input:not(
[type="checkbox"],
.app-list-toolbar [type="radio"],
.app-list-toolbar [type="range"],
.app-list-toolbar [type="file"]
):is(
[type="date"],
[type="datetime-local"],
[type="month"],
[type="time"],
[type="week"]
) {
width: auto;
}
.app-list-toolbar
.multi-select
.multi-select-header
.multi-select-header-placeholder {
font-size: 13px;
}
.app-list-toolbar > label > span {
display: block;
font-size: 11px !important;
}
.app-list-toolbar .multi-select .multi-select-header, .app-list-toolbar .multi-select .multi-select-option, .app-list-toolbar .multi-select .multi-select-all {
.app-list-toolbar
.multi-select
.multi-select-header
.multi-select-header-placeholder {
font-size: 13px;
}
.app-list-toolbar .multi-select .multi-select-header,
.app-list-toolbar .multi-select .multi-select-option,
.app-list-toolbar .multi-select .multi-select-all {
min-height: unset;
padding-left: 5px;
}
}
.app-list-toolbar .multi-select {
.app-list-toolbar .multi-select {
width: 200px !important;
}
}
.app-list-toolbar span.multi-select-header-option {
.app-list-toolbar span.multi-select-header-option {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
padding-left: 3px !important;
font-size: 11px !important;
}
}
}