8a3bf505c3
The Features section was a grab-bag of ~27 toggles, most of which are
either category-specific (firewall, SSL, Docker network, SSH hardening)
or install-time choices that brick the box if flipped on a live
install (the WebUI / config / CLI / Docker requirements). One page
made auditing easier but flattened the risk hierarchy.
Reorganised so each toggle lives where it conceptually belongs, and
the dangerous install-time set is double-gated:
network_docker (Advanced) DOCKER_NETWORK, DOCKER_NETWORK_PRUNE,
DOCKER_SWITCHER
network_firewall (Advanced) UFW, UFWD, WHITELIST_PORT_UPDATER [new]
network_domains (field-Adv) SSLCERTS
security_ssh (Advanced) SSHKEY_DOWNLOADER, SSH_DISABLE_PASSWORDS,
BCRYPT_SAVE, GLUETUN_FOR_ALL [new]
general_terminal (Advanced) CRONTAB, CONFIGS_CHECK,
CONFIGS_AUTO_UPDATE, CONFIGS_AUTO_DELETE,
MISSING_IPS, CONTINUE_PROMPT,
SUGGEST_INSTALLS, SUGGEST_METRICS
general_install (Adv+DEV) CONFIG, COMMAND, WEBUI, WEBUI_SERVICE,
DATABASE, PASSWORDS, DOCKER_CE,
DOCKER_COMPOSE
The install-time eight are marked **ADVANCED** **DEV** — invisible
unless Developer Mode is on AND "Show Advanced Options" is expanded.
Each field's description was updated to note "Disabling on an existing
install will brick the system" / "install-time choice only" so a user
who does get to the toggle understands the gun before pulling the
trigger.
Other cleanup that fell out:
- Removed `configs/features/` directory entirely.
- Added the two new subcategories to SUBCATEGORY_ORDER in
network/.category and security/.category.
- Dropped the `category === 'features'` Danger Zone header special-case
in config-manager.js and its .danger-zone-section--header-only CSS
variant (sole user).
- Trimmed an obsolete "Edit the features config" notice in
check_requirements.sh.
Signed-off-by: librelad <librelad@digitalangels.vip>
163 lines
4.5 KiB
CSS
163 lines
4.5 KiB
CSS
/* ============================================================
|
|
Cross-component rules.
|
|
|
|
Per-theme palettes live in frontend/themes/<name>/theme.css and
|
|
are loaded dynamically by js/system/theme-registry.js (plus the
|
|
inline bootstrap in index.html for the current theme on first
|
|
paint). Anything in this file should consume tokens via
|
|
var(--token) so it adapts to whichever theme is active.
|
|
============================================================ */
|
|
|
|
/* Danger zone banner: red-tinted glass card with a solid red left edge.
|
|
Same recipe as the Traefik "not installed" notice but tinted with
|
|
var(--status-danger). Reads cleanly on every theme thanks to alpha
|
|
overlays driven by --status-danger-rgb. */
|
|
.danger-zone-section {
|
|
margin-top: 14px;
|
|
margin-bottom: 14px;
|
|
padding: 20px 24px;
|
|
background: rgba(var(--status-danger-rgb), 0.10);
|
|
border: 1px solid rgba(var(--status-danger-rgb), 0.30);
|
|
border-left: 4px solid var(--status-danger);
|
|
border-radius: 12px;
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.06);
|
|
}
|
|
|
|
.danger-zone-header {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.danger-zone-header h3 {
|
|
margin: 0 0 8px 0;
|
|
color: var(--status-danger);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.danger-zone-header p {
|
|
margin: 0;
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Inline variant — same recipe as .danger-zone-section, smaller padding. */
|
|
.danger-zone-banner {
|
|
background: rgba(var(--status-danger-rgb), 0.10);
|
|
border: 1px solid rgba(var(--status-danger-rgb), 0.30);
|
|
border-left: 4px solid var(--status-danger);
|
|
border-radius: 12px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 18px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 1px 0 rgba(var(--text-rgb), 0.06);
|
|
}
|
|
|
|
.danger-zone-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.danger-zone-icon {
|
|
color: var(--status-danger);
|
|
flex-shrink: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.danger-zone-text {
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.danger-zone-text strong {
|
|
color: var(--status-danger);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Solid status / accent buttons — the default look used by dark-blue
|
|
and light. Nebula overrides these below to get the welcome-button
|
|
gradient + glow recipe. */
|
|
.install-btn,
|
|
.btn-install,
|
|
.app-card .install-btn {
|
|
background: var(--status-success) !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid var(--status-success) !important;
|
|
}
|
|
|
|
.install-btn:hover:not(:disabled),
|
|
.btn-install:hover:not(:disabled),
|
|
.app-card .install-btn:hover:not(:disabled) {
|
|
background: var(--status-success-hover) !important;
|
|
border-color: var(--status-success-hover) !important;
|
|
}
|
|
|
|
.uninstall-btn,
|
|
.btn-uninstall,
|
|
.backup-danger-btn {
|
|
background: var(--status-danger) !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid var(--status-danger) !important;
|
|
}
|
|
|
|
.uninstall-btn:hover:not(:disabled),
|
|
.btn-uninstall:hover:not(:disabled),
|
|
.backup-danger-btn:hover:not(:disabled) {
|
|
background: var(--status-danger-hover) !important;
|
|
border-color: var(--status-danger-hover) !important;
|
|
}
|
|
|
|
.manage-btn,
|
|
.btn-manage,
|
|
.btn-primary,
|
|
.backup-primary-btn,
|
|
.app-card .manage-btn,
|
|
.app-card-actions .manage-btn {
|
|
background: var(--accent) !important;
|
|
color: var(--text-on-accent) !important;
|
|
border: 1px solid var(--accent) !important;
|
|
}
|
|
|
|
.manage-btn:hover:not(:disabled),
|
|
.btn-manage:hover:not(:disabled),
|
|
.btn-primary:hover:not(:disabled),
|
|
.backup-primary-btn:hover:not(:disabled),
|
|
.app-card .manage-btn:hover:not(:disabled),
|
|
.app-card-actions .manage-btn:hover:not(:disabled) {
|
|
background: var(--accent-hover) !important;
|
|
border-color: var(--accent-hover) !important;
|
|
}
|
|
|
|
/* "Back to Apps" — same solid pill as Update Configuration (btn-manage),
|
|
but in amber so it reads as a distinct secondary action. */
|
|
.config-actions .btn-secondary,
|
|
.console-actions .btn-secondary {
|
|
background: var(--status-warning) !important;
|
|
color: #1a1200 !important;
|
|
border: 1px solid var(--status-warning) !important;
|
|
}
|
|
|
|
.config-actions .btn-secondary:hover:not(:disabled),
|
|
.console-actions .btn-secondary:hover:not(:disabled) {
|
|
background: #e0a800 !important;
|
|
border-color: #e0a800 !important;
|
|
}
|
|
|
|
/* Warning banner — amber tint that reads in every theme. */
|
|
.warning-banner {
|
|
background: rgba(var(--status-warning-rgb), 0.12);
|
|
border: 1px solid rgba(var(--status-warning-rgb), 0.35);
|
|
color: var(--text-primary);
|
|
}
|