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

feat: add dropdown styles to Proxmox layout for enhanced user interaction and visual appeal

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 10:01:52 -05:00
parent 7d48f0b96f
commit 0e9826ed89
1 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -402,6 +402,92 @@
.proxmox-tab-wrapper {
animation: tabSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dropdown Styles */
.dropdown-wrapper {
position: relative;
}
.dropdown-trigger {
display: flex;
align-items: center;
gap: 4px;
}
.dropdown-icon {
transition: transform 0.2s ease;
width: 14px;
height: 14px;
}
.dropdown-wrapper.open .dropdown-icon {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
min-width: 180px;
background: color-mix(in srgb, var(--color-background-secondary) 95%, transparent);
backdrop-filter: blur(16px);
border: 1px solid color-mix(in srgb, var(--color-neutral) 35%, transparent);
border-radius: 12px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.03);
z-index: 50;
overflow: hidden;
}
.dark .dropdown-menu {
background: color-mix(in srgb, var(--color-background-secondary) 95%, transparent);
border-color: color-mix(in srgb, var(--color-neutral) 45%, transparent);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dropdown-item {
display: block;
padding: 10px 16px;
font-size: 0.8125rem;
font-weight: 600;
transition: all 0.2s ease;
border-left: 3px solid transparent;
color: color-mix(in srgb, var(--color-base) 70%, transparent);
}
.dropdown-item:hover {
background: linear-gradient(135deg,
rgba(37, 99, 235, 0.08),
rgba(59, 130, 246, 0.05));
border-left-color: rgba(37, 99, 235, 0.3);
color: color-mix(in srgb, var(--color-base) 90%, transparent);
}
.dropdown-item.active {
background: linear-gradient(135deg,
rgba(37, 99, 235, 0.15),
rgba(59, 130, 246, 0.1));
border-left-color: rgb(37, 99, 235);
color: rgb(37, 99, 235);
}
.dark .dropdown-item.active {
background: linear-gradient(135deg,
rgba(59, 130, 246, 0.2),
rgba(37, 99, 235, 0.15));
border-left-color: rgb(96, 165, 250);
color: rgb(96, 165, 250);
}
.dropdown-divider {
height: 1px;
background: color-mix(in srgb, var(--color-neutral) 30%, transparent);
margin: 4px 0;
}
</style>
<div class="hidden lg:block">