dguiducci
7dd77d4ef4
- New skald-setup crate: interactive first-run wizard that creates the admin user, prompts for encryption choice and password - Auth system: session-based login/logout with cookie, guard middleware - Roles API: CRUD for data-driven roles, seeded on first boot - Users management API: create, list, edit, delete users - Setup state API: check if first admin has been created - Frontend: login-page, setup-page, users-page, roles-page, profile-page components with corresponding CSS - Topbar: avatar dropdown with profile link and logout - Sidebar: nav entries for Users and Roles (admin only) - Page shell CSS: layout support for the new pages - build.sh: builds both skald and skald-setup binaries - run.sh: runs skald-setup before the server loop - CLAUDE.md: updated workspace layout and build/run docs
161 lines
3.1 KiB
CSS
161 lines
3.1 KiB
CSS
/* ── Top navigation bar ────────────────────────────────────────────────────── */
|
|
|
|
app-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--topbar-height);
|
|
background: var(--sidebar-bg);
|
|
border-bottom: 1px solid var(--sidebar-divider);
|
|
padding: 0 1rem;
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
}
|
|
|
|
.topbar-title {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--sidebar-brand-color);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.topbar-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.topbar-theme-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: var(--sidebar-text);
|
|
cursor: pointer;
|
|
transition: color 0.15s, background 0.15s;
|
|
padding: 0;
|
|
}
|
|
|
|
.topbar-theme-btn:hover {
|
|
color: var(--sidebar-text-active);
|
|
background: var(--sidebar-hover);
|
|
}
|
|
|
|
.topbar-theme-btn i {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.topbar-copilot-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: #6366f1;
|
|
cursor: pointer;
|
|
transition: color 0.15s, background 0.15s;
|
|
padding: 0;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.topbar-copilot-btn:hover {
|
|
background: var(--sidebar-hover);
|
|
}
|
|
|
|
.topbar-copilot-btn i {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* ── Profile avatar + dropdown ─────────────────────────────────────────────── */
|
|
|
|
.topbar-profile-wrapper {
|
|
position: relative;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.topbar-avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 26px;
|
|
height: 26px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background 0.15s, transform 0.1s;
|
|
padding: 0;
|
|
}
|
|
|
|
.topbar-avatar:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.topbar-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
min-width: 200px;
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 8px;
|
|
box-shadow: var(--card-shadow);
|
|
padding: 6px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.topbar-dropdown-header {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid var(--card-border);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.topbar-dropdown-name {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.topbar-dropdown-sub {
|
|
font-size: 0.75rem;
|
|
color: var(--placeholder-color);
|
|
}
|
|
|
|
.topbar-dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
border: none;
|
|
background: none;
|
|
color: var(--bs-body-color);
|
|
font-size: 0.82rem;
|
|
padding: 8px 10px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.topbar-dropdown-item:hover {
|
|
background: var(--bs-tertiary-bg);
|
|
}
|
|
|
|
.topbar-dropdown-item i {
|
|
font-size: 0.9rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.topbar-dropdown-logout {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.topbar-dropdown-logout:hover {
|
|
background: rgba(220, 53, 69, 0.08);
|
|
}
|