Skip to content

Commit 26f56af

Browse files
XiaoBoAIXiaoBoAI
committed
docs: add tabs-enhancements CSS for improved tab styling
1 parent b443639 commit 26f56af

File tree

2 files changed

+182
-0
lines changed

2 files changed

+182
-0
lines changed

‎docs/stylesheets/tabs-enhancements.css‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
/* Tabbed Content Styling for RM-Gallery Documentation */
2+
/* Enhanced specificity to override theme styles */
3+
4+
/* Main tabbed container */
5+
.tabbed-set.tabbed-alternate,
6+
.tabbed-set {
7+
position: relative !important;
8+
display: flex !important;
9+
flex-wrap: wrap !important;
10+
margin: 1.5em 0 !important;
11+
border-radius: 8px !important;
12+
overflow: hidden !important;
13+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
14+
border: 1px solid #e1e4e8 !important;
15+
}
16+
17+
/* Hide radio inputs */
18+
.tabbed-set > input[type="radio"] {
19+
position: absolute !important;
20+
width: 0 !important;
21+
height: 0 !important;
22+
opacity: 0 !important;
23+
pointer-events: none !important;
24+
}
25+
26+
/* Tab labels container */
27+
.tabbed-set > .tabbed-labels {
28+
display: flex !important;
29+
width: 100% !important;
30+
background: #f6f8fa !important;
31+
border-bottom: 2px solid #e1e4e8 !important;
32+
overflow-x: auto !important;
33+
scrollbar-width: thin !important;
34+
margin: 0 !important;
35+
padding: 0 !important;
36+
}
37+
38+
/* Individual tab label */
39+
.tabbed-set > .tabbed-labels > label {
40+
padding: 0.8em 1.5em !important;
41+
font-size: 0.95em !important;
42+
font-weight: 600 !important;
43+
color: #586069 !important;
44+
cursor: pointer !important;
45+
border-bottom: 3px solid transparent !important;
46+
transition: all 0.2s ease !important;
47+
white-space: nowrap !important;
48+
user-select: none !important;
49+
background: transparent !important;
50+
margin: 0 !important;
51+
display: block !important;
52+
}
53+
54+
/* Tab label hover state */
55+
.tabbed-set > .tabbed-labels > label:hover {
56+
color: #3b82f6 !important;
57+
background: rgba(59, 130, 246, 0.05) !important;
58+
}
59+
60+
/* Active tab label - only highlight the selected tab */
61+
.tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
62+
.tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
63+
.tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
64+
.tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
65+
.tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5) {
66+
color: #3b82f6 !important;
67+
border-bottom-color: #3b82f6 !important;
68+
background: #fff !important;
69+
}
70+
71+
/* Content wrapper */
72+
.tabbed-set > .tabbed-content {
73+
width: 100% !important;
74+
order: 999 !important;
75+
background: #fff !important;
76+
display: block !important;
77+
}
78+
79+
/* Individual content blocks */
80+
.tabbed-set > .tabbed-content > .tabbed-block {
81+
display: none !important;
82+
padding: 1.5em !important;
83+
}
84+
85+
/* Show active content block */
86+
.tabbed-set > input:nth-child(1):checked ~ .tabbed-content > .tabbed-block:nth-child(1),
87+
.tabbed-set > input:nth-child(2):checked ~ .tabbed-content > .tabbed-block:nth-child(2),
88+
.tabbed-set > input:nth-child(3):checked ~ .tabbed-content > .tabbed-block:nth-child(3),
89+
.tabbed-set > input:nth-child(4):checked ~ .tabbed-content > .tabbed-block:nth-child(4),
90+
.tabbed-set > input:nth-child(5):checked ~ .tabbed-content > .tabbed-block:nth-child(5) {
91+
display: block !important;
92+
}
93+
94+
/* Code blocks within tabs */
95+
.tabbed-set .tabbed-block pre {
96+
margin: 0;
97+
}
98+
99+
.tabbed-set .tabbed-block .highlight {
100+
margin: 0;
101+
}
102+
103+
/* Responsive design for mobile */
104+
@media (max-width: 768px) {
105+
.tabbed-set > .tabbed-labels {
106+
overflow-x: auto;
107+
-webkit-overflow-scrolling: touch;
108+
}
109+
110+
.tabbed-set > .tabbed-labels > label {
111+
padding: 0.7em 1.2em;
112+
font-size: 0.9em;
113+
}
114+
115+
.tabbed-set > .tabbed-content > .tabbed-block {
116+
padding: 1.2em;
117+
}
118+
}
119+
120+
/* Dark mode support */
121+
[data-md-color-scheme="slate"] .tabbed-set > .tabbed-labels,
122+
.dark .tabbed-set > .tabbed-labels {
123+
background: #161b22 !important;
124+
border-bottom-color: #30363d !important;
125+
}
126+
127+
[data-md-color-scheme="slate"] .tabbed-set > .tabbed-labels > label,
128+
.dark .tabbed-set > .tabbed-labels > label {
129+
color: #8b949e !important;
130+
}
131+
132+
[data-md-color-scheme="slate"] .tabbed-set > .tabbed-labels > label:hover,
133+
.dark .tabbed-set > .tabbed-labels > label:hover {
134+
color: #58a6ff !important;
135+
background: rgba(88, 166, 255, 0.1) !important;
136+
}
137+
138+
[data-md-color-scheme="slate"] .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
139+
[data-md-color-scheme="slate"] .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
140+
[data-md-color-scheme="slate"] .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
141+
[data-md-color-scheme="slate"] .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
142+
[data-md-color-scheme="slate"] .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
143+
.dark .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
144+
.dark .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
145+
.dark .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
146+
.dark .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
147+
.dark .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5) {
148+
color: #58a6ff !important;
149+
border-bottom-color: #58a6ff !important;
150+
background: #0d1117 !important;
151+
}
152+
153+
[data-md-color-scheme="slate"] .tabbed-set > .tabbed-content,
154+
.dark .tabbed-set > .tabbed-content {
155+
background: #0d1117 !important;
156+
}
157+
158+
/* Accessibility improvements */
159+
.tabbed-set > .tabbed-labels > label:focus-visible {
160+
outline: 2px solid #3b82f6;
161+
outline-offset: -2px;
162+
z-index: 1;
163+
}
164+
165+
/* Smooth transitions */
166+
.tabbed-set > .tabbed-labels > label {
167+
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
168+
}
169+
170+
/* Print styles */
171+
@media print {
172+
.tabbed-set > .tabbed-labels {
173+
display: none;
174+
}
175+
176+
.tabbed-set > .tabbed-content > .tabbed-block {
177+
display: block !important;
178+
page-break-inside: avoid;
179+
}
180+
}
181+

‎mkdocs.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ extra_css:
105105
- stylesheets/table-enhancements.css
106106
- stylesheets/jupyter-simple.css
107107
- stylesheets/nav-scroll-fix.css
108+
- stylesheets/tabs-enhancements.css
108109

109110
extra_javascript:
110111
- javascripts/code-copy.js

0 commit comments

Comments
 (0)