74 lines
2 KiB
CSS
74 lines
2 KiB
CSS
/* hive-dialog.css — scoped stylesheet for the <hive-dialog> shadow-DOM
|
|
custom element (hive-dialog.js). Loaded as raw text at build time
|
|
(esbuild's `text` loader) and appended as a `<style>` element inside
|
|
the shadow root. `: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;
|
|
}
|