zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
38
fork

Configure Feed

Select the types of activity you want to include in your feed.

polish search modal: center vertically, enhance glass effect (#1222)

- center modal vertically on all viewports (flexbox instead of padding-top hack)
- use --glass-bg/--glass-border CSS variables for consistent glass aesthetic
- add subtle accent glow ring to modal border
- tighten mobile margins for near-full-width on small screens

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

authored by

nate nowack
Claude Opus 4.6 and committed by
GitHub ff9f405d cba71647

+8 -12
+8 -12
frontend/src/lib/components/SearchModal.svelte
··· 277 277 -webkit-backdrop-filter: blur(4px); 278 278 z-index: 9999; 279 279 display: flex; 280 - align-items: flex-start; 280 + align-items: center; 281 281 justify-content: center; 282 - padding-top: 15vh; 283 282 /* hidden by default - use opacity only (not visibility) so input remains focusable for mobile keyboard */ 284 283 opacity: 0; 285 284 pointer-events: none; ··· 294 293 .search-modal { 295 294 width: 100%; 296 295 max-width: 560px; 297 - background: color-mix(in srgb, var(--bg-secondary) 95%, transparent); 298 - backdrop-filter: blur(20px) saturate(180%); 299 - -webkit-backdrop-filter: blur(20px) saturate(180%); 300 - border: 1px solid var(--border-subtle); 296 + background: var(--glass-bg, color-mix(in srgb, var(--bg-secondary) 95%, transparent)); 297 + backdrop-filter: blur(24px) saturate(180%); 298 + -webkit-backdrop-filter: blur(24px) saturate(180%); 299 + border: 1px solid var(--glass-border, var(--border-subtle)); 301 300 border-radius: var(--radius-xl); 302 301 box-shadow: 303 302 0 24px 80px color-mix(in srgb, var(--bg-primary) 50%, transparent), 304 - 0 0 1px var(--border-subtle) inset; 303 + 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 304 + 0 0 40px color-mix(in srgb, var(--accent) 6%, transparent); 305 305 overflow: hidden; 306 306 margin: 0 1rem; 307 307 } ··· 536 536 537 537 /* mobile optimizations */ 538 538 @media (max-width: 768px) { 539 - .search-backdrop { 540 - padding-top: 10vh; 541 - } 542 - 543 539 .search-modal { 544 - margin: 0 0.75rem; 540 + margin: 0 0.5rem; 545 541 max-height: 80vh; 546 542 } 547 543