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>
27 lines
721 B
CSS
27 lines
721 B
CSS
:host {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font: 500 0.95rem/1 system-ui, sans-serif;
|
|
color: var(--ink, #1d1d29);
|
|
}
|
|
.stars { display: inline-flex; gap: 0.15rem; }
|
|
button {
|
|
all: unset;
|
|
cursor: pointer;
|
|
font-size: 1.75rem;
|
|
line-height: 1;
|
|
color: #d4d4dc;
|
|
transition: color 120ms ease, transform 120ms ease;
|
|
}
|
|
button:focus-visible { outline: 2px solid #f5a524; outline-offset: 2px; border-radius: 4px; }
|
|
button.on { color: #f5a524; }
|
|
button.preview { color: #f8c96b; }
|
|
:host(:not([readonly])) button:hover { transform: scale(1.2); }
|
|
:host([readonly]) button { cursor: default; }
|
|
output {
|
|
min-width: 3.5em;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--muted, #6b6b7b);
|
|
}
|