diff --git a/mobile.html b/mobile.html index 78425f7..d4fa878 100644 --- a/mobile.html +++ b/mobile.html @@ -63,7 +63,7 @@ #top{ flex:0 0 auto; display:flex; flex-direction:column; gap:11px; } #brandrow{ display:flex; align-items:center; gap:10px; } #logoLink{ display:inline-flex; opacity:.9; } - .brandlogo{ height:clamp(17px,3.4vmin,24px); width:auto; display:block; } + .brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; } .hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; } .hicons .icon{ width:36px; height:36px; font-size:16px; } .sels{ display:flex; gap:8px; align-items:flex-end; } @@ -173,11 +173,11 @@ /* ---- transport: tempo row (−10/−/+/+10) then nav+play row (prev/play/practice/next) ---- */ /* grows to fill freed space; SHRINKS (rather than the page scrolling) when the panel expands */ - #transport{ flex:0 1 auto; min-height:0; max-height:clamp(118px,30vh,210px); margin-top:auto; display:flex; flex-direction:column; align-items:stretch; width:100%; padding-top:6px; gap:clamp(5px,1.2vmin,9px); } + #transport{ flex:0 1 auto; min-height:0; max-height:clamp(140px,36vh,250px); margin-top:auto; display:flex; flex-direction:column; align-items:stretch; width:100%; padding-top:6px; gap:clamp(5px,1.2vmin,9px); } .tgrid{ display:grid; width:100%; flex:1 1 auto; min-height:0; gap:clamp(7px,1.7vmin,14px); grid-template-columns:1fr 1.5fr 1.5fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"dn10 dn up up10" "prev play prac next"; } .tbtn{ background:linear-gradient(180deg,var(--btn1),var(--btn2)); color:var(--txt); border:1px solid var(--btn-bd); - border-radius:13px; height:auto; min-height:30px; font-size:clamp(15px,3.6vmin,25px); cursor:pointer; + border-radius:13px; height:auto; min-height:38px; font-size:clamp(16px,4vmin,27px); cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; } .journal{ flex:0 0 auto; width:100%; height:clamp(30px,6vmin,42px); border-radius:11px; cursor:pointer; background:rgba(127,139,154,.10); border:1px solid var(--panel-bd); color:var(--muted); font-size:13px;