VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pm-mobile: taller logo + taller transport buttons

Browse source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-06-07 15:39:53 -05:00
parent 344ff43ceb
commit 56d8a4c093
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
mobile.html
View file

@ -63,7 +63,7 @@
#top{ flex:0 0 auto; display:flex; flex-direction:column; gap:11px; } #top{ flex:0 0 auto; display:flex; flex-direction:column; gap:11px; }
#brandrow{ display:flex; align-items:center; gap:10px; } #brandrow{ display:flex; align-items:center; gap:10px; }
#logoLink{ display:inline-flex; opacity:.9; } #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{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.hicons .icon{ width:36px; height:36px; font-size:16px; } .hicons .icon{ width:36px; height:36px; font-size:16px; }
.sels{ display:flex; gap:8px; align-items:flex-end; } .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) ---- */ /* ---- 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 */ /* 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); .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"; } 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); .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; } 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; .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; background:rgba(127,139,154,.10); border:1px solid var(--panel-bd); color:var(--muted); font-size:13px;