quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/base.html
+1 -1
View File
@@ -84,7 +84,7 @@
<nav class="topbar navbar navbar-light bg-white shadow-sm">
<div class="container-fluid px-3 gap-2">
<a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('portal_index') }}">
<span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS-OBD</span>
<span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#fff;">YARIS-OBD</span>
<span class="badge bg-warning text-dark ms-1" style="font-size:.6rem;">Remote</span>
</a>
<div class="d-flex align-items-center gap-2">
static/yaris.css
+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;
}
templates/base.html
+1 -1
View File
@@ -67,7 +67,7 @@
<div class="container-fluid px-3 gap-2">
{# Mobile: logo on left #}
<a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('index') }}">
<span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS-OBD</span>
<span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#fff;">YARIS-OBD</span>
</a>
<div class="ms-auto d-flex align-items-center gap-2">
<div class="dropdown">