Optimize tab item style on mobile

_config.yml

@@ -31,63 +31,6 @@ custom_file_path:
   #style: source/_data/styles.styl
 
 
-# ---------------------------------------------------------------
-# Site Information Settings
-# ---------------------------------------------------------------
-
-favicon:
-  small: /images/favicon-16x16-next.png
-  medium: /images/favicon-32x32-next.png
-  apple_touch_icon: /images/apple-touch-icon-next.png
-  safari_pinned_tab: /images/logo.svg
-  #android_manifest: /images/manifest.json
-  #ms_browserconfig: /images/browserconfig.xml
-
-# Show multilingual switcher in footer.
-language_switcher: false
-
-footer:
-  # Specify the date when the site was setup. If not defined, current year will be used.
-  #since: 2015
-
-  # Icon between year and copyright info.
-  icon:
-    # Icon name in Font Awesome. See: https://fontawesome.com/icons
-    name: fa fa-heart
-    # If you want to animate the icon, set it to true.
-    animated: false
-    # Change the color of icon, using Hex Code.
-    color: "#ff0000"
-
-  # If not defined, `author` from Hexo `_config.yml` will be used.
-  copyright:
-
-  # Powered by Hexo & NexT
-  powered: true
-
-  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
-  beian:
-    enable: false
-    icp:
-    # The digit in the num of gongan beian.
-    gongan_id:
-    # The full num of gongan beian.
-    gongan_num:
-    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
-    gongan_icon_url:
-
-# Creative Commons 4.0 International License.
-# See: https://creativecommons.org/share-your-work/licensing-types-examples
-# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
-# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
-# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
-creative_commons:
-  license: by-nc-sa
-  sidebar: false
-  post: false
-  language:
-
-
 # ---------------------------------------------------------------
 # Scheme Settings
 # ---------------------------------------------------------------
@@ -102,6 +45,33 @@ scheme: Muse
 darkmode: false
 
 
+# ---------------------------------------------------------------
+# Site Information Settings
+# ---------------------------------------------------------------
+
+favicon:
+  small: /images/favicon-16x16-next.png
+  medium: /images/favicon-32x32-next.png
+  apple_touch_icon: /images/apple-touch-icon-next.png
+  safari_pinned_tab: /images/logo.svg
+  #android_manifest: /images/manifest.json
+  #ms_browserconfig: /images/browserconfig.xml
+
+# Custom Logo (Warning: Do not support scheme Mist)
+custom_logo: #/uploads/custom-logo.jpg
+
+# Creative Commons 4.0 International License.
+# See: https://creativecommons.org/share-your-work/licensing-types-examples
+# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
+# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
+# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
+creative_commons:
+  license: by-nc-sa
+  sidebar: false
+  post: false
+  language:
+
+
 # ---------------------------------------------------------------
 # Menu Settings
 # ---------------------------------------------------------------
@@ -220,6 +190,45 @@ chat:
   text: Chat # Button text, change it as you wish.
 
 
+# ---------------------------------------------------------------
+# Footer Settings
+# See: https://theme-next.js.org/docs/theme-settings/footer
+# ---------------------------------------------------------------
+
+# Show multilingual switcher in footer.
+language_switcher: false
+
+footer:
+  # Specify the date when the site was setup. If not defined, current year will be used.
+  #since: 2015
+
+  # Icon between year and copyright info.
+  icon:
+    # Icon name in Font Awesome. See: https://fontawesome.com/icons
+    name: fa fa-heart
+    # If you want to animate the icon, set it to true.
+    animated: false
+    # Change the color of icon, using Hex Code.
+    color: "#ff0000"
+
+  # If not defined, `author` from Hexo `_config.yml` will be used.
+  copyright:
+
+  # Powered by Hexo & NexT
+  powered: true
+
+  # Beian ICP and gongan information for Chinese users. See: http://www.beian.miit.gov.cn, http://www.beian.gov.cn
+  beian:
+    enable: false
+    icp:
+    # The digit in the num of gongan beian.
+    gongan_id:
+    # The full num of gongan beian.
+    gongan_num:
+    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
+    gongan_icon_url:
+
+
 # ---------------------------------------------------------------
 # Post Settings
 # See: https://theme-next.js.org/docs/theme-settings/posts
@@ -341,9 +350,6 @@ mobile_layout_economy: false
 # Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
 android_chrome_color: "#222"
 
-# Custom Logo (Warning: Do not support scheme Mist)
-custom_logo: #/uploads/custom-logo.jpg
-
 codeblock:
   # Code Highlight theme
   # All available themes: https://theme-next.js.org/highlight/

source/css/_common/scaffolding/tags/tabs.styl

@@ -9,7 +9,6 @@
     display: flex;
     flex-wrap: wrap;
     margin: 0;
-    margin-bottom: -1px;
     padding: 0;
 
     +mobile-smallest() {
@@ -46,7 +45,6 @@
         border-bottom: initial;
         display: block;
         line-height: 1.8;
-        outline: 0;
         padding: .25em .75em;
         text-align: center;
 
@@ -60,20 +58,19 @@
       }
 
       &.active {
-        border-bottom: 1px solid transparent;
+        border-bottom-color: transparent;
-        border-left: 1px solid $table-border-color;
+        border-left-color: $table-border-color;
-        border-right: 1px solid $table-border-color;
+        border-right-color: $table-border-color;
-        border-top: 3px solid $orange;
+        border-top-color: $orange;
 
         +mobile-smallest() {
-          border-bottom: 1px solid $table-border-color;
+          border-bottom-color: $table-border-color;
-          border-left: 3px solid $orange;
+          border-left-color: $orange;
-          border-right: 1px solid $table-border-color;
+          border-right-color: $table-border-color;
-          border-top: 1px solid $table-border-color;
+          border-top-color: $table-border-color;
         }
 
         a {
-          color: var(--link-color);
           cursor: default;
         }
       }
@@ -81,28 +78,21 @@
   }
 
   .tab-content {
-    .tab-pane {
     border: 1px solid $table-border-color;
-      border-top: 0;
+    border-top-color: transparent;
-      padding: 20px 20px 0 20px;
+    border-radius: 0 0 $tbr $tbr;
 
+    +mobile-smallest() {
       border-radius: $tbr;
+      border-top-color: $table-border-color;
+    }
+
+    .tab-pane {
+      padding: 20px 20px 0 20px;
 
       &:not(.active) {
         display: none;
       }
-
-      &.active {
-        display: block;
-
-        &:nth-of-type(1) {
-          border-radius: 0 $tbr $tbr $tbr;
-
-          +mobile-smallest() {
-            border-radius: $tbr;
-          }
-        }
-      }
     }
   }
 }