Update.

Author: xOS

resource/static/main.css

@@ -27,8 +27,8 @@
     white-space: nowrap;
     position: relative;
     background-color: #fbfbfb26;
-    border-radius: 50px;
-    padding: 5px;
+    border-radius: 22px;
+    padding: 5px 3px;
     margin-bottom: 20px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.10);
     -webkit-overflow-scrolling: touch;
@@ -46,29 +46,31 @@
 
 .tabs-content-area {
     display: inline-flex;
-    /*gap: 0.5em;*/
-    /*padding: 0.2em 0;*/
+    align-items: center;
 }
 
 .custom-tab {
-    padding: 8px 15px;
+    padding: 6px 18px;
     margin: 0 3px;
     cursor: pointer;
     color: #777;
-    font-weight: 500;
-    border-radius: 50px;
-    transition: color 0.3s ease;
+    border-radius: 17px;
+    transition: color 0.2s ease;
     font-size: 15px;
     position: relative;
     z-index: 2;
     background-color: transparent;
+    font-weight: normal;
     display: inline-block;
+    line-height: 1.5;
     -webkit-tap-highlight-color: transparent;
 }
 
 .custom-tab.active {
-    color: #000000;
+  color: #333;
+  font-weight: bold;
 }
+
 .custom-tab:not(.active):hover {
     color: #333;
 }
@@ -79,7 +81,7 @@
     bottom: 5px;
     height: calc(100% - 10px);
     background-color: #fafafaa3;
-    border-radius: 50px;
+    border-radius: 17px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     z-index: 1;
     transition: left 0.3s ease, width 0.3s ease;
@@ -802,7 +804,7 @@ i.note.icon {
 }
 
 #app .ui.fluid.accordion {
-    border-radius: 20px;
+    border-radius: 19px;
     margin-bottom: 1rem;
     background-color: #fbfbfb26;
     -webkit-transition: all .3s ease;

resource/template/common/header.html

@@ -20,7 +20,7 @@
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css?v20220423">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-logos/0.17/font-logos.min.css" rel="stylesheet">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/flag-icon-css/4.1.5/css/flag-icons.min.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="/static/main.css?v202505121">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v20250521">
     <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20220602"/>
 </head>
 {{if ts .CustomCodeDashboard}} {{.CustomCodeDashboard|safe}} {{end}}

resource/template/theme-default/header.html

@@ -21,7 +21,7 @@
     <link rel="stylesheet" type="text/css" href="/static/fontawesome.min.css?v2025032723">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-logos/0.17/font-logos.min.css" rel="stylesheet">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/flag-icon-css/4.1.5/css/flag-icons.min.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="/static/main.css?v202505121">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v20250521">
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.4.1/semantic.min.js"></script>
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>

resource/template/theme-default/home.html

@@ -5,20 +5,11 @@
 
 <div class="nb-container">
     <div class="ui container">
-        <div style="display: flex; justify-content: center;">
+        <div class="tabs-wrapper">
             <div v-if="servers && servers.length > 0" 
                  class="custom-tabs-container" 
-                 ref="tabsContainer" 
-                 style="width: fit-content;
-                        max-width: 100%;
-                        overflow-x: auto;
-                        position: relative;
-                        white-space: nowrap;
-                        ">
-                <div style="display: inline-flex;
-                            gap: 0.5em;
-                            padding: 0.2em 0;
-                            ">
+                 ref="tabsContainer">
+                <div class="tabs-content-area">
                     <div class="custom-tab"
                         :class="{ active: activeTag === '' }"
                         @click="handleTabClick('', $event)"