MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
* HCF theme for MediaWiki — self-contained site CSS
* Generated 2026-09-15
*
* WHAT THIS IS
* The complete HCF theme as one stylesheet. It restyles the Vector skin your
* wiki already has. No skin to install, no files to upload, no PHP, nothing
* registered, LocalSettings.php untouched.
*
* The Silkscreen pixel font is embedded directly in the @font-face rules
* below, so there is nothing else to host. (Silkscreen, (c) 2001 The
* Silkscreen Project Authors, SIL Open Font License 1.1.)
*
* INSTALL
* 1. Go to https://hcf-wiki.com/index.php/MediaWiki:Common.css
* 2. Paste this whole file in and save.
* 3. Hard-reload with Ctrl+Shift+R.
*
* REMOVE
* Blank the page, or undo the edit from its history. A wiki page cannot
* take a wiki down, so this is always reversible from your browser.
*
* EDITING COLOURS
* Every colour is a custom property in the first :root block. Change it once
* there and it propagates through the interface, tables, diffs and
* VisualEditor together:
* --hcf-obsidian page backdrop --hcf-redstone deathban, EOTW, errors
* --hcf-stone panels, headers --hcf-emerald claimed, online
* --hcf-diamond links, active --hcf-gold headings, KOTH, loot
*
* DROPPING THE PIXEL FONT
* Delete the two @font-face blocks. Text falls back to a monospace face and
* everything still works.
*/
/**
* HCF theme entry point (Vector 2022)
*
* Registered in skin.json after `skin.less`, so everything here is an
* override layer. Vector's own stylesheets are left untouched, which keeps
* the skin upgradable: pulling a newer Vector only means re-applying the
* three-line change to skin.json.
*
* Load order matters.
* tokens redefines the Codex CSS custom properties. Must come first.
* fonts mixins only, emits nothing on its own.
* chrome restyles Vector's own furniture.
* content components editors use inside articles.
*/
/**
* HCF theme — palette and design token overrides
*
* Vector 2022 is built on Codex design tokens, which are exposed as CSS custom
* properties (`--color-base`, `--background-color-base`, and so on). Redefining
* those properties re-themes the entire skin, including the parts that come from
* MediaWiki core (tables, diffs, messages, OOUI, VisualEditor) without patching
* every component.
*
* This file must load AFTER `CSSCustomProperties.less`.
*
* Palette reference
* -----------------
* Surfaces are a cold stone-blue ramp (obsidian -> deepslate -> stone).
* Accents are taken from Minecraft's chat colour codes, desaturated just enough
* to hold up as body text on a dark background:
* diamond #5fd8e6 (aqua, §b) links, primary actions
* redstone #ff6b6b (red, §c) danger, deathban, red links
* emerald #5fd97a (green, §a) claimed, online, success
* gold #ffb02e (gold, §6) KOTH, loot, warnings
* amethyst #c69bea (light purple) visited links
*
* Every text/background pair below clears WCAG AA (4.5:1); most clear AAA.
*/
/**
* Dark palette. This is the theme's default.
*/
/**
* Day palette. Sandstone rather than white — still reads as the same wiki,
* just lit. Offered so readers who need a light background are not forced
* off the theme entirely.
*/
@media screen {
:root,
.notheme,
.skin-invert {
color-scheme: dark;
--color-base: #dfe3ea;
--color-base-fixed: #dfe3ea;
--color-emphasized: #ffffff;
--color-subtle: #98a1b0;
--color-placeholder: #78818f;
--color-disabled: #5a626e;
--color-inverted: #0d0e11;
--color-inverted-fixed: #0d0e11;
--color-icon-error: #ff6b6b;
--color-icon-warning: #ffb02e;
--color-icon-success: #5fd97a;
--color-icon-notice: #98a1b0;
--color-progressive: #5fd8e6;
--color-progressive--hover: #8ceaf4;
--color-progressive--active: #3fc3d2;
--color-progressive--focus: #5fd8e6;
--color-visited: #c69bea;
--color-visited--hover: #dbbaf5;
--color-visited--active: #c69bea;
--color-destructive: #ff6b6b;
--color-destructive--hover: #ff9090;
--color-destructive--active: #e04a4a;
--color-destructive--focus: #ff6b6b;
--color-error: #ff6b6b;
--color-warning: #ffb02e;
--color-success: #5fd97a;
--color-notice: #dfe3ea;
--background-color-base: #16181d;
--background-color-base-fixed: #16181d;
--background-color-neutral: #1e2128;
--background-color-neutral-subtle: #0d0e11;
--background-color-interactive: #1e2128;
--background-color-interactive--hover: #262a33;
--background-color-interactive--active: #2f343f;
--background-color-interactive-subtle: #1a1d23;
--background-color-interactive-subtle--hover: #1e2128;
--background-color-interactive-subtle--active: #262a33;
--background-color-disabled: #343a44;
--background-color-disabled-subtle: #1a1d23;
--background-color-inverted: #dfe3ea;
--background-color-transparent: transparent;
--background-color-progressive: #5fd8e6;
--background-color-progressive--hover: #8ceaf4;
--background-color-progressive--active: #3fc3d2;
--background-color-progressive--focus: #5fd8e6;
--background-color-progressive-subtle: #10262b;
--background-color-destructive: #ff6b6b;
--background-color-destructive--hover: #ff9090;
--background-color-destructive--active: #e04a4a;
--background-color-destructive-subtle: #2a1719;
--background-color-error-subtle: #2a1719;
--background-color-warning-subtle: #2a2114;
--background-color-success-subtle: #142a1b;
--background-color-notice-subtle: #141d2a;
--background-color-button-quiet--hover: #1e2128;
--background-color-button-quiet--active: #262a33;
--background-color-input-binary--checked: #5fd8e6;
--background-color-content-added: #2b3f1c;
--background-color-content-removed: #46281a;
--color-content-added: #cfe8b4;
--color-content-removed: #f2c6ad;
--border-color-base: #39404b;
--border-color-subtle: #2a2f38;
--border-color-muted: #22262e;
--border-color-interactive: #4a525f;
--border-color-interactive--hover: #78818f;
--border-color-interactive--active: #98a1b0;
--border-color-disabled: #343a44;
--border-color-inverted: #dfe3ea;
--border-color-transparent: transparent;
--border-color-progressive: #5fd8e6;
--border-color-progressive--hover: #8ceaf4;
--border-color-progressive--active: #3fc3d2;
--border-color-progressive--focus: #5fd8e6;
--border-color-destructive: #ff6b6b;
--border-color-destructive--hover: #ff9090;
--border-color-destructive--active: #e04a4a;
--border-color-destructive--focus: #ff6b6b;
--border-color-error: #ff6b6b;
--border-color-warning: #ffb02e;
--border-color-success: #5fd97a;
--border-color-notice: #39404b;
--border-color-content-added: #4f7030;
--border-color-content-removed: #7d4628;
--box-shadow-color-base: #000000;
--box-shadow-color-progressive--active: #3fc3d2;
--box-shadow-color-progressive--focus: #5fd8e6;
--box-shadow-color-progressive-selected: #5fd8e6;
--box-shadow-color-destructive--focus: #ff6b6b;
--box-shadow-color-inverted: #dfe3ea;
--box-shadow-color-transparent: transparent;
--filter-invert-icon: 1;
--filter-invert-primary-button-icon: 0;
--hcf-obsidian: #0d0e11;
--hcf-stone: #1e2128;
--hcf-bevel-light: rgba(255, 255, 255, 0.08);
--hcf-bevel-dark: #000000;
--hcf-diamond: #5fd8e6;
--hcf-redstone: #ff6b6b;
--hcf-emerald: #5fd97a;
--hcf-gold: #ffb02e;
--hcf-amethyst: #c69bea;
--hcf-sky: #9ecbff;
--hcf-grain: rgba(255, 255, 255, 0.02);
}
html.skin-theme-clientpref-night {
color-scheme: dark;
--color-base: #dfe3ea;
--color-base-fixed: #dfe3ea;
--color-emphasized: #ffffff;
--color-subtle: #98a1b0;
--color-placeholder: #78818f;
--color-disabled: #5a626e;
--color-inverted: #0d0e11;
--color-inverted-fixed: #0d0e11;
--color-icon-error: #ff6b6b;
--color-icon-warning: #ffb02e;
--color-icon-success: #5fd97a;
--color-icon-notice: #98a1b0;
--color-progressive: #5fd8e6;
--color-progressive--hover: #8ceaf4;
--color-progressive--active: #3fc3d2;
--color-progressive--focus: #5fd8e6;
--color-visited: #c69bea;
--color-visited--hover: #dbbaf5;
--color-visited--active: #c69bea;
--color-destructive: #ff6b6b;
--color-destructive--hover: #ff9090;
--color-destructive--active: #e04a4a;
--color-destructive--focus: #ff6b6b;
--color-error: #ff6b6b;
--color-warning: #ffb02e;
--color-success: #5fd97a;
--color-notice: #dfe3ea;
--background-color-base: #16181d;
--background-color-base-fixed: #16181d;
--background-color-neutral: #1e2128;
--background-color-neutral-subtle: #0d0e11;
--background-color-interactive: #1e2128;
--background-color-interactive--hover: #262a33;
--background-color-interactive--active: #2f343f;
--background-color-interactive-subtle: #1a1d23;
--background-color-interactive-subtle--hover: #1e2128;
--background-color-interactive-subtle--active: #262a33;
--background-color-disabled: #343a44;
--background-color-disabled-subtle: #1a1d23;
--background-color-inverted: #dfe3ea;
--background-color-transparent: transparent;
--background-color-progressive: #5fd8e6;
--background-color-progressive--hover: #8ceaf4;
--background-color-progressive--active: #3fc3d2;
--background-color-progressive--focus: #5fd8e6;
--background-color-progressive-subtle: #10262b;
--background-color-destructive: #ff6b6b;
--background-color-destructive--hover: #ff9090;
--background-color-destructive--active: #e04a4a;
--background-color-destructive-subtle: #2a1719;
--background-color-error-subtle: #2a1719;
--background-color-warning-subtle: #2a2114;
--background-color-success-subtle: #142a1b;
--background-color-notice-subtle: #141d2a;
--background-color-button-quiet--hover: #1e2128;
--background-color-button-quiet--active: #262a33;
--background-color-input-binary--checked: #5fd8e6;
--background-color-content-added: #2b3f1c;
--background-color-content-removed: #46281a;
--color-content-added: #cfe8b4;
--color-content-removed: #f2c6ad;
--border-color-base: #39404b;
--border-color-subtle: #2a2f38;
--border-color-muted: #22262e;
--border-color-interactive: #4a525f;
--border-color-interactive--hover: #78818f;
--border-color-interactive--active: #98a1b0;
--border-color-disabled: #343a44;
--border-color-inverted: #dfe3ea;
--border-color-transparent: transparent;
--border-color-progressive: #5fd8e6;
--border-color-progressive--hover: #8ceaf4;
--border-color-progressive--active: #3fc3d2;
--border-color-progressive--focus: #5fd8e6;
--border-color-destructive: #ff6b6b;
--border-color-destructive--hover: #ff9090;
--border-color-destructive--active: #e04a4a;
--border-color-destructive--focus: #ff6b6b;
--border-color-error: #ff6b6b;
--border-color-warning: #ffb02e;
--border-color-success: #5fd97a;
--border-color-notice: #39404b;
--border-color-content-added: #4f7030;
--border-color-content-removed: #7d4628;
--box-shadow-color-base: #000000;
--box-shadow-color-progressive--active: #3fc3d2;
--box-shadow-color-progressive--focus: #5fd8e6;
--box-shadow-color-progressive-selected: #5fd8e6;
--box-shadow-color-destructive--focus: #ff6b6b;
--box-shadow-color-inverted: #dfe3ea;
--box-shadow-color-transparent: transparent;
--filter-invert-icon: 1;
--filter-invert-primary-button-icon: 0;
--hcf-obsidian: #0d0e11;
--hcf-stone: #1e2128;
--hcf-bevel-light: rgba(255, 255, 255, 0.08);
--hcf-bevel-dark: #000000;
--hcf-diamond: #5fd8e6;
--hcf-redstone: #ff6b6b;
--hcf-emerald: #5fd97a;
--hcf-gold: #ffb02e;
--hcf-amethyst: #c69bea;
--hcf-sky: #9ecbff;
--hcf-grain: rgba(255, 255, 255, 0.02);
}
html.skin-theme-clientpref-day {
color-scheme: light;
--color-base: #1d1f24;
--color-base-fixed: #1d1f24;
--color-emphasized: #000000;
--color-subtle: #5b6270;
--color-placeholder: #72798a;
--color-disabled: #9aa0ac;
--color-inverted: #f3f0e7;
--color-inverted-fixed: #ffffff;
--color-progressive: #0a6b78;
--color-progressive--hover: #0d8898;
--color-progressive--active: #084f58;
--color-progressive--focus: #0a6b78;
--color-visited: #6b3f9e;
--color-visited--hover: #855bb5;
--color-destructive: #b32020;
--color-destructive--hover: #cc3333;
--color-error: #b32020;
--color-warning: #8a5a00;
--color-success: #1f7a3d;
--color-notice: #1d1f24;
--background-color-base: #f3f0e7;
--background-color-base-fixed: #f3f0e7;
--background-color-neutral: #e7e2d4;
--background-color-neutral-subtle: #ebe7db;
--background-color-interactive: #e7e2d4;
--background-color-interactive--hover: #dcd5c2;
--background-color-interactive-subtle: #ebe7db;
--background-color-interactive-subtle--hover: #e7e2d4;
--background-color-interactive-subtle--active: #dcd5c2;
--background-color-disabled: #c9c3b2;
--background-color-disabled-subtle: #e4dfd0;
--background-color-inverted: #1d1f24;
--background-color-progressive: #0a6b78;
--background-color-progressive--hover: #0d8898;
--background-color-progressive--active: #084f58;
--background-color-progressive-subtle: #dff0f2;
--background-color-destructive: #b32020;
--background-color-destructive-subtle: #fbe4e4;
--background-color-error-subtle: #fbe4e4;
--background-color-warning-subtle: #fbf0d8;
--background-color-success-subtle: #e2f5e6;
--background-color-notice-subtle: #e7eef5;
--background-color-button-quiet--hover: #e7e2d4;
--background-color-button-quiet--active: #dcd5c2;
--background-color-input-binary--checked: #0a6b78;
--background-color-content-added: #d8ecb8;
--background-color-content-removed: #f6ddc6;
--color-content-added: #1f2a12;
--color-content-removed: #2e1a0d;
--border-color-base: #b9b09a;
--border-color-subtle: #cdc5b1;
--border-color-muted: #ddd6c5;
--border-color-interactive: #9c927c;
--border-color-interactive--hover: #827863;
--border-color-disabled: #c9c3b2;
--border-color-inverted: #f3f0e7;
--border-color-progressive: #0a6b78;
--border-color-destructive: #b32020;
--border-color-error: #b32020;
--border-color-warning: #8a5a00;
--border-color-success: #1f7a3d;
--border-color-notice: #b9b09a;
--box-shadow-color-base: rgba(58, 50, 34, 0.45);
--box-shadow-color-progressive--focus: #0a6b78;
--box-shadow-color-inverted: #ffffff;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--hcf-obsidian: #d6cfbc;
--hcf-stone: #e7e2d4;
--hcf-bevel-light: rgba(255, 255, 255, 0.7);
--hcf-bevel-dark: rgba(58, 50, 34, 0.35);
--hcf-diamond: #0a6b78;
--hcf-redstone: #b32020;
--hcf-emerald: #1f7a3d;
--hcf-gold: #8a5a00;
--hcf-amethyst: #6b3f9e;
--hcf-sky: #2a5fb0;
--hcf-grain: rgba(58, 50, 34, 0.03);
}
html.skin-theme-clientpref-day .notheme,
html.skin-theme-clientpref-day .skin-invert {
color-scheme: light;
--color-base: #1d1f24;
--color-base-fixed: #1d1f24;
--color-emphasized: #000000;
--color-subtle: #5b6270;
--color-placeholder: #72798a;
--color-disabled: #9aa0ac;
--color-inverted: #f3f0e7;
--color-inverted-fixed: #ffffff;
--color-progressive: #0a6b78;
--color-progressive--hover: #0d8898;
--color-progressive--active: #084f58;
--color-progressive--focus: #0a6b78;
--color-visited: #6b3f9e;
--color-visited--hover: #855bb5;
--color-destructive: #b32020;
--color-destructive--hover: #cc3333;
--color-error: #b32020;
--color-warning: #8a5a00;
--color-success: #1f7a3d;
--color-notice: #1d1f24;
--background-color-base: #f3f0e7;
--background-color-base-fixed: #f3f0e7;
--background-color-neutral: #e7e2d4;
--background-color-neutral-subtle: #ebe7db;
--background-color-interactive: #e7e2d4;
--background-color-interactive--hover: #dcd5c2;
--background-color-interactive-subtle: #ebe7db;
--background-color-interactive-subtle--hover: #e7e2d4;
--background-color-interactive-subtle--active: #dcd5c2;
--background-color-disabled: #c9c3b2;
--background-color-disabled-subtle: #e4dfd0;
--background-color-inverted: #1d1f24;
--background-color-progressive: #0a6b78;
--background-color-progressive--hover: #0d8898;
--background-color-progressive--active: #084f58;
--background-color-progressive-subtle: #dff0f2;
--background-color-destructive: #b32020;
--background-color-destructive-subtle: #fbe4e4;
--background-color-error-subtle: #fbe4e4;
--background-color-warning-subtle: #fbf0d8;
--background-color-success-subtle: #e2f5e6;
--background-color-notice-subtle: #e7eef5;
--background-color-button-quiet--hover: #e7e2d4;
--background-color-button-quiet--active: #dcd5c2;
--background-color-input-binary--checked: #0a6b78;
--background-color-content-added: #d8ecb8;
--background-color-content-removed: #f6ddc6;
--color-content-added: #1f2a12;
--color-content-removed: #2e1a0d;
--border-color-base: #b9b09a;
--border-color-subtle: #cdc5b1;
--border-color-muted: #ddd6c5;
--border-color-interactive: #9c927c;
--border-color-interactive--hover: #827863;
--border-color-disabled: #c9c3b2;
--border-color-inverted: #f3f0e7;
--border-color-progressive: #0a6b78;
--border-color-destructive: #b32020;
--border-color-error: #b32020;
--border-color-warning: #8a5a00;
--border-color-success: #1f7a3d;
--border-color-notice: #b9b09a;
--box-shadow-color-base: rgba(58, 50, 34, 0.45);
--box-shadow-color-progressive--focus: #0a6b78;
--box-shadow-color-inverted: #ffffff;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--hcf-obsidian: #d6cfbc;
--hcf-stone: #e7e2d4;
--hcf-bevel-light: rgba(255, 255, 255, 0.7);
--hcf-bevel-dark: rgba(58, 50, 34, 0.35);
--hcf-diamond: #0a6b78;
--hcf-redstone: #b32020;
--hcf-emerald: #1f7a3d;
--hcf-gold: #8a5a00;
--hcf-amethyst: #6b3f9e;
--hcf-sky: #2a5fb0;
--hcf-grain: rgba(58, 50, 34, 0.03);
}
html.skin-theme-clientpref-day .skin-invert-image img,
html.skin-theme-clientpref-day .skin-invert,
html.skin-theme-clientpref-day .oo-ui-iconElement-icon:not( .oo-ui-image-progressive ):not( .oo-ui-image-destructive ):not( .oo-ui-checkboxInputWidget-checkIcon ):not( .oo-ui-image-invert ):not( .mw-no-invert ),
html.skin-theme-clientpref-day .oo-ui-indicatorElement-indicator {
filter: none;
}
}
@media screen and (prefers-color-scheme: light) {
html.skin-theme-clientpref-os {
color-scheme: light;
--color-base: #1d1f24;
--color-base-fixed: #1d1f24;
--color-emphasized: #000000;
--color-subtle: #5b6270;
--color-placeholder: #72798a;
--color-disabled: #9aa0ac;
--color-inverted: #f3f0e7;
--color-inverted-fixed: #ffffff;
--color-progressive: #0a6b78;
--color-progressive--hover: #0d8898;
--color-progressive--active: #084f58;
--color-progressive--focus: #0a6b78;
--color-visited: #6b3f9e;
--color-visited--hover: #855bb5;
--color-destructive: #b32020;
--color-destructive--hover: #cc3333;
--color-error: #b32020;
--color-warning: #8a5a00;
--color-success: #1f7a3d;
--color-notice: #1d1f24;
--background-color-base: #f3f0e7;
--background-color-base-fixed: #f3f0e7;
--background-color-neutral: #e7e2d4;
--background-color-neutral-subtle: #ebe7db;
--background-color-interactive: #e7e2d4;
--background-color-interactive--hover: #dcd5c2;
--background-color-interactive-subtle: #ebe7db;
--background-color-interactive-subtle--hover: #e7e2d4;
--background-color-interactive-subtle--active: #dcd5c2;
--background-color-disabled: #c9c3b2;
--background-color-disabled-subtle: #e4dfd0;
--background-color-inverted: #1d1f24;
--background-color-progressive: #0a6b78;
--background-color-progressive--hover: #0d8898;
--background-color-progressive--active: #084f58;
--background-color-progressive-subtle: #dff0f2;
--background-color-destructive: #b32020;
--background-color-destructive-subtle: #fbe4e4;
--background-color-error-subtle: #fbe4e4;
--background-color-warning-subtle: #fbf0d8;
--background-color-success-subtle: #e2f5e6;
--background-color-notice-subtle: #e7eef5;
--background-color-button-quiet--hover: #e7e2d4;
--background-color-button-quiet--active: #dcd5c2;
--background-color-input-binary--checked: #0a6b78;
--background-color-content-added: #d8ecb8;
--background-color-content-removed: #f6ddc6;
--color-content-added: #1f2a12;
--color-content-removed: #2e1a0d;
--border-color-base: #b9b09a;
--border-color-subtle: #cdc5b1;
--border-color-muted: #ddd6c5;
--border-color-interactive: #9c927c;
--border-color-interactive--hover: #827863;
--border-color-disabled: #c9c3b2;
--border-color-inverted: #f3f0e7;
--border-color-progressive: #0a6b78;
--border-color-destructive: #b32020;
--border-color-error: #b32020;
--border-color-warning: #8a5a00;
--border-color-success: #1f7a3d;
--border-color-notice: #b9b09a;
--box-shadow-color-base: rgba(58, 50, 34, 0.45);
--box-shadow-color-progressive--focus: #0a6b78;
--box-shadow-color-inverted: #ffffff;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--hcf-obsidian: #d6cfbc;
--hcf-stone: #e7e2d4;
--hcf-bevel-light: rgba(255, 255, 255, 0.7);
--hcf-bevel-dark: rgba(58, 50, 34, 0.35);
--hcf-diamond: #0a6b78;
--hcf-redstone: #b32020;
--hcf-emerald: #1f7a3d;
--hcf-gold: #8a5a00;
--hcf-amethyst: #6b3f9e;
--hcf-sky: #2a5fb0;
--hcf-grain: rgba(58, 50, 34, 0.03);
}
}
/**
* HCF theme — typefaces
*
* ============================================================
* EVERY FONT CHOICE IN THE THEME IS MADE IN THIS FILE.
* The three variables in section 2 are the only things you edit.
* ============================================================
*
* The theme uses three slots. They are applied by the "Typography" section
* of chrome.less; you should not need to touch that file to change a face.
*
* PIXEL Wordmark, sidebar headings, scoreboard, timers, table headers,
* rarity badges, command chips, stat numbers.
*
* HEADING h1 through h6 in article content.
*
* BODY Article text, navigation, buttons, forms — everything else.
*
* The pixel/prose split is the theme's one typographic idea: pixel type means
* server data, normal type means prose. Putting a pixel face in the BODY or
* HEADING slot collapses that distinction and makes long pages hard to scan.
* It will work. It is just a worse wiki.
*/
/* ------------------------------------------------------------------
* 1. Load the faces you want to use
*
* Self-hosting is the recommended route: no third-party request on every
* page view, no dependency on an outside service, and it works offline.
* Drop the .woff2 into fonts/ next to this file and add a block like the
* ones below.
*
* `font-display: swap` shows fallback text immediately and swaps when the
* font arrives, rather than leaving readers staring at nothing.
*
* Keep the fonts/ directory where it is. MediaWiki resolves relative url()
* paths against the directory of the stylesheet registered in skin.json;
* both this file and theme.less live in hcf/, so the path is correct
* whichever one the Less compiler resolves against.
* ------------------------------------------------------------------ */
@font-face {
font-family: 'HCF Pixel';
src: url( data:font/woff2;base64,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 ) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HCF Pixel';
src: url( data:font/woff2;base64,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 ) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ------------------------------------------------------------------
* 2. Assign faces to the three slots
*
* Always end a stack with a generic family (sans-serif, serif, monospace)
* so there is something to fall back to. Quote names containing spaces.
* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
* 3. Mixin used by the components. Nothing to configure below here.
* ------------------------------------------------------------------ */
/**
* Pixel faces are drawn on a fixed grid, so they need letter-spacing and a
* size nudge to sit on the same baseline as the surrounding text.
*/
/**
* HCF theme — skin chrome
*
* Structural restyling of Vector 2022's own furniture. The palette is already
* handled by hcf/tokens.less; this file changes shape and texture.
*
* The governing idea is that Minecraft is built out of cubes, so nothing in
* the interface is rounded and nothing has a soft shadow. Depth is drawn the
* way an in-game GUI draws it: a hard one-pixel light edge on the top-left, a
* hard dark edge on the bottom-right, and no blur anywhere.
*/
@media screen {
/**
* == Blockiness ==
* Corners are squared off across the interface. Circles are left alone:
* radio inputs, avatars and progress indicators still need to be round.
*/
:root {
--border-radius-base: 0;
--border-radius-sharp: 0;
--border-radius-pill: 0;
}
.mw-page-container,
.vector-dropdown-content,
.vector-pinnable-element,
.vector-menu-content,
.cdx-button,
.cdx-text-input__input,
.cdx-search-input__input-wrapper,
.cdx-menu,
.cdx-menu-item,
.cdx-message,
.mw-body-content .wikitable,
.mw-body-content pre,
.mw-body-content code,
.mw-body-content .mw-code,
.vector-typeahead-search-container .cdx-text-input__input {
border-radius: 0;
}
/**
* == Typography ==
*
* Font choices are made in fonts.less. This section only applies them, so
* there is no reason to edit typefaces here.
*
* Vector sets h1 and h2 in `@font-family-serif` — Wikipedia's Linux
* Libertine. That reads as an encyclopaedia rather than a game wiki, so
* the theme takes the heading slot back. Vector's rules sit at the same
* specificity and this file loads after them, so these win.
*
* Vector's `:lang( ja )`, `:lang( ko )`, `:lang( he )` and `:lang( ckb )`
* heading overrides are left in place. They are more specific than these
* rules and exist because those scripts render badly in the default
* heading face — worth keeping if the wiki is not English-only.
*/
html,
body,
.mw-body-content,
.cdx-button,
input,
select,
textarea {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2,
.mw-body-content h3,
.mw-body-content .mw-heading3,
.mw-body-content h4,
.mw-body-content .mw-heading4,
.mw-body-content h5,
.mw-body-content h6 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}
/**
* == Page shell ==
* The backdrop behind the content column carries a faint stone grain. The
* reading surface itself is left flat — texture under body copy is the
* fastest way to make a wiki tiring to read.
*/
body {
background-color: var(--hcf-obsidian);
background-image: repeating-linear-gradient(0deg, var(--hcf-grain) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--hcf-grain) 0 1px, transparent 1px 3px);
}
.mw-page-container {
border-left: 2px solid var(--border-color-subtle);
border-right: 2px solid var(--border-color-subtle);
}
::selection {
background-color: var(--hcf-diamond);
color: var(--hcf-obsidian);
}
:focus-visible {
outline: 2px solid var(--hcf-gold);
outline-offset: 1px;
}
/**
* == Header ==
*/
.vector-header-container .mw-header,
.vector-sticky-header {
background-color: var(--hcf-obsidian);
}
.vector-header-container {
border-bottom: 2px solid var(--border-color-base);
}
.vector-sticky-header {
border-bottom: 2px solid var(--border-color-base);
box-shadow: 0 2px 0 0 var(--hcf-bevel-dark);
}
/**
* == Wordmark ==
* The pixel face appears here first, which sets the expectation that
* anything in that face is server data rather than prose.
*/
.mw-logo-wordmark {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 1em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
color: var(--hcf-gold);
}
.mw-logo-tagline {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.7em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
color: var(--color-subtle);
}
.mw-logo-icon {
image-rendering: pixelated;
}
/**
* == Buttons ==
* Quiet buttons stay flat so the header does not turn into a row of
* competing blocks; anything with a real background gets the bevel.
*/
.cdx-button {
border-width: 2px;
font-weight: 600;
transition: none;
}
.cdx-button:not( .cdx-button--weight-quiet ) {
box-shadow: inset 1px 1px 0 0 var(--hcf-bevel-light), inset -1px -1px 0 0 var(--hcf-bevel-dark);
}
.cdx-button:not( .cdx-button--weight-quiet ):active {
box-shadow: inset 1px 1px 0 0 var(--hcf-bevel-dark), inset -1px -1px 0 0 var(--hcf-bevel-light);
transform: translateY(1px);
}
.cdx-button--action-progressive.cdx-button--weight-primary {
color: var(--hcf-obsidian);
}
/**
* == Search ==
*/
.vector-typeahead-search-container .cdx-text-input__input,
.cdx-search-input .cdx-text-input__input {
background-color: var(--hcf-obsidian);
border-width: 2px;
box-shadow: inset 1px 1px 0 0 var(--hcf-bevel-dark), inset -1px -1px 0 0 var(--hcf-bevel-light);
}
.vector-typeahead-search-container .cdx-text-input__input:focus {
border-color: var(--hcf-diamond);
box-shadow: inset 0 0 0 1px var(--hcf-diamond);
}
.cdx-menu {
border-width: 2px;
box-shadow: 3px 3px 0 0 var(--hcf-bevel-dark);
}
/**
* == Namespace and view tabs ==
* The selected tab is a raised block with a solid diamond bar under it,
* rather than Vector's hairline underline.
*/
.vector-menu-tabs .mw-list-item.vector-tab-noicon {
margin: 0 2px;
}
.vector-menu-tabs .mw-list-item.vector-tab-noicon a {
padding: 0 10px;
}
.vector-menu-tabs .mw-list-item.vector-tab-noicon a::after {
height: 3px;
}
.vector-menu-tabs .mw-list-item.selected {
background-color: var(--hcf-stone);
}
.vector-menu-tabs .mw-list-item.selected a::after {
background-color: var(--hcf-diamond);
}
.vector-menu-tabs .mw-list-item:not( .selected ):hover {
background-color: var(--background-color-button-quiet--hover);
}
/**
* == Sidebar, dropdowns and pinned panels ==
*/
.vector-pinnable-element,
.vector-dropdown-content {
background-color: var(--hcf-stone);
border: 2px solid var(--border-color-base);
}
.vector-dropdown-content {
box-shadow: 3px 3px 0 0 var(--hcf-bevel-dark);
}
.vector-menu-heading,
.vector-pinnable-header-label {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
color: var(--hcf-gold);
border-bottom: 2px solid var(--border-color-subtle);
padding-bottom: 6px;
}
.vector-main-menu .vector-menu-content-list .mw-list-item a:hover {
background-color: var(--background-color-button-quiet--hover);
}
/**
* == Table of contents ==
* The active section is marked with a solid diamond rule on the leading
* edge, which is easier to track than a colour change alone.
*/
.vector-toc-list-item {
border-left: 2px solid transparent;
}
.vector-toc-list-item-active {
border-left-color: var(--hcf-diamond);
background-color: var(--background-color-interactive-subtle);
}
/**
* == Content typography ==
* Headings are set in the body face, not the pixel face. The pixel face
* at heading sizes turns every article into a title screen and makes
* scanning harder.
*/
.mw-body h1,
.mw-body-content h1,
.mw-heading1 h1 {
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-emphasized);
border-bottom: 3px solid var(--hcf-diamond);
padding-bottom: 0.25em;
}
.mw-body-content h2,
.mw-heading2 h2 {
font-weight: 700;
border-bottom: 2px solid var(--border-color-base);
padding-bottom: 0.2em;
}
.mw-body-content h3,
.mw-heading3 h3 {
font-weight: 700;
color: var(--color-emphasized);
}
.mw-body-content h2::before,
.mw-heading2 h2::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin-right: 0.5em;
vertical-align: 0.1em;
background-color: var(--hcf-diamond);
}
.mw-body-content blockquote {
border-left: 4px solid var(--hcf-gold);
background-color: var(--background-color-interactive-subtle);
}
.mw-body-content pre,
.mw-body-content .mw-code {
background-color: var(--hcf-obsidian);
border: 2px solid var(--border-color-base);
}
.mw-body-content code {
background-color: var(--hcf-obsidian);
border: 1px solid var(--border-color-base);
color: var(--hcf-emerald);
}
.mw-body-content img {
image-rendering: pixelated;
}
.mw-body-content .hcf-smooth img,
.mw-body-content img.hcf-smooth {
image-rendering: auto;
}
/**
* == Tables ==
*/
.mw-body-content .wikitable {
border: 2px solid var(--border-color-base);
border-collapse: collapse;
}
.mw-body-content .wikitable > * > tr > th {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
background-color: var(--hcf-stone);
color: var(--hcf-gold);
border: 1px solid var(--border-color-base);
text-align: left;
}
.mw-body-content .wikitable > * > tr > td {
border: 1px solid var(--border-color-subtle);
}
.mw-body-content .wikitable > tbody > tr:nth-child( even ) > td {
background-color: var(--background-color-interactive-subtle);
}
.mw-body-content .wikitable > tbody > tr:hover > td {
background-color: var(--background-color-button-quiet--hover);
}
/**
* == Footer ==
*/
.mw-footer-container {
background-color: var(--hcf-obsidian);
border-top: 2px solid var(--border-color-base);
position: relative;
}
.mw-footer-container::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background-image: repeating-linear-gradient(90deg, var(--border-color-base) 0 4px, transparent 4px 8px);
background-repeat: repeat-x;
background-size: 8px 2px;
}
/**
* == Scrollbars ==
* Left square to match everything else.
*/
* {
scrollbar-color: var(--border-color-interactive) var(--hcf-obsidian);
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: var(--hcf-obsidian);
}
::-webkit-scrollbar-thumb {
background-color: var(--border-color-interactive);
border: 2px solid var(--hcf-obsidian);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--color-subtle);
}
}
/**
* HCF theme — content components
*
* Reusable classes for the things a Hardcore Factions wiki actually documents:
* class kits, crate loot, KOTH schedules, deathban rules, faction commands.
* Editors apply them with plain wikitext `class="..."`, so no templates are
* required to get started — though wrapping each one in a template is the
* sane way to run a wiki with more than a couple of editors.
*
* Usage for every component is documented in HCF-THEME.md.
*/
@media screen {
/**
* Opt-in pixel type for anything not covered by a component below.
*/
.hcf-pixel {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 1em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
}
/**
* == Minecraft chat colours ==
* The sixteen colour codes, at their exact in-game values. These are what
* players see on the server, so ranks, kit names and messages quoted on
* the wiki should match them rather than being re-invented.
*
* The four darkest codes are unreadable on a dark surface at their true
* values, so they are lifted just enough to pass contrast while staying
* recognisably the same hue.
*/
.mc-black {
color: #7a7a7a;
}
.mc-dark-blue {
color: #6a6aff;
}
.mc-dark-green {
color: #2fae3f;
}
.mc-dark-aqua {
color: #00aaaa;
}
.mc-dark-red {
color: #e03535;
}
.mc-dark-purple {
color: #c13ac1;
}
.mc-gold {
color: #ffaa00;
}
.mc-gray {
color: #aaaaaa;
}
.mc-dark-gray {
color: #8b8b8b;
}
.mc-blue {
color: #5555ff;
}
.mc-green {
color: #55ff55;
}
.mc-aqua {
color: #55ffff;
}
.mc-red {
color: #ff5555;
}
.mc-light-purple {
color: #ff55ff;
}
.mc-yellow {
color: #ffff55;
}
.mc-white {
color: #ffffff;
}
.mc-bold {
font-weight: 700;
}
.mc-italic {
font-style: italic;
}
.mc-underline {
text-decoration: underline;
}
.mc-strike {
text-decoration: line-through;
}
/**
* == Scoreboard ==
*
* The sidebar every HCF server draws on the right of the screen. It is the
* one piece of the game's interface that players read constantly, so it is
* the piece the wiki reproduces literally — pixel face, tight rows,
* label on the left, live value on the right.
*
* <div class="hcf-scoreboard">
* <div class="hcf-scoreboard-title">Your Server</div>
* <dl>
* <dt class="mc-red">Deathban</dt><dd>29:41</dd>
* <dt class="mc-aqua">Enderpearl</dt><dd>12.3s</dd>
* </dl>
* </div>
*/
.hcf-scoreboard {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
float: right;
clear: right;
width: 17em;
max-width: 100%;
margin: 0 0 1em 1.5em;
background-color: rgba(13, 14, 17, 0.92);
border: 2px solid var(--border-color-base);
box-shadow: 3px 3px 0 0 var(--hcf-bevel-dark);
}
.hcf-scoreboard-title {
padding: 0.5em 0.75em;
text-align: center;
color: var(--hcf-gold);
background-color: var(--hcf-stone);
border-bottom: 2px solid var(--border-color-base);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hcf-scoreboard dl {
margin: 0;
padding: 0.5em 0.75em;
}
.hcf-scoreboard dt {
display: inline-block;
width: 58%;
margin: 0;
padding: 0.2em 0;
font-weight: 400;
}
.hcf-scoreboard dt::before {
content: '\25AA';
margin-right: 0.4em;
color: var(--border-color-interactive);
}
.hcf-scoreboard dd {
display: inline-block;
width: 40%;
margin: 0;
padding: 0.2em 0;
text-align: right;
color: var(--color-emphasized);
}
/**
* == Infobox ==
* For factions, maps, KOTHs, events and staff pages.
*/
.hcf-infobox {
float: right;
clear: right;
width: 22em;
max-width: 100%;
margin: 0 0 1em 1.5em;
background-color: var(--background-color-neutral);
border: 2px solid var(--border-color-base);
box-shadow: 3px 3px 0 0 var(--hcf-bevel-dark);
font-size: 0.9em;
}
.hcf-infobox-title {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.95em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
padding: 0.6em 0.8em;
text-align: center;
color: var(--hcf-obsidian);
background-color: var(--hcf-gold);
}
.hcf-infobox-image {
padding: 0.8em;
text-align: center;
border-bottom: 2px solid var(--border-color-subtle);
}
.hcf-infobox-section {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
padding: 0.4em 0.8em;
color: var(--hcf-gold);
background-color: var(--background-color-interactive-subtle);
border-top: 2px solid var(--border-color-subtle);
border-bottom: 2px solid var(--border-color-subtle);
}
.hcf-infobox table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.hcf-infobox dl {
display: grid;
grid-template-columns: 40% minmax(0, 1fr);
gap: 1px;
margin: 0;
background-color: var(--border-color-muted);
}
.hcf-infobox th,
.hcf-infobox dt {
padding: 0.4em 0.8em;
text-align: left;
font-weight: 600;
color: var(--color-subtle);
vertical-align: top;
}
.hcf-infobox th {
width: 40%;
border-top: 1px solid var(--border-color-muted);
}
.hcf-infobox td,
.hcf-infobox dd {
padding: 0.4em 0.8em;
margin: 0;
}
.hcf-infobox td {
border-top: 1px solid var(--border-color-muted);
}
.hcf-infobox dt,
.hcf-infobox dd {
background-color: var(--background-color-neutral);
}
/**
* == Class kits ==
* Archer, Bard, Rogue, Miner. The accent bar is set per class so a reader
* scanning the page can tell them apart before reading a word.
*/
.hcf-classes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
gap: 1em;
margin: 1em 0;
}
.hcf-class {
background-color: var(--background-color-neutral);
border: 2px solid var(--border-color-base);
border-top: 4px solid var(--border-color-interactive);
padding: 0.9em 1em;
}
.hcf-class-name {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.9em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
display: block;
margin-bottom: 0.2em;
color: var(--color-emphasized);
}
.hcf-class-armour {
display: block;
margin-bottom: 0.6em;
font-size: 0.85em;
color: var(--color-subtle);
}
.hcf-class ul {
margin: 0;
padding-left: 1.1em;
}
.hcf-class--archer {
border-top-color: var(--hcf-emerald);
}
.hcf-class--archer .hcf-class-name {
color: var(--hcf-emerald);
}
.hcf-class--bard {
border-top-color: var(--hcf-gold);
}
.hcf-class--bard .hcf-class-name {
color: var(--hcf-gold);
}
.hcf-class--rogue {
border-top-color: var(--hcf-amethyst);
}
.hcf-class--rogue .hcf-class-name {
color: var(--hcf-amethyst);
}
.hcf-class--miner {
border-top-color: var(--hcf-sky);
}
.hcf-class--miner .hcf-class-name {
color: var(--hcf-sky);
}
.hcf-class--diamond {
border-top-color: var(--hcf-diamond);
}
.hcf-class--diamond .hcf-class-name {
color: var(--hcf-diamond);
}
/**
* == Rarity and tier badges ==
* For crate loot, kit tiers and faction rankings. Uppercase is used here
* because these strings are uppercase in game.
*/
.hcf-rarity {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.75em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
display: inline-block;
padding: 0.25em 0.6em;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hcf-obsidian);
background-color: #9aa3b0;
white-space: nowrap;
}
.hcf-rarity--common {
background-color: #9aa3b0;
}
.hcf-rarity--uncommon {
background-color: #5fd97a;
}
.hcf-rarity--rare {
background-color: #5fd8e6;
}
.hcf-rarity--epic {
background-color: #c69bea;
}
.hcf-rarity--legendary {
background-color: #ffb02e;
}
.hcf-rarity--mythic {
background-color: #ff6b6b;
}
/**
* == Callouts ==
* `--danger` is the deathban / EOTW voice, `--warn` covers rule changes,
* `--note` is neutral background, `--tip` is strategy advice.
*/
.hcf-callout {
display: flow-root;
margin: 1em 0;
padding: 0.8em 1em;
border: 2px solid var(--border-color-base);
border-left-width: 6px;
background-color: var(--background-color-interactive-subtle);
}
.hcf-callout-title {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
display: block;
margin-bottom: 0.35em;
color: var(--color-emphasized);
}
.hcf-callout > :last-child {
margin-bottom: 0;
}
.hcf-callout--danger {
border-color: var(--hcf-redstone);
background-color: var(--background-color-error-subtle);
}
.hcf-callout--danger .hcf-callout-title {
color: var(--hcf-redstone);
}
.hcf-callout--warn {
border-color: var(--hcf-gold);
background-color: var(--background-color-warning-subtle);
}
.hcf-callout--warn .hcf-callout-title {
color: var(--hcf-gold);
}
.hcf-callout--tip {
border-color: var(--hcf-emerald);
background-color: var(--background-color-success-subtle);
}
.hcf-callout--tip .hcf-callout-title {
color: var(--hcf-emerald);
}
.hcf-callout--note {
border-color: var(--hcf-diamond);
background-color: var(--background-color-progressive-subtle);
}
.hcf-callout--note .hcf-callout-title {
color: var(--hcf-diamond);
}
/**
* == Event timer ==
* Map start, EOTW, SOTW protection ending. Deliberately the largest type
* on the page, because on a live server this is the only number that
* changes what a player does next.
*/
.hcf-timer {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4em 1em;
margin: 1em 0;
padding: 1em 1.2em;
background-color: var(--hcf-obsidian);
border: 2px solid var(--hcf-redstone);
box-shadow: 3px 3px 0 0 var(--hcf-bevel-dark);
}
.hcf-timer-label {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
color: var(--color-subtle);
}
.hcf-timer-value {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 1.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
color: var(--hcf-redstone);
line-height: 1.1;
}
.hcf-timer-note {
font-size: 0.85em;
color: var(--color-subtle);
flex-basis: 100%;
}
.hcf-timer--safe {
border-color: var(--hcf-emerald);
}
.hcf-timer--safe .hcf-timer-value {
color: var(--hcf-emerald);
}
/**
* == Commands ==
* `<code class="hcf-cmd">/f claim</code>` inline, or a definition list
* wrapped in `.hcf-commands` for a full reference table.
*/
.hcf-cmd {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.85em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
display: inline-block;
padding: 0.1em 0.45em;
color: var(--hcf-emerald);
background-color: var(--hcf-obsidian);
border: 1px solid var(--border-color-base);
white-space: nowrap;
}
.hcf-cmd-arg {
color: var(--hcf-gold);
}
.hcf-commands {
display: flow-root;
margin: 1em 0;
border: 2px solid var(--border-color-base);
}
.hcf-commands dt {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.85em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
margin: 0;
padding: 0.5em 0.8em;
color: var(--hcf-emerald);
background-color: var(--background-color-interactive-subtle);
border-top: 1px solid var(--border-color-subtle);
}
.hcf-commands dt:first-child {
border-top: 0;
}
.hcf-commands dd {
margin: 0;
padding: 0.5em 0.8em 0.7em 0.8em;
color: var(--color-subtle);
}
/**
* == Loot and KOTH tables ==
* Modifiers on `.wikitable`. Numeric columns are tabular-aligned so
* percentages and coordinates line up down the column.
*/
.mw-body-content .wikitable.hcf-loot td.hcf-chance,
.mw-body-content .wikitable.hcf-koth td.hcf-time,
.mw-body-content .wikitable td.hcf-num {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.85em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--color-emphasized);
}
.mw-body-content .wikitable.hcf-koth th {
white-space: nowrap;
}
/**
* == Server status ==
*/
.hcf-status {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
display: inline-flex;
align-items: center;
gap: 0.45em;
}
.hcf-status::before {
content: '';
width: 8px;
height: 8px;
background-color: var(--color-subtle);
}
.hcf-status--online {
color: var(--hcf-emerald);
}
.hcf-status--online::before {
background-color: var(--hcf-emerald);
}
.hcf-status--offline {
color: var(--hcf-redstone);
}
.hcf-status--offline::before {
background-color: var(--hcf-redstone);
}
.hcf-status--whitelist {
color: var(--hcf-gold);
}
.hcf-status--whitelist::before {
background-color: var(--hcf-gold);
}
/**
* == Chat log ==
* For quoting in-game messages, rule announcements and staff warnings.
*/
.hcf-chat {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.8em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
margin: 1em 0;
padding: 0.8em 1em;
background-color: rgba(13, 14, 17, 0.92);
border: 2px solid var(--border-color-base);
line-height: 1.7;
overflow-x: auto;
}
.hcf-chat p,
.hcf-chat div {
margin: 0;
}
/**
* == Hotbar ==
* A nine-slot inventory row. Each slot takes an <img> of the item sprite,
* with an optional `data-count` for the stack size.
*/
.hcf-hotbar {
display: flex;
gap: 2px;
margin: 1em 0;
padding: 3px;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
overflow-x: auto;
background-color: rgba(13, 14, 17, 0.92);
border: 2px solid var(--border-color-base);
}
.hcf-slot {
position: relative;
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--hcf-stone);
box-shadow: inset 1px 1px 0 0 var(--hcf-bevel-light), inset -1px -1px 0 0 var(--hcf-bevel-dark);
}
.hcf-slot img {
image-rendering: pixelated;
max-width: 32px;
max-height: 32px;
}
.hcf-slot--selected {
outline: 2px solid #ffffff;
outline-offset: 1px;
}
.hcf-slot[data-count]::after {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 0.7em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
content: attr(data-count);
position: absolute;
right: 2px;
bottom: 1px;
color: #ffffff;
text-shadow: 1px 1px 0 #000000;
}
/**
* == Stat grid ==
* Player or faction statistics: kills, deaths, KDR, DTR, points.
*/
.hcf-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
gap: 2px;
margin: 1em 0;
background-color: var(--border-color-base);
border: 2px solid var(--border-color-base);
}
.hcf-stat {
padding: 0.7em 0.8em;
background-color: var(--background-color-neutral);
text-align: center;
}
.hcf-stat-value {
font-family: 'HCF Pixel', 'Silkscreen', 'Departure Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
font-size: 1.15em;
font-weight: 400;
letter-spacing: 0.04em;
font-variant-ligatures: none;
-webkit-font-smoothing: none;
font-smooth: never;
display: block;
color: var(--hcf-diamond);
font-variant-numeric: tabular-nums;
}
.hcf-stat-label {
display: block;
margin-top: 0.2em;
font-size: 0.8em;
color: var(--color-subtle);
}
.hcf-stat--danger .hcf-stat-value {
color: var(--hcf-redstone);
}
.hcf-stat--good .hcf-stat-value {
color: var(--hcf-emerald);
}
/**
* == Hearts ==
* `<span class="hcf-hearts" data-hp="9"></span>` renders nine half-hearts
* worth of health as text, which stays legible to screen readers and in
* print where a sprite row would not.
*/
.hcf-hearts {
color: var(--hcf-redstone);
letter-spacing: 0.1em;
}
.hcf-hearts--absorption {
color: var(--hcf-gold);
}
}
@media screen and (max-width: 640px) {
.hcf-scoreboard {
float: none;
width: 100%;
margin-left: 0;
}
}
@media screen and (max-width: 640px) {
.hcf-infobox {
float: none;
width: 100%;
margin-left: 0;
}
}
/**
* Print: strip the game furniture back to something that photocopies. Floated
* boxes become full-width blocks, dark fills become white.
*/
@media print {
.hcf-scoreboard,
.hcf-hotbar,
.hcf-chat {
display: none;
}
.hcf-infobox {
float: none;
width: auto;
border: 1pt solid #000000;
background: none;
box-shadow: none;
}
.hcf-callout,
.hcf-timer,
.hcf-stats {
border: 1pt solid #000000;
background: none;
box-shadow: none;
}
}