style(backup): use nebula translucent buttons; left-align location actions
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:
parent
015793baf6
commit
d7d5260605
@ -454,9 +454,9 @@
|
|||||||
|
|
||||||
.backup-location-actions {
|
.backup-location-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 12px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
padding-top: 14px;
|
padding-top: 14px;
|
||||||
border-top: 1px solid rgba(var(--text-rgb), 0.06);
|
border-top: 1px solid rgba(var(--text-rgb), 0.06);
|
||||||
|
|||||||
@ -266,7 +266,8 @@
|
|||||||
|
|
||||||
[data-theme="nebula"] .uninstall-btn,
|
[data-theme="nebula"] .uninstall-btn,
|
||||||
[data-theme="nebula"] .btn-uninstall,
|
[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;
|
background: rgba(var(--status-danger-rgb), 0.35) !important;
|
||||||
color: var(--text-primary) !important;
|
color: var(--text-primary) !important;
|
||||||
border: 1px solid rgba(var(--status-danger-rgb), 0.65) !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"] .uninstall-btn:hover:not(:disabled),
|
||||||
[data-theme="nebula"] .btn-uninstall: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;
|
background: rgba(var(--status-danger-rgb), 0.50) !important;
|
||||||
border-color: rgba(var(--status-danger-rgb), 0.85) !important;
|
border-color: rgba(var(--status-danger-rgb), 0.85) !important;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
@ -286,6 +288,7 @@
|
|||||||
[data-theme="nebula"] .manage-btn,
|
[data-theme="nebula"] .manage-btn,
|
||||||
[data-theme="nebula"] .btn-manage,
|
[data-theme="nebula"] .btn-manage,
|
||||||
[data-theme="nebula"] .btn-primary,
|
[data-theme="nebula"] .btn-primary,
|
||||||
|
[data-theme="nebula"] .backup-primary-btn,
|
||||||
[data-theme="nebula"] .app-card .manage-btn,
|
[data-theme="nebula"] .app-card .manage-btn,
|
||||||
[data-theme="nebula"] .app-card-actions .manage-btn {
|
[data-theme="nebula"] .app-card-actions .manage-btn {
|
||||||
background: rgba(var(--accent-rgb), 0.35) !important;
|
background: rgba(var(--accent-rgb), 0.35) !important;
|
||||||
@ -299,6 +302,7 @@
|
|||||||
[data-theme="nebula"] .manage-btn:hover:not(:disabled),
|
[data-theme="nebula"] .manage-btn:hover:not(:disabled),
|
||||||
[data-theme="nebula"] .btn-manage:hover:not(:disabled),
|
[data-theme="nebula"] .btn-manage:hover:not(:disabled),
|
||||||
[data-theme="nebula"] .btn-primary: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 .manage-btn:hover:not(:disabled),
|
||||||
[data-theme="nebula"] .app-card-actions .manage-btn:hover:not(:disabled) {
|
[data-theme="nebula"] .app-card-actions .manage-btn:hover:not(:disabled) {
|
||||||
background: rgba(var(--accent-rgb), 0.50) !important;
|
background: rgba(var(--accent-rgb), 0.50) !important;
|
||||||
|
|||||||
@ -672,8 +672,8 @@ class BackupPage {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="backup-location-actions">
|
<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-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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user