From eff21622f4e72a5365568b0600b1a0c12395f24a Mon Sep 17 00:00:00 2001 From: ThePetrovich Date: Tue, 18 Aug 2026 13:44:37 +0800 Subject: [PATCH] Z-order fixes --- yksa_web/static/yksa/css/kit.css | 80 ++++++++++++++++++++++++++++--- yksa_web/templates/yksa/base.html | 8 ++-- 2 files changed, 78 insertions(+), 10 deletions(-) diff --git a/yksa_web/static/yksa/css/kit.css b/yksa_web/static/yksa/css/kit.css index d9a8ba2..4acad01 100644 --- a/yksa_web/static/yksa/css/kit.css +++ b/yksa_web/static/yksa/css/kit.css @@ -21,6 +21,26 @@ :root { --navbar-height: 44px; + + /* One layer scale for the whole estate, because the alternative is each + surface picking a number and a sticky bar eventually landing on top of an + open menu -- which is exactly what ops's console header did to the navbar's + timezone dropdown. Bootstrap's own scale starts at modal-backdrop (1040), + so everything here stays below that. + + 1020 in-page sticky bars (ops's console header) + 1030 page chrome: navbar, action bar, cookie banner + 1035 anything transient the user just opened -- above all of it */ + --yksa-z-sticky: 1020; + --yksa-z-chrome: 1030; + --yksa-z-floating: 1035; +} + +/* Bootstrap declares --bs-dropdown-zindex on .dropdown-menu, not on :root, so it + has to be overridden here -- a value set on :root is shadowed and does nothing. + At Bootstrap's default of 1000 an open menu loses to every bar above. */ +.dropdown-menu { + --bs-dropdown-zindex: var(--yksa-z-floating); } /* ----------------------------------------------------------------------------- @@ -31,13 +51,13 @@ height: var(--navbar-height); padding-top: 0; padding-bottom: 0; - z-index: 1002; + z-index: var(--yksa-z-chrome); border: none; background-color: var(--bs-body-bg) !important; } .navbar { - z-index: 1002; + z-index: var(--yksa-z-chrome); } .navbar-brand { @@ -45,7 +65,11 @@ } /* Nav links fill the bar's height and butt against one another, so the active - item reads as a selected tab rather than a highlighted word. */ + item reads as a selected tab rather than a highlighted word. + + The height comes from the chain below, not from padding. It used to come from a + hard-coded `padding-top: 12px` on top of a text line box, which meant any item + whose content was not text -- the language flag -- came out short. */ .nav-full-height { display: flex; align-items: center; @@ -56,11 +80,29 @@ color: inherit; padding-left: 1rem !important; padding-right: 1rem !important; - padding-top: 12px; + padding-top: 0; + padding-bottom: 0; background-color: var(--bs-body-bg); margin-right: -1px; } +@media (min-width: 992px) { + /* Give `height: 100%` above something definite to resolve against: the bar's + height has to reach the through the container, the collapse and the +
  • , or it resolves to `auto` and the rule does nothing. */ + .custom-navbar > .container, + .custom-navbar > .container-fluid, + .custom-navbar .navbar-collapse, + .custom-navbar .navbar-nav, + .custom-navbar .nav-item { + height: 100%; + } + + .custom-navbar .navbar-nav { + align-items: stretch; + } +} + .nav-full-height.nav-link:hover, .nav-full-height.nav-link.active { color: #fff !important; @@ -147,6 +189,26 @@ color: var(--bs-secondary-color); } +/* Separator between items in a run of inline metadata: a hairline rule, not a + character. A middot at .75rem is hard to tell from a decimal point or a full + stop, it is announced by screen readers, and it lands in the clipboard when the + line is copied. This is the inline-text counterpart to Bootstrap's `.vr`, which + is built for flex rows and has no margins of its own. */ +.yksa-sep { + display: inline-block; + width: 1px; + height: 0.9em; + margin-inline: 0.5rem; + vertical-align: -0.1em; + background-color: var(--bs-border-color); +} + +/* Inside an already-tight run (a card header, a table cell), the default margin + is too generous. */ +.yksa-sep-tight { + margin-inline: 0.3rem; +} + /* Tabular numerals in the body face. Monospace is reserved for verbatim machine text -- hex dumps, TLE lines, command mnemonics. */ .yksa-num { @@ -220,7 +282,7 @@ left: 0; right: 0; bottom: 0; - z-index: 1030; + z-index: var(--yksa-z-chrome); } .yksa-actionbar-spacer { @@ -240,7 +302,7 @@ bottom: 0; left: 0; right: 0; - z-index: 1030; + z-index: var(--yksa-z-chrome); background-color: #1f2937; color: #f8fafc; } @@ -267,6 +329,12 @@ padding-top: 0.5rem; padding-bottom: 0.5rem; } + + /* Stacked, the rows size to their own content again. */ + .custom-navbar .navbar-nav, + .custom-navbar .nav-item { + height: auto; + } } /* ----------------------------------------------------------------------------- diff --git a/yksa_web/templates/yksa/base.html b/yksa_web/templates/yksa/base.html index 84be79d..6bc0c4d 100644 --- a/yksa_web/templates/yksa/base.html +++ b/yksa_web/templates/yksa/base.html @@ -8,7 +8,9 @@ identical everywhere while its items differ per service. Same for the footer's position. Fill `navbar_items` and `navbar_tools`; change nothing else. Blocks a service normally fills: - title, meta_description, meta_keywords the head + title the page, in sentence case ("Data sources", not "Data Sources") + title_suffix the service, the same on every page ("YKSA TDAS") + meta_description, meta_keywords the rest of the head brand_url where the logo links navbar_items the left-hand
  • list navbar_tools extra right-hand items (auth, duty) @@ -26,9 +28,7 @@ Blocks a service normally fills: - - {% block title %}{% trans "YKSA" %}{% endblock title %} - — {% block title_suffix %}YKSA{% endblock title_suffix %} + {% block title %}{% trans "YKSA" %}{% endblock title %} — {% block title_suffix %}YKSA{% endblock title_suffix %} {% comment %} Icons load here, not per page. Loading them in extra_head is why icons