Add data-driven pause menu settings view
Introduce a new SETTINGS view to the pause menu with two tabs: GAME SETTINGS (placeholder to open vanilla Fallout 4 settings) and MULTIPLAYER SETTINGS (data-driven custom options). Adds HTML for the settings panel and tabs, comprehensive CSS for tab/pane/row styling, and a large JS update that provides: F4SE/C++ bridge stubs (openGameSettings, setMultiplayerSetting, onBack, onOpenView), a multiplayerSettings data model, rendering and keyboard navigation (tab/content focus, row movement, value cycling), prompt-bar updates, and view-mode transitions (pause/map/settings). Also: map interaction refinements, map blur handling, open settings by default, and documentation updates in changelog.md and docs/dev-log.md.
This commit is contained in:
@@ -601,6 +601,497 @@ body {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Settings view (GAME / MULTIPLAYER tabs) ──────────────────── */
|
||||
/*
|
||||
* Pause nav stays on the far left with SETTINGS selected.
|
||||
* A single translucent panel holds two Fallout-style tabs and the
|
||||
* active tab content. Game Settings only explains opening vanilla FO4
|
||||
* settings; Multiplayer Settings is the custom CO options list.
|
||||
*/
|
||||
|
||||
.settings-view {
|
||||
position: absolute;
|
||||
top: calc(114px * var(--co-ui-scale));
|
||||
left: max(calc(320px * var(--co-ui-scale)), calc(28% + 20px * var(--co-ui-scale)));
|
||||
right: calc(32px * var(--co-ui-scale));
|
||||
bottom: calc(52px * var(--co-ui-scale));
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
transition: opacity 180ms ease-out, visibility 180ms ease-out;
|
||||
}
|
||||
|
||||
.settings-view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding:
|
||||
calc(16px * var(--co-ui-scale))
|
||||
calc(20px * var(--co-ui-scale))
|
||||
calc(12px * var(--co-ui-scale));
|
||||
background: rgba(6, 12, 8, 0.78);
|
||||
border: 1px solid rgba(201, 168, 74, 0.28);
|
||||
box-shadow:
|
||||
inset 0 0 28px rgba(0, 0, 0, 0.35),
|
||||
0 2px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.settings-panel__heading {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: calc(14px * var(--co-ui-scale));
|
||||
font-size: calc(22px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--co-amber);
|
||||
}
|
||||
|
||||
/* Fallout-style tab row */
|
||||
|
||||
.settings-tabs {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: calc(4px * var(--co-ui-scale));
|
||||
margin-bottom: calc(16px * var(--co-ui-scale));
|
||||
border-bottom: 1px solid rgba(62, 207, 74, 0.22);
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: calc(44px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(10px * var(--co-ui-scale))
|
||||
calc(16px * var(--co-ui-scale));
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
background: rgba(4, 10, 6, 0.35);
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(15px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
background var(--co-transition),
|
||||
border-color var(--co-transition);
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
color: var(--co-text-pale);
|
||||
background: rgba(62, 207, 74, 0.08);
|
||||
}
|
||||
|
||||
.settings-tab.is-selected {
|
||||
color: var(--co-select-text);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--co-select-yellow) 0%,
|
||||
var(--co-select-yellow-bright) 100%
|
||||
);
|
||||
border-color: rgba(201, 168, 74, 0.55);
|
||||
box-shadow: 0 0 12px rgba(196, 168, 75, 0.2);
|
||||
}
|
||||
|
||||
.settings-tabs.is-focus-region .settings-tab.is-selected {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(62, 207, 74, 0.45),
|
||||
0 0 14px rgba(196, 168, 75, 0.28);
|
||||
}
|
||||
|
||||
.settings-tabs.is-focus-region .settings-tab:not(.is-selected) {
|
||||
outline: 1px solid rgba(62, 207, 74, 0.2);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
/* Tab panes */
|
||||
|
||||
.settings-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.settings-pane[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settings-pane--game {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding:
|
||||
calc(20px * var(--co-ui-scale))
|
||||
calc(8px * var(--co-ui-scale))
|
||||
calc(8px * var(--co-ui-scale));
|
||||
gap: calc(16px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-pane__heading {
|
||||
font-size: calc(18px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--co-text-pale);
|
||||
}
|
||||
|
||||
.settings-pane__description {
|
||||
max-width: calc(640px * var(--co-ui-scale));
|
||||
font-size: calc(15px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.5;
|
||||
color: var(--co-text-muted);
|
||||
}
|
||||
|
||||
.settings-open-btn {
|
||||
margin-top: calc(8px * var(--co-ui-scale));
|
||||
min-width: calc(360px * var(--co-ui-scale));
|
||||
min-height: calc(48px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(12px * var(--co-ui-scale))
|
||||
calc(24px * var(--co-ui-scale));
|
||||
border: 1px solid rgba(201, 168, 74, 0.45);
|
||||
background: rgba(8, 16, 10, 0.65);
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(16px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
background var(--co-transition),
|
||||
border-color var(--co-transition),
|
||||
box-shadow var(--co-transition);
|
||||
}
|
||||
|
||||
.settings-open-btn:hover,
|
||||
.settings-open-btn.is-focused {
|
||||
color: var(--co-select-text);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--co-select-yellow) 0%,
|
||||
var(--co-select-yellow-bright) 100%
|
||||
);
|
||||
border-color: rgba(201, 168, 74, 0.7);
|
||||
box-shadow: 0 0 14px rgba(196, 168, 75, 0.25);
|
||||
}
|
||||
|
||||
.settings-pane--game.is-focus-region .settings-open-btn {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(62, 207, 74, 0.4),
|
||||
0 0 14px rgba(196, 168, 75, 0.22);
|
||||
}
|
||||
|
||||
.settings-pane__note {
|
||||
max-width: calc(560px * var(--co-ui-scale));
|
||||
font-size: calc(12px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.45;
|
||||
color: var(--co-text-muted);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Multiplayer settings list */
|
||||
|
||||
.settings-pane--multiplayer {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.settings-rows {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(2px * var(--co-ui-scale));
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
padding: calc(2px * var(--co-ui-scale)) 0;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(2px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-section + .settings-section {
|
||||
margin-top: calc(10px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-section__heading {
|
||||
padding:
|
||||
calc(6px * var(--co-ui-scale))
|
||||
calc(14px * var(--co-ui-scale))
|
||||
calc(4px * var(--co-ui-scale));
|
||||
font-size: calc(11px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--co-amber);
|
||||
border-bottom: 1px solid rgba(62, 207, 74, 0.15);
|
||||
margin-bottom: calc(2px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
|
||||
align-items: center;
|
||||
gap: calc(20px * var(--co-ui-scale));
|
||||
min-height: calc(40px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(8px * var(--co-ui-scale))
|
||||
calc(14px * var(--co-ui-scale));
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(16px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
background var(--co-transition);
|
||||
}
|
||||
|
||||
.settings-row__label {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--co-text-pale);
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.settings-row__value {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: calc(12px * var(--co-ui-scale));
|
||||
min-width: 0;
|
||||
color: var(--co-text-pale);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settings-row__value-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Selected row: solid amber bar with a thin green leading edge */
|
||||
|
||||
.settings-row__bar {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--co-select-yellow) 0%,
|
||||
var(--co-select-yellow-bright) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity var(--co-transition);
|
||||
z-index: 1;
|
||||
box-shadow:
|
||||
inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
|
||||
0 0 12px rgba(196, 168, 75, 0.2);
|
||||
}
|
||||
|
||||
.settings-row:hover:not(.is-selected) {
|
||||
background: rgba(201, 168, 74, 0.08);
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-row__bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settings-row.is-selected,
|
||||
.settings-row.is-selected .settings-row__label,
|
||||
.settings-row.is-selected .settings-row__value,
|
||||
.settings-row.is-selected .settings-row__value-text,
|
||||
.settings-row.is-selected .settings-cycler__arrow,
|
||||
.settings-row.is-selected .settings-slider__pct {
|
||||
color: var(--co-select-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settings-rows.is-focus-region .settings-row.is-selected .settings-row__bar {
|
||||
box-shadow:
|
||||
inset calc(3px * var(--co-ui-scale)) 0 0 0 var(--co-green),
|
||||
0 0 0 1px rgba(62, 207, 74, 0.35),
|
||||
0 0 14px rgba(196, 168, 75, 0.28);
|
||||
}
|
||||
|
||||
.settings-row.is-readonly:not(.is-selected) .settings-row__label,
|
||||
.settings-row.is-readonly:not(.is-selected) .settings-row__value-text {
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
/* Cycler: < value > */
|
||||
|
||||
.settings-cycler {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(10px * var(--co-ui-scale));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.settings-cycler__arrow {
|
||||
flex-shrink: 0;
|
||||
font-size: calc(14px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
color: var(--co-amber-muted);
|
||||
opacity: 0.75;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-cycler__arrow {
|
||||
color: var(--co-select-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.settings-row.is-readonly .settings-cycler__arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Slider control */
|
||||
|
||||
.settings-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(14px * var(--co-ui-scale));
|
||||
width: min(100%, calc(260px * var(--co-ui-scale)));
|
||||
}
|
||||
|
||||
.settings-slider__track {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: calc(2px * var(--co-ui-scale));
|
||||
background: rgba(216, 221, 208, 0.35);
|
||||
}
|
||||
|
||||
.settings-slider__fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(216, 221, 208, 0.85);
|
||||
}
|
||||
|
||||
.settings-slider__thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: calc(4px * var(--co-ui-scale));
|
||||
height: calc(14px * var(--co-ui-scale));
|
||||
background: var(--co-text-pale);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.settings-slider__pct {
|
||||
flex-shrink: 0;
|
||||
min-width: calc(42px * var(--co-ui-scale));
|
||||
font-size: calc(15px * var(--co-ui-scale));
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--co-text-pale);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-slider__track {
|
||||
background: rgba(26, 28, 24, 0.35);
|
||||
}
|
||||
|
||||
.settings-row.is-selected .settings-slider__fill,
|
||||
.settings-row.is-selected .settings-slider__thumb {
|
||||
background: var(--co-select-text);
|
||||
}
|
||||
|
||||
/* Description footer */
|
||||
|
||||
.settings-description {
|
||||
flex-shrink: 0;
|
||||
margin-top: calc(6px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(12px * var(--co-ui-scale))
|
||||
calc(14px * var(--co-ui-scale))
|
||||
calc(4px * var(--co-ui-scale));
|
||||
border-top: 1px solid rgba(201, 168, 74, 0.18);
|
||||
min-height: calc(44px * var(--co-ui-scale));
|
||||
font-size: calc(13px * var(--co-ui-scale));
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.45;
|
||||
color: var(--co-text-muted);
|
||||
}
|
||||
|
||||
/* Settings prompt bar */
|
||||
|
||||
.prompt-bar--settings {
|
||||
gap: calc(28px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.prompt-bar--settings .prompt[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prompt__glyph--text {
|
||||
min-width: calc(28px * var(--co-ui-scale));
|
||||
height: calc(22px * var(--co-ui-scale));
|
||||
padding: 0 calc(6px * var(--co-ui-scale));
|
||||
border-radius: 2px;
|
||||
font-size: calc(11px * var(--co-ui-scale));
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Settings mode: keep pause nav, dim map more, hide server panel */
|
||||
|
||||
.pause-screen.is-settings-mode .left-panel {
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(8, 14, 10, 0.9) 0%,
|
||||
rgba(8, 14, 10, 0.78) 65%,
|
||||
rgba(8, 14, 10, 0.15) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.pause-screen.is-settings-mode .menu-item__bar {
|
||||
width: calc(100% + 28px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.pause-screen.is-settings-mode .server-panel {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.pause-screen.is-settings-mode .map-overlay {
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(6, 10, 8, 0.88) 0%,
|
||||
rgba(6, 10, 8, 0.55) 24%,
|
||||
rgba(6, 10, 8, 0.4) 55%,
|
||||
rgba(6, 10, 8, 0.48) 100%
|
||||
),
|
||||
rgba(4, 8, 6, 0.32);
|
||||
}
|
||||
|
||||
/* ── Responsive tweaks ───────────────────────────────────────── */
|
||||
/*
|
||||
* Sizing is already fluid via --co-ui-scale (see :root), which now scales
|
||||
|
||||
Reference in New Issue
Block a user