feat(theme): [select] modify the scrollbar and popper to unify the style (#3160)

Author: MomoPoppy

packages/theme/src/base/dark-theme.less

@@ -513,5 +513,5 @@
   --tv-color-bg-scrollbar-thumb: rgba(255, 255, 255, 0.15); // rgba(255,255,255,0.15)滑块背景色
   --tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #808080 滑块hover背景色
   --tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #808080 滑块active背景色
-  --tv-color-bg-scrollbar-track: var(--tv-base-color-common-13); // #000 轨道背景色
+  --tv-color-bg-scrollbar-track: transparent; // transparent 轨道背景色
 }

packages/theme/src/base/reset.less

@@ -152,28 +152,33 @@
     display: none;
   }
 
-  @media (min-width: 768px) {
-    ::-webkit-scrollbar {
-      width: var(--tv-size-scrollbar-width);
-      height: var(--tv-size-scrollbar-height);
-    }
+  ::-webkit-scrollbar {
+    width: var(--tv-size-scrollbar-width);
+    height: var(--tv-size-scrollbar-height);
+  }
 
-    ::-webkit-scrollbar-track-piece {
-      background: var(--tv-color-bg-scrollbar-track);
-    }
+  // x 和 y 滚动条交汇处
+  ::-webkit-scrollbar-corner {
+    background: var(--tv-color-bg-scrollbar-track);
+  }
 
-    ::-webkit-scrollbar-thumb {
-      background: var(--tv-color-bg-scrollbar-thumb);
-      border-radius: var(--tv-border-radius-scrollbar-thumb);
-    }
+  // 滚动条轨道
+  ::-webkit-scrollbar-track {
+    background: var(--tv-color-bg-scrollbar-track);
+  }
 
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(--tv-color-bg-scrollbar-thumb-hover);
-    }
+  // 滚动滑块
+  ::-webkit-scrollbar-thumb {
+    background: var(--tv-color-bg-scrollbar-thumb);
+    border-radius: var(--tv-border-radius-scrollbar-thumb);
+  }
 
-    ::-webkit-scrollbar-thumb:active {
-      background: var(--tv-color-bg-scrollbar-thumb-active);
-    }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--tv-color-bg-scrollbar-thumb-hover);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--tv-color-bg-scrollbar-thumb-active);
   }
 }
 
@@ -197,9 +202,9 @@
 }
 
 // 有箭头的场景，统一规范所有样式
-.tiny-popconfirm-popover,
-.tiny-popper,
-.tiny-tooltip__popper {
+.tiny-popconfirm-popover:has(.popper__arrow),
+.tiny-popper:has(.popper__arrow),
+.tiny-tooltip__popper:has(.popper__arrow) {
   .popper__arrow {
     position: absolute;
     display: block;
@@ -243,4 +248,4 @@
       right: -3px;
     }
   }
-}
+}