CSS tokens and components

encore.css holds every colour, typeface, size and curve an EndCore interface uses, plus the components built from them. Your own style.css only positions things. This page lists what is available.

<link rel="stylesheet" href="https://cfx-nui-en-ui/ui/encore.css">

#Tokens

All tokens are CSS custom properties on :root. Use them with var(--enc-...).

#Surfaces and hairlines

#Text

#Accent and danger

#Stats

#Typefaces

#Type scale

#Tracking

#Spacing

On a 4px grid at the default root size.

#Easing and durations

#Base styles

Loading encore.css also applies a reset suited to NUI:

• box-sizing: border-box and zero margins and padding on everything.
• html and body fill the screen and never scroll. Opt specific regions in with .enc-scroll.
• body is transparent, uses --enc-font-ui at --enc-t-body, and disables text selection.
• Form controls inherit font, tracking and colour. Buttons have no background or border.
• [hidden] and .enc-hidden are display: none !important.

#Typography

<header>
    <span class="enc-label enc-label--accent">Camp stash</span>
    <h1 class="enc-h1 enc-rule-accent">North Ridge</h1>
    <span class="enc-micro">Weight <span class="enc-num">42.5</span> / <span class="enc-num">80</span> kg</span>
</header>

#Panels and brackets

<article class="enc-panel enc-brackets is-active">
    <span class="enc-label">Selected</span>
    <p>Hunting rifle</p>
</article>

#Buttons

• Disabled buttons turn faint and lose the hover sweep.
• Keyboard focus is drawn as an inset amber ring, because the clipped corner would cut off an outline.

<button class="enc-btn enc-btn--primary">Take all <span class="enc-key">E</span></button>
<button class="enc-btn">Split</button>
<button class="enc-btn enc-btn--danger">Drop</button>
<button class="enc-btn enc-btn--ghost">Cancel <span class="enc-key">ESC</span></button>

#Keycaps

.enc-key is a small monospace keycap for hints like [E] or [ENTER], inside buttons or on its own. Inside a primary button it switches to dark ink.

#Gauges

.enc-bar is a thin horizontal gauge with calibration ticks, used for survival stats and load progress.

<div class="enc-bar enc-bar--thick enc-bar--hunger">
    <div class="enc-bar__fill" style="width: 64%"></div>
    <div class="enc-bar__ticks"></div>
</div>

The fill animates its width with --enc-d-slow and --enc-ease-hard. For bursty values such as load progress, drive it with Encore.progress, which never moves backwards.

Stat modifiers exist for the six stats above. For armour, stamina, oxygen, cold and heat, use the stat tokens.

#Badges and status dots

<span class="enc-badge">Leader</span>
<span class="enc-badge enc-badge--danger">Infected</span>
<span class="enc-dot enc-dot--live"></span> <span class="enc-label">On radio</span>

#Form controls

#Fields

.enc-field styles text inputs, selects and text areas.

• Focus brightens the background and turns the border amber.
• Number and date inputs use the monospace face with tabular figures and dark native pickers.
• select.enc-field has its native arrow removed. Wrap it and add Encore.icon('chevron') yourself.
• textarea.enc-field is at least 4.5rem tall and resizes vertically.

<label>
    <span class="enc-label">Base name</span>
    <input class="enc-field" type="text" maxlength="24" placeholder="North Ridge">
</label>

#Toggles

.enc-toggle is a rectangular switch with a sliding .enc-toggle__knob. Its state lives in aria-checked.

<button class="enc-toggle" role="switch" aria-checked="false" id="blip">
    <span class="enc-toggle__knob"></span>
</button>

const toggle = document.getElementById('blip');
toggle.addEventListener('click', () => {
    const on = toggle.getAttribute('aria-checked') !== 'true';
    toggle.setAttribute('aria-checked', String(on));
});

#Ranges

.enc-range styles a range input. Set the --fill custom property from script so the track shows the value.

<input class="enc-range" type="range" min="0" max="100" value="40" id="volume">

const range = document.getElementById('volume');
const paint = () => range.style.setProperty('--fill', `${range.value}%`);
range.addEventListener('input', paint);
paint();

#Scroll regions

The page itself never scrolls. Give a list .enc-scroll to make it scroll vertically with a thin hairline scrollbar.

#Modals

<div class="enc-scrim" id="confirm" hidden>
    <div class="enc-dialog enc-dialog--danger" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
        <h2 class="enc-h3" id="confirm-title">Abandon base?</h2>
        <p class="enc-dim">Everything stored here will be lost.</p>
        <button class="enc-btn enc-btn--ghost" id="confirm-no">Keep it</button>
        <button class="enc-btn enc-btn--danger" id="confirm-yes">Abandon</button>
    </div>
</div>

Trap focus inside an open dialog with Encore.trapFocus.

#Persistent overlay root

Put class="enc-overlay" on the html element of always-on interfaces such as HUD pieces. The root font size then tracks screen height:

html.enc-overlay {
    font-size: calc(clamp(11px, 1.4815vh, 26px) * var(--enc-overlay-scale, 1));
}

That is 16px at 1080p, clamped between 11px and 26px. Size everything in rem and the overlay is the same physical size on any monitor. Set --enc-overlay-scale to let players resize the whole overlay.

#Icons

.enc-icon styles the SVGs from Encore.icon(): 1.25em square, no fill, currentColor stroke at 1.75, square caps and mitred joins. Change an icon's colour by setting color on it or its parent. See Icons.

#Motion classes

<ul id="roster">
    <li class="enc-panel enc-anim-rise enc-stagger">...</li>
    <li class="enc-panel enc-anim-rise enc-stagger">...</li>
</ul>

Encore.stagger(document.querySelectorAll('#roster li'));

All animation and transition durations collapse to almost nothing under prefers-reduced-motion: reduce.

#Texture layers

.enc-grain, .enc-scanlines, .enc-vignette and .enc-haze are fixed, click-through layers. You don't write them by hand: Encore.mountTexture() injects them. See Texture.

#Related

• Design system
• NUI runtime
• Icons