# Visual

> O rpgdesk.css, as classes prontas, as cores do tema da mesa, fontes, imagens e como fazer a ficha caber num espaço estreito.

Página: https://docs.rpgdesk.com/fichas/visual/

## O rpgdesk.css

A segunda linha do esqueleto carrega o `rpgdesk.css`:

```html
<link rel="stylesheet" href="https://docs.rpgdesk.com/_sdk/1/rpgdesk.css">
```

Ele é opcional e dá à ficha o visual do RPG Desk: o fundo escuro, os campos, os botões (os de rolagem em destaque), as abas, as listas e as fontes (Roboto, Lato e Inconsolata). Sem ele, a página começa crua, e o visual é todo seu.

As classes prontas:

| Classe       | O que faz                                    |
| ------------ | -------------------------------------------- |
| `rd-row`     | uma linha que quebra quando falta espaço     |
| `rd-col`     | uma coluna                                   |
| `rd-grid`    | uma grade de cartões que se ajusta à largura |
| `rd-card`    | uma caixa com fundo e borda                  |
| `rd-grow`    | ocupa o espaço que sobra numa linha          |
| `rd-primary` | o botão de destaque                          |
| `rd-muted`   | o texto discreto                             |

## As cores do tema

O rpgdesk.js recebe as cores da mesa e as põe como variáveis CSS. Use as variáveis, e a sua ficha combina com o resto da mesa:

```css
.caixa {
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-line);
  color: var(--rd-text);
}
.destaque { color: var(--rd-accent); }
```

| Variável                                               | O que é                                         |
| ------------------------------------------------------ | ----------------------------------------------- |
| `--rd-text`                                            | o texto                                         |
| `--rd-muted`                                           | o texto discreto                                |
| `--rd-accent`, `--rd-accent-hover`, `--rd-accent-text` | a cor de destaque, ao passar o mouse e em texto |
| `--rd-bg`, `--rd-bg-2`, `--rd-bg-3`                    | os fundos, do mais escuro ao mais claro         |
| `--rd-line`                                            | as bordas e as linhas                           |
| `--rd-error`                                           | os erros                                        |
| `--rd-font`, `--rd-title-font`                         | as fontes do texto e dos títulos                |
| `--rd-radius`                                          | o arredondamento dos cantos                     |

As cores cruas do tema da mesa também chegam, com o prefixo `--rd-` (como `--rd-dominant-color` e `--rd-face-color`). A lista está em [Visual (referência)](https://docs.rpgdesk.com/referencia/css/).

## Telas estreitas e largas

A ficha abre num espaço da mesa, que pode ter uns **350 px** de largura ou a tela inteira (numa janela própria). Faça a ficha se ajustar:

- use `rd-row` (ou `flex-wrap: wrap`) nas linhas de campos;
- use grades com `repeat(auto-fill, minmax(150px, 1fr))` em vez de colunas fixas;
- não fixe larguras grandes em pixels;
- a página rola sozinha: não ponha `overflow: hidden` no `body`.

Teste estreitando a janela do navegador no modo de teste.

## Imagens e fontes

A ficha não acessa a internet: imagens e fontes de fora não carregam.

- **Desenhos pequenos:** SVG dentro do HTML, ou endereços `data:`.
- **O retrato do personagem:** `<img data-image="retrato">`, que a pessoa escolhe no RPG Desk.
- **Imagens e fontes próprias:** ponha os arquivos num [pacote](https://docs.rpgdesk.com/fichas/pacotes/) e use caminhos relativos (`<img src="img/rpgdesko.webp">`, `@font-face { src: url('fontes/minha.woff2') }`).

> **Nota**
>
> O rpgdesk.js esconde com o atributo `hidden` (as abas e o `data-role`) e garante que ele vença o seu CSS: um `display: grid` na seção não faz uma aba escondida reaparecer.