CSS reference

Rolea sites are styled with plain, global CSS. There is no build step and no framework to learn, and class names are not hashed, so the ones you see in the page are the ones you target.

CSS reaches a site two ways, and both write against the names on this page:

• A theme — one stylesheet published to the gallery and installed by a site. See What a theme is.
• The site’s own CSS — written by an administrator under Administration → Site → Code, and applied on top of whatever theme is installed.

Colours, sizes and fonts

The colours, fonts, spacing and corner radii used across the interface are each declared once, under a name. The page background is --color-bg-page, and every rule that paints a page background reads that name instead of carrying a colour of its own.

Give one of those names a new value and everything reading it changes at once:

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

:root means the page as a whole, so a value set there reaches everything below it. Those two lines are enough to repaint every surface on the site and restyle every serif heading.

The names are grouped by what they control and follow a consistent pattern. Your browser’s inspector lists all of them on :root.

Light and dark

A site is in light mode, dark mode, or following the reader’s device. <body> always carries theme-light, theme-dark or theme-auto to say which. Dark values are declared under three selectors, and a colour you override for dark mode has to match all three:

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

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

Faction colour

The selected character’s faction colour is kept on <body> as --faction-color, with --faction-color-subtle and --faction-color-border beside it. It is only there when a character with a faction is selected, so always give it a fallback:

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

Class names

Every piece of the interface carries a class you can target. The names are global and stable, so you can read one off the inspector and use it directly.

A name has up to three parts — .sceneCard__title--highlighted:

• The block, sceneCard — the thing itself.
• The element, after two underscores: __title — a part inside it.
• The modifier, after two hyphens: --highlighted — a state it can be in.

The three are not equally safe to rely on:

The two layouts

A site runs one of two page shells, and its administrator can switch between them. A theme meant for any site should style both:

Page context

The <html> element carries who is reading and where they are, so a stylesheet can respond to context without a line of 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 }

Classes a site names itself

Labels an administrator defines — dossier sections, statistics — become part of a class name, so you can style one site’s own material:

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

Accents are stripped and the result is lowercased. Because these names come from one site’s own configuration, they are useful in a stylesheet written for that community, but not in a theme published for everyone.

What wins

Stylesheets are applied in this order:

1. Rolea’s own CSS
2. The installed theme
3. The theme’s options, as set by the site
4. The site’s own CSS

A site’s own CSS therefore always wins over a theme, so an administrator can adjust an installed theme without having to fight it.

Good practices

• Change a named value before writing a rule. Setting --color-brand-primary restyles every button, link and accent at once, and keeps them consistent with each other.
• Do not reach for !important. Override a rule with one of the same weight, one class for one class, instead of stacking selectors to force it through. An administrator still has to be able to adjust your theme.
• Style blocks, not structure. Selectors that depend on four levels of nesting break as soon as the markup moves.
• Test both layouts and both colour schemes. That is four combinations, and a site can switch between them at any time.
• Leave the panels alone. Nothing under administration or moderation should be restyled.
• Give every custom font a real fallback. The page has to stay readable while the font loads.
• Check your work against the plain site. ?noskin=1 on any address loads it with no theme, no custom CSS and no custom JavaScript. It is also how you get back in if a rule hides something it should not have.