Fix dropdown menu styling: no rounded corners, no gaps, consistent hover
- border-radius: 0 on all dropdown-menu and dropdown-item - padding: 0 and margin: 0 on dropdown-menu - margin-left: 0 on submenu (no gap between parent and child) - margin-top: -1px on submenu (seamless border overlap) - CSS hover opens submenu on desktop, click on mobile - white-space: nowrap on dropdown items - Fix statistics getFullStats -> getStats - Fix Twig ?? operator -> default filter on dashboard/statistics - Asset server (public/asset.php) for production static file serving - .htaccess rewrite rules for themes/admin/plugins assets
This commit is contained in:
@@ -110,17 +110,27 @@ $header-bg-opacity: 1;
|
||||
.dropdown-menu {
|
||||
background-color: var(--header-bg) !important;
|
||||
border: 1px solid var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--header-font) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
&:hover {
|
||||
&:hover, &:focus {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--header-font) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove Bootstrap dropdown border/spacing on nav-tabs dropdown
|
||||
.nav-tabs .dropdown-menu {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
// Hide Bootstrap dropdown arrow and use custom icon
|
||||
.dropdown-toggle::after {
|
||||
display: none !important;
|
||||
@@ -287,6 +297,61 @@ $header-bg-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
|
||||
> .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -1px;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Open submenu on hover (desktop)
|
||||
&:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Keep parent highlighted when hovering submenu
|
||||
&:hover > .dropdown-toggle {
|
||||
background-color: rgba(255, 255, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
// Arrow pointing right
|
||||
> .dropdown-toggle .bi-chevron-right {
|
||||
float: right;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure dropdown items fill width and no gaps
|
||||
.dropdown-menu .dropdown-item {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Mobile: submenu appears below instead of beside, open on tap
|
||||
@media (max-width: 767.98px) {
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 0;
|
||||
margin-left: 1rem;
|
||||
border: none;
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
.dropdown-submenu.show > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar styling
|
||||
.sidebar-column {
|
||||
background-color: var(--sidebar-bg) !important;
|
||||
|
||||
Reference in New Issue
Block a user