Looks (CSS)
To use them with examples, see Looks.
What rpgdesk.css styles
Section titled “What rpgdesk.css styles”htmlandbody: the background, the text, the font (Roboto) and a 12 px margin;h1toh4: the headings, in Lato;- the fields (
input,select,textarea), the labels (label) and the buttons; - buttons with
data-rolland therd-primaryclass, in the accent color; - the tabs (
data-tabs) and the lists (data-list); - the thin scrollbar, like the room’s.
Classes
Section titled “Classes”| Class | What it does |
|---|---|
rd-row |
a flexible row that wraps (flex-wrap), with space between items |
rd-col |
a column, with space between items |
rd-grid |
a grid of cards: repeat(auto-fill, minmax(120px, 1fr)) |
rd-card |
a box with the secondary background, a border and rounded corners |
rd-grow |
takes up the space left (flex: 1) |
rd-primary |
the highlighted button |
rd-muted |
subdued text |
rd-button |
any element with the button look |
rd-readonly |
added by rpgdesk.js to the fields the person cannot edit |
rpgdesk.css variables
Section titled “rpgdesk.css variables”| Variable | What for | Without the theme |
|---|---|---|
--rd-text |
the text | #f2f2f2 |
--rd-muted |
subdued text | gray |
--rd-accent |
the accent color | #2a8a4a |
--rd-accent-hover |
the accent, on hover | #2f9452 |
--rd-accent-text |
the accent as text (links) | #5bc27e |
--rd-bg |
the page’s background | #282828 |
--rd-bg-2 |
the background of fields and boxes | #2f2f2f |
--rd-bg-3 |
the background of buttons | #414141 |
--rd-line |
borders and lines | #383838 |
--rd-error |
errors | #f0a35a |
--rd-font |
the text font | Roboto |
--rd-title-font |
the heading font | Lato |
--rd-radius |
the rounding | 4px |
The room’s theme colors
Section titled “The room’s theme colors”rpgdesk.js receives the room’s colors and fonts and sets them on the page as variables with the
--rd- prefix. The rpgdesk.css ones (above) are made from them; use the raw ones if you need another:
--rd-face-color, --rd-face-color-hover, --rd-face-color-deemphasized,
--rd-face-color-little-deemphasized, --rd-face-selection-color, --rd-dominant-color,
--rd-dominant-color-hover, --rd-dominant-color-dark, --rd-dominant-color-pale,
--rd-dominant-color-text, --rd-bkg-color, --rd-dark-bkg-color, --rd-secondary-bkg-color,
--rd-emphasized-secondary-bkg-color, --rd-tertiary-bkg-color, --rd-content-bkg-color,
--rd-short-content-bkg-color, --rd-text-content, --rd-text-content-deemphasized,
--rd-text-content-high-contrast, --rd-error-color, --rd-warning-color, --rd-online-color,
--rd-font-default, --rd-font-title, --rd-font-console, --rd-font-size.
In test mode, these variables do not arrive, and the “Without the theme” values apply. The
RPGDesk.on('theme', fn) event tells you when the colors change.