web/yksa-web-kit
4
Fork 0
Code Issues Pull requests Projects Releases Activity

Z-order fixes

Browse source
This commit is contained in:
ThePetrovich 2026-08-18 13:44:37 +08:00
parent 97e799fd52
commit eff21622f4
2 changed files with 78 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

80
yksa_web/static/yksa/css/kit.css
View file

@ -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 <a> through the container, the collapse and the
<li>, 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;
}
}
/* -----------------------------------------------------------------------------