Estilo

Las pantallas se estilizan con un subconjunto de CSS. Las hojas se leen en este orden, y las posteriores ganan:

1. El tema base de ExyliaLib (dentro de la librería).
2. plugins/ExyliaLib/screens/theme.css: el tema de la red, que restiliza las pantallas de todos los plugins a la vez.
3. plugins/ExyliaScreens/screens/theme.css: compartido por todas las pantallas de ExyliaScreens.
4. plugins/ExyliaScreens/screens/<id>.css: el de una pantalla.
5. plugins/ExyliaScreens/screens/custom.css: el tuyo; el plugin nunca lo trae, así que gana a todo lo anterior.

Dentro de una hoja, las reglas se resuelven por especificidad y luego por orden. Los cambios se ven en las pantallas abiertas en dos segundos.

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

Usa tokens de la paleta ({primary}, {success}, {error_light}...) en lugar de colores hexadecimales, para que colors.yml lo recolorea todo. Los archivos que trae el plugin hacen lo mismo.

Las propiedades y selectores (:hover, [selected], :nth-child, propiedades personalizadas con var(--nombre), movimiento con transition y animation, degradados) son de ExyliaLib: consulta su referencia de pantallas, y /exylialib screens gallery para ver cada elemento y copiarlo.

El estilo propio de un elemento

style="..." en cualquier elemento fija declaraciones solo para ese elemento, por encima de todas las reglas de todas las hojas, como en una página web. Los placeholders y ${...} funcionan dentro, y /screensadmin check avisa de una propiedad que no conoce.

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

Su mejor uso es una propiedad personalizada que lee la hoja, de modo que una línea recolorea una tarjeta entera y todo lo que lleva dentro. El selector de servidores lo hace así:

.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 es el tono con transparencia, igual que {success}16.

Movimiento

transition, enter, leave, animation, stagger y text-reveal también son estilo: consulta Movimiento.

Pantallas importadas

Las pantallas del importador usan las clases .chest, .chest-title, .chest-row, .slot, .slot.empty y .amount; el theme.css que trae el plugin las estiliza.