Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/hearthspace-ui-experiments. crutchcorn.github.io/hearthspace-ui-experiments
Something went wrong. Try again.
1.5 kB · 71 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172.dialog { --chrome-hover: var(--raised-control-hover);
width: min(420px, calc(100vw - 48px)); padding: 24px; border: 1px solid var(--chrome-border); border-radius: var(--radius-panel); background: var(--material-raised); color: var(--chrome-text); box-shadow: var(--shadow-glow), var(--glass-edge-active); backdrop-filter: var(--glass-blur);}
.dialog::backdrop { background: color-mix(in srgb, var(--chrome-text) 18%, transparent); backdrop-filter: blur(8px);}
.dialog h2 { margin: 0 0 12px; font-size: 19px;}
.dialog p { margin: 0 0 24px; color: var(--chrome-muted); font-size: 14px; line-height: 1.6;}
.dialog > div { display: flex; justify-content: flex-end; gap: 8px;}
.dialog button { border: 0; padding: 10px 14px; border-radius: var(--radius-control); color: var(--chrome-text); background: var(--surface-control); box-shadow: var(--glass-edge); cursor: pointer; transition: background 180ms ease, box-shadow 180ms ease;}
.dialog button:is(:hover, :focus-visible) { background: var(--chrome-hover); box-shadow: var(--control-glow), var(--glass-edge-active);}
.dialog button[data-destructive='true'] { color: white; background: #ba3b32;}
.dialog button[data-destructive='true']:is(:hover, :focus-visible) { background: #d1483e; box-shadow: 0 8px 24px #ba3b3230, var(--glass-edge-active);}
@media (prefers-reduced-motion: reduce) { .dialog button { transition: none; }}