Skip to content

Commit 03553c8

Browse files
sonofmagicsonofmagic
committed
docs: refine tailwindcss sidebar styling
1 parent 4c18b56 commit 03553c8

File tree

2 files changed

+190
-6
lines changed

2 files changed

+190
-6
lines changed

‎website/sidebars/tailwindcss.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ const tailwindcssSidebar: SidebarConfig = [
44
{
55
type: 'doc',
66
id: 'tailwindcss/index',
7-
label: '◉ 专题导览',
7+
label: '[总览] 专题导览',
88
},
99
{
1010
type: 'category',
11-
label: '◫ 样式方案与组件库演进',
11+
label: '[演进] 样式方案与组件库演进',
1212
collapsed: false,
1313
link: { type: 'doc', id: 'tailwindcss/history/history-style-evolution' },
1414
items: [
1515
'tailwindcss/css-origin-evolution',
1616
'tailwindcss/history/history-component-evolution',
1717
{
1818
type: 'category',
19-
label: '◌ Raw CSS / BEM / OOCSS',
19+
label: '[基础] Raw CSS / BEM / OOCSS',
2020
collapsed: false,
2121
link: { type: 'doc', id: 'tailwindcss/history/history-raw-css' },
2222
items: [
@@ -34,7 +34,7 @@ const tailwindcssSidebar: SidebarConfig = [
3434
},
3535
{
3636
type: 'category',
37-
label: '◭ Tailwind 设计、生态与对比',
37+
label: '[核心] Tailwind 设计、生态与对比',
3838
collapsed: false,
3939
link: { type: 'doc', id: 'tailwindcss/tailwind-core' },
4040
items: [
@@ -45,7 +45,7 @@ const tailwindcssSidebar: SidebarConfig = [
4545
},
4646
{
4747
type: 'category',
48-
label: '◪ 工程约束与样式边界',
48+
label: '[工程] 约束、隔离与落地边界',
4949
collapsed: false,
5050
items: [
5151
'tailwindcss/best-practices',
@@ -54,7 +54,7 @@ const tailwindcssSidebar: SidebarConfig = [
5454
},
5555
{
5656
type: 'category',
57-
label: '◬ AI 与对照实验',
57+
label: '[实验] AI 工作流与对照实验',
5858
collapsed: false,
5959
items: [
6060
'tailwindcss/ai-friendly-and-demos',

‎website/src/css/custom/_docs.scss‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,190 @@ html[data-theme='dark'] .docs-cta-secondary {
8484
background: rgba(30, 41, 59, 0.55);
8585
}
8686

87+
.theme-doc-sidebar-menu {
88+
--tw-sidebar-tag-text: rgb(15 23 42);
89+
--tw-sidebar-tag-muted: rgb(100 116 139);
90+
--tw-sidebar-tag-accent: linear-gradient(180deg, rgb(14 165 233), rgb(20 184 166));
91+
--tw-sidebar-item-hover: rgb(14 165 233 / 5%);
92+
--tw-sidebar-item-active: linear-gradient(135deg, rgb(224 242 254 / 84%), rgb(204 251 241 / 84%));
93+
}
94+
95+
html[data-theme='dark'] .theme-doc-sidebar-menu {
96+
--tw-sidebar-tag-text: rgb(226 232 240);
97+
--tw-sidebar-tag-muted: rgb(148 163 184);
98+
--tw-sidebar-tag-accent: linear-gradient(180deg, rgb(34 211 238), rgb(45 212 191));
99+
--tw-sidebar-item-hover: rgb(34 211 238 / 4%);
100+
--tw-sidebar-item-active: linear-gradient(135deg, rgb(8 47 73 / 80%), rgb(17 94 89 / 68%));
101+
}
102+
103+
.theme-doc-sidebar-menu .menu__list-item-collapsible {
104+
margin-bottom: 0.18rem;
105+
border-radius: 1rem;
106+
}
107+
108+
.theme-doc-sidebar-menu .menu__link,
109+
.theme-doc-sidebar-menu .menu__caret {
110+
transition:
111+
background-color 0.2s ease,
112+
border-color 0.2s ease,
113+
color 0.2s ease,
114+
transform 0.2s ease,
115+
box-shadow 0.2s ease;
116+
}
117+
118+
.theme-doc-sidebar-menu
119+
> .menu__list
120+
> .theme-doc-sidebar-item-category-level-1
121+
> .menu__list-item-collapsible
122+
> .menu__link {
123+
position: relative;
124+
min-height: 2.1rem;
125+
margin: 0.65rem 0 0.4rem;
126+
padding: 0.25rem 0.25rem 0.25rem 0.95rem;
127+
border: 0;
128+
border-radius: 0;
129+
font-size: 0.76rem;
130+
font-weight: 800;
131+
letter-spacing: 0.08em;
132+
color: var(--tw-sidebar-tag-text);
133+
text-transform: uppercase;
134+
background: transparent;
135+
box-shadow: none;
136+
}
137+
138+
html[data-theme='dark']
139+
.theme-doc-sidebar-menu
140+
> .menu__list
141+
> .theme-doc-sidebar-item-category-level-1
142+
> .menu__list-item-collapsible
143+
> .menu__link {
144+
box-shadow: none;
145+
}
146+
147+
.theme-doc-sidebar-menu
148+
> .menu__list
149+
> .theme-doc-sidebar-item-category-level-1
150+
> .menu__list-item-collapsible:hover
151+
> .menu__link {
152+
transform: none;
153+
color: var(--tw-sidebar-tag-text);
154+
}
155+
156+
.theme-doc-sidebar-menu
157+
> .menu__list
158+
> .theme-doc-sidebar-item-category-level-1
159+
> .menu__list-item-collapsible
160+
> .menu__link::before {
161+
position: absolute;
162+
top: 0.22rem;
163+
bottom: 0.22rem;
164+
left: 0;
165+
width: 0.22rem;
166+
border-radius: 999px;
167+
content: '';
168+
background: var(--tw-sidebar-tag-accent);
169+
opacity: 0.92;
170+
}
171+
172+
.theme-doc-sidebar-menu
173+
> .menu__list
174+
> .theme-doc-sidebar-item-category-level-1
175+
> .menu__list-item-collapsible
176+
> .menu__link::after {
177+
position: absolute;
178+
right: 0.15rem;
179+
bottom: 0.2rem;
180+
left: 0.95rem;
181+
height: 1px;
182+
content: '';
183+
background: linear-gradient(90deg, rgb(148 163 184 / 26%), transparent 78%);
184+
}
185+
186+
html[data-theme='dark']
187+
.theme-doc-sidebar-menu
188+
> .menu__list
189+
> .theme-doc-sidebar-item-category-level-1
190+
> .menu__list-item-collapsible
191+
> .menu__link::after {
192+
background: linear-gradient(90deg, rgb(148 163 184 / 18%), transparent 78%);
193+
}
194+
195+
.theme-doc-sidebar-menu .theme-doc-sidebar-item-link-level-1 > .menu__link {
196+
margin-bottom: 0.5rem;
197+
padding: 0.72rem 0.88rem;
198+
border: 1px solid transparent;
199+
border-radius: 0.85rem;
200+
font-weight: 700;
201+
background: rgb(248 250 252 / 72%);
202+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%);
203+
}
204+
205+
html[data-theme='dark'] .theme-doc-sidebar-menu .theme-doc-sidebar-item-link-level-1 > .menu__link {
206+
border-color: transparent;
207+
background: rgb(30 41 59 / 42%);
208+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
209+
}
210+
211+
.theme-doc-sidebar-menu .menu__link:hover {
212+
background: var(--tw-sidebar-item-hover);
213+
}
214+
215+
.theme-doc-sidebar-menu .theme-doc-sidebar-item-link-level-1 > .menu__link:hover {
216+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%);
217+
}
218+
219+
html[data-theme='dark'] .theme-doc-sidebar-menu .theme-doc-sidebar-item-link-level-1 > .menu__link:hover {
220+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
221+
}
222+
223+
.theme-doc-sidebar-menu .menu__link--active:not(.menu__link--sublist) {
224+
border-color: rgb(14 165 233 / 26%);
225+
background: var(--tw-sidebar-item-active);
226+
box-shadow:
227+
0 8px 18px rgb(14 165 233 / 10%),
228+
inset 0 1px 0 rgb(255 255 255 / 46%);
229+
}
230+
231+
html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active:not(.menu__link--sublist) {
232+
border-color: rgb(34 211 238 / 22%);
233+
box-shadow:
234+
0 10px 20px rgb(2 132 199 / 12%),
235+
inset 0 1px 0 rgb(255 255 255 / 4%);
236+
}
237+
238+
.theme-doc-sidebar-menu .theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link {
239+
font-weight: 700;
240+
}
241+
242+
.theme-doc-sidebar-menu .menu__list .menu__list {
243+
margin-left: 0.55rem;
244+
padding-left: 0.85rem;
245+
border-left: 1px solid rgb(148 163 184 / 16%);
246+
}
247+
248+
html[data-theme='dark'] .theme-doc-sidebar-menu .menu__list .menu__list {
249+
border-left-color: rgb(148 163 184 / 14%);
250+
}
251+
252+
.theme-doc-sidebar-menu .theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link::before {
253+
display: inline-flex;
254+
width: 0.5rem;
255+
height: 0.5rem;
256+
margin-right: 0.6rem;
257+
border-radius: 999px;
258+
content: '';
259+
background: linear-gradient(135deg, rgb(14 165 233), rgb(20 184 166));
260+
box-shadow: 0 0 0 4px rgb(14 165 233 / 12%);
261+
}
262+
263+
html[data-theme='dark']
264+
.theme-doc-sidebar-menu
265+
.theme-doc-sidebar-item-category-level-2
266+
> .menu__list-item-collapsible
267+
> .menu__link::before {
268+
box-shadow: 0 0 0 4px rgb(34 211 238 / 10%);
269+
}
270+
87271
.tailwind-topic-hero {
88272
position: relative;
89273
margin: 0 0 2rem;

0 commit comments

Comments
 (0)