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

Center progress bar in map header using three-column flex layout

Browse Source
This commit is contained in:
Justin Oros
2026-05-20 22:24:53 -07:00
parent 27f5a536e4
commit 390476d4e8
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+3 -1
View File
@@ -92,9 +92,11 @@
<span class="map-pin">📍</span> <span class="map-pin">📍</span>
<span class="map-town-name">AZ-900 TOWN</span> <span class="map-town-name">AZ-900 TOWN</span>
</div> </div>
<div class="map-right"> <div class="map-center">
<div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div> <div class="prog-bar-outer"><div class="prog-bar-inner" id="map-prog-bar"></div></div>
<span class="prog-text" id="map-prog-text">0/100</span> <span class="prog-text" id="map-prog-text">0/100</span>
</div>
<div class="map-right">
<span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span> <span class="music-toggle" id="music-toggle" title="Mute/Unmute Music">🎵</span>
</div> </div>
</div> </div>
style.css
+3 -2
View File
@@ -407,10 +407,11 @@ html, body {
/* ─── MAP ────────────────────────────────────────────────── */ /* ─── MAP ────────────────────────────────────────────────── */
.map-header { background:var(--dark-bg); padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:3px solid var(--black); flex-shrink:0; } .map-header { background:var(--dark-bg); padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:3px solid var(--black); flex-shrink:0; }
.map-left { display:flex; align-items:center; gap:6px; } .map-left { display:flex; align-items:center; gap:6px; flex:1; }
.map-center { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; }
.map-right { display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end; }
.map-pin { font-size:12px; } .map-pin { font-size:12px; }
.map-town-name { font-size:clamp(5.5px,1.6vw,7px); color:var(--yellow); letter-spacing:.5px; word-spacing:-1px; } .map-town-name { font-size:clamp(5.5px,1.6vw,7px); color:var(--yellow); letter-spacing:.5px; word-spacing:-1px; }
.map-right { display:flex; align-items:center; gap:6px; }
.prog-bar-outer { width:80px; height:9px; background:var(--black); border:2px solid var(--lightgray); overflow:hidden; } .prog-bar-outer { width:80px; height:9px; background:var(--black); border:2px solid var(--lightgray); overflow:hidden; }
.prog-bar-inner { height:100%; width:0%; background:var(--hp-green); transition:width .5s ease; } .prog-bar-inner { height:100%; width:0%; background:var(--hp-green); transition:width .5s ease; }
.prog-text { font-size:6px; color:var(--white); } .prog-text { font-size:6px; color:var(--white); }