a588ed42ce
mara: 'wait the common styles is literally just the button stuff? pls make a button component now as part of this pr and replace the usage in the modal. replacing all usages and finally removing the btn styles from common css is a follow up then.' <hive-btn> (hive-btn.js) is a customized built-in <button is="hive-btn"> with its own shadow root -- extending HTMLButtonElement keeps every native button behaviour (click/keyboard activation, :disabled, form participation) instead of re-implementing it on a generic wrapper. Shadow root holds only an adopted stylesheet + a <slot>, so the button's light-DOM content (label, or asyncBtn's swapped-in spinner span) renders through unchanged -- slotted content stays styled by the light-DOM cascade, so the global .spinner class still applies. Variants (cancel/confirm/danger) are a 'variant' attribute, not a CSS class, since they're a semantic prop of the component. Customized built-ins aren't supported in Safari/WebKit -- fine here, the project targets recent Firefox only (same reasoning as the original custom-elements pilot). Wired into modal.js: HiveDialog's buttons now render as <button is="hive-btn" variant="...">, replacing the old component-common.css .btn copy -- deleted that file + component- styles.js entirely (their sole purpose was giving dialog buttons a .btn look, which hive-btn now owns properly). dom.js's el() gained support so it can create customized built-ins the same way it creates everything else. hive-dialog.css dropped the now-dead .cancel/.confirm/.confirm.danger rules. Per mara's scoping: NOT touching the other .btn consumers across the app (dashboard/agent submit buttons, form() helper, etc.) or removing .btn from dashboard/common.css / agent/agent.css in this PR -- that migration + cleanup is an explicit follow-up. Verified with a full frontend build (grepped bundled JS for hive-btn/ variant to confirm it inlines); nix fmt clean.
73 lines
2 KiB
CSS
73 lines
2 KiB
CSS
/* hive-dialog.css — scoped stylesheet for the <hive-dialog> shadow-DOM
|
|
custom element (modal.js). Loaded as raw text at build time (esbuild's
|
|
`text` loader) and adopted via `adoptedStyleSheets`. `:host` styles the
|
|
element itself, which *is* the fixed-position backdrop — no separate
|
|
light-DOM backdrop div. Button styling (base look + cancel/confirm/
|
|
danger variants) lives in hive-btn.css, not here — the dialog's
|
|
buttons are <hive-btn> elements with their own shadow root. */
|
|
|
|
:host {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1em;
|
|
background: color-mix(in srgb, var(--crust) 60%, transparent);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.box {
|
|
background: var(--bg-elev);
|
|
border: 1px solid var(--purple-dim);
|
|
box-shadow: 0 8px 40px -8px var(--crust);
|
|
padding: 1.2em 1.4em;
|
|
max-width: min(32em, 92vw);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.9em;
|
|
}
|
|
.title {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--subtext0);
|
|
}
|
|
.message { color: var(--fg); line-height: 1.45; }
|
|
.checks { display: flex; flex-direction: column; gap: 0.4em; }
|
|
.checkrow {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5em;
|
|
cursor: pointer;
|
|
color: var(--subtext0);
|
|
font-size: 0.92em;
|
|
line-height: 1.35;
|
|
}
|
|
.checkrow .check { margin-top: 0.2em; flex: 0 0 auto; }
|
|
.actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.6em;
|
|
margin-top: 0.2em;
|
|
}
|
|
.promptfield { display: flex; flex-direction: column; gap: 0.4em; }
|
|
.promptlabel { color: var(--subtext0); font-size: 0.9em; }
|
|
.input {
|
|
font-family: inherit;
|
|
font-size: 1em;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: var(--crust);
|
|
color: var(--fg);
|
|
border: 1px solid var(--purple-dim);
|
|
padding: 0.4em 0.6em;
|
|
}
|
|
.input:focus { outline: 1px solid var(--green); }
|
|
.textarea {
|
|
resize: vertical;
|
|
min-height: 4.5em;
|
|
line-height: 1.4;
|
|
white-space: pre-wrap;
|
|
}
|