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

brouter-web: readable elevation hover tooltip in dark theme

Browse source 
The .focusbox tooltip rect stayed white and our .elevation text rule turned
its text light — light-on-light, unreadable on the dark chart. Give the box a
dark ground with light text (same for the on-line height label), and lighten
the near-black guide lines/markers so they show on the dark chart.
This commit is contained in:
4aiman 2026-09-09 21:17:21 +03:00
commit 8ec95adcaf
1 changed files with 10 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

10
tools/brouter-web/baldav-custom.js
View file

@ -30,6 +30,16 @@
// elevation SVG axis text (was black on dark)
"body.bw-dark #elevation-chart text,body.bw-dark #elevation-chart .tick text,body.bw-dark #elevation-chart .axis text{fill:#dfe3e8!important}",
"body.bw-dark #elevation-chart .tick line,body.bw-dark #elevation-chart .domain,body.bw-dark #elevation-chart path.grid,body.bw-dark #elevation-chart line{stroke:#3a4048!important}",
// hover tooltip on the elevation chart (.focusbox): its rect is white and our
// .elevation text rule turned the text light — light-on-light, unreadable. Give the
// box a dark ground and keep the text light. Same for the on-line height label.
"body.bw-dark .focusbox rect{fill:rgba(32,36,42,.92)!important;stroke:#667!important}",
"body.bw-dark .focusbox,body.bw-dark .focusbox text{fill:#dfe3e8!important}",
"body.bw-dark .height-focus.label rect{fill:rgba(32,36,42,.9)!important;stroke:#667!important}",
"body.bw-dark .height-focus.label text{fill:#dfe3e8!important}",
// guide lines/markers were near-black (#141414) — invisible on the dark chart
"body.bw-dark .focusLine line,body.bw-dark .height-focus.line{stroke:#aab4be!important}",
"body.bw-dark .height-focus.circle{stroke:#20242a!important}",
// right vertical sidebar tab strip (layers/settings/data/stats icons)
"body.bw-dark .leaflet-sidebar-tabs,body.bw-dark .leaflet-sidebar-tabs>ul,body.bw-dark .leaflet-sidebar-tabs li,body.bw-dark .leaflet-sidebar-tabs li a{background:#20242a!important;color:#dfe3e8!important}",
"body.bw-dark .leaflet-sidebar-tabs li.active a,body.bw-dark .leaflet-sidebar-tabs li a:hover{background:#2b3038!important;color:#fff!important}",