Merge pull request #200 from flatironinstitute/chrome-style-scrollbar

Style scrollbar in chrome
flatironinstitute · Aug 5, 2024 · 073b74b · 073b74b
2 parents 3421e58 + 6bbef3e
commit 073b74b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/gui/src/app/Scripting/OutputDivUtils.tsx b/gui/src/app/Scripting/OutputDivUtils.tsx
@@ -9,11 +9,10 @@ export const writeConsoleOutToDiv = (
 ) => {
   if (x === "") return;
   if (!parentDiv.current) return;
-  const styleClass = type === "stdout" ? "WorkerStdout" : "WorkerStderr";
   const preElement = document.createElement("pre");
   preElement.textContent = x;
   const divElement = document.createElement("div");
-  divElement.className = styleClass;
+  divElement.className = type;
   divElement.appendChild(preElement);
   parentDiv.current.appendChild(divElement);
 };

diff --git a/gui/src/index.css b/gui/src/index.css
@@ -4,20 +4,32 @@ body {
   min-height: 100vh;
 }
 
-.WorkerStdout {
-  color: darkblue;
+@supports (scrollbar-width: auto) {
+  body {
+    scrollbar-width: thin;
+  }
 }
 
-.WorkerStdout pre {
-  margin: 0px;
-  padding: 1px;
-}
+@supports selector(::-webkit-scrollbar) {
+  ::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+  }
 
-.WorkerStderr {
-  color: red;
-}
+  :hover::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f2f2f2;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #bdbdbd;
+  }
 
-.WorkerStderr pre {
-  margin: 0px;
-  padding: 1px;
+  ::-webkit-scrollbar-thumb:hover {
+    background: #6e6e6e;
+  }
 }
diff --git a/gui/src/localStyles.css b/gui/src/localStyles.css
@@ -27,6 +27,24 @@
   white-space: pre-wrap;
 }
 
+.stdout {
+  color: darkblue;
+}
+
+.stdout pre {
+  margin: 0px;
+  padding: 1px;
+}
+
+.stderr {
+  color: red;
+}
+
+.stderr pre {
+  margin: 0px;
+  padding: 1px;
+}
+
 /* Compilation Results (StanCompileResultWindow) */
 .ErrorsWindow {
   height: 100%;