39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
61 lines
2.2 KiB
CSS
61 lines
2.2 KiB
CSS
/* hive-menu.css — scoped stylesheet for the generic <hive-menu>
|
|
shadow-DOM custom element (hive-menu.js). Loaded as raw text at build
|
|
time (esbuild's `text` loader) and appended as a <style> element
|
|
inside the shadow root — see @hive/shared/shadow-css.js's header
|
|
comment for why a plain <style> tag and not adoptedStyleSheets.
|
|
|
|
Two kinds of rules live here, split by what they can actually reach:
|
|
`:host`/`.menu-dropdown` style shadow-DOM-owned markup this element
|
|
builds itself (no slotting constraint at all); `::slotted(...)` rules
|
|
reach the caller's *top-level* trigger/content nodes (the ones with a
|
|
`slot` attribute) since those are true light-DOM children, just
|
|
rendered here. What can NOT live here: anything inside the content
|
|
node (e.g. individual dropdown item rows) — `::slotted()` only
|
|
matches directly-slotted elements, not their descendants, and no CSS
|
|
mechanism pierces further than that. That's a hard Shadow DOM
|
|
architecture limit, not a scope choice — item-level styling stays in
|
|
the caller's own stylesheet regardless of how generic it looks. */
|
|
|
|
:host {
|
|
position: relative;
|
|
}
|
|
.menu-dropdown {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 2px);
|
|
z-index: 50;
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--purple-dim);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
min-width: 10em;
|
|
white-space: nowrap;
|
|
}
|
|
/* The trigger is the top-level `slot="trigger"` node — reachable, so its
|
|
base icon-button chrome (invisible until hover/open, via
|
|
`--menu-btn-opacity`) lives here rather than duplicated per caller. */
|
|
::slotted([slot="trigger"]) {
|
|
display: block;
|
|
background: none;
|
|
border: none;
|
|
color: var(--subtext0);
|
|
font-size: 1.1em;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 0.1em 0.4em;
|
|
border-radius: 4px;
|
|
opacity: var(--menu-btn-opacity, 0);
|
|
transition:
|
|
opacity 120ms,
|
|
background 120ms,
|
|
color 120ms;
|
|
}
|
|
::slotted([slot="trigger"]:hover),
|
|
::slotted([slot="trigger"]:focus-visible) {
|
|
background: color-mix(in srgb, var(--purple) 10%, transparent);
|
|
color: var(--purple);
|
|
outline: none;
|
|
}
|
|
::slotted([slot="trigger"]:focus-visible) {
|
|
outline: 1px solid var(--purple);
|
|
}
|