# Visual (CSS)

> As classes e as variáveis do rpgdesk.css, e as cores do tema da mesa que o rpgdesk.js entrega à página.

Página: https://docs.rpgdesk.com/referencia/css/

Para usar com exemplos, veja [Visual](https://docs.rpgdesk.com/fichas/visual/).

## O que o rpgdesk.css estiliza

- `html` e `body`: o fundo, o texto, a fonte (Roboto) e uma margem de 12 px;
- `h1` a `h4`: os títulos, em Lato;
- os campos (`input`, `select`, `textarea`), os rótulos (`label`) e os botões;
- os botões com `data-roll` e a classe `rd-primary`, na cor de destaque;
- as abas (`data-tabs`) e as listas (`data-list`);
- a barra de rolagem fina, como a da mesa.

## Classes

| Classe        | O que faz                                                          |
| ------------- | ------------------------------------------------------------------ |
| `rd-row`      | linha flexível que quebra (`flex-wrap`), com espaço entre os itens |
| `rd-col`      | coluna, com espaço entre os itens                                  |
| `rd-grid`     | grade de cartões: `repeat(auto-fill, minmax(120px, 1fr))`          |
| `rd-card`     | caixa com o fundo secundário, borda e cantos arredondados          |
| `rd-grow`     | ocupa o espaço que sobra (`flex: 1`)                               |
| `rd-primary`  | botão de destaque                                                  |
| `rd-muted`    | texto discreto                                                     |
| `rd-button`   | um elemento qualquer com o visual de botão                         |
| `rd-readonly` | posta pelo rpgdesk.js nos campos que a pessoa não pode editar      |

## Variáveis do rpgdesk.css

| Variável            | Para quê                      | Sem o tema |
| ------------------- | ----------------------------- | ---------- |
| `--rd-text`         | o texto                       | `#f2f2f2`  |
| `--rd-muted`        | o texto discreto              | cinza      |
| `--rd-accent`       | a cor de destaque             | `#2a8a4a`  |
| `--rd-accent-hover` | o destaque, ao passar o mouse | `#2f9452`  |
| `--rd-accent-text`  | o destaque em texto (links)   | `#5bc27e`  |
| `--rd-bg`           | o fundo da página             | `#282828`  |
| `--rd-bg-2`         | o fundo dos campos e caixas   | `#2f2f2f`  |
| `--rd-bg-3`         | o fundo dos botões            | `#414141`  |
| `--rd-line`         | as bordas e as linhas         | `#383838`  |
| `--rd-error`        | os erros                      | `#f0a35a`  |
| `--rd-font`         | a fonte do texto              | Roboto     |
| `--rd-title-font`   | a fonte dos títulos           | Lato       |
| `--rd-radius`       | o arredondamento              | `4px`      |

## As cores do tema da mesa

O rpgdesk.js recebe as cores e as fontes da mesa e as põe na página como variáveis com o prefixo `--rd-`. As do rpgdesk.css (acima) já são feitas delas; use as cruas se precisar de outra:

`--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`.

No modo de teste, essas variáveis não chegam, e valem os valores “Sem o tema”. O evento `RPGDesk.on('theme', fn)` avisa quando as cores mudam.