tabs style edit

MingIXu · Mar 25, 2024 · abf7c2b · abf7c2b
1 parent 353d6ea
commit abf7c2b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 36 deletions.
diff --git a/src/renderer/src/components/tag-nav/index.vue b/src/renderer/src/components/tag-nav/index.vue
@@ -46,40 +46,4 @@ const handleItemClick = (key: string | number) => {
 .tag-nav {
   width: 100%;
 }
-
-:deep(.t-tabs__nav-container.t-is-top:after) {
-  background-color: rgba(0, 0, 0, 0) !important;
-}
-// :deep(.t-tabs__bar.t-is-top) {
-//   width:15px !important;
-//   left: 50% !important;
-//   transform: translate(-50%, 0);
-// }
-:deep(.t-tabs__nav-item) {
-  --ripple-color: transparent;
-  &:not(.t-is-disabled):not(.t-is-active):hover {
-    color: var(--td-brand-color);
-    .t-tabs__nav-item-wrapper {
-      background-color: transparent;
-    }
-  }
-}
-:deep(.t-tabs__nav-item-wrapper) {
-  --ripple-color: transparent;
-}
-:deep(.t-tabs__nav-item-text-wrapper) {
-  font-weight: 700;
-}
-:deep(.t-tabs__btn) {
-  border: 0;
-  background-color: var(--td-bg-color-container);
-  &:hover > svg {
-    color: var(--td-brand-color);
-  }
-}
-:deep(.t-tabs__operations--left), :deep(.t-tabs__operations--right) {
-  .t-tabs__btn:first-child {
-    box-shadow: none;
-  }
-}
 </style>
diff --git a/src/renderer/src/style/layout.less b/src/renderer/src/style/layout.less
@@ -321,6 +321,44 @@
   box-shadow: var(--td-shadow-3);
 }
 
+.t-tabs__header {
+  .t-tabs__nav-container.t-is-top:after {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+  // .t-tabs__bar.t-is-top {
+  //   width:15px !important;
+  //   left: 50% !important;
+  //   transform: translate(-50%, 0);
+  // }
+  .t-tabs__nav-item {
+    --ripple-color: transparent;
+    &:not(.t-is-disabled):not(.t-is-active):hover {
+      color: var(--td-brand-color);
+      .t-tabs__nav-item-wrapper {
+        background-color: transparent;
+      }
+    }
+  }
+  .t-tabs__nav-item-wrapper {
+    --ripple-color: transparent;
+  }
+  .t-tabs__nav-item-text-wrapper {
+    font-weight: 700;
+  }
+  .t-tabs__btn {
+    border: 0;
+    background-color: var(--td-bg-color-container);
+    &:hover > svg {
+      color: var(--td-brand-color);
+    }
+  }
+  .t-tabs__operations--left, .t-tabs__operations--right {
+    .t-tabs__btn:first-child {
+      box-shadow: none;
+    }
+  }
+}
+
 .t-popup__content {
   background-color: var(--td-bg-popup);
 }