improved tabs extension

- animated tab transitions
- fixed height for all tab containers
- improved visual design

Author: jothepro

README.md

@@ -87,15 +87,11 @@ You can even install the theme system-wide by running `make install`. The files
 
 There is two layout options. Choose one of them and configure Doxygen accordingly:
 
-<div class="darkmode_inverted_image">
-
-![Available theme variants](img/theme-variants.drawio.svg)
-
-</div>
-
 <div class="tabbed">
 
-- <b class="tab-title">1️⃣ Base Theme </b>
+- <b class="tab-title">Base Theme</b><div class="darkmode_inverted_image">
+    ![](img/theme-variants-base.drawio.svg){}
+    </div>
     Comes with the typical Doxygen titlebar. Optionally the treeview in the sidebar can be enabled. 
 
     Required files: `doxygen-awesome.css`
@@ -109,7 +105,9 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
     HTML_COLORSTYLE        = LIGHT # required with Doxygen >= 1.9.5
     ```
 
-- <b class="tab-title">2️⃣ Sidebar-Only Theme </b>
+- <b class="tab-title">Sidebar-Only Theme</b><div class="darkmode_inverted_image">
+    ![](img/theme-variants-sidebar-only.drawio.svg)
+    </div>
     Hides the top titlebar to give more space to the content. The treeview must be enabled in order for this theme to work.
 
     Required files: `doxygen-awesome.css`, `doxygen-awesome-sidebar-only.css`
@@ -127,6 +125,8 @@ There is two layout options. Choose one of them and configure Doxygen accordingl
 
 </div>
 
+<br> 
+
 **Caution**: 
 - This theme is not compatible with the `FULL_SIDEBAR = YES` option provided by Doxygen!
 - `HTML_COLORSTYLE` must be set to `LIGHT` since Doxygen 1.9.5!

doxygen-awesome-tabs.js

@@ -32,13 +32,14 @@ class DoxygenAwesomeTabs {
     static init() {
         window.addEventListener("load", () => {
             document.querySelectorAll(".tabbed:not(:empty)").forEach((tabbed, tabbedIndex) => {
-                let tabLinkList = []
+                let tabLinkList = []           
                 tabbed.querySelectorAll("li").forEach((tab, tabIndex) => {
                     tab.id = "tab_" + tabbedIndex + "_" + tabIndex
                     let header = tab.querySelector(".tab-title")
                     let tabLink = document.createElement("button")
                     tabLink.classList.add("tab-button")
                     tabLink.appendChild(header)
+                    header.title = header.textContent
                     tabLink.addEventListener("click", () => {
                         tabbed.querySelectorAll("li").forEach((tab) => {
                             tab.classList.remove("selected")
@@ -64,7 +65,26 @@ class DoxygenAwesomeTabs {
                 })
                 tabsOverviewContainer.appendChild(tabsOverview)
                 tabbed.before(tabsOverviewContainer)
+
+                function resize() {
+                    let maxTabHeight = 0
+                    tabbed.querySelectorAll("li").forEach((tab, tabIndex) => {
+                        let visibility = tab.style.display
+                        tab.style.display = "block"
+                        maxTabHeight = Math.max(tab.offsetHeight, maxTabHeight)
+                        tab.style.display = visibility
+                    })
+                    tabbed.style.height = `${maxTabHeight + 10}px`
+                }
+
+                resize()
+                new ResizeObserver(resize).observe(tabbed)
             })
         })
+        
+    }
+
+    static resize(tabbed) {
+        
     }
 }

doxygen-awesome.css

@@ -169,6 +169,8 @@ html {
     --webkit-scrollbar-size: 7px;
     --webkit-scrollbar-padding: 4px;
     --webkit-scrollbar-color: var(--separator-color);
+
+    --animation-duration: .12s
 }
 
 @media screen and (max-width: 767px) {
@@ -1174,7 +1176,7 @@ div.toc li a.aboveActive {
         margin-right: var(--spacing-small);
         margin-bottom: calc(var(--navigation-font-size) / 4);
         transform: rotate(-90deg);
-        transition: transform 0.25s ease-out;
+        transition: transform var(--animation-duration) ease-out;
     }
 
     div.contents .toc.interactive.open > h3::before {
@@ -1231,9 +1233,13 @@ div.fragment, pre.fragment {
     .contents > div.fragment,
     .textblock > div.fragment,
     .textblock > pre.fragment,
+    .textblock > .tabbed > ul > li > div.fragment,
+    .textblock > .tabbed > ul > li > pre.fragment,
     .contents > .doxygen-awesome-fragment-wrapper > div.fragment,
     .textblock > .doxygen-awesome-fragment-wrapper > div.fragment,
-    .textblock > .doxygen-awesome-fragment-wrapper > pre.fragment {
+    .textblock > .doxygen-awesome-fragment-wrapper > pre.fragment,
+    .textblock > .tabbed > ul > li > .doxygen-awesome-fragment-wrapper > div.fragment,
+    .textblock > .tabbed > ul > li > .doxygen-awesome-fragment-wrapper > pre.fragment {
         margin: var(--spacing-medium) calc(0px - var(--spacing-large));
         border-radius: 0;
         border-left: 0;
@@ -1867,7 +1873,7 @@ div.dynheader img[src="closed.png"] {
     display: block;
     float: left;
     margin-left: -10px;
-    transition: transform 0.25s ease-out;
+    transition: transform var(--animation-duration) ease-out;
 }
 
 table.memberdecls img {
@@ -2345,7 +2351,7 @@ doxygen-awesome-dark-mode-toggle {
 }
 
 doxygen-awesome-dark-mode-toggle > svg {
-    transition: transform .1s ease-in-out;
+    transition: transform var(--animation-duration) ease-in-out;
 }
 
 doxygen-awesome-dark-mode-toggle:active > svg {
@@ -2430,7 +2436,7 @@ a.anchorlink {
     text-decoration: none;
     opacity: .15;
     display: none;
-    transition: opacity .1s ease-in-out, color .1s ease-in-out;
+    transition: opacity var(--animation-duration) ease-in-out, color var(--animation-duration) ease-in-out;
 }
 
 a.anchorlink svg {
@@ -2454,15 +2460,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;
     padding: var(--spacing-small) 0;
-    border-bottom: 1px solid var(--separator-color);
 }
 
 .tabbed li {
@@ -2485,24 +2486,46 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
     flex-direction: row;
 }
 
+@media screen and (max-width: 900px) {
+    .tabs-overview-container {
+        margin: 0 calc(0px - var(--spacing-large));
+    }
+    .tabs-overview {
+        padding: 0 var(--spacing-large)
+    }
+}
+
 .tabs-overview button.tab-button {
     color: var(--page-foreground-color);
     margin: 0;
     border: none;
     background: transparent;
-    padding: var(--spacing-small) 0;
+    padding: calc(var(--spacing-large) / 2) 0;
     display: inline-block;
     font-size: var(--page-font-size);
     cursor: pointer;
     box-shadow: 0 1px 0 0 var(--separator-color);
     position: relative;
+    
+    -webkit-tap-highlight-color: transparent;
+}
+
+.tabs-overview button.tab-button .tab-title::before {
+    display: block;
+    content: attr(title);
+    font-weight: 600;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
 }
 
 .tabs-overview button.tab-button .tab-title {
     float: left;
     white-space: nowrap;
-    padding: var(--spacing-small) var(--spacing-large);
+    font-weight: normal;
+    padding: calc(var(--spacing-large) / 2) var(--spacing-large);
     border-radius: var(--border-radius-medium);
+    transition: background-color var(--animation-duration) ease-in-out, font-weight var(--animation-duration) ease-in-out;
 }
 
 .tabs-overview button.tab-button:not(:last-child) .tab-title {
@@ -2514,18 +2537,27 @@ h2:hover a.anchorlink, h1:hover a.anchorlink, h3:hover a.anchorlink, h4:hover a.
     box-shadow: none;
 }
 
-.tabs-overview button.tab-button.active {
-    color: var(--primary-color);
+.tabs-overview button.tab-button.active .tab-title {
+    font-weight: 600;
 }
 
-.tabs-overview button.tab-button.active::after {
+.tabs-overview button.tab-button::after {
     content: '';
     display: block;
     position: absolute;
-    left: 0px;
+    left: 0;
     bottom: 0;
-    right: 0px;
-    height: 3px;
+    right: 0;
+    height: 0;
+    width: 0%;
+    margin: 0 auto;
     border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
     background-color: var(--primary-color);
+    transition: width var(--animation-duration) ease-in-out, height var(--animation-duration) ease-in-out;
+}
+
+.tabs-overview button.tab-button.active::after {
+    width: 100%;
+    box-sizing: border-box;
+    height: 3px;
 }