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

style(backup): use nebula translucent buttons; left-align location actions

Browse Source 
Two follow-ups to the button restyle:

- On the nebula theme, primary/danger CTAs are translucent (rgba accent/danger
  fill + white text + border), not the solid generic .btn-primary. The earlier
  change only added the backup classes to the generic groups, so on nebula the
  Add location / Save changes / Delete buttons fell back to a solid fill with
  dark text. Add .backup-primary-btn and .backup-danger-btn to the
  [data-theme="nebula"] groups too, so they match the config-page buttons.

- The per-location action row used justify-content: space-between, throwing the
  two buttons to opposite edges. Switch to flex-start with a gap (like
  .config-actions) and put Save changes (primary) before Delete location.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-23 00:47:43 +01:00
parent 015793baf6
commit d7d5260605
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
containers/libreportal/frontend/css/backup.css
View File

@ -454,9 +454,9 @@
.backup-location-actions {
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
gap: 10px;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(var(--text-rgb), 0.06);

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

@ -266,7 +266,8 @@
[data-theme="nebula"] .uninstall-btn,
[data-theme="nebula"] .btn-uninstall,
[data-theme="nebula"] .btn-danger {
[data-theme="nebula"] .btn-danger,
[data-theme="nebula"] .backup-danger-btn {
background: rgba(var(--status-danger-rgb), 0.35) !important;
color: var(--text-primary) !important;
border: 1px solid rgba(var(--status-danger-rgb), 0.65) !important;
@ -277,7 +278,8 @@
[data-theme="nebula"] .uninstall-btn:hover:not(:disabled),
[data-theme="nebula"] .btn-uninstall:hover:not(:disabled),
[data-theme="nebula"] .btn-danger:hover:not(:disabled) {
[data-theme="nebula"] .btn-danger:hover:not(:disabled),
[data-theme="nebula"] .backup-danger-btn:hover:not(:disabled) {
background: rgba(var(--status-danger-rgb), 0.50) !important;
border-color: rgba(var(--status-danger-rgb), 0.85) !important;
transform: translateY(-1px);
@ -286,6 +288,7 @@
[data-theme="nebula"] .manage-btn,
[data-theme="nebula"] .btn-manage,
[data-theme="nebula"] .btn-primary,
[data-theme="nebula"] .backup-primary-btn,
[data-theme="nebula"] .app-card .manage-btn,
[data-theme="nebula"] .app-card-actions .manage-btn {
background: rgba(var(--accent-rgb), 0.35) !important;
@ -299,6 +302,7 @@
[data-theme="nebula"] .manage-btn:hover:not(:disabled),
[data-theme="nebula"] .btn-manage:hover:not(:disabled),
[data-theme="nebula"] .btn-primary:hover:not(:disabled),
[data-theme="nebula"] .backup-primary-btn:hover:not(:disabled),
[data-theme="nebula"] .app-card .manage-btn:hover:not(:disabled),
[data-theme="nebula"] .app-card-actions .manage-btn:hover:not(:disabled) {
background: rgba(var(--accent-rgb), 0.50) !important;

2
containers/libreportal/frontend/js/components/backup/backup-page.js
View File

@ -672,8 +672,8 @@ class BackupPage {
</div>
</div>
<div class="backup-location-actions">
<button class="backup-danger-btn" data-action="delete-location" data-loc="${idx}">Delete location</button>
<button class="backup-primary-btn" data-action="save-location" data-loc="${idx}">Save changes</button>
<button class="backup-danger-btn" data-action="delete-location" data-loc="${idx}">Delete location</button>
</div>
`;
}