Update dropdown styling (Light/DarkMode) (#7382)

This commit is contained in:
TheDevRyan 2025-10-25 16:25:32 +01:00 committed by GitHub
parent 29858c65e7
commit f58217280a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3432,7 +3432,6 @@ nav .lbbuttonsel2 {
}
.userDropdownSubmenu .userDropdownMenuItem {
background-color: #f5f5f5;
border-left: 3px solid #444444 !important;
}
.userDropdownMenuItem:hover {
@ -3470,7 +3469,6 @@ nav .lbbuttonsel2 {
flex-direction: column !important;
} */
}
/* css fixes for select2 */
/* .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
display: inline;
@ -3528,14 +3526,15 @@ nav .lbbuttonsel2 {
position: absolute;
top: 100%;
right: 0;
background-color: #ffffff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
border-radius: 4px;
background-color: #f3f3f3;
box-shadow: 0 0 12px #0000004d;
border-radius: 10px;
z-index: 10000;
min-width: 200px;
margin-top: 4px;
transform: translateX(0);
font-family: sans-serif;
font-size: small;
}
#userDropdownMenuContainer {
@ -3548,13 +3547,14 @@ nav .lbbuttonsel2 {
gap: 10px;
padding: 10px 12px;
cursor: pointer;
color: #333;
color: var(--bs-body-color);
white-space: nowrap;
transition: background-color 0.15s ease;
font-size: small;
}
.userDropdownMenuItem:hover {
background-color: #f5f5f5;
background-color: #8181814a;
border-radius: 4px;
}
@ -3568,27 +3568,32 @@ nav .lbbuttonsel2 {
.userDropdownMenuItem span {
flex-grow: 1;
text-align: left;
color: #333;
font-size: 14px;
font-size: small;
line-height: 1.2;
}
#userDropdownMenuDivider {
border-top: 1px solid #eee;
border-top: var(--bs-border-width) solid #000000;
opacity: .25;
margin: 4px 0;
}
.night #userDropdownMenuDivider {
border-top: var(--bs-border-width) solid;
}
.userDropdownSubmenu {
position: absolute;
right: 96%;
top: 0;
background-color: #ffffff;
box-shadow: 0px 4px 12px rgb(0 0 0 / 95%);
border-radius: 4px;
background-color: #f3f3f3;
box-shadow: 0 0 12px #0000004d;
border-radius: 10px;
margin-right: 4px;
min-width: 200px;
z-index: 10001;
padding: 6px 0;
font-size: small;
}
.userDropdownSubmenu .userDropdownMenuItem {
@ -3596,11 +3601,10 @@ nav .lbbuttonsel2 {
align-items: center;
gap: 10px;
padding: 10px 12px;
color: #333;
}
.userDropdownSubmenu .userDropdownMenuItem:hover {
background-color: #f5f5f5;
background-color: #8181814a;
border-radius: 4px;
}
@ -3621,7 +3625,34 @@ nav .lbbuttonsel2 {
height: 14px;
opacity: 0.7;
}
.night #userDropdownMenu, .night .userDropdownSubmenu {
background-color: #292c2c;
}
body:not(.fullscreen) #userDropdown {
right: calc(50vw - 470px);
}
@media (min-width: 1025px) {
.userDropdownSubmenu {
display: block !important;
position: absolute;
opacity: 0;
transform: translateX(12px);
transition: opacity 0.2s ease, transform 0.3s ease;
pointer-events: none;
}
.userDropdownUISettings:hover + .userDropdownSubmenu,
.userDropdownSubmenu:hover,
.userDropdownMenuItem:hover .userDropdownSubmenu {
display: block !important;
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.userDropdownUISettings:hover .fa-chevron-right,
.userDropdownUISettings:has(+ .userDropdownSubmenu:hover) .fa-chevron-right {
transform: rotate(90deg) !important;
transition: transform 0.3s ease;
}
}