timescale.info#221 · Duration backgrounds lie behind the timeline, which gets a halo over them
- timeline-app
- pull request
Closes #220. ### Backgrounds behind the timeline `#duration-backgrounds` had no z-index of its own, so it formed no stacking context. Each image's z-index (1…N, which puts smaller durations above larger ones) then competed with the axis, arcs and markers drawn after it, which have none, and the images covered them. The layer now has `z-index: 0`. The images still order among themselves, but only inside that layer, beneath everything else on the stage. ### A halo over them While a background shows, the stage takes the class `over-backgrounds`: - **Moment labels** sit on frosted white: a translucent pill with the image blurred behind it, and a white text halo. - **Tick labels and duration band text** get the halo only. Tick labels fade out as they get too fine, and a backing would stay behind as an empty box. - **The axis, relationship arcs, stems and markers** get a white drop-shadow halo. - **Headings** keep their backing, now blurring the image behind them. Without any background the timeline looks exactly as before. ### Tests - `test/duration-backgrounds-browser.mjs` now checks that a moment over two backgrounds is drawn above them. It makes the backgrounds hit-testable for a moment and checks they give way to the moment. It also checks the halo is on while backgrounds show and gone once the plugin is disabled. - With the old stylesheet the new check fails with "a background covers the moment"; with this change the Chromium browser suite and `npm test` (299) pass. - I also checked by eye on a history timeline with photographic backgrounds (Iwo Jima, Guadalcanal and others).