tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update video player styling

This commit is contained in:
Preston 2020-08-17 17:55:50 -04:00
parent 46fdacf3a7
commit e2e56d63de
2 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/ft-video-player/ft-video-player.vue
View File

@ -2,7 +2,7 @@
<div class="relative"> <div class="relative">
<video <video
:id="id" :id="id"
class="ftVideoPlayer video-js vjs-default-skin" class="ftVideoPlayer video-js vjs-default-skin dark"
:poster="thumbnail" :poster="thumbnail"
controls controls
preload="auto" preload="auto"

30
src/renderer/videoJS.css
View File

@ -633,9 +633,9 @@ body.vjs-full-window {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 10em; width: 10em;
left: -3em; left: -2em;
height: 0em; height: 0em;
margin-bottom: 1.5em; margin-bottom: 1.4em;
border-top-color: rgba(43, 51, 63, 0.7); border-top-color: rgba(43, 51, 63, 0.7);
} }
@ -643,7 +643,6 @@ body.vjs-full-window {
background-color: #2B333F; background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7); background-color: rgba(43, 51, 63, 0.7);
position: absolute; position: absolute;
width: 100%;
bottom: 1.5em; bottom: 1.5em;
max-height: 15em; max-height: 15em;
} }
@ -1323,10 +1322,6 @@ video::-webkit-media-text-track-display {
left: 0em; left: 0em;
} }
.vjs-playback-rate .vjs-menu .vjs-menu-content {
width: 4em;
}
.vjs-error .vjs-error-display .vjs-modal-dialog-content { .vjs-error .vjs-error-display .vjs-modal-dialog-content {
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
@ -1465,6 +1460,10 @@ video::-webkit-media-text-track-display {
width: 24em; width: 24em;
} }
.vjs-subs-caps-button .vjs-menu {
left: -4em!important;
}
.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
@ -1905,12 +1904,11 @@ video::-webkit-media-text-track-display {
} }
.video-js .vjs-menu-button-popup .vjs-menu { .video-js .vjs-menu-button-popup .vjs-menu {
left: -3em left: -2em
} }
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content { .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
background-color: transparent; background-color: transparent;
width: 5.5em;
left: 1.5em; left: 1.5em;
padding-bottom: .5em; padding-bottom: .5em;
z-index: 1; z-index: 1;
@ -1923,13 +1921,12 @@ video::-webkit-media-text-track-display {
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title { .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
background-color: #151b17; background-color: #151b17;
margin: .3em 0; padding: .6em;
padding: .5em;
border-radius: .3em
} }
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected { .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
background-color: #2483d5 background-color: var(--primary-color);
color: var(--text-with-main-color);
} }
.video-js .vjs-big-play-button { .video-js .vjs-big-play-button {
@ -1942,15 +1939,16 @@ video::-webkit-media-text-track-display {
} }
.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active { .video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
background-color: var(--primary-color) background-color: var(--primary-color);
color: var(--text-with-main-color);
} }
.video-js .vjs-loading-spinner { .video-js .vjs-loading-spinner {
border-color: var(--primary-color) border-color: var(--primary-color);
} }
.video-js .vjs-control-bar2 { .video-js .vjs-control-bar2 {
background-color: #000000 background-color: #000000;
} }
.video-js .vjs-control-bar { .video-js .vjs-control-bar {