76d78e1925
css is now string | CSSStyleSheet. A sheet is adopted as-is: into its own
shadow root, an enclosing shadow root, or document.adoptedStyleSheets for
light DOM at the document level. Strings behave as before.
The examples import their styles with `with { type: 'css' }` and their
static templates with `with { type: 'text' }`. Safari doesn't support those
yet, so vite.config.ts rewrites them into modules Vite builds: a constructed
CSSStyleSheet, or the file's text. npm run examples now just runs vite,
with root set in the config.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
33 lines
866 B
CSS
33 lines
866 B
CSS
:host {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding: 1.25rem;
|
|
border-radius: 14px;
|
|
background: repeating-linear-gradient(-45deg, #1f1b2e 0 12px, #241f36 12px 24px);
|
|
color: #f0eaff;
|
|
font: 0.95rem/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
|
|
}
|
|
button {
|
|
all: unset;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
justify-self: start;
|
|
padding: 0.4rem 0.8rem;
|
|
border-radius: 999px;
|
|
background: #3b3355;
|
|
transition: background 150ms ease;
|
|
}
|
|
button:hover { background: #4a4170; }
|
|
button:focus-visible { outline: 2px solid #b69cff; outline-offset: 2px; }
|
|
.lock { transition: transform 300ms ease; }
|
|
.message {
|
|
margin: 0;
|
|
filter: blur(6px);
|
|
user-select: none;
|
|
transition: filter 400ms ease;
|
|
}
|
|
:host([revealed]) .message { filter: none; user-select: auto; }
|
|
:host([revealed]) .lock { transform: rotate(-20deg); }
|