8865b49f4e
DSD, open/closed template, and light-DOM components that talk through <main-context>: children register on… callbacks and share updates as events. Served by Vite via npm run examples; examples/ is linted, formatted and typechecked.
83 lines
2.0 KiB
CSS
83 lines
2.0 KiB
CSS
:root {
|
|
--page: #f6f5fb;
|
|
--card: #ffffff;
|
|
--ink: #1d1d29;
|
|
--muted: #6b6b7b;
|
|
--line: #e2e1ec;
|
|
--field: #ffffff;
|
|
color-scheme: light;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--page: #111118;
|
|
--card: #1a1a24;
|
|
--ink: #ececf4;
|
|
--muted: #9c9cb0;
|
|
--line: #30303f;
|
|
--field: #13131b;
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
padding: 2rem 1rem 4rem;
|
|
background: var(--page);
|
|
color: var(--ink);
|
|
font: 1rem/1.55 system-ui, sans-serif;
|
|
}
|
|
main { max-width: 64rem; margin: 0 auto; display: grid; gap: 1.5rem; }
|
|
h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
|
|
.kind {
|
|
display: inline-block;
|
|
margin-left: 0.4rem;
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, #7c5cff 14%, transparent);
|
|
color: #7c5cff;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
vertical-align: middle;
|
|
}
|
|
.card {
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: var(--card);
|
|
}
|
|
.card > p { margin: 0 0 1rem; color: var(--muted); font-size: 0.9rem; }
|
|
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
|
|
.controls { display: grid; gap: 1rem; }
|
|
pre, output#probe {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 10px;
|
|
background: var(--page);
|
|
font: 0.8rem/1.6 ui-monospace, 'SF Mono', Menlo, monospace;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
#log {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
max-height: 18rem;
|
|
overflow-y: auto;
|
|
font: 0.8rem/1.7 ui-monospace, 'SF Mono', Menlo, monospace;
|
|
}
|
|
#log li { padding: 0.15rem 0; border-bottom: 1px dashed var(--line); }
|
|
#log code { color: var(--muted); }
|
|
#log b { color: #7c5cff; }
|
|
.log-head { display: flex; justify-content: space-between; align-items: baseline; }
|
|
.log-head button {
|
|
font: inherit;
|
|
font-size: 0.8rem;
|
|
padding: 0.2rem 0.7rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: none;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
}
|