Use new UI (#8983)

* fixup build

* swap frontends

web/src/index.css

@@ -1,55 +1,24 @@
+@import "/themes/theme-default.css";
+@import "/themes/theme-blue.css";
+@import "/themes/theme-gold.css";
+@import "/themes/theme-green.css";
+@import "/themes/theme-nature.css";
+@import "/themes/theme-netflix.css";
+@import "/themes/theme-nord.css";
+@import "/themes/theme-orange.css";
+@import "/themes/theme-red.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-.activityindicator {
-  border-top-color: currentColor;
-  -webkit-animation: spinner 0.75s linear infinite;
-  animation: spinner 0.75s linear infinite;
-}
+/* Duplicated var names with color space modifiers for swatches in vscode. See https://github.com/tailwindlabs/tailwindcss/discussions/10619 */
 
-@-webkit-keyframes spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
+@layer base {
+  * {
+    @apply border-border;
   }
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.jsmpeg canvas {
-  position: static !important;
-}
-
-.hide-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.hide-scroll {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-/*
- Hide some videoplayer controls on mobile devices to
- align the video player and bottom control bar properly.
-*/
-@media only screen and (max-width: 700px) {
-  .small-player .vjs-time-control,
-  .small-player .vjs-time-divider {
-    display: none;
-  }
-  div.vjs-control-bar > .skip-back.skip-5,
-  div.vjs-control-bar > .skip-forward.skip-10 {
-    display: none;
+  body {
+    @apply bg-background text-foreground;
   }
 }