baseline

web/css/layout/app-topbar.css

@@ -0,0 +1,87 @@
+.app-header nav li {
+  padding: 0;
+}
+
+form:has(input#app-search) {
+  flex: 1;
+}
+
+.app-header nav {
+  gap: var(--app-spacing);
+}
+
+.app-header {
+  padding-block-start: 0;
+  padding-left: var(--app-spacing);
+  padding-right: var(--app-spacing);
+  margin-bottom: calc(var(--app-spacing) * 2);
+  color: var(--app-contrast);
+  border-bottom: 1px solid var(--app-border);
+}
+
+main:has(.app-details-container) .app-header {
+  margin-bottom: 0;
+}
+
+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 {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--app-muted-color);
+}
+
+.app-header details.dropdown > summary:not([role]) {
+  border: none;
+  height: auto;
+  padding: 5px;
+  border-radius: 0;
+  background: transparent;
+}
+
+.app-header details.dropdown > summary:not([role]):after {
+  display: none;
+}
+
+.app-header nav > ul li a {
+  padding: 5px;
+  color: var(--app-form-element-placeholder-color);
+  display: block;
+  margin: 0;
+}
+
+.app-header button {
+  padding: 5px;
+  color: var(--app-form-element-placeholder-color);
+  display: block;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
+.app-header #global-back.is-disabled,
+.app-header #global-forward.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@media (min-width: 768px) {
+  header.app-header {
+    position: sticky;
+    top: 0;
+    background: var(--app-background-color);
+    z-index: 10;
+  }
+}
+
+.app-header details.dropdown[open] > summary::before {
+  display: none;
+}