From eceb6a7a9f3e1351f6f4f0c3a0f2642c43cccc61 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 09:57:37 -0500
Subject: [PATCH] feat: update Proxmox layout styles to utilize color-mix for
 improved visual consistency and modern aesthetics across navigation and
 toggle components

---
 .../Proxmox/views/components/layout.blade.php | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 8664afb58..13cc14d54 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -174,9 +174,9 @@
                 <style>
                     /* Modern Navigation Styles */
                     .proxmox-nav-container {
-                        background: rgba(var(--background-secondary-rgb, 255, 255, 255), 0.6);
+                        background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
                         backdrop-filter: blur(12px);
-                        border: 1px solid rgba(var(--neutral-rgb, 229, 231, 235), 0.3);
+                        border: 1px solid color-mix(in srgb, var(--color-neutral) 30%, transparent);
                         border-radius: 14px;
                         padding: 8px;
                         box-shadow: 
@@ -186,8 +186,8 @@
                     }
 
                     .dark .proxmox-nav-container {
-                        background: rgba(var(--background-secondary-rgb, 31, 41, 55), 0.8);
-                        border-color: rgba(var(--neutral-rgb, 75, 85, 99), 0.4);
+                        background: color-mix(in srgb, var(--color-background-secondary) 80%, transparent);
+                        border-color: color-mix(in srgb, var(--color-neutral) 40%, transparent);
                         box-shadow: 
                             0 1px 3px rgba(0, 0, 0, 0.3),
                             0 0 0 1px rgba(255, 255, 255, 0.05);
@@ -259,11 +259,11 @@
                     }
 
                     .proxmox-tab-link:not(.active) {
-                        color: rgba(var(--base-rgb, 0, 0, 0), 0.65);
+                        color: color-mix(in srgb, var(--color-base) 65%, transparent);
                     }
 
                     .dark .proxmox-tab-link:not(.active) {
-                        color: rgba(var(--base-rgb, 255, 255, 255), 0.65);
+                        color: color-mix(in srgb, var(--color-base) 65%, transparent);
                     }
 
                     /* Modern Toggle Switch */
@@ -272,16 +272,16 @@
                         align-items: center;
                         gap: 12px;
                         padding: 6px 12px;
-                        background: rgba(var(--background-rgb, 255, 255, 255), 0.5);
-                        border: 1px solid rgba(var(--neutral-rgb, 229, 231, 235), 0.4);
+                        background: color-mix(in srgb, var(--color-background) 50%, transparent);
+                        border: 1px solid color-mix(in srgb, var(--color-neutral) 40%, transparent);
                         border-radius: 12px;
                         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
                         transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
                     }
 
                     .dark .modern-toggle-container {
-                        background: rgba(var(--background-rgb, 17, 24, 39), 0.6);
-                        border-color: rgba(var(--neutral-rgb, 75, 85, 99), 0.5);
+                        background: color-mix(in srgb, var(--color-background) 60%, transparent);
+                        border-color: color-mix(in srgb, var(--color-neutral) 50%, transparent);
                     }
 
                     .modern-toggle-label {
@@ -294,7 +294,7 @@
                     }
 
                     .modern-toggle-label.inactive {
-                        color: rgba(var(--base-rgb, 0, 0, 0), 0.4);
+                        color: color-mix(in srgb, var(--color-base) 40%, transparent);
                     }
 
                     .modern-toggle-label.active {
@@ -306,7 +306,7 @@
                     }
 
                     .dark .modern-toggle-label.inactive {
-                        color: rgba(var(--base-rgb, 255, 255, 255), 0.4);
+                        color: color-mix(in srgb, var(--color-base) 40%, transparent);
                     }
 
                     .modern-toggle-switch {
@@ -474,9 +474,9 @@
                 ">
                     <style>
                         .mobile-nav-button {
-                            background: rgba(var(--background-secondary-rgb, 255, 255, 255), 0.6);
+                            background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
                             backdrop-filter: blur(12px);
-                            border: 1px solid rgba(var(--neutral-rgb, 229, 231, 235), 0.3);
+                            border: 1px solid color-mix(in srgb, var(--color-neutral) 30%, transparent);
                             border-radius: 12px;
                             padding: 12px 16px;
                             box-shadow: 
@@ -486,8 +486,8 @@
                         }
 
                         .dark .mobile-nav-button {
-                            background: rgba(var(--background-secondary-rgb, 31, 41, 55), 0.8);
-                            border-color: rgba(var(--neutral-rgb, 75, 85, 99), 0.4);
+                            background: color-mix(in srgb, var(--color-background-secondary) 80%, transparent);
+                            border-color: color-mix(in srgb, var(--color-neutral) 40%, transparent);
                         }
 
                         .mobile-nav-button:active {