Add color scheme for player
This commit is contained in:
parent
272e798f5c
commit
5ddf7889fe
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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" %>
|
||||
<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 %>
|
||||
<source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= quality == fmt["label"].split(" - ")[0] %>">
|
||||
|
||||
<% captions.each do |caption| %>
|
||||
<track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption["name"]["simpleText"] %>"
|
||||
srclang="<%= caption["languageCode"] %>" label="<%= caption["name"]["simpleText"]%> ">
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.2.6/dist/css/ionicons.min.css">
|
||||
|
@ -13,7 +14,6 @@
|
|||
<% else %>
|
||||
<link rel="stylesheet" href="/css/lighttheme.css">
|
||||
<% end %>
|
||||
<%= yield_content "header" %>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
Loading…
Reference in a new issue