4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Record screen: big digits in the top strip (match bottom), drop the black status-bar backdrop band and the extra control offset

Browse source 
Top strip time/temp/clock now use the same 27px bold as the bottom stats. The
old .rec-map-wrap::before status-bar backdrop (and the leaflet-top safe-area
margin) are gone - the top strip already backs the status bar, so that strip
showed as a black band between the bar and the map.
This commit is contained in:
4aiman 2026-10-17 14:30:42 +03:00
commit e88c2756f7
1 changed files with 10 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/css/styles.css
View file

@ -1310,20 +1310,9 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
cursor: pointer;
}
/* Keep Leaflet zoom controls below the status bar on the recording map. */
.rec-map-wrap .leaflet-top { margin-top: var(--safe-area-top, 0px); }
/* Status-bar backdrop. The recording map is edge-to-edge (draws behind the system
status bar), so the bar had no backing and its icons were unreadable over the map
tiles. Paint a solid strip the height of the top inset — like the header on every
other screen — so the status bar stays visible. Controls already start below it. */
.rec-map-wrap::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: var(--safe-area-top, 0px);
background: var(--surface);
z-index: 1100;
pointer-events: none;
}
/* The top strip (.rec-topbar) now sits above the map and already backs the status bar, so the
map no longer draws under the status bar — no backdrop strip, and controls start at the map top. */
.rec-map-wrap .leaflet-top { margin-top: 0; }
.rec-screen.rot-90 .rec-map-wrap::before,
.rec-screen.rot-270 .rec-map-wrap::before { display: none; }
.rec-compass-arrow { position: absolute; inset: 0; transition: transform 0.12s linear; }
@ -1411,14 +1400,15 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
color: var(--on-surface);
}
/* Top strip (external info): training time (left), temperature (centre), clock (right). */
/* Top strip (external info): training time (left), temperature (centre), clock (right).
Same big digits as the bottom stats (.rec-val). */
.rec-topbar {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 16px; padding-top: calc(6px + var(--safe-area-top));
background: var(--surface); border-bottom: 1px solid var(--border);
font-size: 15px; font-weight: 600; color: var(--on-surface);
display: flex; justify-content: space-between; align-items: baseline;
padding: 4px 16px; padding-top: calc(4px + var(--safe-area-top));
background: var(--surface);
}
.rec-topbar .rec-top-mid { color: var(--muted); font-weight: 500; }
.rec-topbar .rec-top { font-size: 27px; font-weight: 700; color: var(--on-surface); }
.rec-topbar .rec-top-mid { color: var(--muted); }
/* Status line now stands alone under the stats (no longer stealing the buttons' width). */
.rec-panel > .rec-status { font-size: 12px; color: var(--muted); text-align: center; padding: 0 12px 4px; min-height: 14px; }