Merge pull request #935 from refly-ai/feat/improve-scroll-bar

style: enhance scrollbar styles and improve dark mode support

Author: mrcfps

apps/web/src/styles/style.css

@@ -63,34 +63,64 @@ select:focus {
   content: none !important;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
+/* Scrollbar Styles - Only show during scrolling */
+@media (hover: hover) {
+  * {
+    scrollbar-width: auto;
+    scrollbar-color: transparent transparent;
+  }
 
-::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 4px;
-}
+  *:hover,
+  *:focus,
+  *:focus-within {
+    scrollbar-color: #c1c1c1 #f1f1f1;
+  }
 
-::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 
-.dark {
   ::-webkit-scrollbar-track {
-    background: #2d2d2d;
+    background: #f1f1f1;
   }
 
   ::-webkit-scrollbar-thumb {
-    background: #555;
+    background-color: transparent;
+    border-radius: 4px;
+  }
+
+  *:hover::-webkit-scrollbar-thumb,
+  *:focus::-webkit-scrollbar-thumb,
+  *:focus-within::-webkit-scrollbar-thumb,
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: #c1c1c1;
+    transition: background-color 0.3s ease;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: #a8a8a8;
+  }
+
+  .dark *:hover,
+  .dark *:focus,
+  .dark *:focus-within {
+    scrollbar-color: #555 #2d2d2d;
+  }
+
+  .dark ::-webkit-scrollbar-track {
+    background: #2d2d2d;
+  }
+
+  .dark *:hover::-webkit-scrollbar-thumb,
+  .dark *:focus::-webkit-scrollbar-thumb,
+  .dark *:focus-within::-webkit-scrollbar-thumb,
+  .dark *::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+    transition: background-color 0.3s ease;
   }
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: #777;
+  .dark *::-webkit-scrollbar-thumb:hover {
+    background-color: #777;
   }
 }

packages/ai-workspace-common/src/modules/artifacts/code-runner/monaco-editor/SimpleTextEditor.tsx

@@ -43,7 +43,7 @@ const SimpleTextEditor = React.memo(
         </div>
 
         {isContentTruncated && (
-          <div className="bg-yellow-50 text-yellow-800 px-4 py-2 text-sm dark:bg-yellow-850 dark:text-yellow-100">
+          <div className="bg-yellow-50 text-yellow-800 px-4 py-2 text-sm dark:bg-yellow-50 dark:text-yellow-600">
             {t('codeArtifact.editor.contentTruncated', {
               chars: DEFAULT_MAX_GENERATION_DISPLAY,
               total: content.length,