style: dark mobile UI — bottom nav + topbar match sidebar

- Mobile bottom nav: white → dark (#1c1c1e) bg, white icons/text
- Mobile topbar: white → dark bg on small screens, white text/controls
- Mobile logo color: dark → white for dark bg readability
- Desktop topbar remains white (contrasts with dark sidebar)
This commit is contained in:
Mathieu Moran
2026-08-12 05:34:24 -04:00
parent 6ac750f53b
commit 4a919b55a1
3 changed files with 30 additions and 8 deletions
+28 -6
View File
@@ -190,10 +190,10 @@ body {
left: 0;
right: 0;
height: 3.75rem;
background: #fff;
border-top: 1px solid rgba(0,0,0,.1);
background: var(--sidebar-bg);
border-top: 1px solid rgba(255,255,255,.1);
z-index: 1040;
box-shadow: 0 -2px 8px rgba(0,0,0,.08);
box-shadow: 0 -2px 8px rgba(0,0,0,.3);
}
.mobile-nav-item {
@@ -203,7 +203,7 @@ body {
align-items: center;
justify-content: center;
gap: .2rem;
color: #6c757d;
color: rgba(255,255,255,.55);
text-decoration: none;
font-size: .6rem;
font-weight: 500;
@@ -218,17 +218,39 @@ body {
}
.mobile-nav-item.active {
color: var(--primary);
color: #fff;
}
.mobile-nav-item:hover {
color: var(--primary);
color: rgba(255,255,255,.85);
}
/* Mobile: dark topbar (no sidebar on mobile, so topbar acts as the header) */
@media (max-width: 767.98px) {
#content-wrapper {
margin-left: 0 !important;
}
.topbar {
background: var(--sidebar-bg) !important;
border-bottom: 1px solid rgba(255,255,255,.1);
color: #fff;
}
.topbar .navbar-brand,
.topbar .text-muted,
.topbar .btn-outline-secondary {
color: rgba(255,255,255,.85) !important;
border-color: rgba(255,255,255,.25);
}
.topbar .btn-outline-secondary:hover {
background: rgba(255,255,255,.1);
color: #fff !important;
}
.topbar .fa-bell { color: rgba(255,255,255,.7) !important; }
.topbar .form-select-sm {
background-color: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.2);
color: #fff;
}
.main-content {
padding-bottom: 7rem;
}