feat: move styles file and refine videojs styles

1 files changed, 39 insertions, 0 deletions

diff --git a/resources/src/styles/tubo.scss b/resources/src/styles/tubo.scss
new file mode 100644
index 0000000..2ab74f3
--- /dev/null
+++ b/resources/src/styles/tubo.scss
@@ -0,0 +1,39 @@
+@import "typography";
+@import "variables";
+@import "@fortawesome/fontawesome-free/scss/brands";
+@import "@fortawesome/fontawesome-free/scss/regular";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "video.js/dist/video-js.css";
+@import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
+@import "@silvermine/videojs-quality-selector/dist/css/quality-selector.css";
+
+.vjs-tubo .vjs-poster img {
+  object-fit: cover;
+}
+
+.vjs-tubo .vjs-control-bar {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+}
+
+.vjs-tubo .vjs-volume-control {
+  background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 45%);
+  backdrop-filter: blur(1px);
+}
+
+.vjs-tubo .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(6px);
+}
+
+.vjs-tubo .vjs-current-time, .vjs-tubo .vjs-time-divider, .vjs-tubo .vjs-duration {
+  display: block;
+}
+
+.vjs-tubo .vjs-big-play-button, .vjs-tubo.vjs-paused .vjs-big-play-button, .vjs-tubo:hover .vjs-big-play-button {
+  background: none;
+  border: none;
+}