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/sidebar.css

Browse source
This commit is contained in:
Zac Gaetano 2026-05-21 12:30:38 -04:00
parent a6c9f88068
commit 1c0ed05ac9
1 changed files with 119 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
services/web-ui/src/css/components/sidebar.css Normal file
View file

@ -0,0 +1,119 @@
/* sidebar.css ─ flat app navigation rail (200px, 28px rows) */
.wd-sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--bg-panel);
border-right: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
}
.wd-sidebar-header {
height: var(--topbar-h);
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border-bottom: 1px solid var(--border-faint);
flex-shrink: 0;
}
.wd-sidebar-logo { width: 18px; height: 18px; }
.wd-sidebar-brand { font: 600 13px/1 var(--font); letter-spacing: -0.01em; color: var(--text-primary); }
.wd-sidebar-nav {
display: flex;
flex-direction: column;
padding: 8px 0;
gap: 1px;
}
.wd-sidebar-section {
font: 600 10px/1 var(--font);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 16px 12px 4px;
}
.wd-nav-item {
position: relative;
display: flex;
align-items: center;
gap: 8px;
height: 28px;
padding: 0 8px 0 16px; /* extra left padding for the accent-dot indent */
font: 500 13px/1 var(--font);
color: var(--text-secondary);
text-decoration: none;
transition: background-color 120ms cubic-bezier(0.25, 1, 0.5, 1),
color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wd-nav-item:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.wd-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); }
.wd-nav-item:hover svg { color: var(--text-secondary); }
.wd-nav-item.is-active {
background: var(--bg-surface);
color: var(--text-primary);
}
.wd-nav-item.is-active svg { color: var(--text-primary); }
/* 4px leading accent dot — NOT a side-stripe border (banned).
* Vertically centered, 8px tall, 4px from the left edge. */
.wd-nav-item.is-active::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 8px;
border-radius: 2px;
background: var(--accent);
}
/* IN DEV pill (auth-guard.js injects this) */
.wd-nav-item .nav-dev-badge {
margin-left: auto;
font: 700 9px/1 var(--font);
letter-spacing: 0.12em;
padding: 2px 5px;
border-radius: 3px;
background: oklch(28% 0.14 80 / 0.45);
color: oklch(85% 0.16 85);
border: 1px solid oklch(50% 0.16 80 / 0.55);
text-transform: uppercase;
flex-shrink: 0;
}
/* Footer user widget */
.wd-sidebar-footer {
margin-top: auto;
padding: 12px;
border-top: 1px solid var(--border-faint);
}
.wd-sidebar-user {
display: flex;
align-items: center;
gap: 8px;
}
.wd-sidebar-user-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-surface);
display: flex; align-items: center; justify-content: center;
font: 600 11px/1 var(--font);
color: var(--text-secondary);
flex-shrink: 0;
}
.wd-sidebar-user-info { flex: 1; min-width: 0; }
.wd-sidebar-user-name { font: 500 12px/1.3 var(--font); color: var(--text-primary); }
.wd-sidebar-user-role { font: 500 10px/1.3 var(--font); color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
.wd-sidebar-user-logout { opacity: 0; transition: opacity 120ms cubic-bezier(0.25, 1, 0.5, 1); }
.wd-sidebar-user:hover .wd-sidebar-user-logout { opacity: 1; }