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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user