fix: adjust disabled toggle styles for better user experience and update button elements for consistency
This commit is contained in:
@@ -112,8 +112,8 @@
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.fw-toggle input:disabled + .fw-toggle-slider {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fw-toggle-label {
|
||||
font-weight: 600;
|
||||
@@ -178,8 +178,8 @@
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.fw-toggle-sm input:disabled + .fw-toggle-slider-sm {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.4;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -284,10 +284,6 @@
|
||||
<span class="fw-toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<span wire:loading wire:target="toggleFirewall" class="text-xs text-base/50 flex items-center gap-1.5">
|
||||
<span class="fw-loader-sm text-primary"></span>
|
||||
{{ $firewallEnabled ? 'Disabling...' : 'Enabling...' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -375,9 +371,6 @@
|
||||
>
|
||||
<span class="fw-toggle-slider-sm"></span>
|
||||
</label>
|
||||
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')" class="text-xs text-base/50">
|
||||
<span class="fw-loader-sm text-primary"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@@ -693,12 +686,14 @@
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">Firewall Logs</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<x-proxmox::ui.button wire:click="refreshLogs" variant="secondary" size="sm" icon="ri-refresh-line">
|
||||
<button type="button" wire:click="refreshLogs" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
|
||||
<x-ri-refresh-line class="size-4" />
|
||||
Refresh
|
||||
</x-proxmox::ui.button>
|
||||
<x-proxmox::ui.button wire:click="clearLogs" variant="danger" size="sm" icon="ri-delete-bin-line">
|
||||
</button>
|
||||
<button type="button" wire:click="clearLogs" class="px-4 py-2 bg-error text-white rounded-lg hover:bg-error/90 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
|
||||
<x-ri-delete-bin-line class="size-4" />
|
||||
Clear Logs
|
||||
</x-proxmox::ui.button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -748,9 +743,10 @@
|
||||
<div x-show="activeTab === 'saved'" x-transition>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">Saved Configurations</h3>
|
||||
<x-proxmox::ui.button wire:click="saveCurrentConfiguration" icon="ri-save-3-line">
|
||||
<button type="button" wire:click="saveCurrentConfiguration" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
|
||||
<x-ri-save-3-line class="size-4" />
|
||||
Save Current Config
|
||||
</x-proxmox::ui.button>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if(count($savedConfigurations) > 0)
|
||||
@@ -786,9 +782,10 @@
|
||||
title="No Saved Configurations"
|
||||
description="Save your current firewall configuration for backup or reuse">
|
||||
<x-slot name="actions">
|
||||
<x-proxmox::ui.button wire:click="saveCurrentConfiguration" icon="ri-save-3-line">
|
||||
<button type="button" wire:click="saveCurrentConfiguration" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
|
||||
<x-ri-save-3-line class="size-4" />
|
||||
Save Current Config
|
||||
</x-proxmox::ui.button>
|
||||
</button>
|
||||
</x-slot>
|
||||
</x-proxmox::ui.empty-state>
|
||||
@endif
|
||||
@@ -972,8 +969,7 @@
|
||||
<span class="text-xs font-normal text-gray-500">(auto-filled by macro)</span>
|
||||
</label>
|
||||
<select wire:model="ruleProto" class="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-sm">
|
||||
<option value="">Any</option>
|
||||
<option value="tcp">TCP</option>
|
||||
<option value="tcp" selected>TCP</option>
|
||||
<option value="udp">UDP</option>
|
||||
<option value="icmp">ICMP</option>
|
||||
<option value="igmp">IGMP</option>
|
||||
|
||||
Reference in New Issue
Block a user