/*
 # -----------------------------------------------------------------------------
 # ~/assets/theme/j1/modules/videojs/css/theme/uno.css
 # Provides player styles for theme Uno
 # Theme Uno is based on theme fantasy, version 1.0.2
 # See: https://www.mux.com/blog/the-new-video-js-themes
 # -----------------------------------------------------------------------------
 #
 # Product/Info:
 # https://jekyll.one
 #
 # Copyright (C) 2023-2026 Juergen Adams
 #
 # J1 Template is licensed under the MIT License.
 # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
 # -----------------------------------------------------------------------------
*/

/* colors
 ------------------------------------------------------------------------------- */
.vjs-theme-uno {
  --vjs-theme-uno--blue-300:  #64B5F6;
  --vjs-theme-uno--blue-600:  #1E88E5;
  --vjs-theme-uno--blue-800:  #1565C0;
  --vjs-theme-uno--gray-200:  var(--vjs-theme-uno--gray-200);;
  --vjs-theme-uno--gray-900:  #212121;
  --vjs-theme-uno--primary:   #2196f3;
  --vjs-theme-uno--secondary: #fff
}

/* menus
 ------------------------------------------------------------------------------- */
.vjs-menu .vjs-menu-content {
  font-family: "Roboto Slab", Arial, Helvetica, sans-serif;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  bottom: 6em;
}

/* captions|subtitles
 ------------------------------------------------------------------------------- */
.video-js .vjs-text-track-display div {
  font-size: 1.75rem;
}

.video-js .vjs-text-track-display > div > div > div {
  background: transparent !important;
  display: inline-block !important;
	line-height: 33px !important;
	padding: 5px !important;
	text-shadow: 1px 1px 2px #000;
}

/* images
 ------------------------------------------------------------------------------- */
/* jadams, 2024-11-11: ToDo (fix) */
/* workaround, height: make image -1 pixel smaller */     
/* height: calc(100% + 1px); */

 picture > img {
  max-width: 100%;
}

.vjs-poster {
  height: 100%;
}

/* controlbar|controls
 ------------------------------------------------------------------------------- */

/* jadams, 2024-11-15: set control-bar heigth|position */
.vjs-theme-uno .vjs-control-bar {
  height: 55px;
  top: calc(100% - 54px);
  background-color: var(--vjs-theme-uno--gray-900);
  z-index: 100;
}

/* auto HIDE VJS controlbar when video is PAUSED */
.vjs-has-started.vjs-user-inactive.vjs-paused .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}


/* manage time (display) divider, remaining-time */
.vjs-theme-uno .vjs-time-divider,
.vjs-theme-uno .vjs-remaining-time { 
  display: none !important;
}

/* required for the mini-play-button in player controlbar */
.vjs-icon-play:before {
  content: "\f101";
}

/* large play button placed over the video window */
.vjs-theme-uno .vjs-big-play-button {
  top: 25%;
  left: 35%;
  width: 240px;
  height: 240px;
  font-size: 0px;
  z-index: 1;
  background: url(/assets/theme/j1/modules/videojs/assets/icons/big-play-button.svg) no-repeat;
}

.vjs-theme-uno .vjs-big-play-button:hover {
  top: 25%;
  left: 35%;
  width: 240px;
  height: 240px;
  font-size: 0px;
  z-index: 1;
  background: url(/assets/theme/j1/modules/videojs/assets/icons/big-play-button-hover.svg) no-repeat;
}

.vjs-theme-uno.vjs-big-play-button:focus,
.vjs-theme-uno:hover .vjs-big-play-button {
  background-color: transparent;
}

.vjs-theme-uno .vjs-button > .vjs-icon-placeholder:before,
.vjs-theme-uno .vjs-time-control {
  line-height: 54px;
}

.video-js .vjs-time-control {
  /* font-size: 1.6em; */
  font-size: 1.5em;
  padding-bottom: 54px !important;
}

.vjs-theme-uno .vjs-play-control {
  position: relative;
  margin-top: 3px;
  width: 48px;
  font-size: 1.4em;
}


/* custom controlbar|control elements
 --------------------------------------------------- */

 /* set (hard) position manually */
.vjs-theme-uno .vjs-volume-panel {
  order: 4;
}

.vjs-theme-uno .vjs-volume-bar {
  margin-top: 2.5em;
}

.vjs-volume-bar.vjs-slider-vertical {
    width: 0.3em;
    height: 5em !important;
    margin: 1.35em auto;
}

.vjs-theme-uno .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
  height: 100%;
}

/* adjust control position for playback rate (centered) */
.vjs-playback-rate {
  margin-top: 12px !important;
}

/* move up the playback-rate menu */
.vjs-playback-rate .vjs-menu {
  top: 28px;
}

/* move tbe volume slider up: +2em */
.video-js .vjs-volume-vertical {
    bottom: 10em;
    background-color: rgba(43, 51, 63, 0.7);
}


/* custom progressBar
 --------------------------------------------------- */

/* styles|positioning for the (custom) progressBar container */
.video-js .custom-progressbar-container {
    position: absolute;
    align-items: center;
    top: -26px;
    bottom: 100%;                       /* place the container ABOVE the controlbar */
    left: 0;
    right: 0;
    width: 100%;
    height: 30px;                       /* set heigth of the progressbar container */
    display: flex;
    background-color: transparent;
    box-sizing: border-box;
}

/* styles for the progressControlSlider */
.video-js .custom-progressbar-container .vjs-progress-control {
    flex-grow: 1;                       /* Lässt den Slider den verfügbaren Platz einnehmen */
    position: static;                   /* Setzt die Position zurück, da der Parent schon Position hat */
    height: 100%;                       /* Slider füllt die Höhe des Containers aus */
    display: flex;                      /* Muss auch Flexbox sein, um die internen Elemente zu layouten */
    align-items: center;
}

.vjs-theme-uno .video-js .vjs-progress-control .vjs-progress-holder {
  font-size: 1em;
}

.vjs-theme-uno .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.5em;
}

.vjs-theme-uno .vjs-time-control, .video-js .vjs-current-time, .video-js .vjs-duration {
  display: block;
  /* top: -12px; */
  top: 0px;
}

.vjs-theme-uno .vjs-current-time .vjs-duration {
  display: block;
  line-height: 3em !important;
}

/* styles for the seekBar */
.video-js .custom-progressbar-container .vjs-progress-control .vjs-play-progress,
.video-js .custom-progressbar-container .vjs-progress-control .vjs-load-progress,
.video-js .custom-progressbar-container .vjs-progress-control .vjs-mouse-display {
  height: 100%;
  border-radius: 0;
}

/* loadBar settings */
.video-js .vjs-load-progress {
  background-color: rgba(255, 255, 255, 0.3); 
}
/* styles for custom timeDisplay */
.video-js .custom-time-display {
    color: #fff;
    /* font-size: 0.9em; */
    min-width: 50px;
    text-align: center;
}

/* placenment for the time displays within the custom progressBar container */
.video-js .custom-progressbar-container .vjs-current-time-display {
    order: -1;
    /* font-size: 1.6em; */
}

/* Adjust the sizes for time-display elements */
.video-js .vjs-remaining-time-display,
.video-js .vjs-duration-display {
    color: #fff;
    /* font-size: 0.9em; */
    padding: 0 5px;
    white-space: nowrap;
}

/* Adjusting the height and position UPWARDS for the custom progressBar container  */
.video-js .vjs-progress-control {
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  width: 100%;
  height: 1em;
  margin-top: 0;
  background-color: transparent;
}

/* height of the vjsSliderProgess itself */
.video-js .vjs-slider {
  height: 1em;   
  margin-top: 0;
}

/* remove the thumbElement (vjsSliderProgess|Handle) */
.video-js .vjs-progress-control .vjs-play-progress:before {
  appearance: none;
  visibility: hidden;
}

/* adjust time-tooltip sizes (vjsSliderProgess) */
.video-js .vjs-progress-control:hover
.vjs-play-progress .vjs-time-tooltip {
  /* display: none !important; */
  font-size: .9em;
  padding: 0.35em 0.35em;
  border-radius: 3px;
}

/* adjust time-tooltip size (vjsSliderProgess|Handle) */
.video-js .vjs-mouse-display {
  font-size: 1.5em;
  padding: 0.25em 0.25em;
  border-radius: 3px;
  transform: translateX(-50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.vjs-theme-uno .vjs-play-control .vjs-icon-placeholder:before {
  height: 1.3em;
  width: 1.3em;
  margin-top: .2em;
  border-radius: 1em;
  border: 3px solid var(--vjs-theme-uno--secondary);
  top: 2px;
  left: 9px;
  line-height: 1.1;
}

.vjs-theme-uno .vjs-play-control:hover .vjs-icon-placeholder:before {
  border: 3px solid var(--vjs-theme-uno--secondary);
}

.vjs-theme-uno .vjs-play-progress,
.vjs-theme-uno .vjs-play-progress:before {
  background-color: var(--vjs-theme-uno--primary);
}

.vjs-theme-uno .vjs-play-progress:before {
  height: .8em;
  width: .8em;
  content: "";
  border: 4px solid var(--vjs-theme-uno--secondary);
  border-radius: .8em;
  top: -0.25em;
}

.vjs-theme-uno .vjs-progress-control {
  font-size: 14px;
}

.vjs-theme-uno .vjs-fullscreen-control {
  order: 6;
}

.vjs-theme-uno.nyan .vjs-play-progress {
  background: linear-gradient(180deg, #fe0000 0, #fe9a01 16.666666667%, #fe9a01 0, #ff0 33.332666667%, #ff0 0, #32ff00 49.999326667%, #32ff00 0, #0099fe 66.6659926%, #0099fe 0, #63f 83.33266%, #63f 0);
}

.vjs-theme-uno.nyan .vjs-play-progress:before {
  height: 1.3em;
  width: 1.3em;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' fill='%23fff'%3E%3Cpath d='M62.153 37.323h2.813v3.246h-2.813zM64.858 40.569h2.813v3.246h-2.813zM67.672 43.814h11.9v3.246h-11.9zM79.572 24.449h2.813v19.365h-2.813zM82.386 37.323h3.244v3.246h-3.244zM85.63 34.132h5.627v3.246H85.63zM91.257 37.323h2.92v12.95h-2.92zM94.177 50.274h2.922V66.21h-2.922zM91.29 66.372h2.887v3.245H91.29zM88.401 69.617h2.889v3.246h-2.889zM27.312 72.863h61.003v3.245H27.312zM73.622 76.108h2.889v3.246h-2.889zM82.563 76.108h2.888v3.246h-2.888zM76.511 79.354h6.053v3.245h-6.053zM61.941 79.354h8.895v3.245h-8.895zM67.947 76.108h2.889v3.246h-2.889zM59.321 76.108h2.888v3.246h-2.888zM27.312 17.917h49.387v3.246H27.312zM76.699 21.162h2.873v3.287h-2.873zM56.372 34.132h5.781v3.191h-5.781zM53.448 37.323h2.924v12.951h-2.924zM50.488 50.274h2.96v16.049h-2.96zM53.448 66.323h2.924v3.257h-2.924zM56.372 69.58h2.949v3.283h-2.949zM65.069 63.213h2.878v6.367h-2.878zM67.947 66.397h17.504v3.22H67.947z'/%3E%3Cpath d='M82.563 63.213h2.888v3.185h-2.888zM73.801 63.213h2.898v3.185h-2.898zM76.699 56.774h2.873v3.145h-2.873zM82.563 56.774h2.888v3.145h-2.888zM85.451 53.444h2.864v3.33h-2.864z'/%3E%3Cpath d='M85.451 56.774h2.864v3.145h-2.864zM65.069 53.444h2.878v3.33h-2.878zM65.069 56.774h2.878v3.145h-2.878zM62.209 56.774h2.86v3.145h-2.86zM21.509 24.327h2.813v45.169h-2.813zM24.323 21.162h2.99v3.165h-2.99zM18.562 69.496h8.75v3.367h-8.75zM15.656 72.863h2.906v9.591h-2.906zM18.562 79.301h8.75v3.153h-8.75zM24.323 76.108h5.743V79.3h-5.743zM33.136 76.108h2.824v6.346h-2.824zM35.96 79.281h5.813v3.173H35.96zM41.774 76.108h2.864v3.173h-2.864zM3.948 40.569h11.708v3.229H3.948zM3.948 43.814h2.921v6.459H3.948zM6.869 47.06h2.934v6.384H6.869zM9.803 50.274h2.909v6.5H9.803z'/%3E%3Cpath d='M12.711 53.444h2.945v6.475h-2.945zM15.656 56.774h5.853v3.145h-5.853z'/%3E%3Cpath d='M18.583 59.919h2.926v3.294h-2.926zM18.583 47.044h2.926v6.4h-2.926zM12.711 43.814h5.872v3.229h-5.872zM15.647 47.044h2.936v3.2h-2.936z'/%3E%3Cpath fill='none' d='M47.439 50.274h3.049v3.17h-3.049z'/%3E%3Cpath d='M73.801 30.94v-3.138h-2.965v-3.354l-37.7-.122v3.151h-3.07v3.462l-2.753-.108-.118 32.381h2.871v3.185h3.07v-3.185h2.824v3.185h-2.824v3.099l20.312.084v-3.257h-2.96V50.274h2.96V37.323h2.924v-3.191h5.781v3.191h2.813l-.108 3.246h2.813v3.246h9.027V30.94h-2.897zM33.136 56.682h-3.07v-3.158h3.07v3.158zm2.824-22.55h-2.824v-3.084h2.824v3.084zm2.907 12.928h2.907v3.184h-2.907V47.06zm5.771 16.153h-2.864v-3.294h2.864v3.294zm2.801-19.399h-2.801v-3.246h2.801v3.246zm6.009-12.766h-2.96v-3.354h2.96v3.354zm8.705 0h-2.832v-3.354h2.832v3.354zm8.683 6.275h-2.889v-3.191h2.889v3.191z'/%3E%3C/svg%3E") no-repeat;
  border: none;
  top: -0.35em;
}


/* 3. Layout
# --------------------------------------------------------- */

/* Small only
# --------------------------------------------------------- */
@media screen and (max-width: 39.9375em) {
  .vjs-theme-uno .vjs-big-play-button {
    top: 35%;
    left: 45%;
    width: 120px;
    height: 120px;
    /* font-size: 0px; */
    z-index: 1;
    background: url(/assets/theme/j1/modules/videojs/assets/icons/small/big-play-button.svg) no-repeat;
  }

  .vjs-theme-uno .vjs-big-play-button:hover {
    top: 35%;
    left: 45%;
    width: 120px;
    height: 120px;
    /* font-size: 0px; */
    z-index: 1;
    background: url(/assets/theme/j1/modules/videojs/assets/icons/small/big-play-button-hover.svg) no-repeat;
  }
}