Private
Public Access
1
0

Revert "Increase status polling interval to 5 seconds across Proxmox views; update layout styles and add new CSS for improved UI elements and animations."

This reverts commit 8c6df92fe7.
This commit is contained in:
2026-03-01 03:59:10 -05:00
parent 8c6df92fe7
commit f688779e44
22 changed files with 1313 additions and 712 deletions

View File

@@ -1,6 +1,58 @@
<x-proxmox::layout :server="$server" view="firewall" :status="$status" :status-polling="true" :status-polling-interval="'5s'">
<x-proxmox::layout :server="$server" view="firewall" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
{{-- Global Loader Styles --}}
<!-- Styles moved to /css/proxmox.css -->
<style>
.fw-loader {
width: 24px;
aspect-ratio: 1;
border-radius: 50%;
padding: 3px;
background:
conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 2px)/10px 5px,
radial-gradient(farthest-side at bottom left, #0000 calc(100% - 3px), currentColor calc(100% - 2px) 99%, #0000) top right/50% 50% content-box content-box,
radial-gradient(farthest-side at top, #0000 calc(100% - 3px), currentColor calc(100% - 2px) 99%, #0000) bottom/100% 50% content-box content-box;
background-repeat: no-repeat;
animation: fw-loader-spin 1s infinite linear;
}
.fw-loader-sm {
width: 16px;
aspect-ratio: 1;
border-radius: 50%;
padding: 2px;
background:
conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 1.5px)/6px 3px,
radial-gradient(farthest-side at bottom left, #0000 calc(100% - 2px), currentColor calc(100% - 1.5px) 99%, #0000) top right/50% 50% content-box content-box,
radial-gradient(farthest-side at top, #0000 calc(100% - 2px), currentColor calc(100% - 1.5px) 99%, #0000) bottom/100% 50% content-box content-box;
background-repeat: no-repeat;
animation: fw-loader-spin 1s infinite linear;
}
.fw-loader-lg {
width: 32px;
aspect-ratio: 1;
border-radius: 50%;
padding: 4px;
background:
conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 3px)/12px 6px,
radial-gradient(farthest-side at bottom left, #0000 calc(100% - 4px), currentColor calc(100% - 3px) 99%, #0000) top right/50% 50% content-box content-box,
radial-gradient(farthest-side at top, #0000 calc(100% - 4px), currentColor calc(100% - 3px) 99%, #0000) bottom/100% 50% content-box content-box;
background-repeat: no-repeat;
animation: fw-loader-spin 1s infinite linear;
}
.fw-loader-xl {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
padding: 6px;
background:
conic-gradient(from 135deg at top, currentColor 90deg, #0000 0) 0 calc(50% - 4px)/17px 8.5px,
radial-gradient(farthest-side at bottom left, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) top right/50% 50% content-box content-box,
radial-gradient(farthest-side at top, #0000 calc(100% - 6px), currentColor calc(100% - 5px) 99%, #0000) bottom/100% 50% content-box content-box;
background-repeat: no-repeat;
animation: fw-loader-spin 1s infinite linear;
}
@keyframes fw-loader-spin {
100% { transform: rotate(1turn); }
}
</style>
<div class="flex flex-col gap-6">
{{-- Page Header --}}