Referencia de CSS

Los sitios de Rolea se maquetan con CSS normal y global. No hay paso de compilación ni ningún framework que aprender, y los nombres de clase no llevan hash, así que los que ves en la página son los que apuntas.

El CSS llega a un sitio por dos vías, y las dos escriben contra los nombres de esta página:

• Un tema — una hoja de estilos publicada en la galería e instalada por un sitio. Ver Qué es un tema.
• El CSS propio del sitio — lo escribe una persona administradora desde Administración → Sitio → Código, y se aplica por encima del tema que haya instalado.

Colores, tamaños y tipografías

Los colores, las tipografías, los espaciados y los redondeos de la interfaz se declaran una sola vez, cada uno bajo un nombre. El fondo de página es --color-bg-page, y cada regla que pinta un fondo de página lee ese nombre en lugar de llevar un color propio.

Dale otro valor a uno de esos nombres y cambia de golpe todo lo que lo lee:

:root {
  --color-bg-page: #0d0b1a;
  --font-family-serif: "Cormorant Garamond", Georgia, serif;
}

:root significa la página entera, así que un valor puesto ahí llega a todo lo que hay debajo. Esas dos líneas bastan para repintar todas las superficies del sitio y cambiar la tipografía de todos los títulos con serifa.

Los nombres están agrupados por lo que controlan y siguen un patrón constante. El inspector de tu navegador los lista todos en :root.

Claro y oscuro

Un sitio está en modo claro, en modo oscuro o siguiendo al dispositivo de quien lee. El elemento <body> lleva siempre theme-light, theme-dark o theme-auto para decirlo. Los valores oscuros se declaran bajo tres selectores, y un color que sobrescribas para el modo oscuro tiene que cubrir los tres:

[data-theme="dark"],
.dark,
body.theme-dark { --color-bg-page: #151210 }

@media (prefers-color-scheme: dark) {
  body.theme-auto { --color-bg-page: #151210 }
}

El color de facción

El color de la facción del personaje seleccionado se mantiene en <body> como --faction-color, con --faction-color-subtle y --faction-color-border al lado. Solo está cuando hay seleccionado un personaje con facción, así que dale siempre un valor de respaldo:

.sceneReply__authorName {
  color: var(--faction-color, var(--color-text-primary));
}

Nombres de clase

Cada pieza de la interfaz lleva una clase a la que puedes apuntar. Los nombres son globales y estables, así que puedes leer uno en el inspector y usarlo tal cual.

Un nombre tiene hasta tres partes — .sceneCard__title--highlighted:

• El bloque, sceneCard: la cosa en sí.
• El elemento, tras dos guiones bajos: __title, una parte de dentro.
• El modificador, tras dos guiones: --highlighted, un estado en el que puede estar.

No de las tres te puedes fiar por igual:

Las dos maquetaciones

Un sitio usa una de dos estructuras de página, y su administración puede cambiar de una a otra. Un tema pensado para cualquier sitio debería cubrir las dos:

El contexto de la página

El elemento <html> lleva quién está leyendo y dónde está, así que una hoja de estilos puede responder a ello sin una sola línea de JavaScript.

html[data-route="scene"] .skeleton__main { max-width: 72ch }
html[data-auth="guest"] .sidebar { display: none }
html[data-faction="lobos-de-invierno"] { --color-brand-primary: #8a3b2e }

/* every character page at once */
html[data-route^="character-"] .skeleton__main { --content-max-width: 100% }

/* nobody has picked a character */
html:not([data-character]) .sceneComposer { display: none }

Clases que nombra cada sitio

Las etiquetas que define la administración de un sitio — apartados de la ficha, estadísticas — pasan a formar parte de un nombre de clase, así que puedes dar estilo al material propio de un sitio:

.dossierProfile__entry--historia { font-family: var(--font-family-serif) }
.dossierStats__tile--fuerza     { border-color: var(--color-error) }

Se quitan los acentos y el resultado se pasa a minúsculas. Como estos nombres salen de la configuración de un sitio concreto, sirven en una hoja de estilos escrita para esa comunidad, pero no en un tema publicado para todo el mundo.

Qué gana

Las hojas de estilo se aplican en este orden:

1. El CSS propio de Rolea
2. El tema instalado
3. Las opciones del tema, tal como las ajusta el sitio
4. El CSS propio del sitio

El CSS propio del sitio gana por tanto siempre sobre un tema, de modo que su administración puede ajustar el tema instalado sin tener que pelearse con él.

Buenas prácticas

• Antes de escribir una regla, cambia un valor con nombre. Poner --color-brand-primary cambia de una vez todos los botones, enlaces y acentos, y los mantiene coherentes entre sí.
• No tires de !important. Sustituye una regla por otra del mismo peso, una clase por una clase, en vez de amontonar selectores para forzarla. Quien administre el sitio tiene que poder seguir ajustando tu tema.
• Da estilo a bloques, no a estructuras. Un selector que depende de cuatro niveles de anidamiento se rompe en cuanto el marcado se mueve.
• Prueba las dos maquetaciones y los dos modos de color. Son cuatro combinaciones, y un sitio puede cambiar de una a otra en cualquier momento.
• No toques los paneles. Nada de administración ni de moderación debería llevar estilos nuevos.
• Dale a cada tipografía propia un respaldo real. La página tiene que seguir leyéndose mientras la fuente carga.
• Comprueba tu trabajo contra el sitio en limpio. ?noskin=1 en cualquier dirección la carga sin tema, sin CSS propio y sin JavaScript propio. Es también la forma de volver a entrar si una regla esconde algo que no debía.