Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(backup): "Open backup center" inherits the amber Back-to-Apps treatment

Browse Source 
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>
This commit is contained in:
librelad 2026-05-28 01:42:35 +01:00
parent 95d7bb93dd
commit 6af5eac4d9
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
containers/libreportal/frontend/css/themes.css
View File

@ -139,17 +139,21 @@
border-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important;
} }
/* "Back to Apps" — same solid pill as Update Configuration (btn-manage), /* Amber-tinted secondary across all themes — used by "Back to Apps"
but in amber so it reads as a distinct secondary action. */ (.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, .config-actions .btn-secondary,
.console-actions .btn-secondary { .console-actions .btn-secondary,
.backup-title-actions .btn-secondary {
background: var(--status-warning) !important; background: var(--status-warning) !important;
color: #1a1200 !important; color: #1a1200 !important;
border: 1px solid var(--status-warning) !important; border: 1px solid var(--status-warning) !important;
} }
.config-actions .btn-secondary:hover:not(:disabled), .config-actions .btn-secondary:hover:not(:disabled),
.console-actions .btn-secondary:hover:not(:disabled) { .console-actions .btn-secondary:hover:not(:disabled),
.backup-title-actions .btn-secondary:hover:not(:disabled) {
background: #e0a800 !important; background: #e0a800 !important;
border-color: #e0a800 !important; border-color: #e0a800 !important;
} }

13
containers/libreportal/frontend/themes/nebula/theme.css
View File

@ -120,10 +120,14 @@
color: #ffffff; color: #ffffff;
} }
/* "Back to Apps" — same translucent design as Update Configuration (btn-manage), /* Amber-tinted secondary — same translucent design as Update Configuration
but tinted with the warning amber so it reads as a distinct secondary action. */ (btn-manage). Used by "Back to Apps" (.console-actions), the Config Reset
button (.config-actions), and "Open backup center" on the per-app Backups
tab (.backup-title-actions) so all the "step away from the current page"
secondary actions read as one family. */
[data-theme="nebula"] .config-actions .btn-secondary, [data-theme="nebula"] .config-actions .btn-secondary,
[data-theme="nebula"] .console-actions .btn-secondary { [data-theme="nebula"] .console-actions .btn-secondary,
[data-theme="nebula"] .backup-title-actions .btn-secondary {
background: rgba(var(--status-warning-rgb), 0.20) !important; background: rgba(var(--status-warning-rgb), 0.20) !important;
color: var(--text-primary) !important; color: var(--text-primary) !important;
border: 1px solid rgba(var(--status-warning-rgb), 0.55) !important; border: 1px solid rgba(var(--status-warning-rgb), 0.55) !important;
@ -133,7 +137,8 @@
} }
[data-theme="nebula"] .config-actions .btn-secondary:hover:not(:disabled), [data-theme="nebula"] .config-actions .btn-secondary:hover:not(:disabled),
[data-theme="nebula"] .console-actions .btn-secondary:hover:not(:disabled) { [data-theme="nebula"] .console-actions .btn-secondary:hover:not(:disabled),
[data-theme="nebula"] .backup-title-actions .btn-secondary:hover:not(:disabled) {
background: rgba(var(--status-warning-rgb), 0.35) !important; background: rgba(var(--status-warning-rgb), 0.35) !important;
border-color: rgba(var(--status-warning-rgb), 0.80) !important; border-color: rgba(var(--status-warning-rgb), 0.80) !important;
transform: translateY(-1px); transform: translateY(-1px);