Add color scheme for player

This commit is contained in:
Omar Roth 2018-08-03 18:17:19 -05:00
parent 272e798f5c
commit 5ddf7889fe
4 changed files with 56 additions and 15 deletions

View File

@ -1,6 +1,6 @@
a:hover, a:hover,
a:active { a:active {
color: #46aaf6; color: rgb(0, 182, 240);
} }
a { a {
@ -9,7 +9,7 @@ a {
} }
body { body {
background-color: #101010; background-color: #232323;
color: #f0f0f0; color: #f0f0f0;
} }
@ -21,15 +21,14 @@ body {
color: #f0f0f0; color: #f0f0f0;
} }
.pure-form > fieldset > input, .pure-control-group > input { .pure-form > fieldset > input,
color: #101010; .pure-control-group > input,
.pure-form > fieldset > select,
.pure-control-group > select {
color: #232323;
} }
.pure-form > fieldset > select, .pure-control-group > select { .navbar > .searchbar input {
color: #101010;
}
.navbar>.searchbar input {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
} }

View File

@ -133,3 +133,48 @@ div {
transform: rotate(360deg); 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);
}

View File

@ -50,11 +50,8 @@ video, #my_video, .video-js, .vjs-default-skin
<% end %> <% end %>
<% else %> <% else %>
<% fmt_stream.each_with_index do |fmt, i| %> <% fmt_stream.each_with_index do |fmt, i| %>
<% if quality != "hd720" %> <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>">
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>">
<% else %>
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
<% end %>
<% captions.each do |caption| %> <% captions.each do |caption| %>
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption["name"]["simpleText"] %>" <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption["name"]["simpleText"] %>"
srclang="<%= caption["languageCode"] %>" label="<%= caption["name"]["simpleText"]%> "> srclang="<%= caption["languageCode"] %>" label="<%= caption["name"]["simpleText"]%> ">

View File

@ -4,6 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<%= yield_content "header" %>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css"> <link rel="stylesheet" href="https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css">
@ -13,7 +14,6 @@
<% else %> <% else %>
<link rel="stylesheet" href="/css/lighttheme.css"> <link rel="stylesheet" href="/css/lighttheme.css">
<% end %> <% end %>
<%= yield_content "header" %>
</head> </head>
<body> <body>