# Looks (CSS)

> The classes and variables of rpgdesk.css, and the room's theme colors that rpgdesk.js hands to the page.

Page: https://docs.rpgdesk.com/en/referencia/css/

To use them with examples, see [Looks](https://docs.rpgdesk.com/en/fichas/visual/).

## What rpgdesk.css styles

- `html` and `body`: the background, the text, the font (Roboto) and a 12 px margin;
- `h1` to `h4`: the headings, in Lato;
- the fields (`input`, `select`, `textarea`), the labels (`label`) and the buttons;
- buttons with `data-roll` and the `rd-primary` class, in the accent color;
- the tabs (`data-tabs`) and the lists (`data-list`);
- the thin scrollbar, like the room’s.

## 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

| 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

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.