Theme and fonts¶

The theme¶

/sagl/ui/theme/base.rcss is SAGL's GTA San Andreas theme. Link it from your documents to get SAGL's look:

<link type="text/rcss" href="/sagl/ui/theme/base.rcss"/>

Pause menu pages get it (and the pause menu's own styles) automatically.

What it styles¶

Selector	Looks like
`body`	`sa-text` at 18dp, white, with a 1dp black outline.
`.panel`	A square, see-through black box (`#000000c0`), like the game's help box.
`h1`	A Pricedown title, white with a 2dp outline.
`h2`	A heading in the menu font, light blue.
`.subtitle`	Light blue text under a title.
`button`, `.button`	A menu item: capitals in the menu font, light blue, white when hovered or `.selected`; a dark blue bar when focused from keyboard or gamepad. `.primary` is white.
`input.text`	A text box with an underline.
`.list`, `.list .item`	A selectable list (give items `tab-index` and ids to click).
`.status`	A cream status line.

Colours¶

The theme uses the game's HUD colours:


Light blue	`#accbf1`	menu items, headings, bars
White	`#ffffff`	selected items, text
Dark blue	`#323c7f`	focus, slider tracks
Cream	`#e1c063`	highlights
Red	`#b4191d`
Money green	`#36682c`
Mission passed orange	`#dc9a32`	the loading bar

Branding colours¶

A server's branding replaces the light blue (primary) and dark blue (secondary) in SAGL's own documents: the pause menu (your pages included), the message box and the loading screen.

The pause menu's settings in a server's colours

Your own documents don't change by themselves; read the colours from sagl.branding and apply them:

const doc = sagl.ui.openFile("ui/hud.rml", { input: false });
if (sagl.branding.primary) {
  doc.setAttribute("title", "style", `color: ${sagl.branding.primary}`);
}

The game's fonts¶

SAGL reads the player's own models/fonts.txd and data/fonts.dat, so these families draw the game's real fonts:

Family		Characters
`pricedown`	The logo and title font.	Digits, letters (it has one case), `:`, `'` and `.`
`sa-menu`	The menus' capitals.	Digits, letters (one case), `:`
`sa-text`	Subtitles and help text.	Full: ASCII and Western European accents
`sa-gothic`	The gothic script.	Full

Characters pricedown and sa-menu lack (-, $, !, ...) come from sa-text. Curly quotes and dashes become their plain versions. For other scripts and symbols, use Inter (regular, 600 and bold).

.title {
  font-family: pricedown;
  font-size: 40dp;
  color: #ffffff;
  font-effect: outline(2dp #000000);
}
.tab { font-family: sa-menu; font-size: 20dp; color: #accbf1; }

font-size is chosen so the game fonts' capitals match other fonts' at the same size. font-weight and font-style don't apply to them.

Outlines and shadows¶

The game outlines nearly all its text in black. font-effect does the same, drawn the game's way:

font-effect: outline(2dp #000000);
font-effect: shadow(2dp 2dp #000000);

glow and blur work on Inter; on the game's fonts they draw as an outline of their size.