Tabs with active tab

2 files changed, 17 insertions, 10 deletions

diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index 9ee0639e..32888279 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -867,6 +867,14 @@ ready(function() {
             }), 100);
         }
     });
+    let location = window.location.href;
+    document.querySelectorAll('#global li a').forEach(el => {
+        if (el.href === location) {
+            el.classList.add('active');
+            el.parentNode.classList.add('active');
+            el.parentNode.setAttribute('aria-disabled', 'true');
+        }
+    });
     initES();
 
     embedAll();
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 301e5a1c..c844c383 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -14,6 +14,7 @@ textarea,
 pre {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
 }
 textarea {
     overflow: auto;
@@ -188,21 +189,19 @@ body > header {
 }
 #ctitle a {
     padding: 4px 20px;
-    transition: background 0.3s ease-out;
 }
-.msg-cont > nav.l a:hover,
-#global a:hover {
-    color: #fff;
-    transition: background 0.3s ease-out;
+#global a.active {
+    background: #eee;
+    border-bottom: 2px solid #ff339a;
+    pointer-events: none;
 }
-#global li:hover,
-#ctitle a:hover,
+#global li:hover:not(.active),
+#ctitle a:hover:not(.active),
 .l a:hover {
-    background-color: #ff339a;
-    color: #fff;
+    border-bottom: 2px solid #ff339a;
+    background: #eee;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     cursor: pointer;
-    transition: background 0.3s ease-out;
 }
 #search input {
     background: #FFF;