Add AdminLTE-style CSS framework to app.css
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h2 class="text-xl font-semibold break-words">System Configuration</h2>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -32,7 +32,7 @@
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<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">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 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>
|
||||
@@ -47,7 +47,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Configure low-level system settings including firmware type, CPU model, machine type, and virtualization features. These settings affect how the virtual machine hardware is presented to the guest operating system.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Firmware & Machine:</span> Select the chipset architecture (Q35 or i440fx) and firmware type (SeaBIOS or OVMF/UEFI).
|
||||
</p>
|
||||
@@ -62,17 +62,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/60">Manage firmware, CPU, SMBIOS, and trusted module devices exposed to this VPS.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Manage firmware, CPU, SMBIOS, and trusted module devices exposed to this VPS.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 xl:grid-cols-2">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-lg font-semibold break-words">Firmware & Machine</h3>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -100,7 +100,7 @@
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<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">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 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>
|
||||
@@ -115,7 +115,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Configure the virtual machine's chipset architecture and firmware type. These settings determine the hardware interface presented to the guest operating system.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Machine Type:</span> Q35 offers PCIe and UEFI-friendly layout, while i440fx mirrors legacy Intel chipsets for maximum compatibility.
|
||||
</p>
|
||||
@@ -130,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/60 mt-1">Select the chipset, firmware, and power-management features available to the guest.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Select the chipset, firmware, and power-management features available to the guest.</p>
|
||||
</div>
|
||||
@if($this->firmwareMachineSynced)
|
||||
<span class="text-xs font-semibold text-success">Synced</span>
|
||||
@@ -179,14 +179,14 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="inline-flex items-start gap-2 text-sm font-medium text-base/70">
|
||||
<label class="inline-flex items-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
<input type="checkbox" wire:model.live="acpiEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-0.5">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span>Enable ACPI support</span>
|
||||
<p class="text-xs text-base/50 font-normal">ACPI (Advanced Configuration and Power Interface) enables power management, device configuration, and graceful shutdown. Required for most modern operating systems.</p>
|
||||
</div>
|
||||
</label>
|
||||
<label class="inline-flex items-start gap-2 text-sm font-medium text-base/70">
|
||||
<label class="inline-flex items-start gap-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
<input type="checkbox" wire:model.live="kvmEnabled" class="rounded border-neutral text-secondary focus:ring-secondary mt-0.5">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span>Enable KVM virtualization</span>
|
||||
@@ -197,13 +197,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-lg font-semibold break-words">CPU & Virtualization</h3>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -231,7 +231,7 @@
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<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">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 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>
|
||||
@@ -246,7 +246,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
Configure the virtual CPU model and hardware-assisted virtualization features. These settings affect CPU performance and compatibility with the guest operating system.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">CPU Type:</span> Select a specific CPU model or use "host" to expose all host CPU features. "host" offers best performance but may reduce portability.
|
||||
</p>
|
||||
@@ -261,7 +261,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/60 mt-1">Tune the virtual CPU model and host feature flags exposed to the guest OS.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Tune the virtual CPU model and host feature flags exposed to the guest OS.</p>
|
||||
</div>
|
||||
@if($this->cpuVirtualizationSynced)
|
||||
<span class="text-xs font-semibold text-success">Synced</span>
|
||||
@@ -286,7 +286,7 @@
|
||||
<label class="text-sm font-semibold text-base/80">CPU Flags</label>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
@foreach($flagOptions as $flag => $label)
|
||||
<label class="flex items-center gap-2 rounded-md border border-neutral/60 px-3 py-2 text-sm text-base/70">
|
||||
<label class="flex items-center gap-2 rounded-md border border-neutral/60 px-3 py-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<input type="checkbox" value="{{ $flag }}" wire:model.live="selectedCpuFlags"
|
||||
class="rounded border-neutral text-secondary focus:ring-secondary">
|
||||
<span>{{ $label }}</span>
|
||||
@@ -297,7 +297,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-base/60 mb-2">Warning: These flags may not be supported by all CPUs.</p>
|
||||
<p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">Warning: These flags may not be supported by all CPUs.</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
|
||||
|
||||
@@ -311,13 +311,13 @@
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 xl:grid-cols-2">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-lg font-semibold break-words">EFI Disks</h3>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -345,7 +345,7 @@
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<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">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 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>
|
||||
@@ -360,7 +360,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
EFI (Extensible Firmware Interface) disks provide non-volatile storage for UEFI firmware variables. These are required for UEFI-based virtual machines to store boot configuration and Secure Boot keys.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Purpose:</span> UEFI guests require an EFI storage chip to store firmware variables, boot entries, and Secure Boot configuration.
|
||||
</p>
|
||||
@@ -375,7 +375,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/60 mt-1">UEFI guests require an EFI storage chip. Each entry maps to an efidisk slot.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">UEFI guests require an EFI storage chip. Each entry maps to an efidisk slot.</p>
|
||||
</div>
|
||||
@if($this->efiDisksSynced)
|
||||
<span class="text-xs font-semibold text-success">Synced</span>
|
||||
@@ -394,7 +394,7 @@
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-base/60 break-all">{{ $definition }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 break-all">{{ $definition }}</p>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-xs text-base/50 border border-dashed border-neutral rounded-md px-3 py-4 text-center">
|
||||
@@ -409,7 +409,7 @@
|
||||
<div class="grid gap-2">
|
||||
<p class="text-xs text-base/50">EFI disks are provisioned automatically on cephpool with a fixed 4M size in raw format.</p>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="inline-flex items-center gap-2 text-xs font-semibold text-base/60">
|
||||
<label class="inline-flex items-center gap-2 text-xs font-semibold text-gray-500 dark:text-gray-400">
|
||||
<input type="checkbox" wire:model="newEfiPreenroll"
|
||||
class="rounded border-neutral text-secondary focus:ring-secondary">
|
||||
Preenroll keys
|
||||
@@ -425,13 +425,13 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-5 space-y-4">
|
||||
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-theme-sm p-5 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-lg font-semibold break-words">TPM Devices</h3>
|
||||
<div class="relative" x-data="{ open: false }" x-cloak>
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
|
||||
<button type="button" @click="open = true" class="text-base/50 hover:text-gray-600 dark:text-gray-400 transition-colors">
|
||||
<x-ri-question-line class="size-4" />
|
||||
</button>
|
||||
<!-- Modal Backdrop -->
|
||||
@@ -459,7 +459,7 @@
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
style="display: none;">
|
||||
<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">
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-gray-200 dark:border-gray-800 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>
|
||||
@@ -474,7 +474,7 @@
|
||||
<p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
|
||||
TPM (Trusted Platform Module) devices provide hardware-based security features for virtual machines. They enable secure boot, BitLocker encryption, and other security features that require TPM functionality.
|
||||
</p>
|
||||
<div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
|
||||
<div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-800 space-y-2.5">
|
||||
<p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
|
||||
<span class="font-semibold text-base/90">Purpose:</span> Virtual TPM devices expose TPM functionality to the guest OS, enabling features like Secure Boot, BitLocker disk encryption, and Windows Device Guard.
|
||||
</p>
|
||||
@@ -489,7 +489,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-base/60 mt-1">Expose virtual TPM state chips for secure boot or BitLocker workloads.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Expose virtual TPM state chips for secure boot or BitLocker workloads.</p>
|
||||
</div>
|
||||
@if($this->tpmDevicesSynced)
|
||||
<span class="text-xs font-semibold text-success">Synced</span>
|
||||
@@ -508,7 +508,7 @@
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-base/60 break-all">{{ $definition }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 break-all">{{ $definition }}</p>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-xs text-base/50 border border-dashed border-neutral rounded-md px-3 py-4 text-center">
|
||||
@@ -523,7 +523,7 @@
|
||||
<div class="grid gap-2">
|
||||
<p class="text-xs text-base/50">TPM devices are provisioned on cephpool with a fixed 4M state file.</p>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-semibold text-base/60">Version</label>
|
||||
<label class="text-xs font-semibold text-gray-500 dark:text-gray-400">Version</label>
|
||||
<select wire:model="newTpmVersion"
|
||||
class="bg-background border border-neutral rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-secondary">
|
||||
<option value="v1.2">v1.2</option>
|
||||
|
||||
Reference in New Issue
Block a user