Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: update Proxmox layout styles to utilize color-mix for improved visual consistency and modern aesthetics across navigation and toggle components

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 09:57:37 -05:00
parent 1fd6fea41f
commit eceb6a7a9f
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -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 {