Skip to content

Commit b28e831

Browse files
iShelarArcaneIRE
authored andcommitted
🎨 feat: enhance dark theme support for navbar and dropdown menus
- Override Bootstrap's styles for dark theme compatibility in the navbar - Add minimal dark theme support for dropdown menus - Ensure dropdown functionality is optimized for mobile devices
1 parent dc7376d commit b28e831

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

pythonie/core/static/css/style.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,14 @@ h1 {
186186
background-color: var(--nav-hover-bg);
187187
}
188188

189+
/* Override Bootstrap's .open styles for dark theme support */
190+
.navbar-default .navbar-nav > .open > a,
191+
.navbar-default .navbar-nav > .open > a:hover,
192+
.navbar-default .navbar-nav > .open > a:focus {
193+
color: var(--link-hover-color);
194+
background-color: var(--nav-hover-bg);
195+
}
196+
189197
.navbar-default .navbar-toggle .icon-bar {
190198
background-color: var(--nav-text);
191199
}
@@ -285,3 +293,37 @@ footer .well {
285293
.theme-toggle-label {
286294
font-weight: 500;
287295
}
296+
297+
/* Dropdown menu - minimal dark theme support */
298+
.navbar-default .dropdown-menu {
299+
background-color: var(--nav-bg);
300+
border-color: var(--border-color);
301+
}
302+
303+
.navbar-default .dropdown-menu > li > a {
304+
color: var(--nav-text);
305+
}
306+
307+
.navbar-default .dropdown-menu > li > a:hover,
308+
.navbar-default .dropdown-menu > li > a:focus {
309+
background-color: var(--nav-hover-bg);
310+
color: var(--link-hover-color);
311+
}
312+
313+
.navbar-default .dropdown-menu .divider {
314+
background-color: var(--border-color);
315+
}
316+
317+
/* Ensure dropdowns work on mobile */
318+
@media (max-width: 767px) {
319+
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
320+
color: var(--nav-text);
321+
padding: 10px 15px 10px 25px;
322+
}
323+
324+
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
325+
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
326+
background-color: var(--nav-hover-bg);
327+
color: var(--link-hover-color);
328+
}
329+
}

0 commit comments

Comments
 (0)