WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

web-ui: wave-1 foundation — services/web-ui/src/css/components/topbar.css

Browse source
This commit is contained in:
Zac Gaetano 2026-05-21 12:30:40 -04:00
parent 23ae848f5b
commit 891a8f82b7
1 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
services/web-ui/src/css/components/topbar.css Normal file
View file

@ -0,0 +1,79 @@
/* topbar.css ─ sticky 48px topbar with breadcrumb + scoped search */
.wd-topbar {
position: sticky;
top: 0;
z-index: 30;
height: var(--topbar-h);
display: flex;
align-items: center;
padding: 0 12px 0 16px;
gap: 16px;
background: var(--bg-panel);
border-bottom: 1px solid var(--border-faint);
flex-shrink: 0;
}
.wd-topbar-left { flex: 0 1 auto; min-width: 0; }
.wd-topbar-center { flex: 1 1 360px; display: flex; justify-content: center; }
.wd-topbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Breadcrumb */
.wd-breadcrumb {
display: flex;
align-items: center;
gap: 0;
font: 500 13px/1 var(--font);
}
.wd-breadcrumb-crumb { color: var(--text-secondary); }
.wd-breadcrumb-crumb:last-child { color: var(--text-primary); font-weight: 600; }
.wd-breadcrumb-sep {
width: 10px; height: 10px;
margin: 0 8px;
color: var(--text-tertiary);
flex-shrink: 0;
}
/* Page-scoped search */
.wd-topbar-search {
width: 100%;
max-width: 360px;
height: 28px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
background: var(--bg-deep);
border: 1px solid var(--border-faint);
border-radius: 4px;
}
.wd-topbar-search:focus-within {
border-color: var(--accent-border);
outline: 2px solid var(--accent-subtle);
outline-offset: 1px;
}
.wd-topbar-search svg {
width: 12px; height: 12px;
color: var(--text-tertiary);
flex-shrink: 0;
}
.wd-topbar-search input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
font: 400 13px/1 var(--font-mono);
color: var(--text-primary);
}
.wd-topbar-search input::placeholder {
color: var(--text-tertiary);
font: 400 13px/1 var(--font-mono);
}
/* Vertical divider between secondary actions and primary CTA */
.wd-topbar-divider {
width: 1px;
height: 20px;
background: var(--border-faint);
margin: 0 4px;
}