Update dropdown styling (Light/DarkMode) (#7382)
TheDevRyan committed
Oct 25, 2025 at 16:25 UTC
f58217280a3d0fff76ad9a3c73c499dbdb746406
1 file changed
+46
-15
public/styles/style-bootstrap.css
+46
-15
@@ -3432,7 +3432,6 @@ nav .lbbuttonsel2 {
3432
}
3433
3434
.userDropdownSubmenu .userDropdownMenuItem {
3435
- background-color: #f5f5f5;
3435
border-left: 3px solid #444444 !important;
3436
}
3437
.userDropdownMenuItem:hover {
@@ -3470,7 +3469,6 @@ nav .lbbuttonsel2 {
3469
flex-direction: column !important;
3470
} */
3471
}
3473
-
3472
/* css fixes for select2 */
3473
/* .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
3474
display: inline;
@@ -3528,14 +3526,15 @@ nav .lbbuttonsel2 {
3526
position: absolute;
3527
top: 100%;
3528
right: 0;
3531
- background-color: #ffffff;
3532
- box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
3533
- border-radius: 4px;
3529
+ background-color: #f3f3f3;
3530
+ box-shadow: 0 0 12px #0000004d;
3531
+ border-radius: 10px;
3532
z-index: 10000;
3533
min-width: 200px;
3534
margin-top: 4px;
3535
transform: translateX(0);
3536
font-family: sans-serif;
3537
+ font-size: small;
3538
}
3539
3540
#userDropdownMenuContainer {
@@ -3548,13 +3547,14 @@ nav .lbbuttonsel2 {
3547
gap: 10px;
3548
padding: 10px 12px;
3549
cursor: pointer;
3551
- color: #333;
3550
+ color: var(--bs-body-color);
3551
white-space: nowrap;
3552
transition: background-color 0.15s ease;
3553
+ font-size: small;
3554
}
3555
3556
.userDropdownMenuItem:hover {
3557
- background-color: #f5f5f5;
3557
+ background-color: #8181814a;
3558
border-radius: 4px;
3559
}
3560
@@ -3568,27 +3568,32 @@ nav .lbbuttonsel2 {
3568
.userDropdownMenuItem span {
3569
flex-grow: 1;
3570
text-align: left;
3571
- color: #333;
3572
- font-size: 14px;
3571
+ font-size: small;
3572
line-height: 1.2;
3573
}
3574
3575
#userDropdownMenuDivider {
3577
- border-top: 1px solid #eee;
3576
+ border-top: var(--bs-border-width) solid #000000;
3577
+ opacity: .25;
3578
margin: 4px 0;
3579
}
3580
3581
+.night #userDropdownMenuDivider {
3582
+ border-top: var(--bs-border-width) solid;
3583
+}
3584
+
3585
.userDropdownSubmenu {
3586
position: absolute;
3587
right: 96%;
3588
top: 0;
3585
- background-color: #ffffff;
3586
- box-shadow: 0px 4px 12px rgb(0 0 0 / 95%);
3587
- border-radius: 4px;
3589
+ background-color: #f3f3f3;
3590
+ box-shadow: 0 0 12px #0000004d;
3591
+ border-radius: 10px;
3592
margin-right: 4px;
3593
min-width: 200px;
3594
z-index: 10001;
3595
padding: 6px 0;
3596
+ font-size: small;
3597
}
3598
3599
.userDropdownSubmenu .userDropdownMenuItem {
@@ -3596,11 +3601,10 @@ nav .lbbuttonsel2 {
3601
align-items: center;
3602
gap: 10px;
3603
padding: 10px 12px;
3599
- color: #333;
3604
}
3605
3606
.userDropdownSubmenu .userDropdownMenuItem:hover {
3603
- background-color: #f5f5f5;
3607
+ background-color: #8181814a;
3608
border-radius: 4px;
3609
}
3610
@@ -3621,7 +3625,34 @@ nav .lbbuttonsel2 {
3625
height: 14px;
3626
opacity: 0.7;
3627
}
3628
+.night #userDropdownMenu, .night .userDropdownSubmenu {
3629
+ background-color: #292c2c;
3630
+}
3631
3632
body:not(.fullscreen) #userDropdown {
3633
right: calc(50vw - 470px);
3634
+}
3635
+@media (min-width: 1025px) {
3636
+ .userDropdownSubmenu {
3637
+ display: block !important;
3638
+ position: absolute;
3639
+ opacity: 0;
3640
+ transform: translateX(12px);
3641
+ transition: opacity 0.2s ease, transform 0.3s ease;
3642
+ pointer-events: none;
3643
+ }
3644
+
3645
+ .userDropdownUISettings:hover + .userDropdownSubmenu,
3646
+ .userDropdownSubmenu:hover,
3647
+ .userDropdownMenuItem:hover .userDropdownSubmenu {
3648
+ display: block !important;
3649
+ opacity: 1;
3650
+ transform: translateX(0);
3651
+ pointer-events: auto;
3652
+ }
3653
+ .userDropdownUISettings:hover .fa-chevron-right,
3654
+ .userDropdownUISettings:has(+ .userDropdownSubmenu:hover) .fa-chevron-right {
3655
+ transform: rotate(90deg) !important;
3656
+ transition: transform 0.3s ease;
3657
+ }
3658
}
\ No newline at end of file