style: make scrollbar style global

src/setup/index.css

@@ -178,4 +178,20 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
   background: var(--slider-progress-background);
   border: none;
   border-right-width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: theme("colors.denim-500");
+  border: 5px solid transparent;
+  border-left: 0;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar {
+  /* For some reason the styles don't get applied without the width */
+  width: 13px;
 }

src/video/components/popouts/PopoutProviderAction.tsx

@@ -9,8 +9,6 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useControls } from "@/video/state/logic/controls";
 import { useInterface } from "@/video/state/logic/interface";
 
-import "./Popouts.css";
-
 function ShowPopout(props: { popoutId: string | null; onClose: () => void }) {
   const popoutMap = {
     settings: <SettingsPopout />,

src/video/components/popouts/Popouts.css

@@ -1,15 +0,0 @@
-.popout-wrapper ::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.popout-wrapper ::-webkit-scrollbar-thumb {
-  background-color: theme("colors.denim-500");
-  border: 5px solid transparent;
-  border-left: 0;
-  background-clip: content-box;
-}
-
-.popout-wrapper ::-webkit-scrollbar {
-  /* For some reason the styles don't get applied without the width */
-  width: 13px;
-}