Fix bottom nav: flex:1 on items so they stretch edge to edge
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
89c08ed2ab
commit
87636ea774
2 files changed
+5
-5
No files matched your search
+4
-4
@@ -369,10 +369,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
|
|||||||
height:100%;width:100%;
|
height:100%;width:100%;
|
||||||
}
|
}
|
||||||
.bnav-item{
|
.bnav-item{
|
||||||
|
flex:1;
|
||||||
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
|
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
|
||||||
padding:6px 4px;border-radius:10px;cursor:pointer;
|
padding:6px 4px;border-radius:10px;cursor:pointer;
|
||||||
font-size:10px;font-weight:600;color:var(--text3);
|
font-size:10px;font-weight:600;color:var(--text3);
|
||||||
letter-spacing:.3px;text-align:center;
|
letter-spacing:.3px;text-align:center;min-width:0;
|
||||||
transition:color .15s,background .15s;
|
transition:color .15s,background .15s;
|
||||||
border:none;background:none;font-family:var(--font);
|
border:none;background:none;font-family:var(--font);
|
||||||
-webkit-tap-highlight-color:transparent;
|
-webkit-tap-highlight-color:transparent;
|
||||||
@@ -386,7 +387,7 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
|
|||||||
.bnav-tabs{display:flex;width:100%;padding:4px 8px 2px;flex-shrink:0;gap:4px}
|
.bnav-tabs{display:flex;width:100%;padding:4px 8px 2px;flex-shrink:0;gap:4px}
|
||||||
.bnav-tab{flex:1;padding:3px 0;border-radius:7px;border:none;font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);cursor:pointer;background:none;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}
|
.bnav-tab{flex:1;padding:3px 0;border-radius:7px;border:none;font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);cursor:pointer;background:none;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}
|
||||||
.bnav-tab.active{background:var(--surface2);color:var(--text)}
|
.bnav-tab.active{background:var(--surface2);color:var(--text)}
|
||||||
.bnav-pages{display:flex;justify-content:space-around;align-items:center;width:100%;flex:1;padding:0 8px}
|
.bnav-pages{display:flex;align-items:center;width:100%;flex:1}
|
||||||
|
|
||||||
@media(max-width:768px){
|
@media(max-width:768px){
|
||||||
.bottom-nav{display:flex;flex-direction:column;justify-content:flex-start}
|
.bottom-nav{display:flex;flex-direction:column;justify-content:flex-start}
|
||||||
@@ -399,8 +400,7 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
|
|||||||
.preview-bar{bottom:calc(var(--player-h) + 80px)}
|
.preview-bar{bottom:calc(var(--player-h) + 80px)}
|
||||||
.toast-container{bottom:calc(var(--player-h) + 80px + 16px)}
|
.toast-container{bottom:calc(var(--player-h) + 80px + 16px)}
|
||||||
.jobs-panel{bottom:calc(var(--player-h) + 80px + 16px)}
|
.jobs-panel{bottom:calc(var(--player-h) + 80px + 16px)}
|
||||||
.bnav-pages{padding:0 4px}
|
.bnav-item{padding:6px 2px;box-sizing:border-box}
|
||||||
.bnav-item{flex:1;min-width:0;padding:6px 2px;box-sizing:border-box}
|
|
||||||
#settings-modal{align-items:flex-start;padding-top:max(env(safe-area-inset-top),16px);padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 8px)}
|
#settings-modal{align-items:flex-start;padding-top:max(env(safe-area-inset-top),16px);padding-bottom:calc(var(--player-h) + 80px + env(safe-area-inset-bottom) + 8px)}
|
||||||
#settings-modal .modal{max-height:100%!important;overflow:hidden}
|
#settings-modal .modal{max-height:100%!important;overflow:hidden}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
const CACHE = 'ns-v14';
|
const CACHE = 'ns-v15';
|
||||||
const PRECACHE = ['/', 'index.html', 'styles.css', 'app.js', 'sw.js'];
|
const PRECACHE = ['/', 'index.html', 'styles.css', 'app.js', 'sw.js'];
|
||||||
const SKIP_URLS = ['/rest/stream', '/rest/download', '/config.js'];
|
const SKIP_URLS = ['/rest/stream', '/rest/download', '/config.js'];
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user