koel/resources/assets/sass/vendor/_plyr.scss

@use "sass:math";

// ==========================================================================
// Plyr styles
// https://github.com/selz/plyr
// ==========================================================================

// Variables
// -------------------------------

// Colors
$plyr-blue: #3498DB !default;
$plyr-gray-dark: #343F4A !default;
$plyr-gray: #565D64 !default;
$plyr-gray-light: #6B7D86 !default;
$plyr-gray-lighter: #CBD0D3 !default;
$plyr-off-white: #313131 !default;

// Font sizes
$plyr-font-size-small: 14px !default;
$plyr-font-size-base: 16px !default;

// Captions
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;

// Controls
$plyr-control-spacing: 10px !default;
$plyr-controls-bg: #fff !default;
$plyr-control-bg-hover: $plyr-blue !default;

// Tooltips
$plyr-tooltip-bg: $plyr-controls-bg !default;
$plyr-tooltip-border-color: transparentize($plyr-gray-dark, .1) !default;
$plyr-tooltip-border-width: 1px;
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
$plyr-tooltip-padding: $plyr-control-spacing !default;
$plyr-tooltip-arrow-size: 6px !default;
$plyr-tooltip-radius: 3px !default;

// Progress
$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
$plyr-progress-playing-bg: $plyr-blue !default;
$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
$plyr-progress-loading-size: 40px !default;
$plyr-progress-loading-bg: transparentize(#000, .15) !default;

// Volume
$plyr-volume-track-height: 6px !default;
$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
$plyr-volume-thumb-bg: var(--color-highlight) !default;
$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;

// Breakpoints
$plyr-bp-control-split: 560px !default; // When controls split into left/right
$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size

// Animation
// ---------------------------------------
@keyframes plyr-progress {
  to {
    background-position: $plyr-progress-loading-size 0;
  }
}

// Font smoothing
@mixin font-smoothing($mode: on) {
  @if ($mode == 'on') {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  } @else if ($mode == 'off') {
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

// <input type="range"> styling
@mixin volume-thumb() {
  height: $plyr-volume-thumb-height;
  width: $plyr-volume-thumb-width;
  background: $plyr-volume-thumb-bg;
  border: 0;
  border-radius: 100%;
  transition: background .3s ease;
  cursor: ew-resize;
}

@mixin volume-track() {
  height: $plyr-volume-track-height;
  background: $plyr-volume-track-bg;
  border: 0;
  border-radius: math.div($plyr-volume-track-height, 2);
}

@mixin seek-thumb() {
  background: transparent;
  border: 0;
  width: 1px;
  height: $plyr-control-spacing;
}

@mixin seek-thumb-touch() {
  width: ($plyr-control-spacing * 4);
  transform: translateX(-50%);
}

@mixin seek-track() {
  background: none;
  border: 0;
}

// Styles
// -------------------------------
// Base
.plyr {
  position: relative;
  max-width: 100%;
  min-width: 290px;

  // border-box everything
  // http://paulirish.com/2012/box-sizing-border-box-ftw/
  &,
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  // Fix 300ms delay
  a, button, input, label {
    touch-action: manipulation;
  }

  // Screen reader only
  &__sr-only {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
  }

  // For video
  &__video-wrapper {
    position: relative;
  }

  video,
  audio {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }

  // For embeds
  &__video-embed {
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      user-select: none;
    }

    // Vimeo hack
    > div {
      position: relative;
      padding-bottom: 200%;
      transform: translateY(-35.95%);
    }

    // To allow mouse events to be captured if full support
    &.plyr iframe {
      pointer-events: none;
    }
  }

  // Captions
  &__captions {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 3);
    color: var(--color-text-primary);
    font-size: $plyr-font-size-captions-base;
    text-align: center;
    @include font-smoothing();

    span {
      border-radius: 2px;
      padding: 3px 10px;
      background: transparentize(#000, .9);
    }

    span:empty {
      display: none;
    }

    @media (min-width: $plyr-bp-captions-large) {
      font-size: $plyr-font-size-captions-medium;
    }
  }

  &--captions-active &__captions {
    display: block;
  }

  &--fullscreen-active &__captions {
    font-size: $plyr-font-size-captions-large;
  }

  // Playback controls
  &__controls {
    @include font-smoothing();
    position: relative;
    padding: $plyr-control-spacing;
    background: $plyr-controls-bg;
    line-height: 1;
    text-align: center;
    box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);

    // Clear floats
    &::after {
      content: '';
      display: table;
      clear: both;
    }

    // Layout
    &--right {
      display: block;
      margin: $plyr-control-spacing auto 0;
    }

    @media (min-width: $plyr-bp-control-split) {
      &--left {
        float: left;
      }
      &--right {
        float: right;
        margin-top: 0;
      }
    }

    // Buttons
    button {
      display: inline-block;
      vertical-align: middle;
      margin: 0 2px;
      padding: math.div($plyr-control-spacing, 2) $plyr-control-spacing;
      overflow: hidden;
      border: 0;
      background: transparent;
      border-radius: 3px;
      cursor: pointer;
      color: var(--color-highlight);
      transition: background .3s ease, color .3s ease, opacity .3s ease;

      svg {
        width: 18px;
        height: 18px;
        display: block;
        fill: currentColor;
        transition: fill .3s ease;
      }

      // Hover and tab focus
      &.tab-focus:hover,
      &:hover {
        background: $plyr-control-bg-hover;
        color: var(--color-highlight)-hover;
      }

      // Default focus
      &:focus {
        outline: 0;
      }
    }

    // Hide toggle icons by default
    .icon--exit-fullscreen,
    .icon--muted,
    .icon--captions-on {
      display: none;
    }

    // Time display
    .plyr__time {
      display: inline-block;
      vertical-align: middle;
      margin-left: $plyr-control-spacing;
      color: var(--color-highlight);
      font-weight: 600;
      font-size: $plyr-font-size-small;
    }

    // Media duration hidden on small screens
    .plyr__time + .plyr__time {
      display: none;

      @media (min-width: $plyr-bp-control-split) {
        display: inline-block;
      }

      // Add a slash in before
      &::before {
        content: '\2044';
        margin-right: $plyr-control-spacing;
      }
    }
  }

  // Tooltips
  &__tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    bottom: 100%;
    margin-bottom: $plyr-tooltip-padding;
    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);

    opacity: 0;
    background: $plyr-tooltip-bg;
    box-shadow: $plyr-tooltip-shadow;
    border-radius: $plyr-tooltip-radius;
    color: var(--color-highlight);
    font-size: $plyr-font-size-small;
    line-height: 1.5;
    font-weight: 600;

    transform: translate(-50%, 10px) scale(.8);
    transform-origin: 50% 100%;
    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;

    // Arrows
    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }

    // The border triangle
    &::after {
      $plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
      bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
      border-right: $plyr-border-arrow-size solid transparent;
      border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
      border-left: $plyr-border-arrow-size solid transparent;
      z-index: 1;
    }

    // The background triangle
    &::before {
      bottom: -$plyr-tooltip-arrow-size;
      border-right: $plyr-tooltip-arrow-size solid transparent;
      border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
      border-left: $plyr-tooltip-arrow-size solid transparent;
      z-index: 2;
    }
  }

  button:hover .plyr__tooltip,
  button.tab-focus:focus .plyr__tooltip,
  &__tooltip--visible {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  button:hover .plyr__tooltip {
    z-index: 3;
  }

  // Common range styles
  input[type='range'].tab-focus:focus {
    outline: thin dotted transparentize($plyr-gray-dark, .8);
    outline-offset: 3px;
  }

  // Playback progress
  // <progress> element
  &__progress {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    width: 100%;
    height: $plyr-control-spacing;
    background: $plyr-progress-bg;

    &--buffer[value],
    &--played[value],
    &--seek[type='range'] {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      margin: 0;
      padding: 0;
      vertical-align: top;

      -webkit-appearance: none;
      -moz-appearance: none;
      border: none;
      background: transparent;
    }

    &--buffer[value],
    &--played[value] {
      &::-webkit-progress-bar {
        background: transparent;
        transition: width .2s ease;
      }

      // Inherit from currentColor;
      &::-webkit-progress-value {
        background: currentColor;
        transition: width .2s ease;
      }

      &::-moz-progress-bar {
        background: currentColor;
        transition: width .2s ease;
      }
    }

    &--played[value] {
      z-index: 2;
      color: var(--color-highlight);
    }

    &--buffer[value] {
      color: var(--color-bg-secondary);
    }

    // Seek control
    // <input[type='range']> element
    // Specificity is for bootstrap compatibility
    &--seek[type='range'] {
      z-index: 4;
      cursor: pointer;
      outline: 0;

      // Webkit
      &::-webkit-slider-runnable-track {
        @include seek-track();
      }

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        @include seek-thumb();
      }

      // Mozilla
      &::-moz-range-track {
        @include seek-track();
      }

      &::-moz-range-thumb {
        -moz-appearance: none;
        @include seek-thumb();
      }

      // Microsoft
      &::-ms-track {
        color: transparent;
        @include seek-track();
      }

      &::-ms-fill-lower,
      &::-ms-fill-upper {
        @include seek-track();
      }

      &::-ms-thumb {
        @include seek-thumb();
      }

      &:focus {
        outline: 0;
      }

      &::-moz-focus-outer {
        border: 0;
      }
    }

    // Seek tooltip to show time
    .plyr__tooltip {
      left: 0;
    }
  }

  // Touch seek wider handle
  &--is-touch &--seek[type='range'] {
    &::-webkit-slider-thumb {
      @include seek-thumb-touch();
    }

    // Mozilla
    &::-moz-range-thumb {
      @include seek-thumb-touch();
    }

    // Microsoft
    &::-ms-thumb {
      @include seek-thumb-touch();
    }
  }

  // Loading state
  &--loading .plyr__progress--buffer {
    animation: plyr-progress 1s linear infinite;
    background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
    background-repeat: repeat-x;
    background-color: $plyr-progress-buffered-bg;
    background-image: linear-gradient(
        -45deg,
        $plyr-progress-loading-bg 25%,
        transparent 25%,
        transparent 50%,
        $plyr-progress-loading-bg 50%,
        $plyr-progress-loading-bg 75%,
        transparent 75%,
        transparent);
    color: transparent;
  }

  // States
  &__controls [data-plyr='pause'],
  &--playing .plyr__controls [data-plyr='play'] {
    display: none;
  }

  &--playing .plyr__controls [data-plyr='pause'] {
    display: inline-block;
  }

  // Volume control
  // <input[type='range']> element
  // Specificity is for bootstrap compatibility
  &__volume[type='range'] {
    display: inline-block;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100px;
    margin: 0 $plyr-control-spacing 0 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;

    // Webkit
    &::-webkit-slider-runnable-track {
      @include volume-track();
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      margin-top: -(math.div($plyr-volume-thumb-height - $plyr-volume-track-height, 2));
      @include volume-thumb();
    }

    // Mozilla
    &::-moz-range-track {
      @include volume-track();
    }

    &::-moz-range-thumb {
      @include volume-thumb();
    }

    // Microsoft
    &::-ms-track {
      height: $plyr-volume-track-height;
      background: transparent;
      border-color: transparent;
      border-width: math.div($plyr-volume-thumb-height - $plyr-volume-track-height, 2) 0;
      color: transparent;
    }

    &::-ms-fill-lower,
    &::-ms-fill-upper {
      @include volume-track();
    }

    &::-ms-thumb {
      @include volume-thumb();
    }

    &:focus {
      outline: 0;

      &::-webkit-slider-thumb {
        background: $plyr-volume-thumb-bg-focus;
      }

      &::-moz-range-thumb {
        background: $plyr-volume-thumb-bg-focus;
      }

      &::-ms-thumb {
        background: $plyr-volume-thumb-bg-focus;
      }
    }
  }

  // Hide sound controls on iOS
  // It's not supported to change volume using JavaScript:
  // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
  &--is-ios &__volume,
  &--is-ios [data-plyr='mute'],
  &--is-ios.plyr--audio &__controls--right {
    display: none;
  }

  // Center buttons so it looks less odd
  &--is-ios.plyr--audio &__controls--left {
    float: none;
  }

  // Audio specific styles
  // Position the progress within the container
  &--audio .plyr__controls {
    padding-top: ($plyr-control-spacing * 2);
  }

  &--audio .plyr__progress {
    bottom: auto;
    top: 0;
    background: transparent;
  }

  // Full screen mode
  &--fullscreen,
  &--fullscreen-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 10000000;
    background: #000;

    video {
      height: 100%;
    }

    .plyr__video-wrapper {
      height: 100%;
      width: 100%;
    }

    .plyr__controls {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  // Hide controls when playing in full screen
  &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
  &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
    .plyr__controls {
      transform: translateY(100%) translateY(math.div($plyr-control-spacing, 2));
      transition: transform .3s .2s ease;
    }

    .plyr__captions {
      bottom: math.div($plyr-control-spacing, 2);
      transition: bottom .3s .2s ease;
    }

    &.plyr--hover .plyr__controls {
      transform: translateY(0);
    }
  }

  // Captions
  &.plyr--fullscreen .plyr__captions,
  &--fullscreen-active .plyr__captions,
  &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
    top: auto;
    bottom: 90px;

    @media (min-width: $plyr-bp-control-split) {
      bottom: 60px;
    }
  }

  // Change icons on state change
  &--fullscreen-active .icon--exit-fullscreen,
  &--muted .plyr__controls .icon--muted,
  &--captions-active .plyr__controls .icon--captions-on {
    display: block;

    & + svg {
      display: none;
    }
  }

  // Some options are hidden by default
  [data-plyr='captions'],
  [data-plyr='fullscreen'] {
    display: none;
  }

  &--captions-enabled [data-plyr='captions'],
  &--fullscreen-enabled [data-plyr='fullscreen'] {
    display: inline-block;
  }
}