diff options
| -rw-r--r-- | resources/src/styles/tubo.scss (renamed from resources/src/css/tubo.scss) | 16 | ||||
| -rw-r--r-- | src/backend/tubo/handler.clj | 2 | ||||
| -rw-r--r-- | webpack.config.js | 4 |
3 files changed, 16 insertions, 6 deletions
diff --git a/resources/src/css/tubo.scss b/resources/src/styles/tubo.scss index 87189a2..2ab74f3 100644 --- a/resources/src/css/tubo.scss +++ b/resources/src/styles/tubo.scss @@ -15,15 +15,25 @@ object-fit: cover; } -.vjs-tubo .vjs-control-bar, .vjs-tubo .vjs-volume-control { - background: none; +.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 .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: [ |