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

topbar anpassungen

Browse Source
This commit is contained in:
Felix Schneider
2026-03-05 12:51:53 +01:00
parent c5f657c8c8
commit b2dab5bd6c
14 changed files with 494 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
web/css/layout/app-topbar.css
View File

@@ -1,4 +1,24 @@
@layer layout {
.app-skip-link {
position: fixed;
top: calc(var(--app-spacing) * 0.5);
left: var(--app-spacing);
padding: calc(var(--app-spacing) * 0.5) var(--app-spacing);
border: 1px solid var(--app-primary);
border-radius: var(--app-border-radius);
background: var(--app-background-color);
color: var(--app-primary);
text-decoration: none;
transform: translateY(-180%);
transition: transform var(--app-transition);
z-index: 40;
}
.app-skip-link:focus,
.app-skip-link:focus-visible {
transform: translateY(0);
}
.app-header {
--app-topbar-item-padding: 5px;
--app-topbar-list-gap: 8px;
@@ -18,33 +38,41 @@ main:has(.app-details-container) .app-header {
margin-bottom: 0;
}
.app-header nav {
.app-header nav.app-topbar {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--app-spacing);
align-items: center;
}
.app-header nav li {
padding: 0;
}
.app-header form:has(input#app-search) {
flex: 1;
}
.app-header li:has(#toggle-main-content-aside) {
display: none;
}
main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
display: block;
}
.app-header nav > ul {
.app-topbar-left,
.app-topbar-right {
display: flex;
gap: var(--app-topbar-list-gap);
align-items: center;
color: var(--app-muted-color);
}
.app-topbar-right {
justify-content: flex-end;
}
.app-topbar-center {
min-height: 1px;
}
.app-topbar-menu-item-detail-sidebar {
display: none;
}
main:has(#app-details-aside-section) .app-topbar-menu-item-detail-sidebar {
display: list-item;
}
.app-header details.dropdown > summary:not([role]) {
border: none;
height: auto;
@@ -53,18 +81,20 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
background: transparent;
}
.app-header details.dropdown > summary:not([role]):after {
/* .app-header details.dropdown > summary:not([role]):after {
display: none;
}
} */
.app-header nav > ul li a {
.app-topbar-left > li > a,
.app-topbar-right > li > a {
padding: var(--app-topbar-item-padding);
color: var(--app-topbar-muted);
display: block;
margin: 0;
}
.app-header button {
.app-topbar-left button,
.app-topbar-right button {
padding: var(--app-topbar-item-padding);
color: var(--app-topbar-muted);
display: block;
@@ -80,6 +110,153 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
pointer-events: none;
}
.app-topbar-tenant-chip {
display: inline-flex;
align-items: center;
gap: calc(var(--app-spacing) * 0.4);
max-width: min(26rem, 45vw);
padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.75);
border: var(--app-border-width) solid var(--app-border);
border-radius: 999px;
background: transparent;
color: var(--app-topbar-muted);
}
.app-topbar-tenant-menu > summary.app-topbar-tenant-chip {
cursor: pointer;
}
.app-topbar-tenant-name {
display: inline-block;
max-width: min(20rem, 38vw);
font-size: 0.86rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-topbar-user-menu > summary {
color: var(--app-topbar-muted);
}
.app-topbar-menu-list {
min-width: min(17rem, calc(100vw - (var(--app-spacing) * 2)));
max-width: min(24rem, calc(100vw - (var(--app-spacing) * 2)));
max-height: min(32rem, calc(100vh - (var(--app-spacing) * 4)));
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
@supports (height: 100dvh) {
.app-topbar-menu-list {
max-height: min(32rem, calc(100dvh - (var(--app-spacing) * 4)));
}
}
@media (min-width: 768px) {
.app-topbar-menu-list {
max-height: min(40rem, calc(100vh - (var(--app-spacing) * 4)));
}
}
@supports (height: 100dvh) {
@media (min-width: 768px) {
.app-topbar-menu-list {
max-height: min(40rem, calc(100dvh - (var(--app-spacing) * 4)));
}
}
}
.app-topbar-menu-list--right {
right: 0;
left: auto;
}
/* Override global dropdown default (left:0) without using dir=rtl hacks. */
.app-header details.dropdown > summary + ul.app-topbar-menu-list--right {
right: 0;
left: auto;
inset-inline-end: 0;
inset-inline-start: auto;
}
.app-topbar-menu-list li > a,
.app-topbar-menu-list li > button {
display: block;
margin: calc(var(--app-form-element-spacing-vertical) * -0.5)
calc(var(--app-form-element-spacing-horizontal) * -1);
padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
var(--app-form-element-spacing-horizontal);
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
color: var(--app-dropdown-color);
font: inherit;
line-height: inherit;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.app-topbar-menu-list li {
display: block;
}
.app-topbar-menu-list li > button:hover,
.app-topbar-menu-list li > button:focus,
.app-topbar-menu-list li > button:focus-visible {
background-color: var(--app-dropdown-hover-background-color);
}
.app-topbar-menu-list li > button.app-topbar-menu-with-hotkey {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: calc(var(--app-spacing) * 0.6);
}
.app-topbar-hotkey {
color: var(--app-muted-color);
font-size: 0.82em;
white-space: nowrap;
}
.app-topbar-menu-list li.app-topbar-menu-heading {
padding-top: calc(var(--app-spacing) * 0.5);
padding-bottom: calc(var(--app-spacing) * 0.35);
border-bottom: 0;
color: var(--app-muted-color);
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
pointer-events: none;
}
.app-topbar-menu-list.app-topbar-menu-list--right li {
border-bottom: 0;
}
.app-topbar-menu-list li.app-topbar-menu-divider {
margin: calc(var(--app-spacing) * 0.25) 0;
padding: 0;
border-bottom: 0;
height: 1px;
background: var(--app-border);
list-style: none;
}
.app-topbar-menu-list li.app-topbar-menu-divider + li.app-topbar-menu-heading {
margin-top: calc(var(--app-spacing) * 0.15);
}
@media (min-width: 768px) {
header.app-header {
position: sticky;
@@ -92,4 +269,14 @@ main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
.app-header details.dropdown[open] > summary::before {
display: none;
}
@media (max-width: 767px) {
.app-topbar-tenant-chip {
max-width: min(14rem, 55vw);
}
.app-topbar-tenant-name {
max-width: min(11rem, 45vw);
}
}
}

26
web/css/vendor-overrides/gridjs.css
View File

@@ -134,6 +134,16 @@
opacity: 0.7;
}
.gridjs-message.gridjs-error .app-grid-error-actions {
margin-top: 0.6rem;
}
.gridjs-message.gridjs-error .app-grid-retry {
padding: 4px 10px;
font-size: 12px;
line-height: 1.2;
}
.grid-avatar {
--grid-avatar-width: 36px;
--grid-avatar-height: 36px;
@@ -243,9 +253,23 @@
background: var(--app-table-row-stripped-background-color);
}
tr.gridjs-tr[data-row-open-url]:focus td,
tr.gridjs-tr[data-row-open-url]:focus-within td {
background: var(--app-table-row-stripped-background-color);
background: color-mix(
in srgb,
var(--app-primary) 4%,
var(--app-background-color)
);
}
tr.gridjs-tr[data-row-open-url]:focus-visible td {
background: var(--app-table-row-stripped-background-color);
box-shadow: inset 0 0 0 var(--app-outline-width) var(--app-primary-focus);
background: color-mix(
in srgb,
var(--app-primary) 6%,
var(--app-background-color)
);
}
tr.gridjs-tr[data-row-open-url]:focus-visible {