From 5ddf7889fed309eae0fc0329cbca0d7233799c91 Mon Sep 17 00:00:00 2001 From: Omar Roth Date: Fri, 3 Aug 2018 18:17:19 -0500 Subject: [PATCH] Add color scheme for player --- assets/css/darktheme.css | 17 ++++++------- assets/css/default.css | 45 ++++++++++++++++++++++++++++++++++ src/invidious/views/embed.ecr | 7 ++---- src/invidious/views/layout.ecr | 2 +- 4 files changed, 56 insertions(+), 15 deletions(-) diff --git a/assets/css/darktheme.css b/assets/css/darktheme.css index 1af246df..ebd2b8b8 100644 --- a/assets/css/darktheme.css +++ b/assets/css/darktheme.css @@ -1,6 +1,6 @@ a:hover, a:active { - color: #46aaf6; + color: rgb(0, 182, 240); } a { @@ -9,7 +9,7 @@ a { } body { - background-color: #101010; + background-color: #232323; color: #f0f0f0; } @@ -21,15 +21,14 @@ body { color: #f0f0f0; } -.pure-form > fieldset > input, .pure-control-group > input { - color: #101010; +.pure-form > fieldset > input, +.pure-control-group > input, +.pure-form > fieldset > select, +.pure-control-group > select { + color: #232323; } -.pure-form > fieldset > select, .pure-control-group > select { - color: #101010; -} - -.navbar>.searchbar input { +.navbar > .searchbar input { background-color: inherit; color: inherit; } diff --git a/assets/css/default.css b/assets/css/default.css index 1be1e73b..aec26abe 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -133,3 +133,48 @@ div { transform: rotate(360deg); } } +/* Control Bar */ +.video-js .vjs-control-bar, +.vjs-menu-button-popup .vjs-menu .vjs-menu-content { + background-color: rgba(33, 33, 33, 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-slider:hover, +.video-js button:hover { + color: rgba(0, 182, 240, 1); +} + +.video-js .vjs-load-progress, +.video-js .vjs-load-progress div { + background: rgba(87, 87, 88, 0.5); +} + +.video-js .vjs-play-progress { + background-color: rgba(0, 182, 240, 0.5); +} + +/* Big "Play" Button */ +.video-js .vjs-big-play-button { + background-color: rgba(33, 33, 33, 0.5); +} + +.video-js:hover .vjs-big-play-button { + background-color: rgba(33, 33, 33, 0.75); +} diff --git a/src/invidious/views/embed.ecr b/src/invidious/views/embed.ecr index d3c9719b..367e03b2 100644 --- a/src/invidious/views/embed.ecr +++ b/src/invidious/views/embed.ecr @@ -50,11 +50,8 @@ video, #my_video, .video-js, .vjs-default-skin <% end %> <% else %> <% fmt_stream.each_with_index do |fmt, i| %> - <% if quality != "hd720" %> - " type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>"> - <% else %> - " type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>"> - <% end %> + " type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>"> + <% captions.each do |caption| %> " srclang="<%= caption["languageCode"] %>" label="<%= caption["name"]["simpleText"]%> "> diff --git a/src/invidious/views/layout.ecr b/src/invidious/views/layout.ecr index bc5d1c78..e436419d 100644 --- a/src/invidious/views/layout.ecr +++ b/src/invidious/views/layout.ecr @@ -4,6 +4,7 @@ + <%= yield_content "header" %> @@ -13,7 +14,6 @@ <% else %> <% end %> - <%= yield_content "header" %>