danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Sidebar UI: frosted-glass header blur, centered nav badges, admin cleanup

Browse source 
- .sidebar-header: real frosted-glass blur of content scrolling behind it —
  made the background translucent (was an opaque base layer), added
  backdrop-filter blur, and raised the header above the nav (z-index) so nav
  items actually sit in its backdrop.
- .dl-nav-badge: vertically centered on the right (top:50% + translateY) instead
  of pinned to the top-right corner.
- Removed border-top-right-radius from .sidebar and .sidebar-header (square top).
- Hide the "My Accounts" + "My Settings" header buttons for admin profiles —
  both are inert for admin (every service is "Managed in Settings", and My
  Settings is an empty pointer note); kept for non-admins who get real UI.
This commit is contained in:
BoulderBadgeDad 2026-06-15 21:16:18 -07:00
parent 02d6af29ed
commit f2f0f5d849
2 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webui/static/init.js
View file

@ -1116,6 +1116,15 @@ function updateProfileIndicator() {
const statusSection = document.querySelector('.status-section--clickable');
if (statusSection) statusSection.classList.toggle('status-section--locked', !currentProfile.is_admin);
// My Accounts (per-profile streaming OAuth) and My Settings (per-profile
// server library) are inert for admin — admin uses the global app account
// for every service and the full Settings page. Hide both for admin; keep
// them for non-admins, who actually get a connect/library UI.
const myAccountsBtn = document.getElementById('my-accounts-btn');
const personalSettingsBtn = document.getElementById('personal-settings-btn');
if (myAccountsBtn) myAccountsBtn.style.display = currentProfile.is_admin ? 'none' : '';
if (personalSettingsBtn) personalSettingsBtn.style.display = currentProfile.is_admin ? 'none' : '';
indicator.onclick = async () => {
const res = await fetch('/api/profiles');
const data = await res.json();

31
webui/static/style.css
View file

@ -80,7 +80,6 @@ body {
/* Soft translucent borders */
border-right: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
/* Soft floating shadow with inner glow */
@ -291,17 +290,16 @@ body.reduce-effects .sidebar::after {
.sidebar-header {
min-height: 115px;
/* Opaque base layered under the accent gradient so nav items scrolling
past the sticky header don't bleed through the translucent stops. */
/* Translucent so the backdrop-filter blur below is visible — the dark tint
keeps the header readable while nav items scrolling behind it read as a
soft frosted blur instead of a sharp bleed-through. */
background:
linear-gradient(180deg,
rgba(var(--accent-rgb), 0.14) 0%,
rgba(var(--accent-rgb), 0.08) 30%,
rgba(var(--accent-rgb), 0.03) 70%,
rgba(18, 18, 18, 1) 100%),
rgb(18, 18, 18);
rgba(var(--accent-rgb), 0.16) 0%,
rgba(var(--accent-rgb), 0.10) 30%,
rgba(24, 24, 24, 0.62) 70%,
rgba(18, 18, 18, 0.72) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-top-right-radius: 20px;
padding: 20px 24px;
display: flex;
flex-direction: column;
@ -309,9 +307,21 @@ body.reduce-effects .sidebar::after {
gap: 8px;
position: sticky;
top: 0;
/* Above the nav (the sidebar gives its children z-index:1) so nav items
scrolling up sit BEHIND the header — i.e. in its backdrop, where the
blur below can actually act on them. Without this they paint in front
and backdrop-filter has nothing to blur. */
z-index: 2;
overflow: hidden;
flex-shrink: 0;
/* Intense frosted-glass blur: nav items scrolling up behind the translucent
accent-gradient top now read as a soft blur instead of bleeding through
sharply. (Only visible where the background is translucent — the opaque
base toward the bottom still stops any bleed.) */
backdrop-filter: blur(28px) saturate(1.3);
-webkit-backdrop-filter: blur(28px) saturate(1.3);
/* Subtle inner glow */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
@ -60149,8 +60159,9 @@ body.reduce-effects #page-particles-canvas {
.dl-nav-badge {
position: absolute;
top: 4px;
top: 50%;
right: 8px;
transform: translateY(-50%);
background: rgb(var(--accent-rgb));
color: #fff;
font-size: 0.6rem;