Files
gpuix/examples/web.css
T
Tommy D. Rossi de1c74aa7d feat: serve the infinite-chat example in the browser at /infinite
`bun scripts/web.ts` now registers one bundled document per example:
`/` keeps the chat and `/infinite` serves the infinite history. The
shared cross-origin isolation headers wrap each document the same way.

The inline page styles move from web.html into a shared web.css that
both documents import, and web-infinite-chat.{html,tsx} are the browser
entry pair for the example. bun.lock picks up string-dedent for the
example's seeded message generator.

Session: ses_fbc66676dffeMDwZ3jJhimdkw6
2026-08-27 17:23:33 +02:00

45 lines
1.5 KiB
CSS

/* Shared page chrome for every GPUIX browser example. */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #11111b; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#gpuix-loader {
position: fixed;
inset: 0;
display: grid;
place-items: center;
color: #fafafa;
font: 14px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
#gpuix-loader > div { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#gpuix-loader strong { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
#gpuix-loader span { color: #8b8b96; font-size: 13px; }
#gpuix-loader i {
width: 18px;
height: 18px;
border: 2px solid #34343e;
border-top-color: #fafafa;
border-radius: 50%;
animation: gpuix-spin 0.8s linear infinite;
}
@keyframes gpuix-spin { to { transform: rotate(360deg); } }
/* The app draws every glyph itself, so the browser must not treat the page as
a document: a long press would otherwise select the whole body and pop the
iOS callout, and a tap would flash the tap highlight over the full-screen
canvas. GPUIX handles long press and selection in its own code. */
html, body, canvas {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
/* GPUI's hidden IME textarea still needs a real selection for composition,
backspace context, and clipboard. */
[data-gpui-input] {
-webkit-user-select: text !important;
user-select: text !important;
}