From 0926501c820b070b9d7e921bfa7f0430b52a18dc Mon Sep 17 00:00:00 2001
From: Thomas P <TPXP@users.noreply.github.com>
Date: Mon, 20 May 2024 12:16:28 +0200
Subject: [PATCH] style: improve scrollbar styling on the query editor

This changes makes scrollbars in the graphiql editor transparent, so that they look better integrated in the interface
---
 .changeset/transparent-scrollbars.md       |  6 ++++
 packages/graphiql-react/src/style/root.css | 32 ++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 .changeset/transparent-scrollbars.md

diff --git a/.changeset/transparent-scrollbars.md b/.changeset/transparent-scrollbars.md
new file mode 100644
index 00000000000..6187c4d6182
--- /dev/null
+++ b/.changeset/transparent-scrollbars.md
@@ -0,0 +1,6 @@
+---
+"@graphiql/react": patch
+"graphiql": patch
+---
+
+style: improve scrollbar styling on the query editor
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index adf9e2f002a..0644c15f753 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -146,3 +146,35 @@ body.graphiql-dark [data-radix-popper-content-wrapper] {
     }
   }
 }
+
+/* Transparent scrollbars, without backgrounds */
+.graphiql-container .CodeMirror-hscrollbar,
+.graphiql-container .CodeMirror-vscrollbar,
+.graphiql-container .graphiql-plugin {
+  scrollbar-color: #88888888 transparent;
+}
+
+/* The little square between H and V scrollbars */
+.graphiql-container .CodeMirror-scrollbar-filler,
+.graphiql-container .CodeMirror-gutter-filler {
+  background-color: transparent;
+}
+
+/* Safari scrollbars */
+.graphiql-container .CodeMirror-hscrollbar::-webkit-scrollbar-track,
+.graphiql-container .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.graphiql-container .graphiql-plugin::-webkit-scrollbar-track,
+.graphiql-container .CodeMirror-hscrollbar::-webkit-scrollbar,
+.graphiql-container .CodeMirror-vscrollbar::-webkit-scrollbar,
+.graphiql-container .graphiql-plugin::-webkit-scrollbar {
+  background-color: transparent;
+}
+
+.graphiql-container .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
+.graphiql-container .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.graphiql-container .graphiql-plugin::-webkit-scrollbar-thumb {
+  border-radius: 99px;
+  padding: 3px;
+  box-shadow: inset 0 0 99px 99px #88888888;
+  border: solid 3px transparent;
+}