feat: add delete rule button styling in Proxmox Firewall component to enhance user interface and improve visual feedback during rule deletion

This commit is contained in:
2025-12-01 14:47:33 -05:00
parent ab626ed9a6
commit 2877f65051

View File

@@ -48,6 +48,31 @@
opacity: 0.5;
cursor: not-allowed;
}
.delete-rule-button {
background-color: #ef4444;
color: white;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.2);
display: flex;
align-items: center;
gap: 0.5rem;
}
.delete-rule-button:hover {
background-color: #dc2626;
}
.delete-rule-button:active {
transform: scale(0.95);
}
.delete-rule-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
<div class="space-y-6">
@@ -561,7 +586,7 @@
<button
wire:click="deleteRule"
wire:loading.attr="disabled"
class="px-5 py-2.5 bg-error text-white rounded-lg hover:bg-error/90 active:scale-95 transition-all text-sm font-semibold shadow-lg shadow-error/20 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
class="delete-rule-button">
<x-ri-delete-bin-line class="size-4" wire:loading.remove wire:target="deleteRule" />
<span wire:loading.remove wire:target="deleteRule">Delete Rule</span>
<span wire:loading wire:target="deleteRule" class="flex items-center gap-2">