From 6af5eac4d9f7bf37e1a1ff815b6f7ce1885d9e1a Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 01:42:35 +0100
Subject: [PATCH] ux(backup): "Open backup center" inherits the amber
 Back-to-Apps treatment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 containers/libreportal/frontend/css/themes.css      | 12 ++++++++----
 .../libreportal/frontend/themes/nebula/theme.css    | 13 +++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/containers/libreportal/frontend/css/themes.css b/containers/libreportal/frontend/css/themes.css
index 19e2cc4..3335b69 100644
--- a/containers/libreportal/frontend/css/themes.css
+++ b/containers/libreportal/frontend/css/themes.css
@@ -139,17 +139,21 @@
   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. */
+/* 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 {
+.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) {
+.console-actions .btn-secondary:hover:not(:disabled),
+.backup-title-actions .btn-secondary:hover:not(:disabled) {
   background: #e0a800 !important;
   border-color: #e0a800 !important;
 }
diff --git a/containers/libreportal/frontend/themes/nebula/theme.css b/containers/libreportal/frontend/themes/nebula/theme.css
index fc759b3..d8a11f7 100644
--- a/containers/libreportal/frontend/themes/nebula/theme.css
+++ b/containers/libreportal/frontend/themes/nebula/theme.css
@@ -120,10 +120,14 @@
   color: #ffffff;
 }
 
-/* "Back to Apps" — same translucent design as Update Configuration (btn-manage),
-   but tinted with the warning amber so it reads as a distinct secondary action. */
+/* Amber-tinted secondary — same translucent design as Update Configuration
+   (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"] .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;
   color: var(--text-primary) !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"] .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;
   border-color: rgba(var(--status-warning-rgb), 0.80) !important;
   transform: translateY(-1px);