xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild shell omnibox as command palette

Browse Source
This commit is contained in:
Frank Tovar
2026-03-21 14:33:42 +01:00
parent 49e8528dc6
commit e965a944b6
4 changed files with 264 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -958,21 +958,52 @@ pre,
overflow: auto;
}
.shell-omnibox-backdrop.surface-drawer-backdrop {
top: calc(var(--shell-header-height, 5.75rem) + 0.5rem);
bottom: calc(var(--shell-mobile-nav-height, 0rem) + 0rem);
.shell-omnibox {
position: relative;
}
.shell-omnibox-drawer.surface-drawer.is-end {
.shell-omnibox-trigger.is-open {
border-color: var(--border-strong);
background: var(--surface-elevated);
}
.shell-omnibox-backdrop {
position: fixed;
top: calc(var(--shell-header-height, 5.75rem) + 0.35rem);
right: 0;
bottom: calc(var(--shell-mobile-nav-height, 0rem));
left: 0;
z-index: 90;
border: none;
background: color-mix(in srgb, var(--bg-overlay) 85%, transparent);
}
.shell-omnibox-palette {
position: fixed;
top: calc(var(--shell-header-height, 5.75rem) + 0.75rem);
bottom: 1rem;
width: min(34rem, calc(100vw - 2rem));
left: 50%;
z-index: 95;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: min(46rem, calc(100vw - 2rem));
max-height: calc(100dvh - var(--shell-header-height, 5.75rem) - var(--shell-mobile-nav-height, 0rem) - 1.75rem);
border: 1px solid var(--border-default);
border-radius: 1.5rem;
background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
box-shadow: var(--shadow-2);
backdrop-filter: blur(22px);
transform: translateX(-50%);
overflow: hidden;
}
.shell-omnibox-panel {
.shell-omnibox-header {
display: grid;
gap: 1rem;
min-height: 0;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 1rem;
border-bottom: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.shell-omnibox-search {
@@ -984,6 +1015,24 @@ pre,
min-height: 3rem;
}
.shell-omnibox-close {
min-height: 2.75rem;
padding: 0.65rem 0.95rem;
border: 1px solid var(--border-default);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-2) 84%, transparent);
color: var(--text-primary);
}
.shell-omnibox-body {
display: grid;
gap: 0.9rem;
min-height: 0;
padding: 1rem;
overflow: auto;
overscroll-behavior: contain;
}
.shell-omnibox-results {
display: grid;
gap: 0.6rem;
@@ -2067,11 +2116,21 @@ pre,
align-items: stretch;
}
.shell-omnibox-drawer.surface-drawer.is-end {
.shell-omnibox-backdrop {
top: calc(var(--shell-header-height, 5.1rem) + 0.25rem);
bottom: calc(var(--shell-mobile-nav-height, 5.5rem));
}
.shell-omnibox-palette {
top: calc(var(--shell-header-height, 5.1rem) + 0.45rem);
right: 0.75rem;
left: 0.75rem;
width: auto;
top: calc(var(--shell-header-height, 5.1rem) + 0.5rem);
bottom: calc(var(--shell-mobile-nav-height, 5.5rem) + 0.5rem);
max-height: calc(100dvh - var(--shell-header-height, 5.1rem) - var(--shell-mobile-nav-height, 5.5rem) - 1rem);
transform: none;
}
.shell-omnibox-header {
grid-template-columns: 1fr;
}
}