mirror of
https://github.com/DarkflameUniverse/DarkflameServer.git
synced 2026-10-02 10:53:44 +00:00
e213a7aeff
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>
86 lines
5.6 KiB
CSS
86 lines
5.6 KiB
CSS
/* 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; }
|