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

$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;
  }

  .video-js {
    height: 56.25vw;
    width: 100%;

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

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

  .vjs-button {
    outline: none;
  }

  .vjs-vtt-thumbnail-display {
    // default opacity to 0, it gets set to 1 when moused-over.
    // prevents the border from showing up when initially loaded
    opacity: 0;
  }

  .vjs-touch-enabled {
    margin: 0 -15px;
    width: 100vw;

    &:hover.vjs-user-active {
      .vjs-button {
        pointer-events: auto;
      }
    }

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

      .vjs-control-bar .vjs-control:not(.vjs-progress-control) {
        width: 2.5em;
      }

      .vjs-time-control {
        font-size: 12px;
        line-height: 4em;
      }

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

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

    .vjs-vtt-thumbnail-display {
      bottom: 40px;
    }
  }
}

.video-js {
  .vjs-control-bar {
    background: none;

    /* Scales control size */
    font-size: 15px;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);

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

  .vjs-time-control {
    display: block;
    min-width: 0;
    padding: 0 4px;
    pointer-events: none;

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

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

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

  &:hover,
  &.vjs-paused {
    .vjs-control-bar {
      opacity: 1;
    }
  }

  .vjs-progress-control {
    bottom: 3rem;
    margin-left: 1%;
    position: absolute;
    width: 98%;
  }

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

  .vjs-vtt-thumbnail-display {
    border: 2px solid white;
    border-radius: 2px;
    bottom: 90px;
    position: absolute;
  }

  .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-progress-control .vjs-play-progress .vjs-time-tooltip,
  .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip {
    visibility: hidden;
  }
}

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

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

@media (max-width: 1199px) {
  .scene-tabs {
    padding-right: 15px;
  }
}
@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);
    }
  }
}

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

.hide-scrubber .scrubber-wrapper {
  display: none;
}

/* hide scrubber when height is < 450px or width < 576 */
@media (max-height: 449px), (max-width: 575px) {
  .scrubber-wrapper {
    display: none;
  }
}

#scrubber-back {
  float: left;
}

#scrubber-forward {
  float: right;
}

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

.scrubber-content {
  cursor: grab;
  display: inline-block;
  height: $scrubberHeight;
  margin: 0 0.5%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  width: 96%;

  &.dragging {
    cursor: grabbing;
  }
}

#scrubber-position-indicator {
  background-color: #ccc;
  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;
  transition: 333ms ease-out;
  width: 100%;
}

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

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

.scrubber-tag {
  background-color: #000;
  cursor: pointer;
  font-size: 10px;
  padding: 0 10px;
  position: absolute;
  white-space: nowrap;

  &:hover {
    background-color: #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;
  cursor: pointer;
  display: flex;
  font-size: 10px;
  margin-right: 10px;
  position: absolute;
  text-align: center;
  text-shadow: 1px 1px black;

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

.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-menu li {
    font-size: 12px;
  }

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

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

  &:hover {
    cursor: pointer;
    -webkit-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -o-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
  }
}

.vjs-marker-tooltip {
  border-radius: 0.3em;
  color: white;
  display: block;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  height: 50px;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  right: -80px;
  top: -5.4em;
  width: 160px;
  z-index: 1;
}