Styling

Screens are styled with a subset of CSS. The sheets are read in this order, later ones winning:

1. ExyliaLib's base theme (inside the library).
2. plugins/ExyliaLib/screens/theme.css: the network theme, restyling every plugin's screens at once.
3. plugins/ExyliaScreens/screens/theme.css: shared by every ExyliaScreens screen.
4. plugins/ExyliaScreens/screens/<id>.css: one screen's.
5. plugins/ExyliaScreens/screens/custom.css: yours; the plugin never ships it, so it wins over everything above.

Within a sheet, rules are resolved by specificity, then order. Changes show on open screens within two seconds.

.tile { width: 80px; height: 64px; padding: 6px; gap: 2px; }
.tile:hover { outline: 1px {secondary}; }
.price-short { color: {error_light}; }

Use palette tokens ({primary}, {success}, {error_light}...) instead of hex colours, so colors.yml recolours everything. The shipped files do the same.

The properties and selectors (:hover, [selected], :nth-child, custom properties with var(--name), motion with transition and animation, gradients) are ExyliaLib's: see its screens reference, and /exylialib screens gallery for every element to copy from.

One element's own style

style="..." on any element sets declarations for that element alone, over every rule in every sheet, as in a web page. Placeholders and ${...} work inside it, and /screensadmin check reports a property it does not know.

<card style="width: 120px; background: {success}20">...</card>
<small style="color: ${balance() >= 50 ? '{success}' : '{error_light}'}">50 coins</small>

Its best use is a custom property that the sheet reads, so one line recolours a whole card and everything in it. The server selector does this:

.mode { --tone: {primary}; }
.mode:hover { outline: 1px var(--tone); background: var(--tone)16; }
.mode-name { color: var(--tone); }

<card class="mode" style="--tone: {success}">...</card>
<card class="mode" style="--tone: {info}">...</card>

var(--tone)16 is the tone with transparency, like {success}16.

Motion

transition, enter, leave, animation, stagger and text-reveal are styling too: see Motion.

Imported screens

The importer's screens use the classes .chest, .chest-title, .chest-row, .slot, .slot.empty and .amount; the shipped theme.css styles them.