Visual (CSS)
Para usar com exemplos, veja Visual.
O que o rpgdesk.css estiliza
Seção intitulada “O que o rpgdesk.css estiliza”htmlebody: o fundo, o texto, a fonte (Roboto) e uma margem de 12 px;h1ah4: os títulos, em Lato;- os campos (
input,select,textarea), os rótulos (label) e os botões; - os botões com
data-rolle a classerd-primary, na cor de destaque; - as abas (
data-tabs) e as listas (data-list); - a barra de rolagem fina, como a da mesa.
Classes
Seção intitulada “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
Seção intitulada “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
Seção intitulada “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.