Skip to content

Commit a5f3850

Browse files
baijumclaude
baijum
and
claude
committed
fix: ensure active top-nav tab text is readable on dark header
Material for MkDocs applies --md-primary-bg-color as active tab text color, which was ink-black on our ink-black header — invisible. Force header/tab backgrounds and all tab link states with !important overrides. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8bb2c0f commit a5f3850

1 file changed

Lines changed: 272 additions & 0 deletions

File tree

‎docs/stylesheets/custom.css‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
/* ==========================================================================
2+
Towlion Platform — Mission Control Theme
3+
Matches the landing page palette: ink-black, amber/gold, cyan accents
4+
========================================================================== */
5+
6+
:root,
7+
[data-md-color-scheme="slate"] {
8+
/* Primary palette */
9+
--md-primary-fg-color: #e8a832;
10+
--md-primary-fg-color--light: #f0be5a;
11+
--md-primary-fg-color--dark: #c48a1a;
12+
--md-primary-bg-color: #06080d;
13+
--md-primary-bg-color--light: #0c0f16;
14+
15+
/* Accent */
16+
--md-accent-fg-color: #32d4e8;
17+
--md-accent-fg-color--transparent: rgba(50, 212, 232, 0.1);
18+
19+
/* Default backgrounds and text */
20+
--md-default-bg-color: #0c0f16;
21+
--md-default-bg-color--light: #111520;
22+
--md-default-bg-color--lighter: #161b28;
23+
--md-default-bg-color--lightest: #1c2333;
24+
--md-default-fg-color: #c8cdd8;
25+
--md-default-fg-color--light: #9098a8;
26+
--md-default-fg-color--lighter: #6a7388;
27+
--md-default-fg-color--lightest: #3a4258;
28+
29+
/* Code */
30+
--md-code-bg-color: #111520;
31+
--md-code-fg-color: #c8cdd8;
32+
--md-code-hl-color: rgba(232, 168, 50, 0.15);
33+
34+
/* Typeset links */
35+
--md-typeset-a-color: #e8a832;
36+
37+
/* Footer */
38+
--md-footer-bg-color: #06080d;
39+
--md-footer-bg-color--dark: #040610;
40+
--md-footer-fg-color: #9098a8;
41+
--md-footer-fg-color--light: #6a7388;
42+
--md-footer-fg-color--lighter: #3a4258;
43+
}
44+
45+
/* ==========================================================================
46+
Header / Top Navigation
47+
========================================================================== */
48+
49+
.md-header {
50+
background-color: #06080d !important;
51+
border-bottom: 1px solid rgba(232, 168, 50, 0.15);
52+
}
53+
54+
.md-header__title {
55+
color: #e8a832;
56+
font-family: "Syne", sans-serif;
57+
font-weight: 700;
58+
}
59+
60+
.md-header__button {
61+
color: #c8cdd8;
62+
}
63+
64+
.md-tabs {
65+
background-color: #06080d !important;
66+
border-bottom: 1px solid rgba(232, 168, 50, 0.08);
67+
}
68+
69+
.md-tabs__link {
70+
color: #9098a8 !important;
71+
}
72+
73+
.md-tabs__link--active,
74+
.md-tabs__link:hover,
75+
.md-tabs__link:focus,
76+
.md-tabs__link:focus-visible,
77+
.md-tabs__link:active {
78+
color: #e8a832 !important;
79+
outline: none;
80+
}
81+
82+
.md-tabs__link:focus-visible {
83+
outline: 1px solid rgba(232, 168, 50, 0.4);
84+
outline-offset: -1px;
85+
}
86+
87+
/* ==========================================================================
88+
Sidebar / Navigation
89+
========================================================================== */
90+
91+
.md-sidebar {
92+
background-color: #0c0f16;
93+
}
94+
95+
.md-nav__link {
96+
color: #9098a8;
97+
}
98+
99+
.md-nav__link:hover {
100+
color: #e8a832;
101+
}
102+
103+
.md-nav__link--active,
104+
.md-nav__item--active > .md-nav__link {
105+
color: #e8a832;
106+
font-weight: 600;
107+
}
108+
109+
.md-nav__link--index,
110+
.md-nav__link--index:hover {
111+
color: inherit;
112+
}
113+
114+
/* ==========================================================================
115+
Content Area
116+
========================================================================== */
117+
118+
/* Headings */
119+
.md-typeset h1 {
120+
color: #e8a832;
121+
}
122+
123+
.md-typeset h2 {
124+
color: #f0be5a;
125+
border-bottom: 1px solid rgba(232, 168, 50, 0.12);
126+
padding-bottom: 0.3em;
127+
}
128+
129+
.md-typeset h3,
130+
.md-typeset h4,
131+
.md-typeset h5,
132+
.md-typeset h6 {
133+
color: #c8cdd8;
134+
}
135+
136+
/* Links */
137+
.md-typeset a {
138+
color: #e8a832;
139+
}
140+
141+
.md-typeset a:hover {
142+
color: #32d4e8;
143+
}
144+
145+
/* Inline code */
146+
.md-typeset code {
147+
background-color: #161b28;
148+
color: #32d4e8;
149+
border: 1px solid rgba(50, 212, 232, 0.12);
150+
border-radius: 4px;
151+
}
152+
153+
/* Code blocks */
154+
.md-typeset pre {
155+
background-color: #111520;
156+
border: 1px solid rgba(232, 168, 50, 0.08);
157+
border-radius: 6px;
158+
}
159+
160+
.md-typeset pre > code {
161+
background-color: transparent;
162+
border: none;
163+
color: #c8cdd8;
164+
}
165+
166+
/* Copy button in code blocks */
167+
.md-clipboard {
168+
color: #6a7388;
169+
}
170+
171+
.md-clipboard:hover {
172+
color: #e8a832;
173+
}
174+
175+
/* ==========================================================================
176+
Tables
177+
========================================================================== */
178+
179+
.md-typeset table:not([class]) {
180+
border: 1px solid rgba(232, 168, 50, 0.1);
181+
}
182+
183+
.md-typeset table:not([class]) th {
184+
background-color: #111520;
185+
color: #e8a832;
186+
border-bottom: 2px solid rgba(232, 168, 50, 0.2);
187+
}
188+
189+
.md-typeset table:not([class]) td {
190+
border-top: 1px solid rgba(232, 168, 50, 0.06);
191+
}
192+
193+
.md-typeset table:not([class]) tr:hover td {
194+
background-color: rgba(232, 168, 50, 0.04);
195+
}
196+
197+
/* ==========================================================================
198+
Admonitions
199+
========================================================================== */
200+
201+
.md-typeset .admonition,
202+
.md-typeset details {
203+
background-color: #111520;
204+
border-left-width: 3px;
205+
border-radius: 4px;
206+
}
207+
208+
.md-typeset .admonition-title,
209+
.md-typeset summary {
210+
background-color: rgba(232, 168, 50, 0.06);
211+
}
212+
213+
/* ==========================================================================
214+
Search
215+
========================================================================== */
216+
217+
.md-search__input {
218+
background-color: #111520;
219+
color: #c8cdd8;
220+
}
221+
222+
.md-search__input::placeholder {
223+
color: #6a7388;
224+
}
225+
226+
.md-search-result__meta {
227+
background-color: #111520;
228+
color: #9098a8;
229+
}
230+
231+
.md-search-result__item {
232+
border-bottom-color: rgba(232, 168, 50, 0.06);
233+
}
234+
235+
/* ==========================================================================
236+
Footer
237+
========================================================================== */
238+
239+
.md-footer {
240+
border-top: 1px solid rgba(232, 168, 50, 0.1);
241+
}
242+
243+
/* ==========================================================================
244+
Scrollbar (Webkit)
245+
========================================================================== */
246+
247+
::-webkit-scrollbar {
248+
width: 8px;
249+
height: 8px;
250+
}
251+
252+
::-webkit-scrollbar-track {
253+
background: #0c0f16;
254+
}
255+
256+
::-webkit-scrollbar-thumb {
257+
background: #1c2333;
258+
border-radius: 4px;
259+
}
260+
261+
::-webkit-scrollbar-thumb:hover {
262+
background: #2a3348;
263+
}
264+
265+
/* ==========================================================================
266+
Selection highlight
267+
========================================================================== */
268+
269+
::selection {
270+
background-color: rgba(232, 168, 50, 0.25);
271+
color: #ffffff;
272+
}

0 commit comments

Comments
 (0)