alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-01 01:33:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

standardize UI colors to fit brand guidelines (#3754)

Browse Source 
## Description:

We have brand colors:

<img width="738" height="900" alt="Screenshot 2026-04-25 at 12 52 29 PM"
src="https://github.com/user-attachments/assets/aac69e87-91f2-4c3f-9f1e-f69f48f5943e"
/>

So update the homepage & in-game UI to use those colors:

<img width="1185" height="946" alt="Screenshot 2026-04-25 at 12 51
06 PM"
src="https://github.com/user-attachments/assets/89a0b12c-2db1-43d4-9500-fcf405c0f7ff"
/>

Also updated buttons to use the o-button element

## 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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

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

evan
This commit is contained in:
Evan
2026-04-25 13:53:21 -06:00
committed by GitHub
parent ca9dc4e2e0
commit 62299c9714
42 changed files with 289 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/AccountModal.ts
+14 -13
View File
@@ -241,12 +241,12 @@ export class AccountModal extends BaseModal {
private renderLogoutButton(): TemplateResult {
return html`
<button
@click="${this.handleLogout}"
class="px-6 py-2 text-sm font-bold text-white uppercase tracking-wider bg-red-600/80 hover:bg-red-600 border border-red-500/50 rounded-lg transition-all shadow-lg hover:shadow-red-900/40"
>
${translateText("account_modal.log_out")}
</button>
<o-button
variant="danger"
size="md"
translationKey="account_modal.log_out"
@click=${this.handleLogout}
></o-button>
`;
}
@@ -318,19 +318,20 @@ export class AccountModal extends BaseModal {
name="email"
.value="${this.email}"
@input="${this.handleEmailInput}"
class="w-full pl-4 pr-12 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/20 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all font-medium hover:bg-white/10"
class="w-full pl-4 pr-12 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/20 focus:outline-none focus:ring-2 focus:ring-malibu-blue/50 focus:border-malibu-blue/50 transition-all font-medium hover:bg-white/10"
placeholder="${translateText(
"account_modal.email_placeholder",
)}"
required
/>
</div>
<button
@click="${this.handleSubmit}"
class="w-full px-6 py-3 text-sm font-bold text-white uppercase tracking-wider bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 rounded-xl transition-all shadow-lg hover:shadow-blue-900/40 border border-white/5"
>
${translateText("account_modal.get_magic_link")}
</button>
<o-button
variant="primary"
width="block"
size="md"
translationKey="account_modal.get_magic_link"
@click=${this.handleSubmit}
></o-button>
</div>
</div>
src/client/FlagInput.ts
+1 -1
View File
@@ -73,7 +73,7 @@ export class FlagInput extends LitElement {
return html`
<button
id="flag-input"
class="flag-btn p-0 m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
class="flag-btn p-0 m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-surface hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
title=${buttonTitle}
@click=${this.onInputClick}
>
src/client/FlagInputModal.ts
+6 -5
View File
@@ -149,15 +149,16 @@ export class FlagInputModal extends BaseModal {
</div>
</div>
<div class="flex justify-center py-3 shrink-0">
<button
class="no-crazygames px-4 py-2 text-sm font-bold uppercase tracking-wider rounded-lg bg-blue-600 hover:bg-blue-700 text-white cursor-pointer transition-colors"
<o-button
class="no-crazygames"
variant="primary"
size="sm"
translationKey="main.store"
@click=${() => {
this.close();
window.showPage?.("page-item-store");
}}
>
${translateText("main.store")}
</button>
></o-button>
</div>
<div
src/client/GameModeSelector.ts
+13 -13
View File
@@ -28,7 +28,7 @@ import {
translateText,
} from "./Utils";
const CARD_BG = "bg-sky-950";
const CARD_BG = "bg-surface";
@customElement("game-mode-selector")
export class GameModeSelector extends LitElement {
@@ -120,7 +120,7 @@ export class GameModeSelector extends LitElement {
${this.renderSmallActionCard(
translateText("main.solo"),
this.openSinglePlayerModal,
"bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700",
"bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80",
)}
</div>
<!-- Create/ranked/join: mobile only, below solo -->
@@ -128,19 +128,19 @@ export class GameModeSelector extends LitElement {
${this.renderSmallActionCard(
translateText("main.create"),
this.openHostLobby,
"bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
"bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
)}
${!crazyGamesSDK.isOnCrazyGames()
? this.renderSmallActionCard(
translateText("mode_selector.ranked_title"),
this.openRankedMenu,
"bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
"bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
)
: html`<div class="invisible"></div>`}
${this.renderSmallActionCard(
translateText("main.join"),
this.openJoinLobby,
"bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
"bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
)}
</div>
<!-- iOS Add to Home Screen banner -->
@@ -192,7 +192,7 @@ export class GameModeSelector extends LitElement {
${this.renderSmallActionCard(
translateText("main.solo"),
this.openSinglePlayerModal,
"bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700",
"bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80",
)}
</div>
<!-- Bottom row: create + ranked + join (desktop only) -->
@@ -200,19 +200,19 @@ export class GameModeSelector extends LitElement {
${this.renderSmallActionCard(
translateText("main.create"),
this.openHostLobby,
"bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
"bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
)}
${!crazyGamesSDK.isOnCrazyGames()
? this.renderSmallActionCard(
translateText("mode_selector.ranked_title"),
this.openRankedMenu,
"bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
"bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
)
: html`<div class="invisible"></div>`}
${this.renderSmallActionCard(
translateText("main.join"),
this.openJoinLobby,
"bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
"bg-surface hover:brightness-[1.08] active:brightness-[0.95] hover:scale-105",
)}
</div>
</div>
@@ -253,7 +253,7 @@ export class GameModeSelector extends LitElement {
return html`
<button
@click=${onClick}
class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-colors text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center"
class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-all duration-200 text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center"
>
${title}
</button>
@@ -299,7 +299,7 @@ export class GameModeSelector extends LitElement {
return html`
<button
@click=${() => this.validateAndJoin(lobby)}
class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-sky-950"
class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface"
>
<!-- Image clipped separately so overflow-hidden doesn't block absolute children -->
<div
@@ -325,7 +325,7 @@ export class GameModeSelector extends LitElement {
${modifierLabels.map(
(label) =>
html`<span
class="px-2 py-1 rounded text-xs font-bold uppercase tracking-widest bg-[#0073b7] text-white shadow-[0_0_6px_rgba(14,165,233,0.35)]"
class="px-2 py-1 rounded text-xs font-bold uppercase tracking-widest bg-malibu-blue text-white shadow-[var(--shadow-malibu-blue-pill)]"
>${label}</span
>`,
)}
@@ -335,7 +335,7 @@ export class GameModeSelector extends LitElement {
<span
class="text-xs font-bold tracking-widest ${timeDisplayUppercase
? "uppercase"
: "normal-case"} bg-[#0073b7] text-white px-2 py-1 rounded"
: "normal-case"} bg-malibu-blue text-white px-2 py-1 rounded"
>${timeDisplay}</span
>
</div>
src/client/GameStartingModal.ts
+1 -1
View File
@@ -33,7 +33,7 @@ export class GameStartingModal extends LitElement {
href="https://github.com/openfrontio/OpenFrontIO/blob/main/CREDITS.md"
target="_blank"
rel="noopener noreferrer"
class="block mb-4 text-lg font-medium tracking-wider uppercase text-sky-400 no-underline transition-colors duration-200 hover:text-sky-300"
class="block mb-4 text-lg font-medium tracking-wider uppercase text-malibu-blue no-underline transition-colors duration-200 hover:text-aquarius"
>${translateText("game_starting_modal.credits")}</a
>
<p class="text-base text-white/40 mb-4">
src/client/HelpModal.ts
+1 -1
View File
@@ -155,7 +155,7 @@ export class HelpModal extends BaseModal {
</p>
<button
id="troubleshooting-button"
class="hover:bg-white/5 px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
class="hover:bg-white/5 px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
data-page="page-troubleshooting"
@click="${this.openTroubleshooting}"
data-i18n="main.go_to_troubleshooting"
src/client/HostLobbyModal.ts
+8 -7
View File
@@ -404,15 +404,16 @@ export class HostLobbyModal extends BaseModal {
<!-- Player List / footer -->
<div class="p-6 pt-4 border-t border-white/10 bg-black/20 shrink-0">
<button
class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-[#0073b7] hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
@click=${this.startGame}
?disabled=${this.clients.length < 2}
>
${this.clients.length === 1
<o-button
variant="primary"
width="block"
size="lg"
.title=${this.clients.length === 1
? translateText("host_modal.waiting")
: translateText("host_modal.start")}
</button>
?disable=${this.clients.length < 2}
@click=${this.startGame}
></o-button>
</div>
</div>
`;
src/client/JoinLobbyModal.ts
+11 -11
View File
@@ -160,7 +160,7 @@ export class JoinLobbyModal extends BaseModal {
class="p-6 lg:p-6 border-t border-white/10 bg-black/20 shrink-0"
>
<button
class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-[#0073b7] hover:bg-sky-500 disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-malibu-blue hover:bg-aquarius disabled:opacity-50 disabled:cursor-not-allowed rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0 disabled:transform-none"
disabled
>
${translateText("private_lobby.joined_waiting")}
@@ -240,13 +240,12 @@ export class JoinLobbyModal extends BaseModal {
@keyup=${this.handleChange}
class="flex-1 px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all font-mono text-sm tracking-wider"
/>
<button
@click=${this.pasteFromClipboard}
class="px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl transition-all group"
title=${translateText("common.paste")}
>
<svg
class="text-white/60 group-hover:text-white transition-colors"
<o-button
variant="ghost"
size="md"
iconPosition="only"
.title=${translateText("common.paste")}
.icon=${html`<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
@@ -258,12 +257,13 @@ export class JoinLobbyModal extends BaseModal {
<path
d="M 15 3 C 13.742188 3 12.847656 3.890625 12.40625 5 L 5 5 L 5 28 L 13 28 L 13 30 L 27 30 L 27 14 L 25 14 L 25 5 L 17.59375 5 C 17.152344 3.890625 16.257813 3 15 3 Z M 15 5 C 15.554688 5 16 5.445313 16 6 L 16 7 L 19 7 L 19 9 L 11 9 L 11 7 L 14 7 L 14 6 C 14 5.445313 14.445313 5 15 5 Z M 7 7 L 9 7 L 9 11 L 21 11 L 21 7 L 23 7 L 23 14 L 13 14 L 13 26 L 7 26 Z M 15 16 L 25 16 L 25 28 L 15 28 Z"
></path>
</svg>
</button>
</svg>`}
@click=${this.pasteFromClipboard}
></o-button>
</div>
<o-button
title=${translateText("private_lobby.join_lobby")}
block
width="block"
submit
></o-button>
</div>
src/client/LanguageModal.ts
+1 -1
View File
@@ -58,7 +58,7 @@ export class LanguageModal extends BaseModal {
buttonClasses +=
" animate-pulse font-bold text-white border-2 border-dashed border-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.2)] bg-gradient-to-r from-red-600 via-yellow-600 via-green-600 via-blue-600 to-purple-600";
} else if (isActive) {
buttonClasses += " bg-blue-500/20 border-blue-500/50";
buttonClasses += " bg-malibu-blue/20 border-malibu-blue/50";
} else {
buttonClasses +=
" bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
src/client/PatternInput.ts
+2 -2
View File
@@ -111,7 +111,7 @@ export class PatternInput extends LitElement {
return html`
<button
id="pattern-input"
class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] rounded-lg overflow-hidden"
class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 bg-surface rounded-lg overflow-hidden"
disabled
>
<span
@@ -131,7 +131,7 @@ export class PatternInput extends LitElement {
return html`
<button
id="pattern-input"
class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
class="pattern-btn m-0 p-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-surface hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
title=${buttonTitle}
@click=${this.onInputClick}
>
src/client/SinglePlayerModal.ts
+6 -5
View File
@@ -348,12 +348,13 @@ export class SinglePlayerModal extends BaseModal {
${translateText("single_modal.options_changed_no_achievements")}
</div>`
: null}
<button
<o-button
variant="primary"
width="block"
size="lg"
translationKey="single_modal.start"
@click=${this.startGame}
class="w-full py-4 text-sm font-bold text-white uppercase tracking-widest bg-[#0073b7] hover:bg-sky-500 rounded-xl transition-all shadow-lg shadow-sky-900/20 hover:shadow-sky-900/40 hover:-translate-y-0.5 active:translate-y-0"
>
${translateText("single_modal.start")}
</button>
></o-button>
</div>
</div>
`;
src/client/Store.ts
+3 -3
View File
@@ -52,7 +52,7 @@ export class StoreModal extends BaseModal {
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "packs"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "packs")}
>
@@ -61,7 +61,7 @@ export class StoreModal extends BaseModal {
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "patterns"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "patterns")}
>
@@ -70,7 +70,7 @@ export class StoreModal extends BaseModal {
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "flags"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "flags")}
>
src/client/TerritoryPatternsModal.ts
+6 -5
View File
@@ -149,15 +149,16 @@ export class TerritoryPatternsModal extends BaseModal {
</div>
</div>
<div class="flex justify-center py-3 shrink-0">
<button
class="no-crazygames px-4 py-2 text-sm font-bold uppercase tracking-wider rounded-lg bg-blue-600 hover:bg-blue-700 text-white cursor-pointer transition-colors"
<o-button
class="no-crazygames"
variant="primary"
size="sm"
translationKey="main.store"
@click=${() => {
this.close();
window.showPage?.("page-item-store");
}}
>
${translateText("main.store")}
</button>
></o-button>
</div>
<div
class="flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent mr-1"
src/client/TroubleshootingModal.ts
+5 -5
View File
@@ -46,12 +46,12 @@ export class TroubleshootingModal extends BaseModal {
>
/ ${translateText("troubleshooting.title")}
</span>
<button
class="hover:bg-white/5 px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
<o-button
variant="primary"
size="sm"
translationKey="common.copy"
@click=${this.copyDiagnostics}
>
${translateText("common.copy")}
</button>
></o-button>
</div>`,
onBack: () => this.close(),
ariaLabel: translateText("common.back"),
src/client/UserSettingModal.ts
+2 -2
View File
@@ -335,7 +335,7 @@ export class UserSettingModal extends BaseModal {
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "basic"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "basic")}
>
@@ -344,7 +344,7 @@ export class UserSettingModal extends BaseModal {
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "keybinds"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-aquarius border border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "keybinds")}
>
src/client/components/DesktopNavBar.ts
+17 -12
View File
@@ -53,12 +53,17 @@ export class DesktopNavBar extends LitElement {
class="hidden lg:flex w-full bg-zinc-900/90 backdrop-blur-md items-center justify-center gap-8 py-4 shrink-0 z-50 relative"
>
<div class="flex flex-col items-center justify-center">
<div class="h-8 text-[#0073b7]">
<img
src=${assetUrl("images/OpenFrontLogo.svg")}
alt="OpenFront"
class="h-full w-auto"
/>
<div class="h-8">
<span
class="block h-full aspect-[1364/259] bg-malibu-blue"
style="-webkit-mask: url(${assetUrl(
"images/OpenFrontLogo.svg",
)}) no-repeat center / contain; mask: url(${assetUrl(
"images/OpenFrontLogo.svg",
)}) no-repeat center / contain;"
role="img"
aria-label="OpenFront"
></span>
</div>
<div
id="game-version"
@@ -68,7 +73,7 @@ export class DesktopNavBar extends LitElement {
<button
class="nav-menu-item ${currentPage === "page-play"
? "active"
: ""} text-white/70 hover:text-[#0073b7] font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
: ""} text-white/70 hover:text-malibu-blue font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
data-page="page-play"
data-i18n="main.play"
></button>
@@ -77,7 +82,7 @@ export class DesktopNavBar extends LitElement {
<button
class="nav-menu-item ${currentPage === "page-news"
? "active"
: ""} text-white/70 hover:text-[#0073b7] font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
: ""} text-white/70 hover:text-malibu-blue font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
data-page="page-news"
data-i18n="main.news"
@click=${this._notifications.onNewsClick}
@@ -97,7 +102,7 @@ export class DesktopNavBar extends LitElement {
<button
class="nav-menu-item ${currentPage === "page-item-store"
? "active"
: ""} text-white/70 hover:text-[#0073b7] font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
: ""} text-white/70 hover:text-malibu-blue font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
data-page="page-item-store"
data-i18n="main.store"
@click=${this._notifications.onStoreClick}
@@ -114,18 +119,18 @@ export class DesktopNavBar extends LitElement {
: ""}
</div>
<button
class="nav-menu-item text-white/70 hover:text-[#0073b7] font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
class="nav-menu-item text-white/70 hover:text-malibu-blue font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
data-page="page-settings"
data-i18n="main.settings"
></button>
<button
class="nav-menu-item text-white/70 hover:text-[#0073b7] font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
class="nav-menu-item text-white/70 hover:text-malibu-blue font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
data-page="page-leaderboard"
data-i18n="main.leaderboard"
></button>
<div class="relative">
<button
class="nav-menu-item text-white/70 hover:text-[#0073b7] font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-[#0073b7] "
class="nav-menu-item text-white/70 hover:text-malibu-blue font-medium tracking-wider uppercase cursor-pointer transition-colors [&.active]:text-malibu-blue "
data-page="page-help"
data-i18n="main.help"
@click=${this._notifications.onHelpClick}
src/client/components/FluentSlider.ts
+3 -3
View File
@@ -86,12 +86,12 @@ export class FluentSlider extends LitElement {
.max=${this.max}
.step=${this.step}
.valueAsNumber=${this.value}
style="background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ${percentage}%, rgba(255, 255, 255, 0.15) ${percentage}%, rgba(255, 255, 255, 0.15) 100%); background-size: 100% 6px; background-repeat: no-repeat; background-position: center; border-radius: 9999px;"
style="background: linear-gradient(to right, var(--color-malibu-blue) 0%, var(--color-malibu-blue) ${percentage}%, rgba(255, 255, 255, 0.15) ${percentage}%, rgba(255, 255, 255, 0.15) 100%); background-size: 100% 6px; background-repeat: no-repeat; background-position: center; border-radius: 9999px;"
class="w-full h-6 p-0 m-0 bg-transparent appearance-none cursor-pointer focus:outline-none
[&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-[6px] [&::-webkit-slider-runnable-track]:cursor-pointer [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:transition-colors
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-malibu-blue [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]
[&::-moz-range-track]:w-full [&::-moz-range-track]:h-[6px] [&::-moz-range-track]:cursor-pointer [&::-moz-range-track]:bg-transparent [&::-moz-range-track]:rounded-full [&::-moz-range-track]:transition-colors
[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]"
[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-malibu-blue [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]"
@input=${this.handleSliderInput}
@change=${this.handleSliderChange}
/>
src/client/components/GameConfigSettings.ts
+3 -3
View File
@@ -24,7 +24,7 @@ import "./FluentSlider";
import "./map/MapPicker";
const ACTIVE_CARD =
"bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.2)]";
"bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue)]";
const INACTIVE_CARD =
"bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
@@ -317,8 +317,8 @@ export class GameConfigSettings extends LitElement {
<div class=${this.sectionGapClass}>
${renderSection(
MAP_ICON,
"text-blue-400",
"bg-blue-500/20",
"text-aquarius",
"bg-malibu-blue/20",
"map.map",
html`<map-picker
.selectedMap=${settings.map.selected}
src/client/components/IOSAddToHomeScreenBanner.ts
+6 -6
View File
@@ -96,14 +96,14 @@ export class IOSAddToHomeScreenBanner extends LitElement {
<ol class="flex flex-col gap-3 text-sm text-slate-200">
<li class="flex items-start gap-3">
<span
class="shrink-0 w-6 h-6 rounded-full bg-[#0073b7] flex items-center justify-center text-white font-bold text-xs"
class="shrink-0 w-6 h-6 rounded-full bg-malibu-blue flex items-center justify-center text-white font-bold text-xs"
>1</span
>
<span>${translateText("ios_banner.step_share")}</span>
</li>
<li class="flex items-start gap-3">
<span
class="shrink-0 w-6 h-6 rounded-full bg-[#0073b7] flex items-center justify-center text-white font-bold text-xs"
class="shrink-0 w-6 h-6 rounded-full bg-malibu-blue flex items-center justify-center text-white font-bold text-xs"
>2</span
>
<span
@@ -117,7 +117,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
</li>
<li class="flex items-start gap-3">
<span
class="shrink-0 w-6 h-6 rounded-full bg-[#0073b7] flex items-center justify-center text-white font-bold text-xs"
class="shrink-0 w-6 h-6 rounded-full bg-malibu-blue flex items-center justify-center text-white font-bold text-xs"
>3</span
>
<span>${translateText("ios_banner.step_open")}</span>
@@ -125,7 +125,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
</ol>
<button
class="w-full py-2.5 rounded-lg bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700 text-white font-semibold transition-colors"
class="w-full py-2.5 rounded-lg bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80 text-white font-semibold transition-colors"
@click=${this.closeGuide}
>
${translateText("ios_banner.got_it")}
@@ -154,7 +154,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
<div class="flex gap-3 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="shrink-0 w-8 h-8 text-[#0073b7]"
class="shrink-0 w-8 h-8 text-malibu-blue"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -171,7 +171,7 @@ export class IOSAddToHomeScreenBanner extends LitElement {
<div class="flex flex-col gap-1.5">
<button
class="w-full py-1.5 rounded-lg bg-[#0073b7] hover:bg-sky-500 active:bg-sky-700 text-white font-semibold text-sm transition-colors"
class="w-full py-1.5 rounded-lg bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80 text-white font-semibold text-sm transition-colors"
@click=${this.openGuide}
>
${translateText("ios_banner.how")}
src/client/components/LobbyPlayerView.ts
+2 -2
View File
@@ -126,7 +126,7 @@ export class LobbyTeamView extends LitElement {
return html`<div
class="px-2 py-1 rounded-sm mb-1 text-xs text-white border
${this.isCurrentPlayer(client)
? "bg-[#0073b7]/20 border-sky-500/40"
? "bg-malibu-blue/20 border-sky-500/40"
: "bg-gray-700/70 border-transparent"}"
>
${displayName}
@@ -242,7 +242,7 @@ export class LobbyTeamView extends LitElement {
return html` <div
class="px-2 py-1 rounded-sm text-xs flex items-center justify-between border
${this.isCurrentPlayer(p)
? "bg-[#0073b7]/20 border-sky-500/40"
? "bg-malibu-blue/20 border-sky-500/40"
: "bg-gray-700/70 border-transparent"}"
>
<span class="truncate text-white">${displayName}</span>
src/client/components/MobileNavBar.ts
+1 -1
View File
@@ -73,7 +73,7 @@ export class MobileNavBar extends LitElement {
>
<!-- Logo + Menu -->
<div
class="flex flex-col text-[#0073b7] mb-[clamp(1rem,2vh,2rem)] ml-[clamp(0.2rem,0.4vw,0.4vh)]"
class="flex flex-col text-malibu-blue mb-[clamp(1rem,2vh,2rem)] ml-[clamp(0.2rem,0.4vw,0.4vh)]"
>
<div class="flex flex-col items-center gap-2">
<img
src/client/components/NewsBox.ts
+1 -1
View File
@@ -115,7 +115,7 @@ export class NewsBox extends LitElement {
return html`
<div
class="px-2 py-2 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-y border-white/10 lg:border-y-0 lg:rounded-xl lg:p-3"
class="px-2 py-2 bg-surface border-y border-white/10 lg:border-y-0 lg:rounded-xl lg:p-3"
>
<div class="flex items-center gap-3">
<span
src/client/components/PlayPage.ts
+3 -3
View File
@@ -19,7 +19,7 @@ export class PlayPage extends LitElement {
<!-- Mobile: Fixed top bar -->
<div
class="lg:hidden fixed left-0 right-0 top-0 z-40 pt-[env(safe-area-inset-top)] bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-b border-white/10"
class="lg:hidden fixed left-0 right-0 top-0 z-40 pt-[env(safe-area-inset-top)] bg-surface border-b border-white/10"
>
<div
class="grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center h-14 px-2 gap-2"
@@ -50,7 +50,7 @@ export class PlayPage extends LitElement {
</button>
<div
class="col-start-2 flex items-center justify-center text-[#0073b7] min-w-0"
class="col-start-2 flex items-center justify-center text-malibu-blue min-w-0"
>
<img
src=${assetUrl("images/OpenFrontLogo.svg")}
@@ -79,7 +79,7 @@ export class PlayPage extends LitElement {
<!-- Username: left col -->
<div
class="px-2 py-2 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] border-y border-white/10 overflow-visible lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:relative lg:z-20 lg:border-y-0 lg:rounded-xl"
class="px-2 py-2 bg-surface border-y border-white/10 overflow-visible lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:relative lg:z-20 lg:border-y-0 lg:rounded-xl"
>
<div class="flex items-center gap-2 min-w-0 w-full">
<username-input
src/client/components/RankedModal.ts
+1 -1
View File
@@ -128,7 +128,7 @@ export class RankedModal extends BaseModal {
return html`
<button
@click=${onClick}
class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-[color-mix(in_oklab,var(--frenchBlue)_70%,black)] border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3"
class="flex flex-col w-full h-28 sm:h-32 rounded-2xl bg-surface border-0 transition-transform hover:scale-[1.02] active:scale-[0.98] p-6 items-center justify-center gap-3"
>
<div class="flex flex-col items-center gap-1 text-center">
<h3
src/client/components/ToggleInputCard.ts
+2 -2
View File
@@ -3,11 +3,11 @@ import { customElement, property } from "lit/decorators.js";
import { translateText } from "../Utils";
const ACTIVE_CARD =
"bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.2)]";
"bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue)]";
const INACTIVE_CARD =
"bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20";
const INPUT_CLASS =
"w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-blue-500 p-1 my-1";
"w-full text-center rounded bg-black/60 text-white text-sm font-bold border border-white/20 focus:outline-none focus:border-malibu-blue p-1 my-1";
const CARD_LABEL_CLASS =
"text-xs uppercase font-bold tracking-wider leading-tight break-words hyphens-auto";
src/client/components/baseComponents/Button.ts
+76 -28
View File
@@ -1,51 +1,99 @@
import { LitElement, html } from "lit";
import { LitElement, TemplateResult, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { translateText } from "../../Utils";
type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
type ButtonSize = "sm" | "md" | "lg";
type ButtonWidth = "auto" | "block" | "blockDesktop" | "fill";
type IconPosition = "left" | "right" | "only";
@customElement("o-button")
export class OButton extends LitElement {
@property({ type: String }) title = "";
@property({ type: String }) translationKey = "";
@property({ type: Boolean }) secondary = false;
@property({ type: Boolean }) block = false;
@property({ type: Boolean }) blockDesktop = false;
@property() title = "";
@property() translationKey = "";
@property() variant: ButtonVariant = "primary";
@property() size: ButtonSize = "md";
@property() width: ButtonWidth = "auto";
@property() iconPosition: IconPosition = "left";
@property({ attribute: false }) icon?: TemplateResult;
@property({ type: Boolean }) disable = false;
@property({ type: Boolean }) fill = false;
@property({ type: Boolean }) submit = false;
private static readonly BASE_CLASS =
"bg-[#0073b7] hover:bg-sky-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
createRenderRoot() {
return this;
}
private getButtonClasses(): Record<string, boolean> {
return {
[OButton.BASE_CLASS]: true,
"w-full block": this.block,
"h-full w-full flex items-center justify-center": this.fill,
"lg:w-auto lg:inline-block":
!this.block && !this.blockDesktop && !this.fill,
"lg:w-1/2 lg:mx-auto lg:block": this.blockDesktop,
"bg-gray-700 text-gray-100 hover:bg-gray-600": this.secondary,
"disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none disabled:bg-gray-600":
this.disable,
};
private readonly BASE =
"font-bold uppercase tracking-wider rounded-xl border border-transparent " +
"transition-all duration-300 transform hover:-translate-y-px " +
"outline-none text-center whitespace-normal break-words leading-tight overflow-hidden relative " +
"disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:opacity-70";
private variantClasses(): string {
switch (this.variant) {
case "primary":
return "bg-malibu-blue hover:bg-aquarius text-white disabled:bg-gray-600 disabled:text-gray-300";
case "secondary":
return "bg-gray-700 hover:bg-gray-600 text-white disabled:bg-gray-800 disabled:text-gray-400";
case "danger":
return "bg-red-600 hover:bg-red-500 text-white disabled:bg-red-900 disabled:text-gray-300";
case "ghost":
return "bg-transparent hover:bg-white/10 text-malibu-blue disabled:text-gray-500 disabled:hover:bg-transparent";
}
}
private sizeClasses(): string {
if (this.iconPosition === "only") {
switch (this.size) {
case "sm":
return "w-8 h-8 text-sm";
case "md":
return "w-10 h-10 text-base";
case "lg":
return "w-12 h-12 text-lg";
}
}
switch (this.size) {
case "sm":
return "py-1.5 px-3 text-sm";
case "md":
return "py-3 px-4 text-base lg:text-lg";
case "lg":
return "py-4 px-6 text-lg lg:text-xl";
}
}
private widthClasses(): string {
switch (this.width) {
case "auto":
return "inline-flex items-center justify-center gap-2";
case "block":
return "flex w-full items-center justify-center gap-2";
case "blockDesktop":
return "flex w-full items-center justify-center gap-2 lg:w-1/2 lg:mx-auto";
case "fill":
return "flex w-full h-full items-center justify-center gap-2";
}
}
render() {
const label =
this.translationKey === ""
? this.title
: translateText(this.translationKey);
const iconOnly = this.iconPosition === "only";
const classes = `${this.BASE} ${this.variantClasses()} ${this.sizeClasses()} ${this.widthClasses()}`;
return html`
<button
class=${classMap(this.getButtonClasses())}
class=${classes}
?disabled=${this.disable}
type=${this.submit ? "submit" : "button"}
aria-label=${iconOnly ? label : nothing}
>
<span class="block min-w-0">
${this.translationKey === ""
? this.title
: translateText(this.translationKey)}
</span>
${this.icon && this.iconPosition !== "right" ? this.icon : nothing}
${iconOnly ? nothing : html`<span class="min-w-0">${label}</span>`}
${this.icon && this.iconPosition === "right" ? this.icon : nothing}
</button>
`;
}
src/client/components/baseComponents/ranking/PlayerRow.ts
+1 -1
View File
@@ -240,7 +240,7 @@ export class PlayerRow extends LitElement {
private renderTag(tag: string) {
return html`
<div
class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 text-blue-300 font-bold text-xs tracking-wide group-hover:bg-blue-500/20 transition-colors"
class="px-2.5 py-1 rounded bg-malibu-blue/10 border border-malibu-blue/20 text-aquarius font-bold text-xs tracking-wide group-hover:bg-malibu-blue/20 transition-colors"
>
${tag}
</div>
src/client/components/baseComponents/ranking/RankingControls.ts
+1 -1
View File
@@ -64,7 +64,7 @@ export class RankingControls extends LitElement {
return html`
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest hover:text-white hover:bg-white/5 border ${active
? "bg-blue-500/20 text-blue-400 border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-aquarius border-malibu-blue/30 shadow-[var(--shadow-malibu-blue)]"
: "text-white/40 border-transparent"}"
@click=${() => this.onSort(type)}
>
src/client/components/baseComponents/setting/SettingSlider.ts
+4 -4
View File
@@ -70,11 +70,11 @@ export class SettingSlider extends LitElement {
<input
type="range"
class="flex-1 w-auto appearance-none h-2 bg-transparent rounded outline-none
[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,#3b82f6_0%,#3b82f6_var(--fill),rgba(255,255,255,0.1)_var(--fill),rgba(255,255,255,0.1)_100%)]
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]
[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,var(--color-malibu-blue)_0%,var(--color-malibu-blue)_var(--fill),rgba(255,255,255,0.1)_var(--fill),rgba(255,255,255,0.1)_100%)]
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-malibu-blue [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]
[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-white/10
[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded [&::-moz-range-progress]:bg-blue-500
[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]"
[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded [&::-moz-range-progress]:bg-malibu-blue
[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-malibu-blue [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-sm)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[var(--shadow-malibu-blue-ring-lg)]"
min=${this.min}
max=${this.max}
.value=${String(this.value)}
src/client/components/baseComponents/stats/GameList.ts
+1 -1
View File
@@ -46,7 +46,7 @@ export class GameList extends LitElement {
>
<div class="flex items-center gap-4">
<button
class="p-2 bg-blue-500/20 rounded-lg text-blue-400"
class="p-2 bg-malibu-blue/20 rounded-lg text-aquarius"
@click=${() => this.onViewGame?.(game.gameId)}
>
<svg
src/client/components/map/MapDisplay.ts
+1 -1
View File
@@ -86,7 +86,7 @@ export class MapDisplay extends LitElement {
@keydown="${this.handleKeydown}"
class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 gap-3 group ${this
.selected
? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
? "bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue-strong)]"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"}"
>
${this.isLoading
src/client/components/map/MapPicker.ts
+3 -3
View File
@@ -125,7 +125,7 @@ export class MapPicker extends LitElement {
class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all active:scale-95 ${this
.showAllMaps
? "text-white/60 hover:text-white"
: "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"}"
: "bg-malibu-blue/20 text-white shadow-[var(--shadow-malibu-blue-soft)]"}"
@click=${() => (this.showAllMaps = false)}
>
${translateText("map.featured")}
@@ -136,7 +136,7 @@ export class MapPicker extends LitElement {
aria-selected=${this.showAllMaps}
class="px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-all active:scale-95 ${this
.showAllMaps
? "bg-blue-500/20 text-blue-100 shadow-[0_0_12px_rgba(59,130,246,0.2)]"
? "bg-malibu-blue/20 text-white shadow-[var(--shadow-malibu-blue-soft)]"
: "text-white/60 hover:text-white"}"
@click=${() => (this.showAllMaps = true)}
>
@@ -160,7 +160,7 @@ export class MapPicker extends LitElement {
type="button"
class="w-full h-full p-3 flex flex-col items-center justify-between rounded-xl border cursor-pointer transition-all duration-200 active:scale-95 gap-3 group ${this
.useRandomMap
? "bg-blue-500/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.3)]"
? "bg-malibu-blue/20 border-malibu-blue/50 shadow-[var(--shadow-malibu-blue-strong)]"
: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1"}"
@click=${this.handleSelectRandomMap}
>
src/client/graphics/layers/AttacksDisplay.ts
+6 -6
View File
@@ -283,7 +283,7 @@ export class AttacksDisplay extends LitElement implements Layer {
> `,
onClick: async () => this.attackWarningOnClick(attack),
className:
"text-left text-sky-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
"text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
translate: false,
})}
${!attack.retreating
@@ -293,7 +293,7 @@ export class AttacksDisplay extends LitElement implements Layer {
className: "ml-auto text-left shrink-0",
disabled: attack.retreating,
})
: html`<span class="ml-auto truncate text-blue-400"
: html`<span class="ml-auto truncate text-aquarius"
>(${translateText("events_display.retreating")}...)</span
>`}
</div>
@@ -319,7 +319,7 @@ export class AttacksDisplay extends LitElement implements Layer {
><span class="ml-1">${renderTroops(landAttack.troops)}</span>
${translateText("help_modal.ui_wilderness")}`,
className:
"text-left text-sky-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
"text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
translate: false,
})}
${!landAttack.retreating
@@ -329,7 +329,7 @@ export class AttacksDisplay extends LitElement implements Layer {
className: "ml-auto text-left shrink-0",
disabled: landAttack.retreating,
})
: html`<span class="ml-auto truncate text-blue-400"
: html`<span class="ml-auto truncate text-aquarius"
>(${translateText("events_display.retreating")}...)</span
>`}
</div>
@@ -374,7 +374,7 @@ export class AttacksDisplay extends LitElement implements Layer {
>`,
onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)),
className:
"text-left text-blue-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
"text-left text-aquarius inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
translate: false,
})}
${!boat.retreating()
@@ -384,7 +384,7 @@ export class AttacksDisplay extends LitElement implements Layer {
className: "ml-auto text-left shrink-0",
disabled: boat.retreating(),
})
: html`<span class="ml-auto truncate text-blue-400"
: html`<span class="ml-auto truncate text-aquarius"
>(${translateText("events_display.retreating")}...)</span
>`}
</div>
src/client/graphics/layers/ControlPanel.ts
+6 -6
View File
@@ -158,13 +158,13 @@ export class ControlPanel extends LitElement implements Layer {
<div class="h-full flex">
${greenPercent > 0
? html`<div
class="h-full bg-sky-700 transition-[width] duration-200"
class="h-full bg-malibu-blue transition-[width] duration-200"
style="width: ${greenPercent}%;"
></div>`
: ""}
${orangePercent > 0
? html`<div
class="h-full bg-[#0073b7] transition-[width] duration-200"
class="h-full bg-aquarius transition-[width] duration-200"
style="width: ${orangePercent}%;"
></div>`
: ""}
@@ -213,13 +213,13 @@ export class ControlPanel extends LitElement implements Layer {
<div class="h-full flex">
${greenPercent > 0
? html`<div
class="h-full bg-sky-700 transition-[width] duration-200"
class="h-full bg-malibu-blue transition-[width] duration-200"
style="width: ${greenPercent}%;"
></div>`
: ""}
${orangePercent > 0
? html`<div
class="h-full bg-[#0073b7] transition-[width] duration-200"
class="h-full bg-aquarius transition-[width] duration-200"
style="width: ${orangePercent}%;"
></div>`
: ""}
@@ -326,7 +326,7 @@ export class ControlPanel extends LitElement implements Layer {
.value=${String(Math.round(this.attackRatio * 100))}
@input=${(e: Event) => this.handleRatioSliderInput(e)}
@pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
class="flex-1 h-1.5 accent-blue-500 cursor-pointer"
class="flex-1 h-1.5 accent-aquarius cursor-pointer"
/>
</div>
`;
@@ -373,7 +373,7 @@ export class ControlPanel extends LitElement implements Layer {
.value=${String(Math.round(this.attackRatio * 100))}
@input=${(e: Event) => this.handleRatioSliderInput(e)}
@pointerup=${(e: Event) => this.handleRatioSliderPointerUp(e)}
class="w-full h-1.5 accent-blue-500 cursor-pointer"
class="w-full h-1.5 accent-aquarius cursor-pointer"
/>
</div>
</div>
src/client/graphics/layers/PlayerInfoOverlay.ts
+9 -9
View File
@@ -322,18 +322,18 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
<div
class="flex flex-1 flex-col items-center justify-center text-xs font-bold ${attackingTroops >
0
? "text-sky-400"
? "text-aquarius"
: "text-white/40"} drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]"
translate="no"
>
<span class="flex items-center gap-px leading-none text-xs"
><img
src=${soldierIcon}
class="w-2.5 h-2.5"
style="${attackingTroops > 0
? "filter: brightness(0) saturate(100%) invert(62%) sepia(80%) saturate(500%) hue-rotate(175deg) brightness(100%); opacity:1"
: "filter: brightness(0) invert(1); opacity:0.4"}"
/>↑</span
><span
class="w-2.5 h-2.5 inline-block"
style="background-color: ${attackingTroops > 0
? "var(--color-aquarius)"
: "rgba(255,255,255,0.4)"}; -webkit-mask: url(${soldierIcon}) no-repeat center / contain; mask: url(${soldierIcon}) no-repeat center / contain;"
></span
>↑</span
>
<span class="tabular-nums leading-none text-sm mt-0.5"
>${renderTroops(attackingTroops)}</span
@@ -429,7 +429,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
: ""}
${orangePercent > 0
? html`<div
class="h-full bg-[#0073b7] transition-[width] duration-200"
class="h-full bg-malibu-blue transition-[width] duration-200"
style="width: ${orangePercent}%;"
></div>`
: ""}
src/client/graphics/layers/ReplayPanel.ts
+1 -1
View File
@@ -98,7 +98,7 @@ export class ReplayPanel extends LitElement implements Layer {
private renderSpeedButton(value: ReplaySpeedMultiplier, label: string) {
const backgroundColor =
this._replaySpeedMultiplier === value ? "bg-blue-400" : "";
this._replaySpeedMultiplier === value ? "bg-malibu-blue" : "";
return html`
<button
src/client/graphics/layers/SpawnTimer.ts
+5 -2
View File
@@ -18,7 +18,10 @@ export class SpawnTimer extends LitElement implements Layer {
private ratios = [0];
private _barVisible = false;
private colors = ["rgba(0, 128, 255, 0.7)", "rgba(0, 0, 0, 0.5)"];
private colors = [
"rgb(from var(--color-malibu-blue) r g b / 0.7)",
"rgba(0, 0, 0, 0.5)",
];
private isVisible = false;
@@ -43,7 +46,7 @@ export class SpawnTimer extends LitElement implements Layer {
this.ratios = [
this.game.ticks() / this.game.config().numSpawnPhaseTurns(),
];
this.colors = ["rgba(0, 128, 255, 0.7)"];
this.colors = ["rgb(from var(--color-malibu-blue) r g b / 0.7)"];
} else {
this.ratios = [];
this.colors = [];
src/client/graphics/layers/WinModal.ts
+19 -16
View File
@@ -73,30 +73,33 @@ export class WinModal extends LitElement implements Layer {
? "flex justify-between gap-2.5"
: "hidden"}"
>
<button
<o-button
variant="primary"
width="block"
class="flex-1"
translationKey="win_modal.exit"
@click=${this._handleExit}
class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
>
${translateText("win_modal.exit")}
</button>
></o-button>
${this.isRankedGame
? html`
<button
<o-button
variant="primary"
width="block"
class="flex-1"
translationKey="win_modal.requeue"
@click=${this._handleRequeue}
class="flex-1 px-3 py-3 text-base cursor-pointer bg-purple-600 text-white border-0 rounded-sm transition-all duration-200 hover:bg-purple-500 hover:-translate-y-px active:translate-y-px"
>
${translateText("win_modal.requeue")}
</button>
></o-button>
`
: null}
<button
@click=${this.hide}
class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
>
${this.game?.myPlayer()?.isAlive()
<o-button
variant="primary"
width="block"
class="flex-1"
.title=${this.game?.myPlayer()?.isAlive()
? translateText("win_modal.keep")
: translateText("win_modal.spectate")}
</button>
@click=${this.hide}
></o-button>
</div>
</div>
`;
src/client/styles.css
+29 -4
View File
@@ -5,7 +5,32 @@
@theme {
--default-ring-width: 3px;
--default-ring-color: var(text-[#0073b7]);
--default-ring-color: var(--color-malibu-blue);
/* Openfront.io brand palette — see Openfront_Brand_Guidelines.pdf §4 */
--color-malibu-blue: #0084d1;
--color-aquarius: #3fa9f5;
--color-dawn-blue: #cccccc;
--color-bright-white: #ffffff;
/* Openfront Masters sub-brand */
--color-cyber-yellow: #ffd700;
--color-limestone: #999999;
/* Background & decorative — not for standalone UI use */
--color-deep-navy: #0a1628;
--color-hex-cyan: #00c8ff;
--color-frame-orange: #f97316;
/* App-specific surface colors */
--color-surface: #0a1628;
--shadow-malibu-blue: 0 0 15px rgba(0, 132, 209, 0.2);
--shadow-malibu-blue-soft: 0 0 12px rgba(0, 132, 209, 0.2);
--shadow-malibu-blue-strong: 0 0 15px rgba(0, 132, 209, 0.3);
--shadow-malibu-blue-pill: 0 0 6px rgba(0, 132, 209, 0.35);
--shadow-malibu-blue-ring-sm: 0 0 0 4px rgba(0, 132, 209, 0.2);
--shadow-malibu-blue-ring-lg: 0 0 0 6px rgba(0, 132, 209, 0.3);
}
@layer base {
@@ -113,7 +138,7 @@ body {
padding: 15px 20px;
font-size: 16px;
cursor: pointer;
background-color: #0073b7;
background-color: var(--color-malibu-blue);
color: white;
border: none;
border-radius: 8px;
@@ -123,7 +148,7 @@ body {
}
.start-game-button:not(:disabled):hover {
background-color: #0073b7;
background-color: var(--color-aquarius);
}
.start-game-button:disabled {
@@ -580,7 +605,7 @@ label.option-card:hover {
/* News Button Notification */
news-button .active button {
position: relative;
border-color: #0073b7 !important;
border-color: var(--color-malibu-blue) !important;
border-width: 2px !important;
box-shadow:
0 0 0 1px rgba(37, 99, 235, 0.5),
src/client/styles/components/button.css
-88
View File
@@ -1,88 +0,0 @@
.c-button {
background: var(--primaryColor);
color: #fff;
cursor: pointer;
outline: none;
display: inline-block;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
text-align: center;
padding: 0.8rem 1rem;
border-radius: 0.75rem;
transition: var(--transition);
@media (min-width: 1024px) {
font-size: 18px;
}
}
.c-button:hover,
.c-button:active,
.c-button:focus {
background: var(--primaryColorHover);
transition: var(--transition);
transform: translateY(-1px);
}
.c-button:disabled {
background: var(--primaryColorDisabled);
opacity: 0.7;
cursor: not-allowed;
transition: var(--transition);
}
.c-button--secondary {
background: var(--secondaryColor);
color: var(--fontColor);
}
.c-button--secondary:hover,
.c-button--secondary:active,
.c-button--secondary:focus {
background: var(--secondaryColorHover);
}
.c-button--block {
display: block;
width: 100%;
}
.c-button--blockDesktop {
display: block;
width: 100%;
@media (min-width: 1024px) {
width: auto;
margin: 0 auto;
}
}
.dark .c-button {
background: var(--primaryColorDark);
color: var(--fontColorLight);
}
.dark .c-button:hover,
.dark .c-button:active,
.dark .c-button:focus {
background: var(--primaryColorHoverDark);
}
.dark .c-button:disabled {
background: var(--primaryColorDisabledDark);
opacity: 0.7;
}
.dark .c-button--secondary {
background: var(--secondaryColorDark);
color: var(--fontColorDark);
}
.dark .c-button--secondary:hover,
.dark .c-button--secondary:active,
.dark .c-button--secondary:focus {
background: var(--secondaryColorHoverDark);
}
src/client/styles/core/variables.css
+7 -14
View File
@@ -7,33 +7,26 @@
--fontColor: #202020;
--fontColorLight: #fff;
/* Palette: Deep French Blue / Muted Cyan / Black / Forest Teal */
--frenchBlue: #1f3a70; /* Deeper French Blue */
--cyanBlue: #0f6ca3; /* Muted Cyan secondary */
--tealAccent: #1f6c5a; /* Darker Teal accent */
--primaryColor: var(--frenchBlue);
--primaryColorHover: var(--tealAccent);
--primaryColorHover: var(--color-malibu-blue);
--primaryColorDisabled: linear-gradient(
to right,
rgb(74, 74, 74),
rgb(61, 61, 61)
);
--secondaryColor: var(--cyanBlue);
--secondaryColorHover: var(--cyanBlue);
--secondaryColor: var(--color-malibu-blue);
--secondaryColorHover: var(--color-aquarius);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--primaryColorDark: var(--frenchBlue);
--primaryColorHoverDark: var(--tealAccent);
--primaryColorHoverDark: var(--color-malibu-blue);
--primaryColorDisabledDark: #4b5563;
--secondaryColorDark: var(--tealAccent);
--secondaryColorHoverDark: var(--frenchBlue);
--secondaryColorDark: var(--color-malibu-blue);
--secondaryColorHoverDark: var(--color-aquarius);
--fontColorDark: #f3f4f6;
/* Achievements */
--medal-easy: #cd7f32;
--medal-medium: #c0c0c0;
--medal-hard: #ffd700;
--medal-hard: var(--color-cyber-yellow);
--medal-impossible: #d32f2f;
--medal-custom: #2196f3;
}
src/client/styles/layout/header.css
+1 -1
View File
@@ -30,6 +30,6 @@
}
.l-header__highlightText {
color: #0073b7;
color: var(--color-malibu-blue);
font-weight: 700;
}