/* Ported verbatim from the original's DefaultColourPalette. Names are the original's so the vocabulary survives. */ :root { --moonbase-own-blue-01: #32a1b2; --moonbase-own-blue-01-light: #5bb4c1; --moonbase-dead-red-02: #ff4962; --moonbase-night-black-03: #011422; --moonbase-white-04: #ffffff; --moonbase-pale-grey-05: #f8f8f8; --moonbase-iron-red-06: #8e3241; --moonbase-iron-red-06-light: #a55b67; --moonbase-own-secondary-blue-07: #7ac3cc; --moonbase-mystery-blue-08: #4fafbd; --moonbase-active-green-10: #32b268; --moonbase-active-green-10-light: #5bc186; --moonbase-inactive-green-10: #5f9ba4; --moonbase-tab-grey-dark-11: #112d39; --moonbase-tab-grey-light-12: #999999; --moonbase-mellow-yellow-13: #e6a146; --moonbase-mud-grey-16: #324855; --moonbase-light-grey-17: #798790; --moonbase-prussian-blue-18: #1a7a7d; --moonbase-prussian-blue-18-light: #619da1; --moonbase-dirty-grey-20: #59686f; --moonbase-suit-blue-21: #5f9ba5; --moonbase-slime-lime-22: #82e9b1; --moonbase-brown-grey-23: #363f43; --moonbase-blue-grey-24: #adb3b7; --moonbase-gun-metal-grey-25: #314955; --moonbase-concrete-grey-26: #939ca1; --moonbase-lazy-grey-27: #58676e; --moonbase-blazer-blue-29: #002b4b; --moonbase-teal: #4b97a5; --moonbase-dark-teal: #348286; --moonbase-gold: #ffe900; --app-background: #f8f8f8; --app-primary-dark: #315568; --app-primary-light: #beccd8; --app-secondary-dark: #7e9ab1; --app-secondary-light: #e9ecf1; --translucent-white: rgba(255, 255, 255, 0.333); --translucent-black: rgba(1, 20, 34, 0.25); --translucent-prussian-blue-18: rgba(26, 122, 125, 0.784); /* A hand-tuned ramp the original used to colour an occupied plot by its owner's rank. */ --rank-tier-0: #000000; --rank-tier-1: #011422; --rank-tier-2: #031a2a; --rank-tier-3: #051e2f; --rank-tier-4: #072234; --rank-tier-5: #082437; --rank-tier-6: #0b283c; --rank-tier-7: #123044; --rank-tier-8: #16364b; --rank-tier-9: #1a394e; --rank-tier-10: #1d3d53; --rank-tier-11: #284b63; --rank-tier-12: #345871; --rank-tier-13: #3d6079; --rank-tier-14: #4a6b82; --rank-tier-15: #58768a; --rank-tier-16: #6b8494; --rank-tier-17: #80929e; --rank-tier-18: #909ba2; --rank-tier-19: #9ea3a6; --rank-tier-20: #acaeaf; /* Every surface below names the text that reads on it, because a background chosen alone is how six screens fell under 4.5:1. */ --on-surface-dark: var(--moonbase-night-black-03); --on-surface-light: var(--moonbase-white-04); /* The pre-game chrome only. Every game screen declares its own surface below. */ --surface-page: var(--app-background); --on-surface-page: var(--text-primary); --surface-raised: var(--app-secondary-light); --surface-sunken: var(--app-primary-light); --text-primary: var(--app-primary-dark); --text-muted: var(--app-secondary-dark); --border-subtle: var(--app-primary-light); --focus-ring: var(--moonbase-own-blue-01); --action-background: var(--app-primary-dark); --action-text: var(--app-primary-light); --danger: var(--moonbase-iron-red-06); /* Selection inverts the pair, ported from PrimaryTabNavigationLinkStyle. */ --tab-background: var(--app-primary-dark); --tab-text: var(--app-primary-light); --tab-selected-background: var(--app-primary-light); --tab-selected-text: var(--app-primary-dark); /* A game screen's own background, ported from the view models that set BackgroundColour; deeper is lighter. */ --surface-moonbase: var(--moonbase-own-blue-01); --on-surface-moonbase: var(--on-surface-dark); --surface-queue: var(--moonbase-night-black-03); --on-surface-queue: var(--on-surface-light); --surface-group: var(--moonbase-dirty-grey-20); --on-surface-group: var(--on-surface-light); --surface-structure: var(--moonbase-concrete-grey-26); --on-surface-structure: var(--on-surface-dark); --surface-players: var(--moonbase-night-black-03); --on-surface-players: var(--on-surface-light); /* Palette.OwnPlayer, which is the colour your own base already is; alliance rows take PrussianBlue18 beside it. */ --surface-own-player: var(--moonbase-own-blue-01); --surface-chat: var(--moonbase-night-black-03); --on-surface-chat: var(--on-surface-light); /* A 1:1 message is the original's own pair: your side keeps the moonbase blue, theirs is the pale card. */ --chat-own-background: var(--moonbase-own-blue-01); --chat-own-text: var(--on-surface-dark); --chat-other-background: var(--moonbase-pale-grey-05); --chat-other-text: var(--on-surface-dark); --surface-unit: var(--moonbase-own-blue-01); --on-surface-unit: var(--on-surface-dark); --surface-attacks: var(--moonbase-own-blue-01); --on-surface-attacks: var(--on-surface-dark); /* What you have sits on the screen's own surface; what you could buy sits on this. */ --surface-structure-next: var(--moonbase-gun-metal-grey-25); --on-surface-structure-next: var(--on-surface-light); --surface-unit-order: var(--moonbase-prussian-blue-18); --on-surface-unit-order: var(--on-surface-light); --surface-map: var(--moonbase-night-black-03); --on-surface-map: var(--on-surface-light); /* Defaults for the disc. A screen overrides the fill with the surface of wherever the disc leads, and the text with it. */ --gauge-fill: var(--moonbase-own-secondary-blue-07); --on-gauge-fill: var(--on-surface-dark); --gauge-track: transparent; --gauge-progress: var(--moonbase-gun-metal-grey-25); /* The original leaves this arc's colour to its renderer; light is what its screenshots show. */ --gauge-required: var(--moonbase-white-04); --gauge-label: var(--on-gauge-fill); --gauge-caption: var(--on-gauge-fill); --gauge-badge: var(--moonbase-night-black-03); --gauge-badge-text: var(--moonbase-concrete-grey-26); --map-background: var(--surface-map); --map-plot-empty: var(--moonbase-blue-grey-24); --map-plot-claimable: var(--moonbase-mystery-blue-08); --map-plot-own: var(--moonbase-own-blue-01); /* VisibleRangeCanvasObject paints AppBackground, so what a radar reaches is a lit patch on a dark field. */ --map-visible-range: var(--app-background); --map-movement-outgoing: var(--moonbase-active-green-10); --map-movement-incoming: var(--moonbase-iron-red-06); }