Skip to content

Commit fbfc38d

Browse files
TuntiiTuntii
committed
Update custom.css
1 parent ab941b6 commit fbfc38d

File tree

1 file changed

+122
-95
lines changed

1 file changed

+122
-95
lines changed

‎docs/cookbook/theme/custom.css‎

Lines changed: 122 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,96 @@
11
/* Premium Responsive Theme - RustAPI Cookbook */
22

3+
/* 1. Define Variables & Defaults (Dark Mode) */
34
:root {
4-
/* Default to Dark Theme variables (matches implicit defaults or dark modes) */
5-
--bg-color: #0f172a;
6-
--sidebar-bg: #1e293b;
7-
--text-color: #e2e8f0;
8-
--heading-color: #f8fafc;
9-
--accent-color: #06b6d4;
10-
/* Cyan */
11-
--accent-hover: #22d3ee;
12-
--border-color: #334155;
13-
--code-bg: #1e293b;
14-
--link-color: #38bdf8;
15-
16-
/* Common Fonts */
5+
/* Custom Palette */
6+
--premium-bg: #0f172a;
7+
--premium-sidebar: #1e293b;
8+
--premium-text: #e2e8f0;
9+
--premium-heading: #f8fafc;
10+
--premium-accent: #06b6d4;
11+
--premium-accent-hover: #22d3ee;
12+
--premium-border: #334155;
13+
--premium-code-bg: #1e293b;
14+
--premium-link: #38bdf8;
15+
16+
/* Fonts */
1717
--font-primary: 'Inter', system-ui, -apple-system, sans-serif;
1818
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
19-
}
2019

21-
/* Light Theme Overrides */
22-
.light {
23-
--bg-color: #ffffff;
24-
--sidebar-bg: #f1f5f9;
20+
/* Override MDBook Standard Variables (Dark Defaults) */
21+
--bg: var(--premium-bg);
22+
--fg: var(--premium-text);
23+
--sidebar-bg: var(--premium-sidebar);
24+
--sidebar-fg: var(--premium-text);
25+
--sidebar-non-existant: var(--premium-text);
26+
--quote-bg: rgba(59, 130, 246, 0.1);
27+
--table-header-bg: var(--premium-sidebar);
28+
--table-border-color: var(--premium-border);
29+
}
30+
31+
/* 2. Light Theme Overrides */
32+
/* Class is usually applied to html tag by mdbook */
33+
.light,
34+
.rust {
35+
/* Custom Palette - High Contrast */
36+
--premium-bg: #ffffff;
37+
--premium-sidebar: #f1f5f9;
2538
/* Slate 100 */
26-
--text-color: #334155;
27-
/* Slate 700 */
28-
--heading-color: #0f172a;
29-
/* Slate 900 */
30-
--accent-color: #0891b2;
31-
/* Cyan 600 - darker for contrast */
32-
--accent-hover: #06b6d4;
33-
--border-color: #e2e8f0;
34-
/* Slate 200 */
35-
--code-bg: #f8fafc;
39+
--premium-text: #334155;
40+
/* Slate 700 - Dark Grey */
41+
--premium-heading: #0f172a;
42+
/* Slate 900 - Black */
43+
--premium-accent: #0891b2;
44+
/* Cyan 600 */
45+
--premium-accent-hover: #06b6d4;
46+
--premium-border: #cbd5e1;
47+
/* Slate 300 */
48+
--premium-code-bg: #f8fafc;
3649
/* Slate 50 */
37-
--link-color: #0284c7;
50+
--premium-link: #0284c7;
3851
/* Sky 600 */
52+
53+
/* Override MDBook Variables for Light Mode */
54+
--bg: var(--premium-bg);
55+
--fg: var(--premium-text);
56+
--sidebar-bg: var(--premium-sidebar);
57+
--sidebar-fg: var(--premium-text);
58+
--quote-bg: rgba(59, 130, 246, 0.05);
59+
--table-header-bg: #f8fafc;
60+
--table-border-color: var(--premium-border);
3961
}
4062

63+
/* 3. Base Styles */
4164
body {
42-
background-color: var(--bg-color);
43-
color: var(--text-color);
65+
background-color: var(--bg);
66+
color: var(--fg);
4467
font-family: var(--font-primary);
4568
}
4669

47-
/* Sidebar Styling */
48-
.sidebar {
49-
background-color: var(--sidebar-bg);
50-
border-right: 1px solid var(--border-color);
51-
}
52-
53-
.sidebar-scrollbox {
54-
scrollbar-width: thin;
55-
scrollbar-color: var(--border-color) transparent;
56-
}
57-
58-
.chapter li.active>a {
59-
color: var(--accent-color);
60-
border-left: 2px solid var(--accent-color);
61-
background: rgba(6, 182, 212, 0.1);
62-
padding-left: 8px;
63-
/* Offset for border */
64-
}
65-
66-
/* Adjust active chapter bg for light mode */
67-
.light .chapter li.active>a {
68-
background: rgba(8, 145, 178, 0.1);
69-
}
70-
71-
.chapter a {
72-
color: #94a3b8;
73-
transition: all 0.2s ease;
70+
/* Force Markdown Section Colors */
71+
.markdown-section {
72+
color: var(--fg);
7473
}
7574

76-
.light .chapter a {
77-
color: #64748b;
78-
/* Slate 500 */
79-
}
80-
81-
.chapter a:hover {
82-
color: var(--heading-color);
83-
}
84-
85-
/* Main Content Styling */
86-
.content {
87-
line-height: 1.8;
75+
.markdown-section p,
76+
.markdown-section li,
77+
.markdown-section table {
78+
color: var(--fg);
8879
}
8980

81+
/* Headings */
9082
h1,
9183
h2,
9284
h3,
9385
h4 {
94-
color: var(--heading-color);
86+
color: var(--premium-heading);
9587
font-weight: 700;
9688
margin-top: 2em;
9789
}
9890

9991
h1 {
10092
font-size: 2.5em;
101-
border-bottom: 2px solid var(--border-color);
93+
border-bottom: 2px solid var(--premium-border);
10294
padding-bottom: 0.5em;
10395
background: linear-gradient(to right, #22d3ee, #818cf8);
10496
-webkit-background-clip: text;
@@ -107,29 +99,67 @@ h1 {
10799
}
108100

109101
/* Darker gradient for Light Mode */
110-
.light h1 {
102+
.light h1,
103+
.rust h1 {
111104
background: linear-gradient(to right, #0891b2, #4f46e5);
112105
-webkit-background-clip: text;
113106
-webkit-text-fill-color: transparent;
114107
}
115108

109+
/* Links */
116110
a {
117-
color: var(--link-color);
111+
color: var(--premium-link);
118112
text-decoration: none;
119113
transition: color 0.2s;
120114
}
121115

122116
a:hover {
123-
color: var(--accent-hover);
117+
color: var(--premium-accent-hover);
124118
text-decoration: underline;
125119
}
126120

121+
/* Sidebar */
122+
.sidebar {
123+
background-color: var(--sidebar-bg);
124+
border-right: 1px solid var(--premium-border);
125+
}
126+
127+
.sidebar-scrollbox {
128+
scrollbar-width: thin;
129+
scrollbar-color: var(--premium-border) transparent;
130+
}
131+
132+
.chapter li.active>a {
133+
color: var(--premium-accent);
134+
border-left: 2px solid var(--premium-accent);
135+
background: rgba(6, 182, 212, 0.1);
136+
padding-left: 8px;
137+
}
138+
139+
.light .chapter li.active>a {
140+
background: rgba(8, 145, 178, 0.1);
141+
}
142+
143+
.chapter a {
144+
color: #94a3b8;
145+
transition: all 0.2s ease;
146+
}
147+
148+
.light .chapter a,
149+
.rust .chapter a {
150+
color: #64748b;
151+
}
152+
153+
.chapter a:hover {
154+
color: var(--premium-heading);
155+
}
156+
127157
/* Code Blocks */
128158
pre,
129159
code {
130-
background-color: var(--code-bg);
160+
background-color: var(--premium-code-bg);
131161
border-radius: 8px;
132-
border: 1px solid var(--border-color);
162+
border: 1px solid var(--premium-border);
133163
font-family: var(--font-mono);
134164
}
135165

@@ -138,44 +168,40 @@ pre {
138168
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
139169
}
140170

141-
/* Blockquotes / Alerts */
171+
/* Blockquotes */
142172
blockquote {
143-
background: rgba(59, 130, 246, 0.1);
173+
background: var(--quote-bg);
144174
border-left: 4px solid #3b82f6;
145175
margin: 1.5em 0;
146176
padding: 1em;
147177
border-radius: 0 8px 8px 0;
148-
color: #cbd5e1;
178+
color: var(--fg);
179+
/* Ensure this inherits correct text color */
149180
}
150181

151-
.light blockquote {
152-
background: rgba(59, 130, 246, 0.05);
153-
color: #334155;
154-
border-left-color: #2563eb;
155-
}
156-
157-
/* Table Styling */
182+
/* Tables */
158183
table {
159184
border-collapse: separate;
160185
border-spacing: 0;
161186
width: 100%;
162187
margin: 1.5em 0;
163-
border: 1px solid var(--border-color);
188+
border: 1px solid var(--table-border-color);
164189
border-radius: 8px;
165190
overflow: hidden;
166191
}
167192

168193
th {
169-
background-color: var(--sidebar-bg);
170-
color: var(--heading-color);
194+
background-color: var(--table-header-bg);
195+
color: var(--premium-heading);
171196
font-weight: 600;
172197
padding: 12px;
173-
border-bottom: 1px solid var(--border-color);
198+
border-bottom: 1px solid var(--table-border-color);
174199
}
175200

176201
td {
177202
padding: 12px;
178-
border-bottom: 1px solid var(--border-color);
203+
border-bottom: 1px solid var(--table-border-color);
204+
color: var(--fg);
179205
}
180206

181207
tr:last-child td {
@@ -186,7 +212,8 @@ tr:hover td {
186212
background-color: rgba(255, 255, 255, 0.02);
187213
}
188214

189-
.light tr:hover td {
215+
.light tr:hover td,
216+
.rust tr:hover td {
190217
background-color: rgba(0, 0, 0, 0.02);
191218
}
192219

@@ -201,10 +228,10 @@ tr:hover td {
201228
}
202229

203230
::-webkit-scrollbar-thumb {
204-
background: var(--border-color);
231+
background: var(--premium-border);
205232
border-radius: 4px;
206233
}
207234

208235
::-webkit-scrollbar-thumb:hover {
209236
background: #475569;
210-
}
237+
```

0 commit comments

Comments
 (0)