justin/pokeazure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Relocate A/B button positions in portrait layout

Browse Source
This commit is contained in:
Justin Oros
2026-05-20 23:30:29 -07:00
parent 06b110d33a
commit d1600f29cf
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+28 -11
View File
@@ -203,33 +203,50 @@ html, body {
/* ── PORTRAIT: two panels fixed at bottom ── */ /* ── PORTRAIT: two panels fixed at bottom ── */
@media (orientation: portrait) { @media (orientation: portrait) {
#gba-left, #gba-right { #gba-left, #gba-right {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
height: clamp(110px, 22vw, 148px); height: clamp(110px, 22vw, 148px);
width: 55%
flex-direction: row; flex-direction: row;
border-top: 2px solid rgba(120,80,255,.35); border-top: 2px solid rgba(120,80,255,.35);
} }
#gba-left { left: 0; width: 60%; justify-content: space-evenly; align-items: center; padding: 0 8px max(8px,var(--safe-bottom)) clamp(8px,3vw,20px); }
#gba-right { right: 0; width: 40%; justify-content: center; padding: 0 clamp(8px,3vw,20px) max(8px,var(--safe-bottom)) 8px; }
#gba-left .gba-mid-btns { flex-direction: column; gap: 6px; margin-top: 0; width: auto; }
}
@media (orientation: portrait) { #gba-left {
left: 0;
width: 52%;
justify-content: space-evenly;
align-items: center;
padding: 0 8px max(8px, var(--safe-bottom)) clamp(8px, 3vw, 20px);
}
#gba-right {
right: 0;
width: 48%;
justify-content: flex-start;
align-items: center;
padding: 0 clamp(8px, 3vw, 20px) max(8px, var(--safe-bottom)) 8px;
}
#gba-left .gba-mid-btns {
flex-direction: column;
gap: 6px;
margin-top: 0;
width: auto;
}
.ab-cluster { .ab-cluster {
position: relative; transform: translateX(-18px);
} }
.ab-b { .ab-b {
left: -35% !important; left: -20%;
bottom: 25% !important; bottom: 22%;
} }
.ab-a { .ab-a {
right: -20% !important; right: -10%;
top: 10% !important; top: 12%;
} }
} }