Skip to content

Commit 12cee20

Browse files
dgarcia360dgarcia360
committed
fix: navbar css
1 parent 96371e1 commit 12cee20

2 files changed

Lines changed: 185 additions & 16 deletions

File tree

‎src/css/custom.css‎

Lines changed: 151 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@
3030
--biel-button-border-radius: 8px;
3131
--biel-search-button-border-radius: 8px;
3232
--biel-search-button-bg-color: transparent;
33+
--biel-search-button-text-font-size: 0.875rem;
34+
--biel-search-button-text-color: rgba(24, 24, 27, 0.5);
3335
--ifm-navbar-item-padding-vertical: 0;
36+
--ifm-navbar-shadow: none;
3437
--ifm-link-decoration: underline;
3538

3639
/* Typography improvements */
@@ -74,14 +77,80 @@
7477
--feedback-button-dark-text-color: #18181b;
7578
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
7679
--ifm-menu-color-background-active: var(--ifm-hover-overlay);
77-
--ifm-navbar-shadow: 0 0.5px 0.5px 0 #dadde1;
80+
--ifm-navbar-shadow: none;
7881
--ifm-code-background: rgba(255, 255, 255, 0.08);
82+
--biel-search-button-text-color: rgba(255, 255, 255, 0.5);
83+
--biel-search-button-shortcut-text-color: rgba(255, 255, 255, 0.4);
84+
--feedback-modal-button-border-color-active: #fff;
85+
--feedback-modal-button-text-color-active: #fff;
86+
--feedback-modal-button-border-color: rgba(255, 255, 255, 0.3);
87+
--feedback-modal-button-text-color: rgba(255, 255, 255, 0.6);
88+
}
89+
90+
/* Feedback widget — "Was this helpful?" */
91+
.feedback-widget {
92+
display: flex;
93+
align-items: center;
94+
gap: 0.5rem;
95+
padding-top: 1.5rem;
96+
border-top: 1px solid var(--ifm-toc-border-color);
97+
}
98+
99+
.feedback-widget b {
100+
font-weight: 500;
101+
font-size: 0.875rem;
102+
color: rgba(24, 24, 27, 0.6);
103+
margin-right: 0.25rem;
104+
}
105+
106+
[data-theme='dark'] .feedback-widget b {
107+
color: rgba(255, 255, 255, 0.6);
108+
}
109+
110+
.feedback-widget .button--outline {
111+
display: flex;
112+
align-items: center;
113+
justify-content: center;
114+
width: 34px;
115+
height: 34px;
116+
padding: 0;
117+
border: 1px solid #e4e4e7;
118+
border-radius: 6px;
119+
background: transparent;
120+
color: rgba(24, 24, 27, 0.5);
121+
cursor: pointer;
122+
transition: all 0.15s ease;
123+
--ifm-button-color: rgba(24, 24, 27, 0.5);
124+
}
125+
126+
.feedback-widget .button--outline:hover {
127+
border-color: #a1a1aa;
128+
color: #18181b;
129+
background: #f4f4f5;
130+
--ifm-button-color: #18181b;
79131
}
80132

81133
[data-theme='dark'] .feedback-widget .button--outline {
134+
border-color: #3f3f46;
135+
color: rgba(255, 255, 255, 0.5);
136+
--ifm-button-color: rgba(255, 255, 255, 0.5);
137+
}
138+
139+
[data-theme='dark'] .feedback-widget .button--outline:hover {
140+
border-color: #52525b;
141+
color: #fff;
142+
background: #27272a;
82143
--ifm-button-color: #fff;
83144
}
84145

146+
.feedback-widget .margin-bottom--sm {
147+
margin-bottom: 0 !important;
148+
}
149+
150+
.feedback-widget .margin-left--sm {
151+
margin-left: 0 !important;
152+
}
153+
85154

86155
.footer {
87156
display: none;
@@ -97,36 +166,87 @@
97166
}
98167

99168
.navbar__logo img {
100-
height: 34px;
169+
height: 32px;
101170
}
102171

103-
/* Navbar item ordering — move dark/light toggle before search */
172+
/* Navbar item ordering — search first, then links, signup, then theme toggle last */
104173
.navbar__items--right {
105174
display: flex;
106175
align-items: center;
176+
gap: 1rem;
177+
}
178+
179+
.navbar__items--right > [class*="navbarSearchContainer"] {
180+
order: -1;
107181
}
108182

109183
.navbar__items--right > .colorModeToggle_DEke,
110184
.navbar__items--right > [class*="colorModeToggle"] {
111185
order: -2;
112186
}
113187

114-
.navbar__items--right > [class*="navbarSearchContainer"] {
115-
order: -1;
188+
/* Color mode toggle — clean sun/moon icon */
189+
.clean-color-toggle {
190+
display: flex;
191+
align-items: center;
192+
justify-content: center;
193+
width: 32px;
194+
height: 32px;
195+
background: none;
196+
border: none;
197+
padding: 0;
198+
cursor: pointer;
199+
color: rgba(24, 24, 27, 0.5);
200+
border-radius: 6px;
201+
transition: color 0.15s ease, background-color 0.15s ease;
202+
}
203+
204+
.clean-color-toggle:hover {
205+
color: #18181b;
206+
background-color: #f4f4f5;
207+
}
208+
209+
[data-theme='dark'] .clean-color-toggle {
210+
color: rgba(255, 255, 255, 0.5);
211+
}
212+
213+
[data-theme='dark'] .clean-color-toggle:hover {
214+
color: #fff;
215+
background-color: #27272a;
216+
}
217+
218+
/* Mobile hamburger menu — match landing page size */
219+
.navbar__toggle svg {
220+
width: 20px;
221+
height: 20px;
116222
}
117223

118224
/* Navbar link styles */
119225
.navbar__link {
120226
text-decoration: none !important;
121227
font-weight: 400;
228+
font-size: 0.875rem;
229+
color: rgba(24, 24, 27, 0.6);
230+
transition: color 0.1s ease-in-out;
122231
}
123232

124233
.navbar__link:hover {
125234
text-decoration: none !important;
235+
color: #18181b;
126236
}
127237

128238
.navbar__link--active {
129239
font-weight: 600;
240+
color: #18181b;
241+
}
242+
243+
[data-theme='dark'] .navbar__link {
244+
color: rgba(255, 255, 255, 0.6);
245+
}
246+
247+
[data-theme='dark'] .navbar__link:hover,
248+
[data-theme='dark'] .navbar__link--active {
249+
color: #fff;
130250
}
131251

132252
/* Hide external link icons */
@@ -147,18 +267,18 @@
147267

148268
/* Sign up button in navbar */
149269
.navbar__item--signup {
150-
background-color: var(--ifm-color-primary);
270+
background-color: #18181b;
151271
color: #fff !important;
152272
border-radius: 6px;
153273
padding: 6px 16px !important;
154-
font-weight: 600;
274+
font-weight: 500;
155275
font-size: 0.875rem;
156276
text-decoration: none !important;
157277
transition: background-color 0.2s ease;
158278
}
159279

160280
.navbar__item--signup:hover {
161-
background-color: var(--ifm-color-primary-dark);
281+
background-color: #27272a;
162282
color: #fff !important;
163283
}
164284

@@ -315,8 +435,8 @@ html[class*="plugin-@scalar"] .footer {
315435
html[class*="plugin-@scalar"] .navbar__inner {
316436
max-width: 1432px;
317437
margin: 0 auto;
318-
padding-left: 1.5rem;
319-
padding-right: 1.5rem;
438+
padding-left: 2rem;
439+
padding-right: 2rem;
320440
}
321441
}
322442

@@ -841,8 +961,8 @@ a.card.padding--lg {
841961
.navbar__inner {
842962
max-width: 1432px;
843963
margin: 0 auto;
844-
padding-left: 1.5rem;
845-
padding-right: 1.5rem;
964+
padding-left: 2rem;
965+
padding-right: 2rem;
846966
}
847967

848968
.main-wrapper {
@@ -905,11 +1025,26 @@ a.card.padding--lg {
9051025
padding-right: 3rem;
9061026
}
9071027

1028+
.navbar {
1029+
border-bottom: 1px solid #e4e4e7;
1030+
box-shadow: none;
1031+
}
1032+
9081033
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
9091034
.navbar {
910-
-webkit-backdrop-filter: blur(12px);
911-
backdrop-filter: blur(12px);
912-
background-color: initial;
1035+
-webkit-backdrop-filter: blur(4px);
1036+
backdrop-filter: blur(4px);
1037+
background-color: rgba(255, 255, 255, 0.8);
1038+
}
1039+
}
1040+
1041+
[data-theme='dark'] .navbar {
1042+
border-bottom: 1px solid #27272a;
1043+
}
1044+
1045+
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
1046+
[data-theme='dark'] .navbar {
1047+
background-color: rgba(24, 24, 27, 0.8);
9131048
}
914-
}
1049+
}
9151050
}

‎src/theme/ColorModeToggle/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import {useColorMode} from '@docusaurus/theme-common';
3+
4+
export default function ColorModeToggle() {
5+
const {colorMode, setColorMode} = useColorMode();
6+
const isDark = colorMode === 'dark';
7+
8+
return (
9+
<button
10+
className="clean-color-toggle"
11+
onClick={() => setColorMode(isDark ? 'light' : 'dark')}
12+
title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
13+
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
14+
>
15+
{isDark ? (
16+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
17+
<circle cx="12" cy="12" r="5" />
18+
<line x1="12" y1="1" x2="12" y2="3" />
19+
<line x1="12" y1="21" x2="12" y2="23" />
20+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
21+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
22+
<line x1="1" y1="12" x2="3" y2="12" />
23+
<line x1="21" y1="12" x2="23" y2="12" />
24+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
25+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
26+
</svg>
27+
) : (
28+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
29+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
30+
</svg>
31+
)}
32+
</button>
33+
);
34+
}

0 commit comments

Comments
 (0)