Make top navigation tabs fully interactive

Author: kylening

docs/stylesheets/rem-theme-v3.css docs/stylesheets/rem-theme-v4.cssdocs/stylesheets/rem-theme-v3.css renamed to docs/stylesheets/rem-theme-v4.css

@@ -119,8 +119,21 @@ html:not([data-rem-theme="off"]) .md-content__inner {
 }
 
 .md-tabs__link {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.05rem;
+  margin-top: 0.175rem;
+  padding: 0 0.72rem;
+  border-radius: 0.72rem;
+  cursor: pointer;
   font-weight: 600;
   letter-spacing: 0.02em;
+  transition:
+    color 160ms ease,
+    opacity 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease;
 }
 
 /* Material 会在页签动画期间保留 hidden 属性；自定义背景仍可见时，
@@ -134,12 +147,31 @@ html:not([data-rem-theme="off"]) .md-content__inner {
   opacity: 1;
 }
 
+.md-tabs__item--active .md-tabs__link,
 .md-tabs__link--active,
-.md-tabs__link:hover {
+.md-tabs__link:hover,
+.md-tabs__link:focus-visible {
   color: #fff;
   text-shadow: 0 0 0.6rem rgba(255, 255, 255, 0.65);
 }
 
+.md-tabs__item--active .md-tabs__link {
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow:
+    inset 0 -2px 0 rgba(255, 255, 255, 0.78),
+    0 0.2rem 0.55rem rgba(30, 105, 164, 0.16);
+}
+
+.md-tabs__link:hover,
+.md-tabs__link:focus-visible {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.md-tabs__link:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+}
+
 .md-typeset {
   min-width: 0;
   font-size: 0.78rem;

mkdocs.yml

@@ -103,4 +103,4 @@ extra_javascript:
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
 
 extra_css:
-  - stylesheets/rem-theme-v3.css
+  - stylesheets/rem-theme-v4.css