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

feat: auth system — CSS page transitions, API helpers, users/tokens pages

Browse source
This commit is contained in:
Zac Gaetano 2026-05-18 12:57:50 -04:00
parent 28a4b24911
commit d0f9848717
1 changed files with 81 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
services/web-ui/public/css/common.css
View file

@ -134,6 +134,16 @@ svg { display: block; flex-shrink: 0; }
display: flex;
flex-direction: column;
overflow: hidden;
animation: page-in 200ms ease-out;
}
/* ================================================================
PAGE TRANSITION
================================================================ */
@keyframes page-in {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* ================================================================
@ -222,11 +232,61 @@ svg { display: block; flex-shrink: 0; }
.nav-item.active svg { opacity: 1; }
.sidebar-footer {
padding: var(--sp-4);
padding: var(--sp-3) var(--sp-2);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
/* ── Sidebar user widget ─────────────────────────────────── */
.sidebar-user {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2);
border-radius: var(--r-md);
transition: background var(--t-fast);
}
.sidebar-user:hover { background: var(--bg-surface); }
.sidebar-user-avatar {
width: 26px;
height: 26px;
border-radius: var(--r-sm);
background: var(--accent-subtle);
border: 1px solid var(--accent-border);
color: var(--accent);
font-size: 11px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-transform: uppercase;
}
.sidebar-user-info {
flex: 1;
min-width: 0;
}
.sidebar-user-name {
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-user-role {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ================================================================
TOPBAR
================================================================ */
@ -523,6 +583,10 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
.badge-srt { background: var(--status-green-bg); color: var(--status-green); }
.badge-rtmp { background: var(--accent-subtle); color: var(--accent); }
.badge-admin { background: oklch(65% 0.16 245 / 0.12); color: oklch(72% 0.16 245); }
.badge-editor { background: var(--accent-subtle); color: var(--accent); }
.badge-viewer { background: oklch(25% 0.014 250); color: var(--text-secondary); }
/* ================================================================
STATUS DOTS
================================================================ */
@ -733,7 +797,7 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
.progress-fill--error { background: var(--status-red); }
/* ================================================================
INFO BANNER (inline connection info etc.)
INFO BANNER
================================================================ */
.info-banner {
@ -756,7 +820,7 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
}
/* ================================================================
SEGMENT (conditional field groups)
SEGMENT
================================================================ */
.conditional-fields { display: flex; flex-direction: column; gap: var(--sp-5); }
@ -785,3 +849,17 @@ textarea:focus { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(-
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Token reveal box */
.token-reveal {
font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
font-size: var(--text-xs);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-base);
border: 1px solid var(--accent-border);
border-radius: var(--r-md);
color: var(--accent);
word-break: break-all;
line-height: 1.7;
user-select: all;
}