MyFavMirrors/MeshCentral
1
0
Fork 0
mirror of https://github.com/Ylianst/MeshCentral.git synced 2025-10-29 15:25:01 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
public/styles/style-bootstrap.css
View File

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