invidious/assets/css/player.css

.video-js {
  font-family: inherit;
  font-size: inherit;
}

/* 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(rgb(0 0 0 / 10%), rgba(0 0 0 / 50%)); */
/* } */
/**/
/* .video-js.player-style-youtube .vjs-slider { */
/*   background-color: rgb(255 255 255 / 20%); */
/* } */
/**/
/* .video-js.player-style-youtube .vjs-load-progress > div { */
/*   background-color: rgb(255 255 255 / 20%); */
/* } */
/**/
/* .video-js.player-style-youtube .vjs-play-progress { */
/*   background-color: var(--accent-bg-color); */
/* } */
/**/
/* .video-js.player-style-youtube */
/*   .vjs-progress-control:hover */
/*   .vjs-progress-holder { */
/*   font-size: 1em; */
/* } */
/**/
/* .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: var(--accent-bg-color); */
/*   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.8167em; */
/*   margin-left: -1.5em; */
/* } */

/* .video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu { */
/*   margin-bottom: 2em; */
/*   padding-top: 2em; */
/* } */
/**/
/* .video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, */
/* .video-js.player-style-youtube .vjs-progress-control { */
/*   height: 0.3em; */
/*   margin-bottom: 0.6em; */
/* } */
/**/
/* ul.vjs-menu-content::-webkit-scrollbar { */
/*   display: none; */
/* } */
/**/
/* .vjs-user-inactive { */
/*   cursor: none; */
/* } */

/* .video-js .vjs-text-track-display > div > div > div { */
/*   background-color: rgb(0 0 0 / 75%); */
/*   border-radius: 0.5em; */
/*   padding: 0.3em; */
/* } */

.vjs-play-control,
.vjs-volume-panel,
.vjs-current-time,
.vjs-time-control,
.vjs-duration,
.vjs-progress-control,
.vjs-remaining-time {
  order: 1;
}

.vjs-captions-button {
  order: 2;
}

.vjs-audio-button {
  order: 3;
}

.vjs-quality-selector,
.video-js .vjs-http-source-selector {
  order: 4;
}

.vjs-playback-rate {
  order: 5;
}

.vjs-share-control {
  order: 6;
}

.vjs-fullscreen-control {
  order: 7;
}

/* .vjs-playback-rate > .vjs-menu { */
/*   width: 3.2em; */
/* } */
/**/

/* Make the video relative, instead of absolute, so that
   the parent container will size based on the video. Also,
   note the max-height rule. Note the line-height 0 is to prevent
   a small artifact on the bottom of the video.
	 https://stackoverflow.com/questions/46747320/limit-the-height-in-videojs-in-fluid-mode/47039499#47039499
 */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
video.video-js,
video.vjs-tech {
  max-height: 85vh;
  position: relative !important;
  width: 100%;
  height: auto;
  max-width: 100% !important;
  padding-top: 0 !important;
  line-height: 0;
}

.video-js.vjs-16-9 {
  /* Keep the video spaced to fit */
  aspect-ratio: 16 / 9;
}

.video-js.vjs-4-3 {
  /* Keep the video spaced to fit */
  aspect-ratio: 4 / 3;
}

#player {
  /* Default to 16/9 video spacing */
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

.vjs-error .vjs-error-display:before,
.video-js .vjs-volume-tooltip,
.video-js .vjs-time-tooltip,
.vjs-menu .vjs-menu-content {
  font-family: inherit;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: var(--secondary-bg-color-dark);
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover,
.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
  background-color: var(--accent-bg-color-dark);
}

.video-js .vjs-slider {
  background-color: rgb(166 166 166 / 50%);
}

.video-js .vjs-load-progress {
  background-color: rgb(227 227 227 / 75%);
}

@media (max-width: 480px) {
  #player {
    /* Default to 16/9 video spacing */
    aspect-ratio: unset;
  }
}

.vjs-fullscreen video {
  max-height: 100vh !important;
}

.video-js .vjs-control-bar {
  display: flex;
  flex-direction: row;
  scrollbar-width: none;
  /* Fix the control bar due to us resetting the line-height on the video-js */
  line-height: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--secondary-bg-color-dark) 50%
  );
}

.vjs-control-bar button:hover,
.vjs-control-bar button:focus {
  outline-width: 0;
}

.vjs-control-bar::-webkit-scrollbar {
  display: none;
}

.vjs-playback-rate .vjs-playback-rate-value {
  font-size: 1em;
  line-height: 3rem;
}

.vjs-button > .vjs-icon-placeholder::before {
  font-size: 1.25em;
  line-height: 3rem;
}

.vjs-menu li {
  font-size: 1em;
}

.video-js .vjs-control {
  width: 3em;
}

.video-js .vjs-time-control {
  width: auto;
}

.vjs-poster {
  background-size: cover;
}

.video-js .vjs-share__short-link-wrapper {
  color: var(--fg-color-dark);
  background-color: var(--secondary-bg-color-dark);
  height: 2em;
  margin: 0 auto;
  margin-bottom: var(--secondary-gap);
  border-radius: var(--radius);
}

.video-js .vjs-share__short-link {
  padding: var(--secondary-gap);
  background-color: var(--secondary-bg-color-dark);
  color: var(--fg-color-dark);
  font-family: var(--monospace);
  min-width: 15em;
}

.video-js .vjs-share__btn {
  background-color: var(--secondary-bg-color-dark);
  color: var(--fg-color-dark);
  height: 2em;
  width: 2.25em;
  padding: var(--secondary-gap);
}

.video-js .vjs-share__title {
  font-size: 1.25em;
  color: var(--fg-color-dark);
}

.video-js .vjs-share__subtitle {
  font-size: 1em;
  color: var(--fg-color-dark);
  margin: 0 auto var(--secondary-gap);
}

.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button {
  height: var(--gap);
}

.video-js.vjs-videojs-share_open .vjs-modal-dialog .vjs-close-button::before {
  content: "";
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder::before {
  line-height: 1.67;
}

.video-js .vjs-share__middle {
  padding: 0 var(--secondary-gap);
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  font-size: 1em;
  line-height: 1.1;
}

/**/
/* .video-js .vjs-icon-cog { */
/*   font-size: 1em; */
/* } */
/**/

/* .video-js .vjs-control-bar, */
/* .vjs-menu-button-popup .vjs-menu .vjs-menu-content { */
/*   background-color: rgb(35 35 35 / 75%); */
/* } */
/**/
/* .vjs-menu li.vjs-menu-item:focus, */
/* .vjs-menu li.vjs-menu-item:hover { */
/*   background-color: rgb(255 255 255 / 75%); */
/*   color: rgb(49 49 51 / 75%); */
/* } */
/**/
/* .vjs-menu li.vjs-selected, */
/* .vjs-menu li.vjs-selected:focus, */
/* .vjs-menu li.vjs-selected:hover { */
/*   background-color: rgb(0 182 240 / 75%); */
/* } */
/**/
/* /* Progress Bar */
*/
/* .video-js .vjs-slider { */
/*   background-color: rgb(15 15 15 / 50%); */
/* } */
/**/
/* .video-js .vjs-load-progress, */
/* .video-js .vjs-load-progress div { */
/*   background: rgb(87 87 88); */
/* } */
/**/
.video-js .vjs-slider:hover,
.video-js button:hover {
  background-color: var(--accent-bg-color);
}

.video-js.player-style-invidious .vjs-play-progress {
  background-color: var(--accent-bg-color);
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  padding: var(--gap);
}

.video-js .vjs-big-play-button {
  font-size: var(--gap);
  line-height: var(--gap);
  height: var(--gap);
  width: calc(var(--gap) * 2);
  top: var(--secondary-gap);
  left: var(--secondary-gap);
  background-color: var(--secondary-bg-color);
  border: none;
  opacity: 0.7;
  transition: opacity 240ms;
}

.video-js .vjs-big-play-button:hover {
  opacity: 0.9;
}

.vjs-control-bar {
  background-color: var(--secondary-bg-color-dark);
}