feat: web dashboard and playground work

The NexusDashboard-parity dashboard (dDashboardServer) and everything built on it on the experimental branch:
accounts, characters, properties and moderation tools, permissions shared with in-game slash commands, economy
reports, World 3D and property 3D views with client scenery, scheduled events (features, vanity changes, live
events, announcements, restarts), vanity files and events, the CDClient browser, the message inspector with saved
captures, chat filter tools, community challenges, live ops, the AI moderator helper, and the server-side changes
they need.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Aaron Kimbrell
2026-09-26 17:52:10 -05:00
parent 854d02f509
commit e213a7aeff
681 changed files with 88310 additions and 1321 deletions

View File

@@ -0,0 +1,85 @@
/* Settings page. Sizes and colours are variables so the layout can be tuned in one place. */
.settings-page {
--settings-nav-width: 15rem;
--settings-sticky-top: 3.25rem; /* below the top bar */
--setting-input-width: 22rem;
--setting-label-min-width: 14rem;
--setting-padding: .85rem 1rem;
--setting-border: 1px solid var(--bs-border-color);
--setting-changed-accent: var(--bs-primary);
--setting-error-accent: var(--bs-danger);
--setting-locked-bg: var(--bs-tertiary-bg);
--setting-meta-color: var(--bs-secondary-color);
--settings-savebar-bg: var(--bs-body-bg);
}
/* ---- layout: category nav beside the sections ---- */
.settings-layout { display: grid; grid-template-columns: var(--settings-nav-width) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--settings-sticky-top) + 4rem); }
.settings-nav .list-group-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; cursor: pointer; border-radius: .375rem; }
.settings-nav .count { font-size: .75rem; color: var(--setting-meta-color); }
.settings-nav .list-group-item.active .count { color: inherit; }
@media (max-width: 991.98px) {
.settings-layout { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
/* Categories become one scrolling row */
.settings-nav { position: static; }
.settings-nav .list-group { flex-direction: row; overflow-x: auto; gap: .25rem; scrollbar-width: none; }
.settings-nav .list-group-item { flex: 0 0 auto; width: auto; white-space: nowrap; border: var(--setting-border); }
}
.settings-toolbar { position: sticky; top: var(--settings-sticky-top); z-index: 5; background: var(--bs-body-bg); padding: .5rem 0; }
.settings-toolbar .form-control { max-width: 22rem; }
/* ---- one setting ---- */
/* Label beside the input when the card is wide enough, above it otherwise. Sized by the card (a container query),
not the window, since the sidebars take a varying share of the width. */
.settings-page .card-body { container-type: inline-size; }
.setting { display: grid; grid-template-columns: minmax(var(--setting-label-min-width), 1fr) minmax(0, var(--setting-input-width)); gap: .5rem 1.5rem; padding: var(--setting-padding); border-top: var(--setting-border); border-left: 3px solid transparent; }
@container (max-width: 40rem) { .setting { grid-template-columns: minmax(0, 1fr); } }
.setting:first-child { border-top: 0; }
.setting.is-changed { border-left-color: var(--setting-changed-accent); background: rgba(var(--bs-primary-rgb), .06); }
.setting.has-error { border-left-color: var(--setting-error-accent); }
.setting-title { font-weight: 600; margin: 0; }
.setting-description { font-size: .875rem; color: var(--setting-meta-color); margin: .15rem 0 0; }
.setting-meta { font-size: .8rem; color: var(--setting-meta-color); margin-top: .25rem; }
.setting-meta code { font-size: .95em; }
.setting-tag { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .4rem; border-radius: .25rem; margin-left: .35rem; vertical-align: .1em; border: 1px solid currentColor; }
.setting-tag.restart { color: var(--bs-warning-text-emphasis); }
.setting-tag.unused { color: var(--setting-meta-color); }
.setting-locked { background: var(--setting-locked-bg); border-radius: .375rem; padding: .5rem .75rem; font-size: .875rem; }
.setting-locked .value { font-family: var(--bs-font-monospace); word-break: break-all; }
.setting-note { font-size: .8rem; margin-top: .35rem; }
.setting-names { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.setting-names .badge { font-weight: 500; }
/* Sections that only matter when another setting is on */
.settings-section-off { border-style: dashed; }
.settings-section-off .card-body { color: var(--setting-meta-color); font-size: .875rem; }
/* Grid layout (e.g. events 1-8) and pairs (help menu title + text) */
.setting-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem 1rem; padding: var(--setting-padding); }
.setting-grid .setting { display: block; padding: 0; border: 0; }
.setting-pair { padding: var(--setting-padding); border-top: var(--setting-border); }
.setting-pair:first-child { border-top: 0; }
.setting-pair .setting { display: block; padding: 0; border: 0; margin-bottom: .5rem; }
/* ---- save bar ---- */
.settings-savebar { position: sticky; bottom: 0; z-index: 6; background: var(--settings-savebar-bg); border-top: var(--setting-border); padding: .75rem 0; margin-top: 1rem; box-shadow: 0 -.5rem 1rem rgba(0, 0, 0, .15); }
/* Picking list values (zones, reward codes) from the client database */
.pick-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .35rem; }
.pick-chip { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
.pick-chip .btn-close { width: .5em; height: .5em; padding: 0; }
.pick-panel > summary { list-style: none; }
.pick-panel > summary::-webkit-details-marker { display: none; }
.pick-body { margin-top: .35rem; border: var(--setting-border); border-radius: .375rem; padding: .35rem; }
.pick-body [data-pick-list] { max-height: var(--pick-list-height, 18rem); overflow-y: auto; }
.pick-option { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem .4rem; border-radius: .25rem; cursor: pointer; }
.pick-option:hover { background: var(--bs-tertiary-bg); }
.pick-option .form-check-input { margin-top: .2rem; flex-shrink: 0; }
/* A category with edits not saved yet */
.unsaved-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--setting-changed-accent); vertical-align: .1em; margin-left: .25rem; }
.settings-nav .list-group-item.active .unsaved-dot { background: #fff; }