[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
fix(theme): sidebar tweaks
Nate Moore
(Apr 5, 2026, 12:55 AM EDT)
1e15aa4d
72a17b2d
+31
-17
+31
-17
src/styles/starlight.css
+31
-17
src/styles/starlight.css
···
76
76
77
77
/* Right sidebar (TOC) background gradient */
78
78
.right-sidebar {
79
-
background: linear-gradient(to bottom, var(--surface-fill) 0%, var(--surface-highlight) 100%);
79
+
background: linear-gradient(to bottom, var(--color-gray-90) 0%, var(--container-fill) 100%);
80
80
}
81
81
82
82
starlight-toc nav>ul {
···
159
159
160
160
/* Sidebar background gradient */
161
161
.sidebar-pane {
162
-
background: linear-gradient(to bottom, var(--surface-fill) 0%, var(--surface-highlight) 100%) !important;
162
+
background: linear-gradient(to bottom, var(--color-gray-90) 0%, var(--container-fill) 100%) !important;
163
163
164
164
a {
165
165
border: 1px solid transparent;
166
+
border-radius: 0;
166
167
}
167
168
168
-
/* Active sidebar link — accent indicator + gradient bg */
169
+
/* Move connector line from per-item to per-group */
170
+
ul ul {
171
+
position: relative;
172
+
&::before {
173
+
content: '';
174
+
position: absolute;
175
+
inset: 0;
176
+
left: calc(var(--sl-sidebar-item-padding-inline) * 2);
177
+
border-inline-start: 1px solid;
178
+
border-image: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill)) 1;
179
+
pointer-events: none;
180
+
z-index: 0;
181
+
}
182
+
}
183
+
ul ul li {
184
+
border-inline-start: none;
185
+
z-index: 1;
186
+
}
187
+
188
+
/* Active sidebar link — accent text + left indicator, no bg */
169
189
[aria-current="page"],
170
190
[aria-current="page"]:hover,
171
191
[aria-current="page"]:focus {
172
192
color: hsl(var(--sl-color-accent-hsl));
173
-
background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl) / 0.05), hsl(var(--sl-color-accent-hsl) / 0.3));
174
-
border-color: hsl(var(--sl-color-accent-hsl) / 0.9);
193
+
background: transparent;
175
194
border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl));
176
195
}
177
196
178
-
[aria-current="page"]:hover {
179
-
color: var(--color-gray-100);
180
-
background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl)), hsl(var(--sl-color-accent-hsl) / 0.5));
181
-
}
182
-
183
-
/* Sidebar nested list connector line — gradient */
184
-
ul ul li {
185
-
border-image: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill)) 1;
197
+
a:hover,
198
+
a:focus-visible {
199
+
border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl) / 0.5);
186
200
}
187
201
188
202
/* Sidebar group labels — uppercase */
···
193
207
}
194
208
}
195
209
196
-
/* Sidebar topic list — active topic gradient highlight */
197
-
.starlight-sidebar-topics a.starlight-sidebar-topics-current {
198
-
background: linear-gradient(to right, var(--sl-color-accent-low), hsl(var(--sl-color-accent-hsl) / 0.5));
210
+
/* Sidebar topic list — gradient box on hover + active */
211
+
.starlight-sidebar-topics a:is(.starlight-sidebar-topics-current, :hover, :focus-visible) {
212
+
background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl) / 0.1), hsl(var(--sl-color-accent-hsl) / 0.5));
199
213
border: 1px solid hsl(var(--sl-color-accent-hsl) / 0.9);
200
214
border-radius: var(--radius-100);
201
215
}
···
204
218
color: var(--heading-muted);
205
219
}
206
220
207
-
.starlight-sidebar-topics a.starlight-sidebar-topics-current .starlight-sidebar-topics-icon {
221
+
.starlight-sidebar-topics a .starlight-sidebar-topics-icon {
208
222
border-color: transparent;
209
223
background: transparent;
210
224
color: hsl(var(--sl-color-accent-hsl));