peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): portal tooltips, opaque glass, settings rail+stable height, notif test, channel help

Browse source 
- Tooltip: render in a portal with fixed positioning + edge-flip so hints are never
  clipped by overflow/stacking ancestors (fixes mispositioned/hidden bubbles app-wide).
- Glass: raise opacity so overlay menus/panels stay readable over content.
- SettingsPanel: vertical tab rail (no wrapping/jumping), content grid-stacked so the
  panel sizes to the tallest tab (stable height) and floats to its content height.
- Notifications: the test toast is now a normal auto-dismissing toast (with countdown
  bar) that also plays the sound via a new force-sound flag.
- Channel manager: explain priority/tags/hide and what 'Sync subscriptions' does;
  add a 'Channel priority' feed sort so priority is actually meaningful.
This commit is contained in:
npeter83 2026-06-11 21:30:25 +02:00
parent f8d2a11226
commit 91fd008519
7 changed files with 160 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/index.css
View file

@ -32,19 +32,21 @@ body {
/* ===== Liquid-glass surface system (theme-aware, GPU-light) ===== */
.glass {
background: color-mix(in srgb, var(--surface) 72%, transparent);
backdrop-filter: blur(18px) saturate(1.6);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
/* Mostly opaque so overlay menus/panels stay readable over arbitrary content;
the blur + slight translucency keep the glassy feel. */
background: color-mix(in srgb, var(--surface) 90%, transparent);
backdrop-filter: blur(24px) saturate(1.7);
-webkit-backdrop-filter: blur(24px) saturate(1.7);
border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
0 18px 40px -16px rgba(0, 0, 0, 0.55);
inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
.glass-card {
background: color-mix(in srgb, var(--card) 58%, transparent);
backdrop-filter: blur(10px) saturate(1.3);
-webkit-backdrop-filter: blur(10px) saturate(1.3);
border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
background: color-mix(in srgb, var(--card) 78%, transparent);
backdrop-filter: blur(12px) saturate(1.3);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
box-shadow:
inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent),
0 8px 22px -14px rgba(0, 0, 0, 0.45);