From 06b27d932d2d441c8382b466fcd22711319e9c17 Mon Sep 17 00:00:00 2001 From: syeopite Date: Sat, 10 Apr 2021 21:35:14 -0700 Subject: [PATCH] Move player styling to separate file --- assets/css/default.css | 179 ------------------ assets/css/player.css | 178 +++++++++++++++++ .../views/components/player_sources.ecr | 1 + 3 files changed, 179 insertions(+), 179 deletions(-) create mode 100644 assets/css/player.css diff --git a/assets/css/default.css b/assets/css/default.css index a725b456..17264532 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -310,194 +310,15 @@ footer a { } } -/* Control Bar */ -@media screen and (max-width: 640px) { - .video-js .vjs-control-bar, - .vjs-menu-button-popup .vjs-menu .vjs-menu-content { - overflow-x: scroll; - } -} - -ul.vjs-menu-content::-webkit-scrollbar { - display: none; -} - -.vjs-user-inactive { - cursor: none; -} - -.video-js .vjs-text-track-display > div > div > div { - background-color: rgba(0, 0, 0, 0.75) !important; - border-radius: 9px !important; - padding: 5px !important; -} - -.vjs-play-control, -.vjs-volume-panel, -.vjs-current-time, -.vjs-time-control, -.vjs-duration, -.vjs-progress-control, -.vjs-remaining-time { - order: 1; -} - -.vjs-captions-button { - order: 2; -} - -.vjs-quality-selector, -.video-js .vjs-http-source-selector { - order: 3; -} - -.vjs-playback-rate { - order: 4; -} - -.vjs-share-control { - order: 5; -} - -.vjs-fullscreen-control { - order: 6; -} - -.vjs-playback-rate > .vjs-menu { - width: 50px; -} - -.vjs-control-bar { - display: flex; - flex-direction: row; - scrollbar-width: none; -} - -.vjs-control-bar::-webkit-scrollbar { - display: none; -} - -.video-js .vjs-icon-cog { - font-size: 18px; -} - -.video-js .vjs-control-bar, -.vjs-menu-button-popup .vjs-menu .vjs-menu-content { - background-color: rgba(35, 35, 35, 0.75); -} - -.vjs-menu li.vjs-menu-item:focus, -.vjs-menu li.vjs-menu-item:hover { - background-color: rgba(255, 255, 255, 0.75); - color: rgba(49, 49, 51, 0.75); -} - -.vjs-menu li.vjs-selected, -.vjs-menu li.vjs-selected:focus, -.vjs-menu li.vjs-selected:hover { - background-color: rgba(0, 182, 240, 0.75); -} - -/* Progress Bar */ -.video-js .vjs-slider { - background-color: rgba(15, 15, 15, 0.5); -} - fieldset > select, span > select { color: rgba(49, 49, 51, 1); } -.video-js .vjs-load-progress, -.video-js .vjs-load-progress div { - background: rgba(87, 87, 88, 1); -} - -.video-js .vjs-slider:hover, -.video-js button:hover { - color: rgba(0, 182, 240, 1); -} - -.video-js .vjs-play-progress { - background-color: rgba(0, 182, 240, 1); -} - -/* Overlay */ -.video-js .vjs-overlay { - background-color: rgba(35, 35, 35, 0.75); - color: rgba(255, 255, 255, 1); -} - -/* ProgressBar marker */ -.vjs-marker { - background-color: rgba(255, 255, 255, 1); - z-index: 0; -} - -/* Big "Play" Button */ -.video-js .vjs-big-play-button { - background-color: rgba(35, 35, 35, 0.5); -} - -.video-js:hover .vjs-big-play-button { - background-color: rgba(35, 35, 35, 0.75); -} - -.video-js .vjs-current-time, -.video-js .vjs-time-divider, -.video-js .vjs-duration { - display: block; -} - -.video-js .vjs-time-divider { - min-width: 0px; - padding-left: 0px; - padding-right: 0px; -} - -.video-js .vjs-poster { - background-size: cover; - object-fit: cover; -} - -.player-dimensions.vjs-fluid { - padding-top: 82vh; -} - -video.video-js { - position: absolute; - height: 100%; -} - -#player-container { - position: relative; - padding-bottom: 82vh; - height: 0; -} - .pure-control-group label { word-wrap: normal; } -.video-js.player-style-invidious { - /* This is already the default */ -} - -.video-js.player-style-youtube .vjs-control-bar { - display: flex; - flex-direction: row; -} -.video-js.player-style-youtube .vjs-big-play-button { - /* - Styles copied from video-js.min.css, definition of - .vjs-big-play-centered .vjs-big-play-button - */ - top: 50%; - left: 50%; - margin-top: -0.81666em; - margin-left: -1.5em; -} - /* * Light theme */ diff --git a/assets/css/player.css b/assets/css/player.css new file mode 100644 index 00000000..9721c047 --- /dev/null +++ b/assets/css/player.css @@ -0,0 +1,178 @@ +/* Control Bar */ +@media screen and (max-width: 640px) { + .video-js .vjs-control-bar, + .vjs-menu-button-popup .vjs-menu .vjs-menu-content { + overflow-x: scroll; + } +} + +ul.vjs-menu-content::-webkit-scrollbar { + display: none; +} + +.vjs-user-inactive { + cursor: none; +} + +.video-js .vjs-text-track-display > div > div > div { + background-color: rgba(0, 0, 0, 0.75) !important; + border-radius: 9px !important; + padding: 5px !important; +} + +.vjs-play-control, +.vjs-volume-panel, +.vjs-current-time, +.vjs-time-control, +.vjs-duration, +.vjs-progress-control, +.vjs-remaining-time { + order: 1; +} + +.vjs-captions-button { + order: 2; +} + +.vjs-quality-selector, +.video-js .vjs-http-source-selector { + order: 3; +} + +.vjs-playback-rate { + order: 4; +} + +.vjs-share-control { + order: 5; +} + +.vjs-fullscreen-control { + order: 6; +} + +.vjs-playback-rate > .vjs-menu { + width: 50px; +} + +.vjs-control-bar { + display: flex; + flex-direction: row; + scrollbar-width: none; +} + +.vjs-control-bar::-webkit-scrollbar { + display: none; +} + +.video-js .vjs-icon-cog { + font-size: 18px; +} + +.video-js .vjs-control-bar, +.vjs-menu-button-popup .vjs-menu .vjs-menu-content { + background-color: rgba(35, 35, 35, 0.75); +} + +.vjs-menu li.vjs-menu-item:focus, +.vjs-menu li.vjs-menu-item:hover { + background-color: rgba(255, 255, 255, 0.75); + color: rgba(49, 49, 51, 0.75); +} + +.vjs-menu li.vjs-selected, +.vjs-menu li.vjs-selected:focus, +.vjs-menu li.vjs-selected:hover { + background-color: rgba(0, 182, 240, 0.75); +} + +/* Progress Bar */ +.video-js .vjs-slider { + background-color: rgba(15, 15, 15, 0.5); +} + +.video-js .vjs-load-progress, +.video-js .vjs-load-progress div { + background: rgba(87, 87, 88, 1); +} + +.video-js .vjs-slider:hover, +.video-js button:hover { + color: rgba(0, 182, 240, 1); +} + +.video-js .vjs-play-progress { + background-color: rgba(0, 182, 240, 1); +} + +/* Overlay */ +.video-js .vjs-overlay { + background-color: rgba(35, 35, 35, 0.75); + color: rgba(255, 255, 255, 1); +} + +/* ProgressBar marker */ +.vjs-marker { + background-color: rgba(255, 255, 255, 1); + z-index: 0; +} + +/* Big "Play" Button */ +.video-js .vjs-big-play-button { + background-color: rgba(35, 35, 35, 0.5); +} + +.video-js:hover .vjs-big-play-button { + background-color: rgba(35, 35, 35, 0.75); +} + +.video-js .vjs-current-time, +.video-js .vjs-time-divider, +.video-js .vjs-duration { + display: block; +} + +.video-js .vjs-time-divider { + min-width: 0px; + padding-left: 0px; + padding-right: 0px; +} + +.video-js .vjs-poster { + background-size: cover; + object-fit: cover; +} + +.player-dimensions.vjs-fluid { + padding-top: 82vh; +} + +video.video-js { + position: absolute; + height: 100%; +} + +#player-container { + position: relative; + padding-bottom: 82vh; + height: 0; +} + +.video-js.player-style-invidious { + /* This is already the default */ +} + +.video-js.player-style-youtube .vjs-control-bar { + display: flex; + flex-direction: row; +} +.video-js.player-style-youtube .vjs-big-play-button { + /* + Styles copied from video-js.min.css, definition of + .vjs-big-play-centered .vjs-big-play-button + */ + top: 50%; + left: 50%; + margin-top: -0.81666em; + margin-left: -1.5em; +} diff --git a/src/invidious/views/components/player_sources.ecr b/src/invidious/views/components/player_sources.ecr index 0374c983..a99fdbca 100644 --- a/src/invidious/views/components/player_sources.ecr +++ b/src/invidious/views/components/player_sources.ecr @@ -4,6 +4,7 @@ +