# Looks

> rpgdesk.css, the ready-made classes, the room's theme colors, fonts, images and how to make the sheet fit a narrow space.

Page: https://docs.rpgdesk.com/en/fichas/visual/

## rpgdesk.css

The skeleton’s second line loads `rpgdesk.css`:

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

It is optional and gives the sheet RPG Desk’s look: the dark background, the fields, the buttons (roll buttons highlighted), the tabs, the lists and the fonts (Roboto, Lato and Inconsolata). Without it, the page starts raw, and the looks are all yours.

The ready-made classes:

| Class        | What it does                               |
| ------------ | ------------------------------------------ |
| `rd-row`     | a row that wraps when it runs out of space |
| `rd-col`     | a column                                   |
| `rd-grid`    | a grid of cards that adapts to the width   |
| `rd-card`    | a box with a background and a border       |
| `rd-grow`    | takes up the space left in a row           |
| `rd-primary` | the highlighted button                     |
| `rd-muted`   | subdued text                               |

## The theme colors

rpgdesk.js receives the room’s colors and sets them as CSS variables. Use the variables, and your sheet matches the rest of the room:

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

| Variable                                               | What it is                                |
| ------------------------------------------------------ | ----------------------------------------- |
| `--rd-text`                                            | the text                                  |
| `--rd-muted`                                           | subdued text                              |
| `--rd-accent`, `--rd-accent-hover`, `--rd-accent-text` | the accent color, on hover and as text    |
| `--rd-bg`, `--rd-bg-2`, `--rd-bg-3`                    | the backgrounds, from darkest to lightest |
| `--rd-line`                                            | borders and lines                         |
| `--rd-error`                                           | errors                                    |
| `--rd-font`, `--rd-title-font`                         | the text and heading fonts                |
| `--rd-radius`                                          | the corner rounding                       |

The room theme’s raw colors also arrive, with the `--rd-` prefix (such as `--rd-dominant-color` and `--rd-face-color`). The list is in [Looks (CSS reference)](https://docs.rpgdesk.com/en/referencia/css/).

## Narrow and wide screens

The sheet opens in a room space, which can be about **350 px** wide or the whole screen (in a window of its own). Make the sheet adapt:

- use `rd-row` (or `flex-wrap: wrap`) on rows of fields;
- use grids with `repeat(auto-fill, minmax(150px, 1fr))` instead of fixed columns;
- do not fix large widths in pixels;
- the page scrolls by itself: do not put `overflow: hidden` on the `body`.

Test by narrowing the browser window in test mode.

## Images and fonts

The sheet has no internet access: images and fonts from outside do not load.

- **Small drawings:** SVG inside the HTML, or `data:` addresses.
- **The character’s portrait:** `<img data-image="portrait">`, which the person chooses in RPG Desk.
- **Your own images and fonts:** put the files in a [package](https://docs.rpgdesk.com/en/fichas/pacotes/) and use relative paths (`<img src="img/crest.webp">`, `@font-face { src: url('fonts/mine.woff2') }`).

> **Note**
>
> rpgdesk.js hides things with the `hidden` attribute (tabs and `data-role`) and makes sure it beats your CSS: a `display: grid` on the section does not make a hidden tab reappear.