Skip to content

Commit 46acd9e

Browse files
authored
Merge pull request #72 from iitzIrFan/bug/labelfix
enhance tab alignment and styling for better readability
2 parents e141685 + e5d4b55 commit 46acd9e

1 file changed

Lines changed: 63 additions & 0 deletions

File tree

src/css/custom.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,67 @@
8383
}
8484
.no-scrollbar::-webkit-scrollbar {
8585
display: none;
86+
}
87+
88+
/* Force left alignment for all tabs */
89+
.tabs,
90+
[class*='tabs--'] {
91+
display: flex !important;
92+
justify-content: flex-start !important;
93+
text-align: left !important;
94+
margin-left: 0 !important;
95+
padding-left: 0 !important;
96+
width: 100% !important;
97+
}
98+
99+
/* Target all possible tab item variations */
100+
.tabs__item,
101+
[class*='tabs__item'],
102+
.tabItem_LNqP,
103+
[role='tab'] {
104+
text-align: left !important;
105+
justify-content: flex-start !important;
106+
margin-right: 1rem !important;
107+
padding: 0.5rem 1rem !important;
108+
border: 1px solid transparent !important;
109+
border-bottom: none !important;
110+
cursor: pointer !important;
111+
display: inline-flex !important;
112+
align-items: center !important;
113+
}
114+
115+
/* Active tab styles */
116+
.tabs__item--active,
117+
[class*='tabs__item--active'],
118+
.tabItem_LNqP[aria-selected='true'],
119+
[role='tab'][aria-selected='true'] {
120+
border-color: var(--ifm-toc-border-color) !important;
121+
border-bottom-color: var(--ifm-background-color) !important;
122+
background: var(--ifm-background-color) !important;
123+
color: var(--ifm-color-primary) !important;
124+
font-weight: bold !important;
125+
}
126+
127+
/* Hover state */
128+
.tabs__item:not(.tabs__item--active):hover,
129+
[class*='tabs__item']:not([class*='--active']):hover,
130+
[role='tab']:not([aria-selected='true']):hover {
131+
background-color: var(--ifm-menu-color-background-active) !important;
132+
}
133+
134+
/* Remove any right margin/padding that might be pushing content */
135+
.tabs-container,
136+
[class*='tabs-container'] {
137+
width: 100% !important;
138+
margin: 0 !important;
139+
padding: 0 !important;
140+
}
141+
142+
/* Ensure tab list takes full width */
143+
[role='tablist'] {
144+
width: 100% !important;
145+
display: flex !important;
146+
justify-content: flex-start !important;
147+
margin: 0 !important;
148+
padding: 0 !important;
86149
}

0 commit comments

Comments
 (0)