dguiducci
126886e309
- Rebrand: new app/agent icons, SKALD.md, warm "paper" CSS palette (terracotta accent, --radius tokens, WCAG contrast, reduced-motion), updated favicon, tray icon, skaldkonur asset - i18n: backend crate (i18n.rs, locale column, ui_locale config), frontend library (web/lib/i18n.js, I18nMixin, t(key)), translation files (web/i18n/), every component wired - Dashboard: <dashboard-page> replaces old home-page content; <app-copilot> becomes the landing page (full/dock layout modes) - Shared folders: API endpoints (shared_folders.rs), frontend page, can_write membership, container mount topology, user_fs routing - Role capabilities: new db table & authorization seam (data not enums), roles.attrs JSON for ui_mode / interface select - Setup: skald-setup prompts for language + password, sets ui_locale - General: components migrated to CSS variables, Lit conventions cleanup, connectors/catalog/marketplace/approval refactoring
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.9rem;
|
|
font-weight: 700;
|
|
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: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
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: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--accent);
|
|
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: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background 0.15s, transform 0.1s;
|
|
padding: 0;
|
|
}
|
|
|
|
.topbar-avatar:hover {
|
|
filter: brightness(0.9);
|
|
}
|
|
|
|
.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: var(--radius-md);
|
|
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);
|
|
}
|