Custom CSS¶

Every session type has a Custom CSS feature. Whatever you type is inserted into the player page as a <style> element, unchanged and unscoped, so you can restyle almost anything the player draws: fonts, colours, sizes, animation, layout and stacking.

The player page is deliberately bare. It has no site chrome, only a black background, white text and the elements the session’s features create. Those element ids and class names are a stable contract: the XR presenter relies on the same names, so they do not change between releases without notice.

Note

The old wiki referred to #spiral-gif and #image. Those names no longer exist. The current names are #spiral-holder, #webgl-spiral-holder, #images-holder and img.scatter-image, listed below.

Adding custom CSS to a session¶

On the session editor’s Content tab, click + Custom CSS in the Add optional feature row. The editor jumps to the Settings tab, where the feature now has a Custom CSS for Session box.
Type or paste CSS into the box and press Save.

Selectors you can target¶

Text¶

Selector	What it is
`.focus-line`	The centre text in MST and BST sessions. Use the class, not the id: in VR there are two of them (`#focus-line` and `#focus-line-2`). Default inline style is `font-size: 6vh; font-family: sans-serif;` with a 1px black outline via `text-shadow`.
`#workspace-lines`	The full-screen flex container that centres the focus line.
`.distractor`	A classic distractor. Each also carries `.content-text` and `.animation-breathing`. Distractors spawn inside `#spiral-holder`.
`#dis-container`	The wall-of-text distractor layer. Full screen, `opacity: 0.5`.

Spiral and images¶

Selector	What it is
`#spiral-holder`	Full-screen layer for the spiral. With a media spiral it holds the image as a `background-image` (or a `<video>` child) and also has the class `.focus-spiral`. With a WebGL spiral it is an empty layer above the canvas that distractors mount into. `#spiral-holder-2` is the VR right eye.
`#webgl-spiral-holder`	The `<canvas>` for WebGL and Scripted WebGL spirals. Its `opacity` is the spiral’s Opacity setting. `#webgl-spiral-holder-2` is the VR right eye.
`#customgl-shader-error`	The red error box shown when a custom shader fails to compile.
`#workspace-container`	Full-screen wrapper for the full-screen image cycler.
`.images-holder`	The element that receives each image as `background-image` with `background-size: contain` and the `zoomin` animation. `#images-holder` and `#images-holder-2` (VR) both carry this class.
`#scatter-holder`	Layer for the scatter image mode. `#scatter-holder-2` in VR.
`img.scatter-image`	One floating image. Has `.is-in` while entering and holding, `.is-out` while leaving, and `data-x`, `data-y`, `data-size`, `data-depth` attributes.

Task user interfaces¶

Session type	Selectors
Write Lines Task	`#line-holder`, `.wordString`, `.blinking-cursor`, `.mistake-counter`, `.left-to-write-counter`, `.total-counter`, `#lines-counter`, `.ui-element`
Action Task	`#instructions`, `#text-box`, `#done-button`
Story Trance Task	`.container`, `.container-item`, `#display-content`, `#anotherLine`
Engram Completion Task	`.phrase-container`, `.times`, `#buttons-top`, `#buttons-bottom`, `.button`

Stacking order¶

From back to front. Use z-index above these values if you add your own layers.

Layer	z-index
`#workspace-container`, `#images-holder`, `#scatter-holder`	1
`#spiral-holder` (media spiral), `#dis-container`	2
`#webgl-spiral-holder` (canvas)	3
`#spiral-holder` (WebGL spirals)	4
Story Trance Task text and button	5
`.focus-line`	10
Write Lines and Engram punishment overlays	9999

Fonts and animations that are always available¶

The player stylesheet defines two fonts and one animation you can use without any @font-face of your own:

Name	Kind	Effect
`heartFont`	font family	block lettering with hearts
`dumbassFont`	font family	some characters randomly flipped
`breathing`	keyframes	scale 0.9 → 1.0 → 0.9. Already applied to distractors through `.animation-breathing` (5s, ease-out, infinite).

While the matching feature is active, these keyframes are also defined:

Name	Defined by
`zoomin`	full-screen image cycler (scale 1 → 1.25 over 1.5s)
`scatter-in`, `scatter-out`	scatter images (durations come from the feature settings)
`blink`	Write Lines Task cursor

Examples¶

Change the focus text font, size and colour:

.focus-line {
  font-family: 'heartFont', sans-serif;
  font-size: 9vh;
  color: #ffb3e6;
}

Make the focus text breathe:

.focus-line {
  animation: breathing 4s linear infinite;
}

Tint and soften the spiral canvas:

#webgl-spiral-holder {
  filter: hue-rotate(90deg) blur(1px);
}

Make distractors large, faint and italic:

.distractor {
  font-size: 4vh;
  font-style: italic;
  opacity: 0.5;
}

Fill the screen with the image cycler instead of letterboxing it:

.images-holder {
  background-size: cover !important;
}

Use a font from your Stash:

@font-face {
  font-family: 'MyFont';
  src: url('https://…/stash/…/MyFont.woff2');
}
.focus-line { font-family: 'MyFont', sans-serif; }

Define a class you switch on from YSS:

.focus-line.shout {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ff2020;
}

[style.text.main.add_class=shout] LISTEN

Notes¶

The engine sets many properties inline on the elements it creates. If a rule seems to have no effect, add !important.
CSS is applied as written, with no sanitising. A stray } can silently disable everything after it. The browser’s developer tools show the injected <style> in the page head.
Subjects can copy a session’s full JSON, custom CSS included, from the transparency report’s copy button, so there is nothing hidden in it.