f91ef84832
All checks were successful
Test Asgard Runner / test (push) Successful in 4s
Tokens ported 1:1 from the Claude Design bundle (colors/game-themes/type/spacing/elevation/motion/fonts) with the data-theme/data-game theming contract via useThemeGame (+ cc-skin-swap repaint guard). 23 design-system components reimplemented as Vue SFCs (core/forms/data/navigation/feedback/brand). DashboardLayout rebuilt as the game-aware shell (GameSwitcher, grouped nav with permission gating preserved, agent-health footer, topbar). DashboardView: Fleet + Solo with per-game GAME_FIELDS rows and the themed ECharts PlayersChart; Solo wired to the real server store, Fleet on representative data pending the multi-instance backend. All four game skins (Rust/Dune/Conan/Soulmask). vue-tsc + vite build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
151 lines
5.3 KiB
CSS
151 lines
5.3 KiB
CSS
/* ============================================================
|
|
Corrosion Control — Game Themes (the re-skin layer)
|
|
------------------------------------------------------------
|
|
The shell is neutral. Each game declares an ACCENT ramp + an
|
|
ATMOSPHERE (backdrop hues for hero headers, login, glows).
|
|
Set on <html data-game="rust"> (or dune / ark / valheim / ...).
|
|
Default (no data-game) = Corrosion brand = Oxide Orange.
|
|
|
|
Accent contract every game must define:
|
|
--accent base fill
|
|
--accent-hover hover fill
|
|
--accent-press pressed / darker
|
|
--accent-contrast text/icon ON the accent fill
|
|
--accent-text accent used AS text on dark surfaces (lightened for AA)
|
|
--accent-soft low-alpha tint background
|
|
--accent-soft-strong
|
|
--accent-border accent hairline
|
|
--accent-glow glow color (box-shadow)
|
|
--game-label printable name
|
|
--atmo-1 / --atmo-2 backdrop gradient stops
|
|
--atmo-haze radial haze color
|
|
============================================================ */
|
|
|
|
/* ---------- Default brand / RUST — Oxide Orange #F26622 ---------- */
|
|
:root,
|
|
[data-game="rust"] {
|
|
--accent: #f26622;
|
|
--accent-hover: #ff7a38;
|
|
--accent-press: #d9550f;
|
|
--accent-contrast: #190d05;
|
|
--accent-text: #ff8a4c;
|
|
--accent-soft: rgba(242, 102, 34, 0.13);
|
|
--accent-soft-strong: rgba(242, 102, 34, 0.22);
|
|
--accent-border: rgba(242, 102, 34, 0.42);
|
|
--accent-glow: rgba(242, 102, 34, 0.50);
|
|
--game-label: "Rust"; /* @kind other */
|
|
--atmo-1: #2c1206;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(242, 102, 34, 0.30);
|
|
}
|
|
|
|
/* ---------- DUNE: AWAKENING — Spice Amber / desert gold ---------- */
|
|
[data-game="dune"] {
|
|
--accent: #e9a53a;
|
|
--accent-hover: #f7b94f;
|
|
--accent-press: #c9851f;
|
|
--accent-contrast: #1c1303;
|
|
--accent-text: #f0bc5e;
|
|
--accent-soft: rgba(233, 165, 58, 0.14);
|
|
--accent-soft-strong: rgba(233, 165, 58, 0.24);
|
|
--accent-border: rgba(233, 165, 58, 0.44);
|
|
--accent-glow: rgba(233, 165, 58, 0.46);
|
|
--game-label: "Dune: Awakening"; /* @kind other */
|
|
--atmo-1: #2c1e08;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(233, 165, 58, 0.30);
|
|
}
|
|
|
|
/* ---------- SOULMASK: Ritual Jade ---------- */
|
|
[data-game="soulmask"] {
|
|
--accent: #43c47e;
|
|
--accent-hover: #59d792;
|
|
--accent-press: #2c9c5f;
|
|
--accent-contrast: #04140c;
|
|
--accent-text: #63d894;
|
|
--accent-soft: rgba(67, 196, 126, 0.14);
|
|
--accent-soft-strong: rgba(67, 196, 126, 0.24);
|
|
--accent-border: rgba(67, 196, 126, 0.42);
|
|
--accent-glow: rgba(67, 196, 126, 0.46);
|
|
--game-label: "Soulmask"; /* @kind other */
|
|
--atmo-1: #08231a;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(67, 196, 126, 0.26);
|
|
}
|
|
|
|
/* ---------- CONAN EXILES: Hyborian Bronze ---------- */
|
|
[data-game="conan"] {
|
|
--accent: #bb7637;
|
|
--accent-hover: #d28d4b;
|
|
--accent-press: #985c24;
|
|
--accent-contrast: #160d03;
|
|
--accent-text: #d59a5e;
|
|
--accent-soft: rgba(187, 118, 55, 0.15);
|
|
--accent-soft-strong: rgba(187, 118, 55, 0.26);
|
|
--accent-border: rgba(187, 118, 55, 0.44);
|
|
--accent-glow: rgba(187, 118, 55, 0.46);
|
|
--game-label: "Conan Exiles"; /* @kind other */
|
|
--atmo-1: #2a1b0b;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(187, 118, 55, 0.30);
|
|
}
|
|
|
|
/* ---------- Room to add more (stubs, ready to ship) ---------- */
|
|
[data-game="ark"] {
|
|
--accent: #36c2a8;
|
|
--accent-hover: #4ad7bd;
|
|
--accent-press: #1f9c86;
|
|
--accent-contrast: #04140f;
|
|
--accent-text: #54dcc2;
|
|
--accent-soft: rgba(54, 194, 168, 0.14);
|
|
--accent-soft-strong: rgba(54, 194, 168, 0.24);
|
|
--accent-border: rgba(54, 194, 168, 0.42);
|
|
--accent-glow: rgba(54, 194, 168, 0.46);
|
|
--game-label: "ARK"; /* @kind other */
|
|
--atmo-1: #07241f;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(54, 194, 168, 0.26);
|
|
}
|
|
|
|
[data-game="valheim"] {
|
|
--accent: #5b9bf0;
|
|
--accent-hover: #74afff;
|
|
--accent-press: #3c7ad4;
|
|
--accent-contrast: #050d1a;
|
|
--accent-text: #7fb2ff;
|
|
--accent-soft: rgba(91, 155, 240, 0.14);
|
|
--accent-soft-strong: rgba(91, 155, 240, 0.24);
|
|
--accent-border: rgba(91, 155, 240, 0.42);
|
|
--accent-glow: rgba(91, 155, 240, 0.46);
|
|
--game-label: "Valheim"; /* @kind other */
|
|
--atmo-1: #0a1c2e;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(91, 155, 240, 0.26);
|
|
}
|
|
|
|
[data-game="palworld"] {
|
|
--accent: #58b6e8;
|
|
--accent-hover: #71c8f6;
|
|
--accent-press: #3a92c4;
|
|
--accent-contrast: #04121b;
|
|
--accent-text: #7fcaf2;
|
|
--accent-soft: rgba(88, 182, 232, 0.14);
|
|
--accent-soft-strong: rgba(88, 182, 232, 0.24);
|
|
--accent-border: rgba(88, 182, 232, 0.42);
|
|
--accent-glow: rgba(88, 182, 232, 0.46);
|
|
--game-label: "Palworld"; /* @kind other */
|
|
--atmo-1: #08222e;
|
|
--atmo-2: #0a0b0e;
|
|
--atmo-haze: rgba(88, 182, 232, 0.26);
|
|
}
|
|
|
|
/* ---------- Light-theme accent legibility ----------
|
|
On light surfaces, accent-as-text reads better at the pressed
|
|
(darker) value. Placed last so it wins for --accent-text when
|
|
data-theme="light" and data-game=* are both on <html>. */
|
|
[data-theme="light"] {
|
|
--accent-text: var(--accent-press);
|
|
--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
--accent-soft-strong: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
}
|