/* tessera-loader minimal styles — the site/theme is expected to own the visual treatment around `.tessera-mount`. These defaults keep the canvas from looking broken if no theme styling exists. The fullscreen behaviour is pseudo-fullscreen: when the mount gets the `is-fullscreen` class (toggled by the loader's button), it becomes `position: fixed` and fills the viewport. The browser URL bar / tabs stay visible — ESC still works because the loader binds to it. */ .tessera-mount { position: relative; display: block; width: 100%; max-width: 100%; /* Preserve the applet's intrinsic aspect ratio. The shortcode forwards width/height onto --tessera-aspect; we fall back to 4/3 for the legacy 800x600 case. */ aspect-ratio: var(--tessera-aspect, 4 / 3); line-height: 0; overflow: hidden; } .tessera-mount > canvas { display: block; background: #000; width: 100%; height: 100%; outline: none; } /* Transparent embed mode — the host page's background shows through. The mascot/widget shortcode sets data-transparent="true". */ .tessera-mount[data-transparent="true"] { background: transparent; } .tessera-mount[data-transparent="true"] > canvas { background: transparent; } /* ── fullscreen toggle button ─────────────────────────────────────────── Injected by the loader once the WASM module is mounted. Top-right of the canvas. Glyph swaps between expand (⛶) and close (✕). */ .tessera-mount__btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; background: rgba(0, 0, 0, 0.45); color: #d8dde8; font: 16px/1 ui-monospace, monospace; cursor: pointer; z-index: 2; opacity: 0.55; transition: opacity 120ms ease, background-color 120ms ease; padding: 0; } .tessera-mount__btn:hover, .tessera-mount__btn:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.7); outline: none; } /* ── pseudo-fullscreen ───────────────────────────────────────────────── Fills the browser viewport without invoking the real Fullscreen API. The mount is portaled to (see fullscreen.ts) so ancestor stacking contexts can't clip the fixed positioning. z-index is at max int — beats anything the host page reasonably emits. The loader resizes the canvas's intrinsic width/height attrs to the viewport via emscripten_set_canvas_element_size so raylib renders at real pixel dimensions, not an upscaled 800x600. */ .tessera-mount.is-fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; margin: 0; padding: 0; z-index: 2147483647; background: #000; display: block; } .tessera-mount.is-fullscreen > canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; } /* status overlays ──────────────────────────────────────────────────── */ .tessera-mount[data-state="error"]::after { content: attr(data-error); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); color: #ff6464; font: 12px/1.4 ui-monospace, monospace; padding: 16px; text-align: center; } .tessera-mount[data-state="loading"]::after { content: "loading…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); color: #aaa; font: 11px/1.4 ui-monospace, monospace; letter-spacing: 0.15em; text-transform: uppercase; }