style: improve scrollbar styling on the query editor

TPXP · TPXP · commit 2c873deae4b5 · 2024-05-20T12:54:00.000+02:00
This changes makes scrollbars in the graphiql editor transparent, so that they look better integrated in the interface
diff --git a/.changeset/transparent-scrollbars.md 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
@@ -146,3 +146,15 @@ body.graphiql-dark [data-radix-popper-content-wrapper] {
     }
   }
 }
+
+/* Transparent scrollbars, without backgrounds */
+.graphiql-container .CodeMirror-hscrollbar,
+.graphiql-container .CodeMirror-vscrollbar {
+  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;
+}

Original file line number	Diff line number	Diff line change
`@@ -146,3 +146,15 @@ body.graphiql-dark [data-radix-popper-content-wrapper] {`
`146`	`146`	`}`
`147`	`147`	`}`
`148`	`148`	`}`
	`149`	`+`
	`150`	`+/* Transparent scrollbars, without backgrounds */`
	`151`	`+.graphiql-container .CodeMirror-hscrollbar,`
	`152`	`+.graphiql-container .CodeMirror-vscrollbar {`
	`153`	`+ scrollbar-color: #88888888 transparent;`
	`154`	`+}`
	`155`	`+`
	`156`	`+/* The little square between H and V scrollbars */`
	`157`	`+.graphiql-container .CodeMirror-scrollbar-filler,`
	`158`	`+.graphiql-container .CodeMirror-gutter-filler {`
	`159`	`+ background-color: transparent;`
	`160`	`+}`