lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Overhaul Invidious's "Youtube" player style

Browse Source
This commit is contained in:
syeopite 2021-05-03 02:25:32 -07:00
parent 1924d75c2b
commit d6585d7583
No known key found for this signature in database
GPG Key ID: 6FA616E5A5294A82
2 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
assets/css/player.css
View File

@ -1,3 +1,75 @@
/* Youtube player style */
.video-js.player-style-youtube .vjs-progress-control {
height: 0;
}
.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {
position: absolute;
right: 0;
left: 0;
width: 100%;
margin: 0;
}
.video-js.player-style-youtube .vjs-control-bar {
background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0,0.5));
}
.video-js.player-style-youtube .vjs-slider {
background-color: rgba(255,255,255,0.2);
}
.video-js.player-style-youtube .vjs-load-progress > div {
background-color: rgba(255,255,255,0.5);
}
.video-js.player-style-youtube .vjs-play-progress {
background-color: red;
}
.video-js.player-style-youtube .vjs-progress-control:hover .vjs-progress-holder {
font-size: 15px;
}
.video-js.player-style-youtube .vjs-control-bar > .vjs-spacer {
flex: 1;
order: 2;
}
.video-js.player-style-youtube .vjs-play-progress .vjs-time-tooltip {
display: none;
}
.video-js.player-style-youtube .vjs-play-progress::before {
color: red;
font-size: 0.85em;
display: none;
}
.video-js.player-style-youtube .vjs-progress-holder:hover .vjs-play-progress::before {
display: unset;
}
.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;
}
.video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu {
margin-bottom: 2em;
}
ul.vjs-menu-content::-webkit-scrollbar { ul.vjs-menu-content::-webkit-scrollbar {
display: none; display: none;
} }
@ -93,7 +165,7 @@ ul.vjs-menu-content::-webkit-scrollbar {
color: rgba(0, 182, 240, 1); color: rgba(0, 182, 240, 1);
} }
.video-js .vjs-play-progress { .video-js.player-style-invidious .vjs-play-progress {
background-color: rgba(0, 182, 240, 1); background-color: rgba(0, 182, 240, 1);
} }
vjs-menu-content vjs-menu-content
@ -150,25 +222,6 @@ video.video-js {
height: 0; 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;
}
.mobile-operations-bar { .mobile-operations-bar {
display: flex; display: flex;
position: absolute; position: absolute;

1
assets/js/player.js
View File

@ -14,6 +14,7 @@ var options = {
'durationDisplay', 'durationDisplay',
'progressControl', 'progressControl',
'remainingTimeDisplay', 'remainingTimeDisplay',
'Spacer',
'captionsButton', 'captionsButton',
'qualitySelector', 'qualitySelector',
'playbackRateMenuButton', 'playbackRateMenuButton',