switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.31.1 (#204)

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit is contained in:
Jeffrey Smith
2026-03-19 10:21:40 +00:00
committed by xcaliber
parent 071dea8904
commit 8364440081
17 changed files with 1186 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/css/user-menu.css
View File

@@ -1,10 +1,9 @@
/* ==========================================
Chat Switchboard — UserMenu Component CSS
==========================================
v0.25.0-cs11.1: Self-contained styles for the UserMenu
component. Works in two contexts:
1. Sidebar (flyout pops UP) — default in .sidebar
2. Topbar (flyout drops DOWN) — default standalone
v0.31.1: Flyout container + item styles moved to primitives.css
(.sw-menu-flyout). This file keeps only the trigger button,
avatar, and sidebar-specific direction overrides.
========================================== */
/* ── Wrapper ───────────────────────────────── */
@@ -69,81 +68,10 @@
white-space: nowrap;
}
/* ── Flyout (default: drops DOWN for topbar) ─ */
/* ── Sidebar overrides ───────────────────── */
/* In sidebar context, flyout pops UP instead of down and uses upward shadow */
.user-menu-wrap .user-flyout {
display: none;
position: absolute;
top: 100%;
right: 0;
left: auto;
margin-top: 2px;
background: var(--bg-elevated, #42424e);
border: 1px solid var(--border-elevated, #555);
border-radius: var(--radius-lg, 8px);
padding: 4px;
min-width: 170px;
z-index: 200;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.08);
}
.user-menu-wrap .user-flyout.open {
display: block;
}
/* ── Flyout Items ──────────────────────────── */
.user-menu-wrap .flyout-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius, 6px);
background: none;
border: none;
color: var(--text-2, #999);
cursor: pointer;
font-size: 13px;
font-family: inherit;
width: 100%;
transition: background 0.15s, color 0.15s;
}
.user-menu-wrap .flyout-item:hover {
background: var(--bg-hover, rgba(255,255,255,0.06));
color: var(--text, #eee);
}
.user-menu-wrap .flyout-item svg {
flex-shrink: 0;
opacity: 0.7;
}
.user-menu-wrap .flyout-danger {
color: var(--danger, #f44336);
}
.user-menu-wrap .flyout-danger:hover {
background: var(--danger-dim, rgba(244, 67, 54, 0.1));
color: var(--danger, #f44336);
}
.user-menu-wrap .flyout-divider {
border: none;
height: 1px;
background: var(--border, #2a2a2e);
margin: 4px 0;
}
/* ── Flyout Direction: UP ──────────────────── */
/* data-flyout="up" on .user-menu-wrap (or legacy .sidebar parent) */
.user-menu-wrap[data-flyout="up"] .user-flyout,
.sidebar .user-menu-wrap .user-flyout {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 4px;
.sidebar .user-menu-wrap .sw-menu-flyout {
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}
@@ -158,7 +86,7 @@
display: none;
}
.sidebar.collapsed .user-menu-wrap .user-flyout {
.sidebar.collapsed .user-menu-wrap .sw-menu-flyout {
position: fixed;
left: var(--sidebar-rail);
bottom: 8px;