滚动条样式更新

src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js

@@ -935,31 +935,7 @@ const MainlineTimelineViewComponent = forwardRef(
         </Flex>
 
         {/* 横向滚动容器 - 滚动条在卡片上方 */}
-        <Box
-          overflowX="scroll"
-          overflowY="visible"
-          pb={2}
-          sx={{
-            "&::-webkit-scrollbar": {
-              height: "10px",
-              display: "block",
-            },
-            "&::-webkit-scrollbar-track": {
-              background: COLORS.scrollbarTrackBg,
-              borderRadius: "5px",
-            },
-            "&::-webkit-scrollbar-thumb": {
-              background: COLORS.scrollbarThumbBg,
-              borderRadius: "5px",
-              minWidth: "40px",
-            },
-            "&::-webkit-scrollbar-thumb:hover": {
-              background: COLORS.scrollbarThumbHoverBg,
-            },
-            scrollbarWidth: "thin",
-            scrollbarColor: `${COLORS.scrollbarThumbBg} ${COLORS.scrollbarTrackBg}`,
-          }}
-        >
+        <Box className="mainline-scroll-container" pb={2}>
           {/* 主线卡片横向排列容器 */}
           <HStack
             spacing={3}
@@ -967,7 +943,7 @@ const MainlineTimelineViewComponent = forwardRef(
             pt={1}
             align="stretch"
             display="inline-flex"
-            minW="max-content"
+            w="max-content"
           >
             {mainlines.map((mainline) => {
               const groupId =

src/views/Community/components/SearchFilters/CompactSearchBox.css

@@ -105,3 +105,37 @@
     color: #a0aec0 !important;
     font-size: 12px !important;
 }
+
+/* ==================== 主线视图横向滚动条 ==================== */
+
+.mainline-scroll-container {
+    overflow-x: scroll !important;
+    overflow-y: visible !important;
+    -webkit-overflow-scrolling: touch;
+}
+
+.mainline-scroll-container::-webkit-scrollbar {
+    height: 10px !important;
+    display: block !important;
+}
+
+.mainline-scroll-container::-webkit-scrollbar-track {
+    background: #2d3748 !important;
+    border-radius: 5px !important;
+}
+
+.mainline-scroll-container::-webkit-scrollbar-thumb {
+    background: #718096 !important;
+    border-radius: 5px !important;
+    min-width: 40px !important;
+}
+
+.mainline-scroll-container::-webkit-scrollbar-thumb:hover {
+    background: #a0aec0 !important;
+}
+
+/* Firefox 滚动条 */
+.mainline-scroll-container {
+    scrollbar-width: thin;
+    scrollbar-color: #718096 #2d3748;
+}