Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix: NP overlay — more top padding, centered content, roomier topbar

Browse Source 
- np-inner padding-top increased to max(safe-area, 36px)
- np-topbar margin-bottom 28→32px + gap:12px between buttons and tabs
- np-tabs flex:1 + flex:1 on each tab so they share space evenly, no overflow
- np-tab font-size 11→10px, padding tighter to fit small screens
- #np-player-view gains justify-content:center so art/controls float mid-screen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-04-26 00:48:13 +02:00
1 parent 4e19178e24
commit 0b9493c147
2 files changed
+8 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

styles.css
+7 -6
View File
@@ -447,8 +447,8 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
display:flex;flex-direction:column;
align-items:center;
height:100%;
padding:env(safe-area-inset-top,20px) 32px 32px;
padding-top:max(env(safe-area-inset-top),20px);
padding:0 28px 28px;
padding-top:max(env(safe-area-inset-top),36px);
gap:0;
max-width:480px;
margin:0 auto;
@@ -458,7 +458,8 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
/* Top bar */
.np-topbar{
display:flex;align-items:center;justify-content:space-between;
width:100%;margin-bottom:28px;
width:100%;margin-bottom:32px;
gap:12px;
}
.np-close{
background:rgba(255,255,255,.1);border:none;
@@ -572,11 +573,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
}
.np-icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
/* NP tabs */
.np-tabs{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:20px;padding:3px}
.np-tab{background:none;border:none;color:rgba(255,255,255,.45);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 16px;border-radius:16px;cursor:pointer;transition:all .2s;font-family:var(--font)}
.np-tabs{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:20px;padding:3px;flex:1;min-width:0}
.np-tab{background:none;border:none;color:rgba(255,255,255,.45);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:5px 10px;border-radius:16px;cursor:pointer;transition:all .2s;font-family:var(--font);flex:1;white-space:nowrap}
.np-tab.active{background:rgba(255,255,255,.15);color:#fff}
/* NP queue view */
#np-player-view{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;min-height:0}
#np-player-view{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1;min-height:0}
#np-queue-view{display:none;flex-direction:column;width:100%;flex:1;overflow-y:auto;padding-top:8px}
.np-overlay.queue-mode #np-player-view{display:none}
.np-overlay.queue-mode #np-queue-view{display:flex}