stash/ui/v2.5/src/components/ScenePlayer/styles.scss

@import "video.js/dist/video-js.css";
@import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
@import "videojs-seek-buttons/dist/videojs-seek-buttons.css";
@import "@silvermine/videojs-chromecast/dist/silvermine-videojs-chromecast.css";
@import "@silvermine/videojs-airplay/dist/silvermine-videojs-airplay.css";

$scrubberHeight: 120px;
$menuHeight: 4rem;
$sceneTabWidth: 450px;

.VideoPlayer {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - #{$menuHeight});
  padding-bottom: 0.25rem;

  @media (min-width: 1200px) {
    height: 100vh;
  }

  &.portrait .video-wrapper {
    height: 177.78vw;
  }
}

.video-wrapper {
  height: 56.25vw;
  overflow: hidden;
  position: relative;
  width: 100%;

  @media (min-width: 1200px) {
    height: 100%;
  }
}

.VideoPlayer.no-file .video-js {
  .vjs-big-play-button,
  .vjs-control-bar {
    display: none;
  }
}

.video-js {
  height: 100%;
  position: absolute;
  width: 100%;

  &:not(.vjs-has-started) .vjs-control-bar {
    display: flex;
  }

  // show controls even when an error is displayed
  /* stylelint-disable declaration-no-important */
  &.vjs-error .vjs-control-bar {
    display: flex !important;
  }
  /* stylelint-enable declaration-no-important */

  // allow interaction with the controls when error is displayed
  .vjs-error-display,
  .vjs-error-display .vjs-modal-dialog-content {
    position: static;
  }

  // hide spinner when error is displayed
  &.vjs-error .vjs-loading-spinner {
    display: none;
  }

  .vjs-button {
    outline: none;
  }

  .vjs-big-button-group {
    display: none;
    height: 80px;
    justify-content: space-around;
    opacity: 0;
    position: absolute;
    top: calc(50% - 40px);
    width: 100%;
    z-index: 1;

    .vjs-button {
      font-size: 4em;
      height: 100%;
      width: 80px;

      .vjs-icon-placeholder::before {
        height: 100%;
        line-height: 80px;
      }
    }
  }

  .vjs-airplay-button .vjs-icon-placeholder,
  .vjs-chromecast-button .vjs-icon-placeholder {
    height: 1.6em;
    width: 1.6em;
  }

  .vjs-autostart-button {
    cursor: pointer;

    &.vjs-icon-play-circle::before {
      align-items: center;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      color: rgba(80, 80, 80, 0.9);
      content: "\f101";
      font-size: 1em;
      line-height: 1;
      margin-left: 1rem;
      padding: 0.3em;
      position: relative;
      z-index: 2;
    }

    &.vjs-icon-cancel::before {
      align-items: center;
      background-color: rgba(80, 80, 80, 0.9);
      border-radius: 50%;
      color: #fff;
      content: "\f103";
      font-size: 1em;
      line-height: 1;
      margin-right: 1rem;
      padding: 0.3em;
      position: relative;
      z-index: 2;
    }

    &.vjs-icon-play-circle::after,
    &.vjs-icon-cancel::after {
      background-color: rgba(80, 80, 80, 0.9);
      border-radius: 8px;
      content: "";
      height: 2.5rem;
      left: 50%;
      opacity: 0.7;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      width: 1rem;
      z-index: 1;
    }

    &:hover {
      text-shadow: 0 0 1em rgba(255, 255, 255, 0.75);
    }
  }

  .vjs-touch-overlay .vjs-play-control {
    z-index: 1;
  }

  .vjs-control-bar {
    background: none;

    /* Scales control size */
    font-size: 15px;

    &::before {
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0) 100%
      );
      bottom: 0;
      content: "";
      height: 10rem;
      pointer-events: none;
      position: absolute;
      width: 100%;
    }
  }

  .vjs-time-control {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 0 4px;
    pointer-events: none;

    .vjs-control-text {
      display: none;
    }
  }

  .vjs-duration {
    margin-right: auto;
  }

  .vjs-remaining-time {
    display: none;
  }

  .vjs-progress-control {
    bottom: 2.5em;
    height: 3em;
    position: absolute;
    width: 100%;

    .vjs-progress-holder {
      margin: 0 15px;
    }
  }

  /* stylelint-disable declaration-no-important */
  .vjs-play-progress .vjs-time-tooltip {
    display: none !important;
  }
  /* stylelint-enable declaration-no-important */

  .vjs-volume-control {
    z-index: 1;
  }

  /* stylelint-disable declaration-no-important */
  .vjs-slider {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* stylelint-enable declaration-no-important */

  .vjs-vtt-thumbnail-display {
    border: 2px solid white;
    border-radius: 2px;
    bottom: 6em;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.2s;
    z-index: 100;
  }

  .vjs-big-play-button,
  .vjs-big-play-button:hover,
  .vjs-big-play-button:focus,
  &:hover .vjs-big-play-button {
    background: none;
    border: none;
    font-size: 10em;
  }

  .vjs-skip-button {
    &::before {
      font-size: 1.8em;
      line-height: 1.67;
    }
  }

  &.vjs-skip-buttons {
    .vjs-icon-next-item,
    .vjs-icon-previous-item {
      display: none;
    }

    &-prev .vjs-icon-previous-item,
    &-next .vjs-icon-next-item {
      display: inline-block;
    }
  }

  .vjs-source-selector {
    &.vjs-hover .vjs-menu {
      display: none;
    }

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

    .vjs-button > .vjs-icon-placeholder::before {
      content: "\f110";
      font-family: VideoJS;
    }

    .vjs-menu-item.vjs-source-menu-item-error:not(.vjs-selected) {
      color: $text-muted;
    }

    .vjs-menu-item.vjs-source-menu-item-error {
      font-style: italic;
    }
  }

  .vjs-vr-selector {
    .vjs-menu li {
      font-size: 0.8em;
    }

    .vjs-button {
      background: url("/vr.svg") center center no-repeat;
      width: 50%;
    }
  }

  .vjs-marker {
    background-color: rgba(33, 33, 33, 0.8);
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    transition: opacity 0.2s ease;
    visibility: hidden;
    width: 6px;
    z-index: 100;

    &:hover {
      cursor: pointer;
      transform: scale(1.3, 1.3);
    }
  }

  .vjs-marker-range {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 8px;
    min-width: 8px;
    position: absolute;
    transform: translateY(-28px);
    transition: none;
  }

  .vjs-marker-tooltip {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.3em;
    color: #000;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.6em;
    padding: 6px 8px 8px 8px;
    pointer-events: none;
    position: absolute;
    top: -3.4em;
    visibility: hidden;
    white-space: nowrap;
    z-index: 1;
  }

  .vjs-text-track-settings select {
    background: #fff;
  }

  .vjs-seek-button.skip-back span.vjs-icon-placeholder::before {
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
  }

  .vjs-seek-button.skip-forward span.vjs-icon-placeholder::before {
    -ms-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }

  @media (pointer: coarse) {
    &.vjs-touch-enabled {
      &.vjs-has-started .vjs-big-button-group {
        display: flex;
        opacity: 1;
        visibility: visible;
      }

      &.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-big-button-group {
        opacity: 0;
        pointer-events: none;
        transition: visibility 1s, opacity 1s;
        visibility: visible;
      }

      .vjs-big-play-pause-button .vjs-icon-placeholder::before {
        content: "\f101";
        font-family: VideoJS;
      }

      &.vjs-playing .vjs-big-play-pause-button .vjs-icon-placeholder::before {
        content: "\f103";
      }

      .vjs-vtt-thumbnail-display {
        bottom: 2.8em;
      }

      // hide the regular seek buttons on touch screens
      .vjs-control-bar .vjs-seek-button {
        display: none;
      }
    }
  }

  // make controls a little more compact on smaller screens
  @media (max-width: 576px) {
    .vjs-control-bar {
      .vjs-control {
        width: 2.5em;
      }

      .vjs-progress-control {
        height: 2em;
        width: 100%;
      }

      .vjs-playback-rate {
        width: 3em;
      }

      .vjs-button > .vjs-icon-placeholder::before,
      .vjs-skip-button::before {
        font-size: 1.5em;
        line-height: 2;
      }

      .vjs-airplay-button .vjs-icon-placeholder,
      .vjs-chromecast-button .vjs-icon-placeholder {
        height: 1.4em;
        width: 1.4em;
      }

      .vjs-source-selector .vjs-menu {
        z-index: 9999;
      }
    }

    .vjs-menu-button-popup .vjs-menu {
      width: 8em;

      .vjs-menu-content {
        max-height: 10em;
      }
    }

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

    .vjs-source-selector {
      .vjs-menu li {
        font-size: 10px;
      }
    }

    .vjs-time-control {
      font-size: 12px;
    }

    .vjs-big-button-group .vjs-button {
      font-size: 2em;
      width: 50px;
    }

    .vjs-current-time {
      margin-left: 1em;
    }
  }
}

.scene-tabs,
.scene-player-container {
  padding-left: 15px;
  position: relative;
  width: 100%;
}

.scene-player-container {
  padding-right: 15px;
}

.scrubber-wrapper {
  display: flex;
  flex-shrink: 0;
  margin: 5px 0;
  overflow: hidden;
  position: relative;
}

#scrubber-back {
  float: left;
}

#scrubber-forward {
  float: right;
}

.scrubber-button {
  background-color: transparent;
  border: 1px solid #555;
  color: $link-color;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 800;
  height: 100%;
  line-height: $scrubberHeight;
  padding: 0;
  text-align: center;
  width: 1.8rem;
}

.scrubber-content {
  cursor: pointer;
  display: inline-block;
  flex-grow: 1;
  height: $scrubberHeight;
  margin: 0 7px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  -webkit-user-select: none;
  user-select: none;

  &.dragging {
    cursor: grabbing;
  }
}

#scrubber-position-indicator {
  background-color: rgba(255, 255, 255, 0.7);
  height: 20px;
  left: -100%;
  position: absolute;
  width: 100%;
  z-index: 0;
}

#scrubber-current-position {
  background-color: #fff;
  height: 30px;
  left: 50%;
  position: absolute;
  width: 2px;
  z-index: 1;
}

.scrubber-viewport {
  height: 100%;
  overflow: hidden;
  position: static;
}

.scrubber-slider {
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}

.scrubber-tags {
  height: 20px;
  margin-bottom: 10px;
  position: relative;

  &-background {
    background-color: #555;
    height: 20px;
    left: 0;
    position: absolute;
    right: 0;
  }
}

.scrubber-heatmap {
  background-size: 100% 100%;
  height: 20px;
  left: 0;
  position: absolute;
  right: 0;
}

.scrubber-tag {
  background-color: #000;
  cursor: pointer;
  font-size: 10px;
  height: 20px;
  padding: 0 10px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;

  &:hover {
    background-color: #444;
    z-index: 1;
  }

  &:hover::after {
    border-top: solid 5px #444;
    z-index: 1;
  }

  &::after {
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-top: solid 5px #000;
    bottom: -5px;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
  }
}

.scrubber-item {
  color: white;
  display: flex;
  font-size: 10px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  text-shadow: 1px 1px black;

  &-time {
    align-self: flex-end;
    display: inline-block;
    width: 100%;
  }
}

@media (max-width: 1199px) {
  .scene-tabs {
    padding-right: 15px;
  }

  .scene-player-container {
    padding-left: 0;
    padding-right: 0;
  }

  .scrubber-wrapper {
    margin-left: 5px;
    margin-right: 5px;
  }
}
@media (min-width: 1200px) {
  .scene-tabs {
    flex: 0 0 $sceneTabWidth;
    max-width: $sceneTabWidth;
    overflow: auto;

    &.collapsed {
      display: none;
    }

    .tab-content {
      flex: 1 1 auto;
      min-height: 15rem;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  .scene-divider {
    flex: 0 0 15px;
    max-width: 15px;

    button {
      background-color: transparent;
      border: 0;
      color: $link-color;
      cursor: pointer;
      font-size: 10px;
      font-weight: 800;
      height: 100%;
      line-height: 100%;
      padding: 0;
      text-align: center;
      width: 100%;

      &:active:not(:hover),
      &:focus:not(:hover) {
        background-color: transparent;
        border: 0;
        box-shadow: none;
      }
    }
  }

  .scene-player-container {
    flex: 0 0 calc(100% - #{$sceneTabWidth} - 15px);
    max-width: calc(100% - #{$sceneTabWidth} - 15px);
    padding-left: 0;

    &.expanded {
      flex: 0 0 calc(100% - 15px);
      max-width: calc(100% - 15px);
    }
  }
}