improve "Tabs" styling

jothepro · May 30, 2023 · f54bc54 · f54bc54
1 parent e124521
commit f54bc54
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/docs/extensions.md b/docs/extensions.md
@@ -193,8 +193,8 @@ This extension allows to arrange list content in tabs:
 
 <div class="tabbed">
 
-- <b class="tab-title">Tab 1</b> This is the content of tab 1
-- <b class="tab-title">Tab 2</b> This is the content of tab 2
+- <span class="tab-title">Tab 1</span> This is the content of tab 1
+- <span class="tab-title">Tab 2</span> This is the content of tab 2
 
 </div>
 
@@ -224,8 +224,8 @@ Each item in the list must start with an element that has the class `tab-title`.
 ```md
 <div class="tabbed">
 
-- <b class="tab-title">Tab 1</b> This is the content of tab 1
-- <b class="tab-title">Tab 2</b> This is the content of tab 2
+- <span class="tab-title">Tab 1</span> This is the content of tab 1
+- <span class="tab-title">Tab 2</span> This is the content of tab 2
 
 </div>
 ```

diff --git a/doxygen-awesome.css b/doxygen-awesome.css
@@ -2450,6 +2450,10 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
  Optional tab feature
 */
 
+.tabbed {
+    margin: var(--spacing-medium) auto;
+}
+
 .tabbed ul {
     padding-inline-start: 0px;
     margin: 0;
@@ -2487,6 +2491,7 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
     font-size: var(--page-font-size);
     cursor: pointer;
     box-shadow: 0 1px 0 0 var(--separator-color);
+    position: relative;
 }
 
 .tabs-overview button.tab-button .tab-title {
@@ -2501,22 +2506,22 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
 }
 
 .tabs-overview button.tab-button:hover .tab-title {
-    background: var(--primary-color);
-    color: var(--page-background-color);
+    background: var(--separator-color);
     box-shadow: none;
 }
 
 .tabs-overview button.tab-button.active {
     color: var(--primary-color);
-    box-shadow: 0 1px 0 0 var(--primary-color), inset 0 -1px 0 0 var(--primary-color);
 }
 
-@media (prefers-color-scheme: dark) {
-    html:not(.light-mode) .tabs-overview button.tab-button:hover .tab-title {
-        color: var(--page-foreground-color);
-    }
+.tabs-overview button.tab-button.active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0px;
+    bottom: 0;
+    right: 0px;
+    height: 3px;
+    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
+    background-color: var(--primary-color);
 }
-
-html.dark-mode .tabs-overview button.tab-button:hover .tab-title {
-    color: var(--page-foreground-color);
-}