Files
redl-fivem-rp/resources/[rp]/rp_ui/html/tokens.css
T
Claude Opus 5andClaude Opus 5 71856b15e9 The server itself: repo now mirrors the machine it runs on, plus install.sh
The repository carried two different servers side by side - the early
`justrp` prototype with its Python auth API, and a snapshot of the real
one under `server-code/`. Only the second one is a server anyone should
start from, so the prototype is gone and the real one moved to the root.

Taken from the live box, so the UI is the finished version (the tokens,
the county-records sheets and the variable fonts landed after the last
snapshot was pushed):

  resources/[rp]/   rp_db, rp_core, rp_session, rp_loading, rp_ui,
                    rp_selftest, rp_dbtest
  bin/              supervise.sh (keep-alive + console FIFO), rcon, init script
  etc/schema.sql    accounts, characters, transactions, inventory, vehicles
  assets/fonts/     the bundled subsets
  docs/SERVER.md    how it is put together, resource by resource

install.sh turns a clean Ubuntu/Debian box into this server in one
command: recommended FXServer build, MariaDB with the schema, resources,
server.cfg + a generated database password, boot entry (systemd or
init.d), then it waits for the Cfx registration. --name/--port/--db-name
let a second server live on the same machine. Tested end to end on a
spare install root: build 25770 fetched, schema applied, boot entry
written, FXServer started and stopped exactly where a wrong licence key
should stop it.

No secrets travel with it: the licence key and the database password live
in data/secrets.cfg on the machine, and .gitignore now names it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-12 23:23:33 +00:00

183 lines
6.0 KiB
CSS

/* ---------------------------------------------------------------------------
Los Santos RP - design tokens.
The interface is a set of documents from the city's Office of Vital Records,
lying on a dark desk while the city runs on behind them. Paper is the only
surface; the game is the room the desk is in. Nothing here is a dark glass
panel, because a city clerk does not hand you one.
Three typographic voices, and the rule between them is literal:
preprinted Archivo, expanded, caps what the form was printed with
typed IBM Plex Mono what somebody entered on it
prose IBM Plex Sans plain-English notes in the margin
Shared verbatim by rp_loading and rp_ui so every screen reads as one product.
--------------------------------------------------------------------------- */
@font-face {
font-family: 'Archivo';
src: url('fonts/archivo-var.woff2') format('woff2-variations');
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: block;
}
@font-face {
font-family: 'Plex Sans';
src: url('fonts/plexsans-var.woff2') format('woff2-variations');
font-weight: 100 700;
font-display: block;
}
@font-face {
font-family: 'Plex Mono';
src: url('fonts/plex-400.woff2') format('woff2');
font-weight: 400;
font-display: block;
}
@font-face {
font-family: 'Plex Mono';
src: url('fonts/plex-500.woff2') format('woff2');
font-weight: 500;
font-display: block;
}
:root {
/* --- the room ---------------------------------------------------------- */
--room: #0b0c0a; /* the dark the desk stands in, never pure black */
--desk: #1a1b16; /* desk surface where the lamp reaches it */
--lamp: rgba(224, 196, 128, 0.10);
/* --- the paper --------------------------------------------------------- */
--stock: #e3dbc2; /* manila card stock: warm, but grey-olive, not cream */
--stock-hi: #efe9d7; /* the top sheet, directly under the lamp */
--stock-2: #cbc09f; /* the sheet underneath, and every tab edge */
--stock-3: #b3a888; /* deepest fold */
/* --- what is written on it --------------------------------------------- */
--ink: #191c18; /* ballpoint black with a green cast */
--ink-2: #4e5449; /* second-rank text */
--ink-3: #7d8175; /* captions, disabled, ruled lines */
/* --- the three official inks, each with exactly one job ---------------- */
--canary: #d9b23c; /* municipal form yellow: what is selected, now */
--canary-dp: #a8801d;
--stamp: #7e2b26; /* oxblood rubber stamp: filed, refused, destroyed */
--verdi: #2e6155; /* municipal teal: checked, valid, approved */
/* rules printed on the form */
--rule: rgba(25, 28, 24, 0.22);
--rule-soft: rgba(25, 28, 24, 0.11);
--rule-firm: rgba(25, 28, 24, 0.55);
/* paper fibre, laid over every sheet at low opacity */
--fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
/* uneven rubber-stamp ink: large soft blobs, not fine noise */
--inkmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 0 0 0 -0.32'/%3E%3C/filter%3E%3Crect width='400' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
/* a sheet of paper casts a real shadow onto the desk */
--lift-1: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -8px rgba(0,0,0,.7);
--lift-2: 0 1px 0 rgba(255,255,255,.34) inset, 0 26px 48px -18px rgba(0,0,0,.82);
--sheet: clamp(360px, 27vw, 460px);
--sheet-w: clamp(440px, 34vw, 580px);
--gut-x: clamp(26px, 2.4vw, 40px);
--gut-y: clamp(22px, 2.2vw, 34px);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
overflow: hidden;
background: var(--room);
color: var(--ink);
font-family: 'Plex Sans', system-ui, sans-serif;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------------------------------------------------------------------------
The three voices.
--------------------------------------------------------------------------- */
/* preprinted: everything the form arrived with */
.pp,
.eyebrow,
.head,
label,
.btn,
.tab,
.ctrl-label,
.charname,
.spawnname,
.stagechip span {
font-family: 'Archivo', system-ui, sans-serif;
font-variation-settings: 'wdth' 112, 'wght' 700;
text-transform: uppercase;
letter-spacing: 0.07em;
}
/* typed: everything a person put on the form */
.data,
.typed,
input,
textarea,
.ctrl-val,
.stepval,
.charmeta,
.charmoney,
.counter,
.stagechip em,
.filetag {
font-family: 'Plex Mono', ui-monospace, monospace;
font-variation-settings: normal;
text-transform: none;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
/* prose: the plain-English notes, the only voice allowed sentence case */
.sub,
.hint,
.spawnblurb,
.switch {
font-family: 'Plex Sans', system-ui, sans-serif;
text-transform: none;
letter-spacing: 0;
}
.eyebrow {
font-size: 10px;
font-variation-settings: 'wdth' 104, 'wght' 600;
letter-spacing: 0.19em;
color: var(--ink-3);
}
.data {
font-size: 11.5px;
color: var(--ink-2);
}
.rule { height: 1px; background: var(--rule); border: 0; }
/* Focus is always the canary, always visible, and never subtle. */
:focus-visible {
outline: 2px solid var(--canary-dp);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}