Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Refactor modal close behavior and improve styling

Browse Source 
- Changed modal close event from `@click.away` to `@click.self` for better control over closing modals.
- Updated various modal button styles for consistency and improved accessibility.
- Adjusted transition durations for modal animations to enhance user experience.
- Added aria-labels to close buttons for better screen reader support.
This commit is contained in:
Joseph.Rawlings
2026-02-23 20:02:41 -05:00
parent f394483daa
commit af62a16354
45 changed files with 393 additions and 4700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/Servers/Proxmox/views/components/ui/dropdown-item.blade.php
View File

@@ -18,7 +18,7 @@
$variantClasses = match($variant) {
'danger' => 'text-error hover:bg-error/10 focus:bg-error/10',
'success' => 'text-success hover:bg-success/10 focus:bg-success/10',
default => 'text-primary hover:bg-primary/5 hover:text-primary-hover focus:bg-primary/5 focus:text-primary-hover dark:text-gray-200 dark:hover:bg-white/5',
default => 'text-primary hover:bg-primary/5 hover:text-primary-hover focus:bg-primary/5 focus:text-primary-hover dark:text-base/80 dark:hover:bg-white/5',
};
$disabledClasses = $disabled ? 'pointer-events-none opacity-50' : '';

26
extensions/Servers/Proxmox/views/components/ui/editable-field.blade.php
View File

@@ -37,14 +37,14 @@
@endphp
<div class="flex flex-col gap-2" x-data="{ showEditModal: @entangle($entangleProperty) }">
<label class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</label>
<div class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg text-sm">
<span class="flex-1 truncate text-primary dark:text-gray-200">{{ $value ?? 'Not set' }}</span>
<label class="text-sm font-medium text-secondary">{{ $label }}</label>
<div class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary border border-neutral rounded-lg text-sm">
<span class="flex-1 truncate text-primary">{{ $value ?? 'Not set' }}</span>
@if($editClick)
<button
wire:click="{{ $editClick }}"
type="button"
class="inline-flex items-center justify-center p-0 bg-transparent border-none text-secondary/60 dark:text-gray-500 hover:text-primary dark:hover:text-primary transition-colors duration-200 cursor-pointer"
class="inline-flex items-center justify-center p-0 bg-transparent border-none text-secondary/60 hover:text-primary transition-colors duration-200 cursor-pointer"
aria-label="Edit {{ $label }}"
>
<x-ri-edit-line class="w-4 h-4" />
@@ -78,15 +78,15 @@
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
@click.self="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
class="fixed inset-0 z-[99999] flex items-center justify-center p-4"
>
<div class="relative w-full max-w-xl bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg p-6 shadow-xl">
<div class="relative w-full max-w-xl bg-background border border-neutral rounded-lg p-6 shadow-xl">
<div class="flex items-center justify-between mb-5">
<h4 class="text-lg font-semibold text-primary dark:text-gray-100">Edit {{ $label }}</h4>
<h4 class="text-lg font-semibold text-primary">Edit {{ $label }}</h4>
<button
type="button"
class="flex items-center justify-center w-9 h-9 p-0 bg-transparent border-none rounded-lg text-secondary dark:text-gray-400 hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200 cursor-pointer"
class="flex items-center justify-center w-9 h-9 p-0 bg-transparent border-none rounded-lg text-secondary hover:bg-background-secondary hover:text-primary transition-all duration-200 cursor-pointer"
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
aria-label="Close"
>
@@ -96,11 +96,11 @@
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-secondary dark:text-gray-400">{{ $label }}</label>
<label class="text-sm font-medium text-secondary">{{ $label }}</label>
<input
type="text"
{{ $attributes->whereStartsWith('wire:model') }}
class="w-full h-11 px-4 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 placeholder:text-secondary/50 dark:placeholder:text-gray-500 transition-all duration-150"
class="w-full h-11 px-4 text-sm text-primary bg-background border border-neutral rounded-lg shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 placeholder:text-secondary/50 transition-all duration-150"
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
/>
</div>
@@ -110,16 +110,16 @@
@endif
@if(isset($hint))
<div class="text-xs text-secondary dark:text-gray-400">{{ $hint }}</div>
<div class="text-xs text-secondary">{{ $hint }}</div>
@endif
</div>
<div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral dark:border-gray-700">
<div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral">
@if($cancelClick)
<button
type="button"
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-background dark:bg-gray-700 text-secondary dark:text-gray-300 border border-neutral dark:border-gray-600 rounded-lg shadow-sm hover:bg-background-secondary dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer"
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-background-secondary text-secondary border border-neutral rounded-lg shadow-sm hover:bg-background-secondary/80 transition-all duration-200 cursor-pointer"
>
Cancel
</button>

34
extensions/Servers/Proxmox/views/components/ui/help-modal.blade.php
View File

@@ -19,7 +19,7 @@
])
<div class="relative" x-data="{ open: false }" x-cloak {{ $attributes }}>
<button type="button" @click="open = true" style="color: #6c757d; background: transparent; border: none; cursor: pointer; padding: 0; transition: color .2s ease;" onmouseover="this.style.color='#495057'" onmouseout="this.style.color='#6c757d'">
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
<x-ri-question-line class="size-4" />
</button>
@@ -34,8 +34,8 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0"
style="z-index: 9998; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px);"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;"
></div>
<!-- Modal Content -->
@@ -47,32 +47,32 @@
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@click.away="open = false"
class="fixed inset-0 flex items-center justify-center p-4"
style="z-index: 9999; pointer-events: none;"
@click.self="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;"
>
<div class="modal-lte" style="position: relative; width: 100%; max-width: 42rem; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); padding: 1.5rem; pointer-events: auto;">
<button @click="open = false" style="position: absolute; top: 1rem; right: 1rem; padding: .25rem; border-radius: .25rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: background .2s ease, color .2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.color='#495057'" onmouseout="this.style.background='transparent'; this.style.color='#6c757d'">
<x-ri-close-line class="size-4" />
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
<div style="display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding-right: 2rem;">
<div style="display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);">
<x-dynamic-component :component="$icon" class="size-4" style="color: #0d6efd;" />
<div class="flex items-center gap-3 mb-4 pr-8">
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-5 text-primary" />
</div>
<h3 style="font-size: 1.125rem; font-weight: 600; line-height: 1; color: #212529; margin: 0;">
<h6 class="font-sans text-lg font-semibold leading-tight">
{{ $title }}
</h3>
</h6>
</div>
@if(isset($description))
<div style="font-size: .875rem; color: #6c757d; margin-bottom: 1rem; line-height: 1.5;">
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
{{ $description }}
</div>
</p>
@endif
@if(isset($details))
<div style="padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #dee2e6; font-size: .875rem; color: #6c757d; line-height: 1.5;">
<div class="pt-4 mt-4 border-t border-neutral/30 text-sm text-base/75 leading-relaxed">
{{ $details }}
</div>
@endif

32
extensions/Servers/Proxmox/views/components/ui/icon-picker.blade.php
View File

@@ -41,15 +41,15 @@
<button
type="button"
@click="open = true"
class="flex items-center gap-2 px-3 py-2 bg-background dark:bg-gray-800 border border-neutral dark:border-gray-600 rounded-lg shadow-sm hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-secondary/40 transition-all duration-200"
class="flex items-center gap-2 px-3 py-2 bg-background border border-neutral rounded-lg shadow-sm hover:bg-background-secondary hover:border-secondary/40 transition-all duration-200"
>
<template x-if="selected">
<x-dynamic-component x-bind:component="selected" class="size-5 text-primary" />
</template>
<template x-if="!selected">
<x-ri-image-add-line class="size-5 text-secondary dark:text-gray-400" />
<x-ri-image-add-line class="size-5 text-secondary" />
</template>
<span class="text-sm text-secondary dark:text-gray-300">Select Icon</span>
<span class="text-sm text-secondary">Select Icon</span>
</button>
<!-- Modal -->
@@ -82,15 +82,15 @@
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="relative w-full max-w-2xl bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg shadow-xl max-h-[80vh] overflow-hidden"
class="relative w-full max-w-2xl bg-background border border-neutral rounded-lg shadow-xl max-h-[80vh] overflow-hidden"
>
<!-- Header -->
<div class="p-4 border-b border-neutral dark:border-gray-700">
<div class="p-4 border-b border-neutral">
<div class="flex items-center justify-between mb-3">
<h3 class="text-lg font-semibold text-primary dark:text-gray-100">Select Icon</h3>
<h3 class="text-lg font-semibold text-primary">Select Icon</h3>
<button
@click="open = false"
class="p-1.5 rounded-md text-secondary dark:text-gray-400 bg-transparent border-none hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200 cursor-pointer"
class="p-1.5 rounded-md text-secondary bg-transparent border-none hover:bg-background-secondary hover:text-primary transition-all duration-200 cursor-pointer"
>
<x-ri-close-line class="size-5" />
</button>
@@ -98,22 +98,22 @@
<!-- Search -->
<div class="relative">
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-secondary dark:text-gray-400" />
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-secondary" />
<input
type="text"
x-model="search"
placeholder="Search icons..."
class="w-full pl-10 pr-3 py-2.5 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg placeholder:text-secondary/50 dark:placeholder:text-gray-500 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 transition-all duration-150"
class="w-full pl-10 pr-3 py-2.5 text-sm text-primary bg-background border border-neutral rounded-lg placeholder:text-secondary/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 transition-all duration-150"
/>
</div>
</div>
<!-- Categories -->
@if(count($categories) > 0)
<div class="flex gap-2 p-4 border-b border-neutral dark:border-gray-700 overflow-x-auto">
<div class="flex gap-2 p-4 border-b border-neutral overflow-x-auto">
<button
@click="activeCategory = 'all'"
:class="activeCategory === 'all' ? 'bg-primary text-white' : 'bg-background-secondary dark:bg-gray-700 text-secondary dark:text-gray-300'"
:class="activeCategory === 'all' ? 'bg-primary text-white' : 'bg-background-secondary text-secondary'"
class="px-3 py-1.5 rounded-full text-xs font-medium border-none cursor-pointer whitespace-nowrap transition-all duration-200"
>
All
@@ -121,7 +121,7 @@
@foreach($categories as $category)
<button
@click="activeCategory = '{{ $category['id'] }}'"
:class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-white' : 'bg-background-secondary dark:bg-gray-700 text-secondary dark:text-gray-300'"
:class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-white' : 'bg-background-secondary text-secondary'"
class="px-3 py-1.5 rounded-full text-xs font-medium border-none cursor-pointer whitespace-nowrap transition-all duration-200"
>
{{ $category['name'] }}
@@ -136,7 +136,7 @@
<template x-for="icon in filteredIcons" :key="icon.name">
<button
@click="selected = icon.component; open = false;"
:class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-background-secondary dark:hover:bg-gray-700'"
:class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-background-secondary'"
class="flex items-center justify-center p-3 rounded-lg border-none bg-transparent cursor-pointer transition-all duration-150"
:title="icon.name"
>
@@ -148,15 +148,15 @@
<!-- Empty State -->
<div x-show="filteredIcons.length === 0" class="py-8 text-center">
<x-ri-search-line class="w-12 h-12 mx-auto mb-3 text-neutral" />
<p class="text-sm text-secondary dark:text-gray-400">No icons found matching your search.</p>
<p class="text-sm text-secondary">No icons found matching your search.</p>
</div>
</div>
<!-- Footer -->
<div class="p-4 border-t border-neutral dark:border-gray-700 flex items-center justify-between">
<div class="p-4 border-t border-neutral flex items-center justify-between">
<button
@click="selected = null"
class="px-3 py-1.5 text-sm text-secondary dark:text-gray-400 bg-transparent border-none cursor-pointer hover:text-primary dark:hover:text-gray-200 transition-colors duration-200"
class="px-3 py-1.5 text-sm text-secondary bg-transparent border-none cursor-pointer hover:text-primary transition-colors duration-200"
>
Clear Selection
</button>

10
extensions/Servers/Proxmox/views/components/ui/input.blade.php
View File

@@ -31,14 +31,14 @@
];
$sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
$inputClasses = 'w-full px-4 py-2 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg placeholder:text-secondary/50 dark:placeholder:text-gray-500 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed';
$inputClasses = 'w-full px-4 py-2 text-sm text-primary dark:text-base/90 bg-background dark:bg-background-secondary border border-neutral rounded-lg placeholder:text-secondary/50 dark:placeholder:text-base/30 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed';
$errorClasses = $error ? 'border-error focus:border-error focus:ring-error/25' : '';
@endphp
<div {{ $attributes->only('class')->class(['mb-3']) }}>
@if($label)
<label @if($name) for="{{ $name }}" @endif class="block mb-2 font-medium text-sm text-secondary dark:text-gray-300">
<label @if($name) for="{{ $name }}" @endif class="block mb-2 font-medium text-sm text-secondary dark:text-base/60">
{{ $label }}
@if($required)
<span class="text-error">*</span>
@@ -49,7 +49,7 @@
@if($icon || $iconRight)
<div class="relative flex items-stretch">
@if($icon)
<span class="flex items-center px-3 bg-background-secondary dark:bg-gray-800 border border-r-0 border-neutral dark:border-gray-600 rounded-l-lg text-secondary dark:text-gray-400">
<span class="flex items-center px-3 bg-background-secondary border border-r-0 border-neutral rounded-l-lg text-secondary dark:text-base/50">
<x-dynamic-component :component="$icon" class="size-4" />
</span>
@endif
@@ -66,7 +66,7 @@
/>
@if($iconRight)
<span class="flex items-center px-3 bg-background-secondary dark:bg-gray-800 border border-l-0 border-neutral dark:border-gray-600 rounded-r-lg text-secondary dark:text-gray-400">
<span class="flex items-center px-3 bg-background-secondary border border-l-0 border-neutral rounded-r-lg text-secondary dark:text-base/50">
<x-dynamic-component :component="$iconRight" class="size-4" />
</span>
@endif
@@ -87,6 +87,6 @@
@if($error)
<div class="mt-1 text-sm text-error">{{ $error }}</div>
@elseif($hint)
<div class="mt-1 text-sm text-secondary dark:text-gray-400">{{ $hint }}</div>
<div class="mt-1 text-sm text-secondary dark:text-base/50">{{ $hint }}</div>
@endif
</div>

14
extensions/Servers/Proxmox/views/components/ui/modal.blade.php
View File

@@ -69,30 +69,30 @@
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
@click.stop
class="w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-xl shadow-2xl"
class="w-full {{ $maxWidthClass }} max-h-[90vh] overflow-y-auto bg-background border border-neutral rounded-xl shadow-2xl"
>
{{-- Header --}}
@if($title || $closeable)
<div class="flex items-center justify-between p-5 border-b border-neutral dark:border-gray-700">
<div class="flex items-center justify-between p-5 border-b border-neutral">
<div class="flex items-center gap-3">
@if($icon)
<span class="flex items-center justify-center w-10 h-10 bg-background-secondary dark:bg-gray-700 rounded-lg">
<span class="flex items-center justify-center w-10 h-10 bg-background-secondary rounded-lg">
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }}" />
</span>
@endif
<div>
@if($title)
<h5 class="text-lg font-semibold text-primary dark:text-gray-100">{{ $title }}</h5>
<h5 class="text-lg font-semibold text-primary">{{ $title }}</h5>
@endif
@if($subtitle)
<p class="text-sm text-secondary dark:text-gray-400 mt-0.5">{{ $subtitle }}</p>
<p class="text-sm text-secondary mt-0.5">{{ $subtitle }}</p>
@endif
</div>
</div>
@if($closeable)
<button
@click="show = false"
class="flex items-center justify-center w-8 h-8 rounded-lg text-secondary dark:text-gray-400 hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200"
class="flex items-center justify-center w-8 h-8 rounded-lg text-secondary hover:bg-background-secondary hover:text-primary transition-all duration-200"
aria-label="Close"
>
<x-ri-close-line class="size-5" />
@@ -108,7 +108,7 @@
{{-- Footer --}}
@if($footer)
<div class="flex items-center justify-end gap-3 p-5 border-t border-neutral dark:border-gray-700">
<div class="flex items-center justify-end gap-3 p-5 border-t border-neutral">
{{ $footer }}
</div>
@endif

58
extensions/Servers/Proxmox/views/components/ui/network-address-card.blade.php
View File

@@ -24,10 +24,10 @@
'fromGuestAgent' => false,
])
<div class="card-lte mb-4" style="background: #fff; border-radius: .375rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); padding: 1.5rem;">
<div class="card-lte mb-4 bg-background-secondary rounded-md shadow-md p-6">
{{-- Header --}}
<div style="margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between;">
<h3 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">{{ strtoupper($type) }} Address</h3>
<div class="mb-5 flex items-center justify-between">
<h3 class="text-lg font-semibold">{{ strtoupper($type) }} Address</h3>
<x-proxmox::ui.badge variant="default">
{{ $type === 'ipv6' ? 'IPv6' : 'IPv4' }}
</x-proxmox::ui.badge>
@@ -36,41 +36,41 @@
{{-- Address Grid --}}
<div class="grid gap-5 md:grid-cols-3">
{{-- IP Address --}}
<div style="display: flex; flex-direction: column; gap: .5rem;">
<span style="font-size: .875rem; font-weight: 500; color: #6c757d;">IP Address</span>
<div class="flex flex-col gap-2">
<span class="text-sm font-medium text-base/50">IP Address</span>
<div class="flex items-center gap-2.5">
<span style="font-family: ui-monospace, monospace; font-weight: 600; color: #212529;">{{ $ip }}</span>
<span class="font-mono font-semibold">{{ $ip }}</span>
<x-proxmox::ui.copy-button :value="$ip" />
</div>
@if($cidr)
<p style="font-size: .75rem; color: #6c757d; margin: 0;">CIDR: {{ $ip }}{{ $cidr }}</p>
<p class="text-xs text-base/50">CIDR: {{ $ip }}{{ $cidr }}</p>
@endif
</div>
{{-- Gateway --}}
<div style="display: flex; flex-direction: column; gap: .5rem;">
<span style="font-size: .875rem; font-weight: 500; color: #6c757d;">Gateway</span>
<div class="flex flex-col gap-2">
<span class="text-sm font-medium text-base/50">Gateway</span>
<div class="flex items-center gap-2.5">
<span style="font-family: ui-monospace, monospace; font-weight: 600; color: #212529;">{{ $gateway ?? 'N/A' }}</span>
<span class="font-mono font-semibold">{{ $gateway ?? 'N/A' }}</span>
@if($gateway)
<x-proxmox::ui.copy-button :value="$gateway" />
@endif
</div>
<p style="font-size: .75rem; color: #6c757d; margin: 0;">
<p class="text-xs text-base/50">
{{ $fromGuestAgent && !$gateway ? 'Not configured in database' : 'Default route' }}
</p>
</div>
{{-- Netmask --}}
<div style="display: flex; flex-direction: column; gap: .5rem;">
<span style="font-size: .875rem; font-weight: 500; color: #6c757d;">Subnet Mask</span>
<div class="flex flex-col gap-2">
<span class="text-sm font-medium text-base/50">Subnet Mask</span>
<div class="flex items-center gap-2.5">
<span style="font-family: ui-monospace, monospace; font-weight: 600; color: #212529;">{{ $netmask ?? 'N/A' }}</span>
<span class="font-mono font-semibold">{{ $netmask ?? 'N/A' }}</span>
@if($netmask)
<x-proxmox::ui.copy-button :value="$netmask" />
@endif
</div>
<p style="font-size: .75rem; color: #6c757d; margin: 0;">
<p class="text-xs text-base/50">
{{ $fromGuestAgent && !$netmask ? 'Not configured' : 'Network range' }}
</p>
</div>
@@ -78,7 +78,7 @@
{{-- Network Tools (for public IPs) --}}
@if($isPublic)
<div style="margin-top: 1.25rem; display: flex; justify-content: flex-end; gap: .75rem; border-top: 1px solid #dee2e6; padding-top: 1.25rem;">
<div class="mt-5 flex justify-end gap-3 border-t border-neutral/20 pt-5">
@if($isIpv6)
<x-proxmox::ui.button
variant="outline"
@@ -130,42 +130,40 @@
{{-- Guest Agent Technical Details --}}
@if($guestInterface)
<div
style="margin-top: 1.25rem; border-top: 1px solid #dee2e6; padding-top: 1.25rem;"
class="mt-5 border-t border-neutral/20 pt-5"
x-data="{ isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced' }"
x-init="
isAdvancedView = localStorage.getItem('proxmox-view-mode') === 'advanced';
window.addEventListener('proxmox-view-mode-changed', (e) => {
isAdvancedView = e.detail.isAdvancedView;
});
"
@proxmox-view-mode-changed.window="isAdvancedView = $event.detail.isAdvancedView"
x-show="isAdvancedView"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
>
<h4 style="margin-bottom: 1rem; font-size: .875rem; font-weight: 500; color: #6c757d;">Technical Details</h4>
<h4 class="mb-4 text-sm font-medium text-base/50">Technical Details</h4>
<div class="grid gap-4 md:grid-cols-2">
@if(isset($guestInterface['hardware-address']))
<div style="display: flex; flex-direction: column; gap: .375rem;">
<span style="font-size: .75rem; font-weight: 500; color: #6c757d;">MAC Address</span>
<div class="flex flex-col gap-1.5">
<span class="text-xs font-medium text-base/50">MAC Address</span>
<div class="flex items-center gap-2.5">
<span style="font-family: ui-monospace, monospace; font-size: .875rem; color: #495057;">{{ $guestInterface['hardware-address'] }}</span>
<span class="font-mono text-sm text-base/70">{{ $guestInterface['hardware-address'] }}</span>
<x-proxmox::ui.copy-button :value="$guestInterface['hardware-address']" />
</div>
</div>
@endif
@if(isset($guestInterface['name']))
<div style="display: flex; flex-direction: column; gap: .375rem;">
<span style="font-size: .75rem; font-weight: 500; color: #6c757d;">Interface</span>
<span style="font-family: ui-monospace, monospace; font-size: .875rem; color: #495057; display: block;">{{ $guestInterface['name'] }}</span>
<div class="flex flex-col gap-1.5">
<span class="text-xs font-medium text-base/50">Interface</span>
<span class="block font-mono text-sm text-base/70">{{ $guestInterface['name'] }}</span>
</div>
@endif
@if(isset($guestInterface['statistics']))
<div class="md:col-span-2" style="display: flex; flex-direction: column; gap: .375rem;">
<span style="font-size: .75rem; font-weight: 500; color: #6c757d;">Statistics</span>
<div class="flex flex-wrap gap-4" style="font-size: .875rem; color: #495057;">
<div class="md:col-span-2 flex flex-col gap-1.5">
<span class="text-xs font-medium text-base/50">Statistics</span>
<div class="flex flex-wrap gap-4 text-sm text-base/70">
@if(isset($guestInterface['statistics']['rx-bytes']))
<span>RX: {{ number_format($guestInterface['statistics']['rx-bytes']) }} bytes</span>
@endif

37
extensions/Servers/Proxmox/views/components/ui/notice-banner.blade.php
View File

@@ -23,31 +23,30 @@
])
@php
// AdminLTE Bootstrap 5 color scheme
$variants = [
'info' => [
'bg' => 'rgba(13, 202, 240, 0.1)',
'border' => '#0dcaf0',
'bg' => 'bg-cyan-400/10',
'border' => 'border-cyan-400',
'icon' => $icon ?? 'ri-information-line',
'iconColor' => '#0dcaf0',
'iconColor' => 'text-cyan-400',
],
'warning' => [
'bg' => 'rgba(255, 193, 7, 0.1)',
'border' => '#ffc107',
'bg' => 'bg-amber-500/10',
'border' => 'border-amber-500',
'icon' => $icon ?? 'ri-alert-line',
'iconColor' => '#ffc107',
'iconColor' => 'text-amber-500',
],
'danger' => [
'bg' => 'rgba(220, 53, 69, 0.1)',
'border' => '#dc3545',
'bg' => 'bg-red-500/10',
'border' => 'border-red-500',
'icon' => $icon ?? 'ri-error-warning-line',
'iconColor' => '#dc3545',
'iconColor' => 'text-red-500',
],
'success' => [
'bg' => 'rgba(25, 135, 84, 0.1)',
'border' => '#198754',
'bg' => 'bg-green-600/10',
'border' => 'border-green-600',
'icon' => $icon ?? 'ri-checkbox-circle-line',
'iconColor' => '#198754',
'iconColor' => 'text-green-600',
],
];
@@ -71,23 +70,23 @@
x-transition
@endif
{{ $attributes }}
style="background: {{ $config['bg'] }}; border: 1px solid {{ $config['border'] }}; border-left-width: 4px; border-radius: .375rem; padding: 1rem;"
class="{{ $config['bg'] }} border {{ $config['border'] }} border-l-4 rounded-md p-4"
>
<div class="flex items-start gap-3.5">
<x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0" style="color: {{ $config['iconColor'] }};" />
<x-dynamic-component :component="$config['icon']" class="mt-0.5 size-5 flex-shrink-0 {{ $config['iconColor'] }}" />
<div class="min-w-0 flex-1">
@if($title)
<div style="margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between;">
<h3 style="font-size: .875rem; font-weight: 500; color: #212529; margin: 0;">{{ $title }}</h3>
<div class="mb-2 flex items-center justify-between">
<h3 class="text-sm font-medium">{{ $title }}</h3>
@if($collapsible)
<button @click="toggle()" type="button" style="color: #6c757d; background: transparent; border: none; cursor: pointer; padding: 0; transition: color .2s ease;" onmouseover="this.style.color='#495057'" onmouseout="this.style.color='#6c757d'">
<button @click="toggle()" type="button" class="text-base/50 hover:text-base/70 transition-colors">
<x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 rotate-180 transition-transform' : 'size-5 transition-transform'" />
</button>
@endif
</div>
@endif
<div @if($collapsible) x-show="!isCollapsed" x-transition @endif style="font-size: .875rem; color: #495057; line-height: 1.5;">
<div @if($collapsible) x-show="!isCollapsed" x-transition @endif class="text-sm text-base/70 leading-relaxed">
{{ $slot }}
</div>
</div>

6
extensions/Servers/Proxmox/views/components/ui/progress.blade.php
View File

@@ -58,11 +58,11 @@
<div {{ $attributes->class(['w-full']) }}>
@if($showLabel || $label)
<div class="mb-2 flex items-center justify-between text-sm">
<span class="font-medium text-secondary dark:text-gray-300">{{ $label ?? 'Usage' }}</span>
<span class="font-semibold text-primary dark:text-gray-100">{{ number_format($percent, 1) }}%</span>
<span class="font-medium text-secondary dark:text-base/60">{{ $label ?? 'Usage' }}</span>
<span class="font-semibold text-primary dark:text-base/90">{{ number_format($percent, 1) }}%</span>
</div>
@endif
<div class="{{ $sizeClass }} w-full bg-neutral/30 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="{{ $sizeClass }} w-full bg-neutral/30 rounded-full overflow-hidden">
<div
class="{{ $colorClass }} h-full rounded-full transition-all duration-500 {{ $striped ? 'progress-striped' : '' }} {{ $animated ? 'progress-animated' : '' }}"
role="progressbar"

14
extensions/Servers/Proxmox/views/components/ui/resource-gauge.blade.php
View File

@@ -57,15 +57,15 @@
};
@endphp
<div {{ $attributes->class(['flex flex-col gap-4 bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg p-5 shadow-sm']) }}>
<div {{ $attributes->class(['flex flex-col gap-4 bg-background dark:bg-background-secondary border border-neutral rounded-lg p-5 shadow-sm']) }}>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<p class="text-xs font-medium text-secondary dark:text-gray-400 mb-1">{{ $label }}</p>
<p class="text-xl font-bold text-primary dark:text-gray-100 leading-tight">
<p class="text-xs font-medium text-secondary dark:text-base/50 mb-1">{{ $label }}</p>
<p class="text-xl font-bold text-primary dark:text-base/90 leading-tight">
@if($prefix){{ $prefix }}@endif{{ is_numeric($value) ? number_format($value, 1) : $value }}@if($suffix){{ $suffix }}@endif
</p>
@if($sublabel)
<p class="text-xs text-secondary dark:text-gray-400 mt-1">{{ $sublabel }}</p>
<p class="text-xs text-secondary dark:text-base/50 mt-1">{{ $sublabel }}</p>
@endif
</div>
<span class="shrink-0 px-2.5 py-1 text-xs font-medium rounded-full {{ $badgeClasses }}">
@@ -75,10 +75,10 @@
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between text-xs">
<span class="text-secondary dark:text-gray-400">Usage</span>
<span class="font-semibold text-primary dark:text-gray-100">{{ number_format($percent, 1) }}%</span>
<span class="text-secondary dark:text-base/50">Usage</span>
<span class="font-semibold text-primary dark:text-base/90">{{ number_format($percent, 1) }}%</span>
</div>
<div class="h-2 bg-neutral/30 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="h-2 bg-neutral/30 rounded-full overflow-hidden">
<div
class="{{ $barColorClass }} h-full rounded-full transition-all duration-500"
@if($gradient)

40
extensions/Servers/Proxmox/views/components/ui/section-header.blade.php
View File

@@ -33,21 +33,19 @@
<div {{ $attributes->class(['flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between group']) }}>
<div class="flex items-start gap-3.5">
@if($icon)
<div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);" class="transition-transform duration-300 group-hover:scale-105">
<x-dynamic-component :component="$icon" class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
<div class="flex items-center justify-center w-11 h-11 flex-shrink-0 rounded-lg bg-primary/10 transition-transform duration-300 group-hover:scale-105">
<x-dynamic-component :component="$icon" class="size-5 text-primary transition-colors duration-200" />
</div>
@endif
<div style="display: flex; flex-direction: column; gap: .25rem;">
<div class="flex flex-col gap-1">
<div class="flex min-w-0 items-center gap-2">
<h2 style="{{ $titleStyle }} color: #212529; margin: 0;">{{ $title }}</h2>
<h2 class="text-xl font-semibold" style="{{ $titleStyle }}">{{ $title }}</h2>
@if($helpText)
<div class="relative" x-data="{ open: false }" x-cloak>
<button
type="button"
@click="open = true"
style="color: #6c757d; transition: color .2s ease;"
onmouseover="this.style.color='#495057'"
onmouseout="this.style.color='#6c757d'"
class="text-base/50 hover:text-base/70 transition-colors"
>
<x-ri-question-line class="size-4.5" />
</button>
@@ -62,8 +60,8 @@
x-transition:leave-end="opacity-0"
@click="open = false"
@keydown.escape.window="open = false"
class="fixed inset-0"
style="z-index: 99999; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: none;"
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
style="display: none;"
></div>
<div
x-show="open"
@@ -73,32 +71,32 @@
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
x-transition:leave-end="opacity-0 scale-95 translate-y-4"
@click.away="open = false"
class="fixed inset-0 flex items-center justify-center p-4"
style="z-index: 99999; display: none;"
@click.self="open = false"
class="fixed inset-0 z-50 flex items-center justify-center p-4"
style="display: none;"
>
<div class="modal-lte" style="max-height: 90vh; width: 100%; max-width: 32rem; overflow-y: auto; padding: 1.5rem; background: #fff; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);">
<button @click="open = false" style="position: absolute; right: 1rem; top: 1rem; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: .25rem; color: #6c757d; border: none; background: transparent; cursor: pointer; transition: background .2s ease, color .2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.color='#212529'" onmouseout="this.style.background='transparent'; this.style.color='#6c757d'">
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
<button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
<x-ri-close-line class="size-5" />
</button>
<div style="margin-bottom: 1.25rem; display: flex; align-items: center; gap: .875rem; padding-right: 2rem;">
<div class="flex items-center gap-3 mb-4 pr-8">
@if($icon)
<div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);">
<x-dynamic-component :component="$icon" class="size-5" style="color: #0d6efd;" />
<div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
<x-dynamic-component :component="$icon" class="size-5 text-primary" />
</div>
@endif
<h3 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">{{ $title }}</h3>
<h6 class="font-sans text-lg font-semibold leading-tight">{{ $title }}</h6>
</div>
<div style="font-size: .875rem; color: #6c757d; line-height: 1.5;">
<p class="block font-sans text-sm font-normal leading-relaxed text-base/75">
{{ $helpText }}
</div>
</p>
</div>
</div>
</div>
@endif
</div>
@if($subtitle)
<p style="font-size: .875rem; color: #6c757d; margin: 0;">{{ $subtitle }}</p>
<p class="text-sm text-base/60">{{ $subtitle }}</p>
@endif
</div>
</div>

8
extensions/Servers/Proxmox/views/components/ui/select.blade.php
View File

@@ -27,14 +27,14 @@
];
$sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
$baseClasses = 'block w-full appearance-none bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg shadow-sm text-primary dark:text-gray-100 transition-all duration-150 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 disabled:bg-background-secondary dark:disabled:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-65';
$baseClasses = 'block w-full appearance-none bg-background dark:bg-background-secondary border border-neutral rounded-lg shadow-sm text-primary dark:text-base/90 transition-all duration-150 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 disabled:bg-background-secondary disabled:cursor-not-allowed disabled:opacity-65';
$errorClasses = $error ? 'border-error focus:border-error focus:ring-error/25' : '';
@endphp
<div {{ $attributes->only('class')->class(['flex flex-col gap-2']) }}>
@if($label)
<label @if($name) for="{{ $name }}" @endif class="text-sm font-medium text-secondary dark:text-gray-300">
<label @if($name) for="{{ $name }}" @endif class="text-sm font-medium text-secondary dark:text-base/60">
{{ $label }}
@if($required)
<span class="text-error">*</span>
@@ -52,7 +52,7 @@
>
{{ $slot }}
</select>
<div class="absolute top-1/2 right-4 -translate-y-1/2 pointer-events-none text-secondary dark:text-gray-400">
<div class="absolute top-1/2 right-4 -translate-y-1/2 pointer-events-none text-secondary dark:text-base/50">
<x-ri-arrow-down-s-line class="size-5" />
</div>
</div>
@@ -60,6 +60,6 @@
@if($error)
<p class="text-xs font-medium text-error">{{ $error }}</p>
@elseif($hint)
<p class="text-xs text-secondary dark:text-gray-400">{{ $hint }}</p>
<p class="text-xs text-secondary dark:text-base/50">{{ $hint }}</p>
@endif
</div>

4
extensions/Servers/Proxmox/views/components/ui/server-status.blade.php
View File

@@ -66,7 +66,7 @@
'warning' => 'text-yellow-600 dark:text-yellow-400',
'danger' => 'text-error',
'info' => 'text-info',
'muted' => 'text-secondary dark:text-gray-400',
'muted' => 'text-secondary',
];
$bgClasses = [
@@ -74,7 +74,7 @@
'warning' => 'bg-warning/15',
'danger' => 'bg-error/10',
'info' => 'bg-info/10',
'muted' => 'bg-neutral/20 dark:bg-gray-700',
'muted' => 'bg-neutral/20',
];
$dotClasses = [

12
extensions/Servers/Proxmox/views/components/ui/stat-card.blade.php
View File

@@ -87,7 +87,7 @@
<{{ $tag }}
@if($href) href="{{ $href }}" @endif
{{ $attributes->class([
'flex items-start gap-4 p-5 bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-xl shadow-sm group transition-all duration-300 hover:shadow-md hover:-translate-y-0.5',
'flex items-start gap-4 p-5 bg-background dark:bg-background-secondary border border-neutral rounded-xl shadow-sm group transition-all duration-300 hover:shadow-md hover:-translate-y-0.5',
'cursor-pointer' => $href || $clickable,
]) }}
>
@@ -97,12 +97,12 @@
</span>
@endif
<div class="flex-1 min-w-0">
<span class="text-xs font-medium text-secondary dark:text-gray-400 uppercase tracking-wide">{{ $label }}</span>
<span class="block text-xl font-bold text-primary dark:text-gray-100 mt-1 transition-colors duration-200 group-hover:text-primary">
@if($prefix)<small class="text-secondary dark:text-gray-400 text-sm font-normal">{{ $prefix }}</small>@endif{{ $value }}@if($suffix)<small class="text-secondary dark:text-gray-400 text-sm font-normal">{{ $suffix }}</small>@endif
<span class="text-xs font-medium text-secondary dark:text-base/50 uppercase tracking-wide">{{ $label }}</span>
<span class="block text-xl font-bold text-primary dark:text-base/90 mt-1 transition-colors duration-200 group-hover:text-primary">
@if($prefix)<small class="text-secondary dark:text-base/50 text-sm font-normal">{{ $prefix }}</small>@endif{{ $value }}@if($suffix)<small class="text-secondary dark:text-base/50 text-sm font-normal">{{ $suffix }}</small>@endif
</span>
@if($change !== null || $changeLabel)
<div class="text-xs text-secondary dark:text-gray-400 mt-1">
<div class="text-xs text-secondary dark:text-base/50 mt-1">
@if($change !== null)
<span class="{{ $change >= 0 ? 'text-success' : 'text-error' }} font-semibold">
{{ $change >= 0 ? '+' : '' }}{{ $change }}%
@@ -112,7 +112,7 @@
</div>
@endif
@if($progress !== null)
<div class="h-1.5 bg-neutral/30 dark:bg-gray-700 rounded-full overflow-hidden mt-3">
<div class="h-1.5 bg-neutral/30 rounded-full overflow-hidden mt-3">
<div class="{{ $progressBarColor }} h-full rounded-full transition-all duration-500" style="width: {{ min(100, $progress) }}%"></div>
</div>
@endif

4
extensions/Servers/Proxmox/views/components/ui/table-row.blade.php
View File

@@ -16,7 +16,7 @@
@if($href)
<tr
{{ $attributes->class([
'border-b border-neutral dark:border-gray-700 last:border-b-0 transition-colors duration-200 cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/10',
'border-b border-neutral last:border-b-0 transition-colors duration-200 cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/10',
]) }}
onclick="window.location='{{ $href }}'"
>
@@ -24,7 +24,7 @@
</tr>
@else
<tr {{ $attributes->class([
'border-b border-neutral dark:border-gray-700 last:border-b-0 transition-colors duration-200',
'border-b border-neutral last:border-b-0 transition-colors duration-200',
'cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/10' => $clickable,
]) }}>
{{ $slot }}

6
extensions/Servers/Proxmox/views/components/ui/table-td.blade.php
View File

@@ -20,11 +20,11 @@
@endphp
<td {{ $attributes->class([
'px-5 py-3.5 text-sm text-secondary dark:text-gray-300 align-middle',
'px-5 py-3.5 text-sm text-secondary align-middle',
$alignClass,
'whitespace-nowrap' => $nowrap,
'text-secondary/80 dark:text-gray-400' => $muted,
'font-medium text-primary dark:text-gray-100' => $strong,
'text-secondary/80' => $muted,
'font-medium text-primary' => $strong,
]) }}>
{{ $slot }}
</td>

4
extensions/Servers/Proxmox/views/components/ui/table-th.blade.php
View File

@@ -21,7 +21,7 @@
$isSorted = $sortable && $sortKey === $currentSort;
$baseClasses = 'px-5 py-3.5 text-xs font-semibold uppercase tracking-wider text-secondary dark:text-gray-400 bg-transparent align-middle whitespace-nowrap';
$baseClasses = 'px-5 py-3.5 text-xs font-semibold uppercase tracking-wider text-secondary bg-transparent align-middle whitespace-nowrap';
$sortableClasses = $sortable ? 'cursor-pointer select-none transition-colors duration-200 hover:text-primary dark:hover:text-primary' : '';
$sortedClasses = $isSorted ? 'text-primary dark:text-primary' : '';
@endphp
@@ -40,7 +40,7 @@
<div class="flex items-center gap-1.5 {{ $alignClass }}">
<span>{{ $slot }}</span>
@if($sortable)
<span class="inline-flex {{ $isSorted ? 'text-primary' : 'text-secondary/50 dark:text-gray-500' }}">
<span class="inline-flex {{ $isSorted ? 'text-primary' : 'text-secondary/50' }}">
@if($isSorted)
@if($currentDirection === 'asc')
<x-ri-arrow-up-s-line class="size-4" />

10
extensions/Servers/Proxmox/views/components/ui/table.blade.php
View File

@@ -24,17 +24,17 @@
])
<div @class([
'relative w-full overflow-x-auto rounded-lg border border-neutral dark:border-gray-700 bg-background dark:bg-gray-800' => $responsive,
'relative w-full overflow-x-auto rounded-lg border border-neutral bg-background' => $responsive,
])>
<table {{ $attributes->class([
'w-full text-sm text-primary dark:text-gray-200 border-collapse',
'w-full text-sm text-primary border-collapse',
'[&_tbody_tr:nth-of-type(even)]:bg-black/[0.02] dark:[&_tbody_tr:nth-of-type(even)]:bg-white/[0.02]' => $striped,
'[&_tbody_tr]:transition-colors [&_tbody_tr]:duration-200 [&_tbody_tr:hover]:bg-black/[0.04] dark:[&_tbody_tr:hover]:bg-white/[0.04]' => $hoverable,
'border border-neutral dark:border-gray-700 [&_th]:border [&_th]:border-neutral dark:[&_th]:border-gray-700 [&_td]:border [&_td]:border-neutral dark:[&_td]:border-gray-700' => $bordered,
'border border-neutral [&_th]:border [&_th]:border-neutral [&_td]:border [&_td]:border-neutral' => $bordered,
'[&_th]:px-3 [&_th]:py-1.5 [&_td]:px-3 [&_td]:py-1.5' => $compact,
]) }}>
@if(isset($head))
<thead class="bg-background-secondary dark:bg-gray-700/50 border-b-2 border-neutral dark:border-gray-600">
<thead class="bg-background-secondary border-b-2 border-neutral">
<tr>
{{ $head }}
</tr>
@@ -44,7 +44,7 @@
{{ $slot }}
</tbody>
@if(isset($foot))
<tfoot class="bg-background-secondary dark:bg-gray-700/50 border-t-2 border-neutral dark:border-gray-600 font-medium">
<tfoot class="bg-background-secondary border-t-2 border-neutral font-medium">
{{ $foot }}
</tfoot>
@endif

14
extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
View File

@@ -26,11 +26,11 @@
>
{{-- Tab Navigation --}}
@if($variant === 'pills')
<div class="flex flex-wrap gap-1 p-1 bg-background-secondary dark:bg-gray-800 rounded-lg border border-neutral dark:border-gray-700">
<div class="flex flex-wrap gap-1 p-1 bg-background-secondary rounded-lg border border-neutral">
@elseif($variant === 'buttons')
<div class="flex gap-2">
@else
<ul class="flex flex-wrap list-none border-b border-neutral dark:border-gray-700">
<ul class="flex flex-wrap list-none border-b border-neutral">
@endif
@foreach($tabs as $tab)
@php
@@ -44,8 +44,8 @@
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}'
? 'text-primary bg-background dark:bg-gray-700 shadow-sm'
: 'text-secondary dark:text-gray-400 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
? 'text-primary bg-background dark:bg-background-secondary shadow-sm'
: 'text-secondary dark:text-base/50 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer"
>
@if($tabIcon)
@@ -62,7 +62,7 @@
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}'
? 'text-white bg-primary border-primary'
: 'text-secondary dark:text-gray-400 bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-gray-400'"
: 'text-secondary dark:text-base/50 bg-background dark:bg-background-secondary border-neutral dark:border-neutral hover:bg-background-secondary dark:hover:bg-background hover:border-primary/30'"
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border rounded-lg shadow-sm transition-all duration-200 cursor-pointer"
>
@if($tabIcon)
@@ -79,8 +79,8 @@
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}'
? 'text-primary bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 border-b-background dark:border-b-gray-800'
: 'text-secondary dark:text-gray-400 border-transparent hover:text-primary hover:border-gray-200 dark:hover:border-gray-600 hover:bg-black/5 dark:hover:bg-white/5'"
? 'text-primary bg-background dark:bg-background-secondary border-neutral dark:border-neutral border-b-background dark:border-b-background-secondary'
: 'text-secondary dark:text-base/50 border-transparent hover:text-primary hover:border-neutral dark:hover:border-neutral hover:bg-black/5 dark:hover:bg-white/5'"
class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border border-b-0 rounded-t-lg transition-all duration-150 cursor-pointer"
>
@if($tabIcon)

6
extensions/Servers/Proxmox/views/components/ui/toggle.blade.php
View File

@@ -19,10 +19,10 @@
@if($label || $description)
<div class="flex flex-col gap-0.5">
@if($label)
<span class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</span>
<span class="text-sm font-medium text-secondary">{{ $label }}</span>
@endif
@if($description)
<p class="text-xs text-secondary/80 dark:text-gray-400">{{ $description }}</p>
<p class="text-xs text-secondary/80">{{ $description }}</p>
@endif
</div>
@endif
@@ -33,7 +33,7 @@
{{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
class="peer sr-only"
/>
<div class="w-11 h-6 bg-neutral/40 dark:bg-gray-600 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
<div class="w-11 h-6 bg-neutral/40 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
<div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200 peer-checked:translate-x-5 pointer-events-none"></div>
</div>
</label>

2
extensions/Servers/Proxmox/views/components/ui/tooltip.blade.php
View File

@@ -42,7 +42,7 @@
x-transition:leave-end="opacity-0"
class="absolute z-[1070] pointer-events-none {{ $positionClasses[$position] ?? $positionClasses['top'] }}"
>
<div class="px-3 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-600 rounded-lg shadow-lg whitespace-nowrap">
<div class="px-3 py-1.5 text-xs font-medium text-white bg-background-secondary rounded-lg shadow-lg whitespace-nowrap">
{{ $text }}
</div>
</div>