6af5eac4d9
The Open-backup-center button was rendering as the raw .btn-secondary fallback (muted grey) because the amber-tinted theme override was scoped only to .config-actions and .console-actions — .backup-title- actions wasn't in the selector list. Result: same shape as Back-to-Apps, totally different colour, looked off. Add .backup-title-actions .btn-secondary to both override blocks (the nebula-theme rule and the default themes.css fallback) so Open backup center now matches Back-to-Apps and the Config Reset button: solid amber in default themes, translucent amber under nebula. Comment also reframed — these aren't "Back to Apps"-specific anymore; they're "step away from this page" secondary actions as a family. Signed-off-by: librelad <librelad@digitalangels.vip>
167 lines
4.8 KiB
CSS
167 lines
4.8 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;
|
|
}
|
|
|
|
/* Amber-tinted secondary across all themes — used by "Back to Apps"
|
|
(.console-actions), Config Reset (.config-actions), and "Open backup
|
|
center" on the per-app Backups tab (.backup-title-actions). One
|
|
visual family for "step away from this page" secondary actions. */
|
|
.config-actions .btn-secondary,
|
|
.console-actions .btn-secondary,
|
|
.backup-title-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),
|
|
.backup-title-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);
|
|
}
|