mirror of
https://gitea.invidious.io/iv-org/invidious.git
synced 2024-08-15 00:53:41 +00:00
Add color scheme for player
This commit is contained in:
parent
272e798f5c
commit
5ddf7889fe
4 changed files with 56 additions and 15 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
|
@ -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"]%> ">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue