Something went wrong. Try again.
Rich, web-friendly editor UI framework for SolidJS + TypeScript
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216@import '@dolphinspired/solid-stage/styles.css';
html,body,#root { margin: 0; padding: 0; height: 100%; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: #101010;}
/* App title — a Label (bar, large). The library owns size/weight scaling; the consumer only pins the bold weight via the class style-hook. */.playground-title { font-weight: 700; color: var(--stage-color-text-label);}
/* Muted footer text — Label defaults to the primary label colour, so the muted tone is opted in via the class style-hook. */.playground-footer-text { color: var(--stage-color-text-muted);}
/* Full-height sub-bar hosting the TabMenu. A plain div (not a Toolbar) so the blocky tabs fill the bar height and flow into its bottom border. The TabMenu takes the slack; the "active:" label rides centered on the right. *//* A custom bar host (not a Toolbar), so it opts into the unified bar height itself — border-box so its 1px bottom rule is absorbed and it matches the toolbar bars exactly (was 1px taller as content-box). */.playground-tabbar { display: flex; align-items: stretch; box-sizing: border-box; min-height: var(--stage-bar-height); border-bottom: 1px solid var(--stage-color-border);}
.playground-tabbar > .stage-tabmenu { flex: 1;}
.playground-tabbar > .stage-field-control { align-self: center; margin-left: auto; padding: 0 8px; white-space: nowrap;}
/* Label demo — italic via the class style-hook (Option A: no inline-style escape hatch in the library; consumers style through their own classes). */.playground-label-italic { font-style: italic;}
.playground-sub { display: flex; align-items: center; gap: 6px; width: 100%;}
.playground-sub button { background: var(--stage-color-panel-bg); color: var(--stage-color-accent); border: 1px solid var(--stage-color-border-strong); padding: 2px 8px; cursor: pointer; font: inherit;}
/* Vertical stack of ButtonGroupControl rows in a section body. Each child group is its own horizontal row (no wrapping); the stack just spaces them apart and separates the block from its neighbours. */.playground-button-stack { display: flex; flex-direction: column; gap: 6px; margin: 6px 0;}
/* Arbitrary-JSX tooltip content demo — stacks an image, list, and link inside the global bubble (which only supplies the chrome). */.playground-rich-tooltip { display: flex; flex-direction: column; gap: 4px;}
.playground-rich-tooltip ul { margin: 0; padding-left: 16px;}
.playground-rich-tooltip a { color: inherit; text-decoration: underline;}
/* Split band: the outer stage's centre, holding two nested stages side by side. Each slot is an equal flex column that the embedded stage fills. */.playground-split { display: flex; height: 100%;}
.playground-stage-slot { flex: 1 1 0; min-width: 0; position: relative;}
.playground-split-divider { flex: 0 0 auto; width: 4px; background: var(--stage-color-border-strong);}
.playground-world-box { position: absolute; inset: 16px; border: 1px dashed var(--stage-color-border-strong); display: flex; align-items: center; justify-content: center; color: var(--stage-color-text-muted); background: linear-gradient(135deg, #1c1c1c 0%, #0c0c0c 100%);}
.playground-hud { position: absolute; top: 8px; right: 8px; background: var(--stage-color-panel-bg); border: 1px solid var(--stage-color-border); color: var(--stage-color-accent); padding: 4px 6px;}
/* Inline link inside a toast message — accent-coloured so it reads as clickable on the dark chrome (toast message content is consumer-styled). */.playground-toast-link { color: var(--stage-color-accent); text-decoration: underline; cursor: pointer;}
/* --- Font picker (SelectField renderOption demo) -------------------------- *//* Each option/trigger renders the name on the left and a sample (set in the font) on the right. The two ends spread via space-between. */.font-option { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0;}
.font-option-name { white-space: nowrap;}
/* Muted via opacity (not a fixed grey) so the sample follows the row's text colour — readable both on the panel and on the accent highlight bar. */.font-option-sample { white-space: nowrap; opacity: 0.75;}
/* Let the label/value column grow so name + sample reach both edges — only for the font select (`:has` scopes it; the value/ItemLabel aren't flex by default). */.stage-select-value:has(.font-option),.stage-select-item:has(.font-option) > :first-child { flex: 1 1 auto; min-width: 0;}
/* Floor the font dropdown wide enough that name + preview spread to both edges. The default `fit` overflow already grows to content; this min-width just keeps short rows from collapsing tighter than the space-between layout wants. */.stage-select-content:has(.font-option) { min-width: 280px;}
/* Badge pill for the SearchField `valueRender` demo — shared by the dropdown rows (itemRender) and the committed value in the bar (valueRender) so they match. */.pg-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px; margin-right: 6px; border-radius: var(--stage-border-radius); background: var(--stage-color-accent); color: var(--stage-color-bg); font-size: 0.75em; font-weight: 600;}
/* On the highlighted (accent-bar) result row the accent pill would merge into the bar — invert it so the chip stays legible. */.stage-search-item[aria-selected='true'] .pg-pill { background: var(--stage-color-text-on-accent); color: var(--stage-color-accent);}