diff options
Diffstat (limited to 'packages/meshbay-hub/src')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 774c9bc..d51e5b0 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -578,6 +578,38 @@ a:hover { text-decoration: underline; } box-shadow: 0 0 0 var(--band-margin) var(--bg-base); } +/* **And the same gap above the first one.** The ring is painted on all four + sides, which is what the corners need — so a band has to have + `--band-margin` of clearance above it too, or it paints page colour over + whatever is there. Every band but the first has that for free: what sits + above it is the band it pins under, at a higher z-index, and a ring cannot + paint over that. The first has the page's own content above it, and nothing + was making the two agree — the join-code form under a group's title leaves + 12px, the tab bar's ring is 16px, and the form was handed back with the + bottom 4px of its field and its button painted over. The same 4px went off + the bottom of the "could not reach this node" banner, which is the other + thing that stands between the title and the tabs. + + Only the first band, and that is the whole of the rule rather than an + economy: the gap *between* two bands is the upper one's `--band-margin` and + nothing else — it is the number `--chrome-h` carries and the offset the + lower one pins at. A margin-top on a lower band would collapse to the + larger of the pair and win wherever it was bigger, which is most widths, + leaving the flow a couple of pixels wider than the pinned layout. Measured, + in every media view at every phone width, the moment this rule was written + for all six. + + `* +`, so this is the gap between two elements and not a margin the band + always carries: as a first child — the Search page's field is one — a + margin-top would collapse through the page root and take the whole page + down with it. Between siblings the two margins collapse to the larger of + the pair, so every place that already leaves enough is untouched, and only + what was being painted over moves. */ +.sticky-chrome > * + .group-tabs, +.sticky-chrome > * + .search-bar { + margin-top: var(--band-margin); +} + /* ── Cards ────────────────────────────────────────────────────────────────── */ .card { |