Commonwealth-Online/Commonwealth-Online-Public
2
0
Fork 0
Code Pull Requests Activity

Remove menu icons and refactor pause menu defaults

Browse Source 
Remove SVG icons from all pause menu items and their associated styles. Change default menu selection from MAP to none, and remove mouseenter selection behavior. Add Futura PT Demibold font and update typography. Remove HUD circle gradient effect from background.
This commit is contained in:
andrew
2026-07-03 23:20:45 +12:00
parent ee6ba81b28
commit 7c1346c95d
4 changed files with 16 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/views/CommonwealthOnline/pause-menu/index.html
+1 -22
View File
@@ -36,57 +36,36 @@
<nav class="menu" id="menu" aria-label="Pause menu">
<button type="button" class="menu-item" data-index="0" data-action="resume">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M8 5v14l11-7z"/></svg>
</span>
<span class="menu-item__label">RESUME</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item is-selected" data-index="1" data-action="map">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>
</span>
<button type="button" class="menu-item" data-index="1" data-action="map">
<span class="menu-item__label">MAP</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item" data-index="2" data-action="social">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
</span>
<span class="menu-item__label">SOCIAL</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item" data-index="3" data-action="server">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M4 1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm0 8h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zM7 4.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm0 8a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/></svg>
</span>
<span class="menu-item__label">SERVER</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item" data-index="4" data-action="settings">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
</span>
<span class="menu-item__label">SETTINGS</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item" data-index="5" data-action="help">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
</span>
<span class="menu-item__label">HELP</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
<button type="button" class="menu-item" data-index="6" data-action="quit">
<span class="menu-item__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.95 6.95 0 0 1 19 12a7 7 0 0 1-7 7 7 7 0 0 1-7-7c0-2.04.87-3.88 2.25-5.17L5.83 5.17A8.96 8.96 0 0 0 3 12a9 9 0 1 0 18 0c0-2.43-.97-4.63-2.53-6.23l-1.64 1.4z"/></svg>
</span>
<span class="menu-item__label">QUIT</span>
<span class="menu-item__bar" aria-hidden="true"></span>
</button>
ui/views/CommonwealthOnline/pause-menu/script.js
+4 -6
View File
@@ -27,7 +27,7 @@
}
var items = Array.prototype.slice.call(menu.querySelectorAll(".menu-item"));
var selectedIndex = 1; // MAP is default
var selectedIndex = -1; // No default selection
function setSelected(index) {
if (index < 0 || index >= items.length) {
@@ -75,10 +75,6 @@
setSelected(index);
activateSelected();
});
item.addEventListener("mouseenter", function () {
setSelected(index);
});
});
document.addEventListener("keydown", function (event) {
@@ -105,7 +101,9 @@
}
});
setSelected(selectedIndex);
if (selectedIndex >= 0) {
setSelected(selectedIndex);
}
// ── Map pan/zoom (concept preview of future Fallout 76-style navigation) ──
// Scroll to zoom, click-drag to pan once zoomed in. Real implementation
ui/views/CommonwealthOnline/pause-menu/styles.css
+11 -31
View File
@@ -1,5 +1,12 @@
/* Commonwealth Online — pause menu concept (1920×1080 baseline) */
@font-face {
font-family: "Futura PT Demibold";
src: url("../../fonts/futura-pt-demibold.otf") format("opentype");
font-weight: 600;
font-display: swap;
}
:root {
/*
* --co-ui-scale is set by JavaScript (script.js) to a numeric value
@@ -24,7 +31,7 @@
--co-select-text: #1a1c18;
--co-border: rgba(201, 168, 74, 0.45);
--co-font: "Roboto Condensed", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
--co-font: "Futura PT Demibold", "Roboto Condensed", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
--co-transition: 120ms ease-out;
--co-panel-width: 28%;
@@ -172,13 +179,6 @@ body {
position: absolute;
inset: 0;
background:
/* faint HUD circle */
radial-gradient(
circle at 12% 88%,
transparent 58%,
rgba(62, 207, 74, 0.04) 59%,
transparent 62%
),
/* horizontal scanlines */
repeating-linear-gradient(
0deg,
@@ -286,22 +286,6 @@ body {
outline: none;
}
.menu-item__icon {
display: flex;
align-items: center;
justify-content: center;
width: calc(22px * var(--co-ui-scale));
height: calc(22px * var(--co-ui-scale));
flex-shrink: 0;
opacity: 0.75;
}
.menu-item__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.menu-item__label {
position: relative;
z-index: 2;
@@ -341,8 +325,9 @@ body {
color: var(--co-text-pale);
}
.menu-item:hover:not(.is-selected) .menu-item__icon {
opacity: 0.95;
.menu-item:hover:not(.is-selected) .menu-item__bar {
opacity: 1;
transform: translateY(-50%) scaleX(1);
}
.menu-item:focus-visible {
@@ -355,11 +340,6 @@ body {
color: var(--co-select-text);
}
.menu-item.is-selected .menu-item__icon {
opacity: 1;
color: var(--co-select-text);
}
.menu-item.is-selected .menu-item__bar {
opacity: 1;
transform: translateY(-50%) scaleX(1);