From 0f6e15e8f9ed68d640936a68fd5089e60e7dcca9 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Sat, 23 May 2026 00:31:37 +0100
Subject: [PATCH] style(backup): match primary/danger buttons to nebula
 config-page style

The backup pages' primary buttons (Add location, Save changes) and Delete
location button used a local gradient + glow in backup.css, so they didn't
match the flat solid-accent buttons on the config page. Add .backup-primary-btn
and .backup-danger-btn to the shared nebula button groups in themes.css
(.btn-primary / .btn-uninstall) so they get the same solid accent/danger fill
and hover with !important across themes, and drop the local gradient/shadow/lift
from backup.css. Top-right and bottom-of-page backup buttons now match config.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../libreportal/frontend/css/backup.css       | 24 ++++---------------
 .../libreportal/frontend/css/themes.css       |  8 +++++--
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/containers/libreportal/frontend/css/backup.css b/containers/libreportal/frontend/css/backup.css
index 06f0452..01d3002 100755
--- a/containers/libreportal/frontend/css/backup.css
+++ b/containers/libreportal/frontend/css/backup.css
@@ -84,16 +84,10 @@
     transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
 }
 
-.backup-primary-btn {
-    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
-    color: var(--text-primary);
-    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
-}
-
-.backup-primary-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35);
-}
+/* .backup-primary-btn and .backup-danger-btn take their fill, text and hover
+   from the shared nebula button rules in themes.css (the .btn-primary and
+   .btn-uninstall groups), so they match the config-page buttons exactly across
+   themes. Only the shared layout above lives here — no local gradient/shadow. */
 
 .backup-secondary-btn,
 .backup-refresh-btn {
@@ -107,16 +101,6 @@
     background: rgba(var(--text-rgb), 0.1);
 }
 
-.backup-danger-btn {
-    background: linear-gradient(135deg, #dc2626, #b91c1c);
-    color: #fff;
-}
-
-.backup-danger-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
-}
-
 .backup-tabpanel {
     display: none;
 }
diff --git a/containers/libreportal/frontend/css/themes.css b/containers/libreportal/frontend/css/themes.css
index f2e16ea..4e5fb2d 100644
--- a/containers/libreportal/frontend/css/themes.css
+++ b/containers/libreportal/frontend/css/themes.css
@@ -120,14 +120,16 @@
 }
 
 .uninstall-btn,
-.btn-uninstall {
+.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) {
+.btn-uninstall:hover:not(:disabled),
+.backup-danger-btn:hover:not(:disabled) {
   background: var(--status-danger-hover) !important;
   border-color: var(--status-danger-hover) !important;
 }
@@ -135,6 +137,7 @@
 .manage-btn,
 .btn-manage,
 .btn-primary,
+.backup-primary-btn,
 .app-card .manage-btn,
 .app-card-actions .manage-btn {
   background: var(--accent) !important;
@@ -145,6 +148,7 @@
 .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;