fix music modal mobile layout

This commit is contained in:
Til Schmitter 2026-05-12 19:01:00 +02:00
parent a9d51d701a
commit e59ec2f4aa
2 changed files with 27 additions and 20 deletions

View file

@ -1633,7 +1633,7 @@ html:not(.e):not(.d) #up_quick .btn.on {
#music a { #music a {
cursor: pointer; cursor: pointer;
} }
html.b #mu_inner { html.b #mu_outer {
background: color-mix(in oklab, var(--bg-u2) 70%, transparent); background: color-mix(in oklab, var(--bg-u2) 70%, transparent);
backdrop-filter: blur(32px); backdrop-filter: blur(32px);
} }
@ -1642,6 +1642,11 @@ html.b #mu_inner {
top: 0; top: 0;
left: 0; left: 0;
} }
#mu_outer {
display: flex;
justify-content: center;
width: 100%;
}
#mu_inner { #mu_inner {
align-content: center; align-content: center;
text-align: center; text-align: center;
@ -3992,7 +3997,7 @@ html.e #wrap.thin {
top: 5px; top: 5px;
right: 5px; right: 5px;
} }
#music { #mu_outer {
padding: 1em; padding: 1em;
} }
#mu_pbb { #mu_pbb {

View file

@ -178,25 +178,27 @@
</div> </div>
<div id="music" class="modal"> <div id="music" class="modal">
<div id="mu_inner"> <div id="mu_outer">
<a id="h_music" class="modalheader" href="#">💿 Music Player</a> <div id="mu_inner">
<a id="h_music" class="modalheader" href="#">💿 Music Player</a>
<a id="mu_th"> <a id="mu_th">
<svg class="thumb" width="100%" height="100%" version="1.1"> <svg class="thumb" width="100%" height="100%" version="1.1">
<use href="#file-icon"/> <use href="#file-icon"/>
</svg> </svg>
<span class="th_ext"></span> <span class="th_ext"></span>
<img onload="th_onload(this)"/> <img onload="th_onload(this)"/>
</a> </a>
<span id="mu_tn"></span> <span id="mu_tn"></span>
<span id="mu_deets"></span> <span id="mu_deets"></span>
<div id="mu_pbb"></div> <div id="mu_pbb"></div>
<div id="mu_pbc" class="pctl"></div> <div id="mu_pbc" class="pctl"></div>
<div id="mu_toggles"></div> <div id="mu_toggles"></div>
<div id="mu_vol"></div> <div id="mu_vol"></div>
<a id="cfg_mu" class="btn" href="#h_mp">⚙️</a> <a id="cfg_mu" class="btn" href="#h_mp">⚙️</a>
<a id="cl_mu" class="close btn"></a> <a id="cl_mu" class="close btn"></a>
</div>
</div> </div>
</div> </div>