From 3166d86301186999f22d4dcae0681f623360f87b Mon Sep 17 00:00:00 2001
From: Miguel Ángel Moreno <mail@migalmoreno.com>
Date: Fri, 19 Apr 2024 16:25:57 +0200
Subject: feat: move styles file and refine videojs styles

---
 resources/src/css/tubo.scss    | 29 -----------------------------
 resources/src/styles/tubo.scss | 39 +++++++++++++++++++++++++++++++++++++++
 src/backend/tubo/handler.clj   |  2 +-
 webpack.config.js              |  4 ++--
 4 files changed, 42 insertions(+), 32 deletions(-)
 delete mode 100644 resources/src/css/tubo.scss
 create mode 100644 resources/src/styles/tubo.scss

diff --git a/resources/src/css/tubo.scss b/resources/src/css/tubo.scss
deleted file mode 100644
index 87189a2..0000000
--- a/resources/src/css/tubo.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@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, .vjs-tubo .vjs-volume-control {
-  background: none;
-}
-
-.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 {
-  background: none;
-  border: none;
-}
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;
+}
diff --git a/src/backend/tubo/handler.clj b/src/backend/tubo/handler.clj
index dc08c06..8813457 100644
--- a/src/backend/tubo/handler.clj
+++ b/src/backend/tubo/handler.clj
@@ -20,7 +20,7 @@
        :content "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"}]
      [:title "Tubo"]
      [:link {:rel "icon" :type "image/png" :href "/images/tubo.png"}]
-     (hiccup/include-css "/css/tubo.css")]
+     (hiccup/include-css "/styles/tubo.css")]
     [:body
      [:div#app]
      (hiccup/include-js "/js/main.js")
diff --git a/webpack.config.js b/webpack.config.js
index 37a942c..c8bc893 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin")
 module.exports = {
   mode: process.env.NODE_ENV,
   entry: {
-    tubo: path.resolve(__dirname, "resources/src/css/tubo.scss")
+    tubo: path.resolve(__dirname, "resources/src/styles/tubo.scss")
   },
   output: {
     path: path.resolve(__dirname, "resources/public")
@@ -14,7 +14,7 @@ module.exports = {
   plugins: [
     new RemoveEmptyScriptsPlugin(),
     new MiniCssExtractPlugin({
-      filename: "css/[name].css",
+      filename: "styles/[name].css",
     }),
     new CopyPlugin({
       patterns: [
-- 
cgit v1.2.3