shaka-player/ui/less/range_elements.less

/** @license
 * Shaka Player
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

/* Special styles for input elements with type "range".
 *
 * These elements are composed of two main parts: a "track", which is the
 * horizontal bar, and the "thumb", which is the knob which slides along that
 * bar.
 *
 * In order to style the track across browsers (cough, IE 11), we need to do
 * something a bit tricky.  Styling the track is a nightmare, especially if you
 * want the thumb to be larger.  On IE 11, this gets clipped at the track size.
 * So a tiny track with a large thumb is not easily achieved.  It can be done,
 * but the techniques for it are incompatible with the gradient background we
 * want to apply to it.
 *
 * The solution is to put the input inside a div container, and apply the
 * background gradient styles to the container.  The container will act as a
 * visible, virtual track, inside which is contained a larger, invisible track,
 * in which is contained a visible thumb.  This way, the thumb is not larger
 * than the actual track (for IE 11's sake), but can be larger than the virtual
 * track.  And since we are still using a semantically correct input element,
 * the element is inherently accessible. */

/* The range container is the div that contains a range element.
 * This div will act as a virtual track to allow us to style the track space.
 * An actual track still exists inside the range element, but is transparent. */
.range-container() {
  /* This contains an input element which overlays it. */
  .overlay-parent();

  /* Vertical margins to occupy the same space as the thumb. */
  margin: calc((var(--shaka-thumb-size) - var(--shaka-track-h)) / 2) 6px;

  /* Smaller height to contain the background for the virtual track. */
  height: var(--shaka-track-h);

  /* Rounded ends on the virtual track. */
  border-radius: var(--shaka-track-h);

  /* Until we set a gradient background in JS, this will be the track color. */
  background: var(--shaka-track-color);

  /* Override box-sizing to avoid other box-sizing rules break this element */
  box-sizing: content-box;
}

/* The "track" is the pseudo-element inside the range element which represents
 * the horizontal bar on which the "thumb" (knob) moves. */
.track() {
  /* The track should fill the range element. */
  width: 100%;

  /* Since range elements are special input elements, they must reflect user
   * interaction, so when the user hovers over the range element, the cursor
   * must be a pointer. */
  cursor: pointer;

  /* The track should be tall enough to contain the thumb without clipping it.
   * It is very tricky to make the thumb show outside the track on IE 11, and
   * it is incompatible with our background gradients. */
  height: var(--shaka-thumb-size);

  /* Some browsers have default backgrounds, colors, or borders for this.
   * Hide them all. */
  background: transparent;
  color: transparent;
  border: none;
}

/* The "thumb" is the pseudo-element inside the range element which represents
 * the knob which moves along the "track" (bar). */
.thumb() {
  /* Remove default styles on WebKit-based and Blink-based browsers. */
  -webkit-appearance: none;

  /* On some browsers (IE 11), the thumb has a border, which affects the size.
   * Disable it. */
  border: none;

  /* Make the thumb a circle and set its diameter. */
  border-radius: var(--shaka-thumb-size);
  height: var(--shaka-thumb-size);
  width: var(--shaka-thumb-size);

  /* Give it the desired color. */
  background: var(--shaka-thumb-color);
}

/* This is the actual range input element. */
.range-element() {
  /* Remove any browser styling of the range element. */
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;

  /* Overlay and fill the container div. */
  .overlay-child();

  /* The range element should have a minimum touchable height for
   * accessibility. */
  height: var(--shaka-touch-size);

  /* Position the top of the range element so that it is centered on the
   * container. Note that the container is actually smaller than the
   * touchable-size. */
  top: calc((var(--shaka-track-h) - var(--shaka-touch-size)) / 2);

  /* Make sure clicking at the very top of the bar still takes effect and is not
   * confused with clicking the video to play/pause it. */
  z-index: 1;

  /* Pseudo-elements for Blink-based or WebKit-based browsers. */
  &::-webkit-slider-runnable-track {
    .track();
  }

  &::-webkit-slider-thumb {
    .thumb();
  }

  /* Pseudo-elements for Gecko-based browsers. */
  &::-moz-range-track {
    .track();
  }

  &::-moz-range-thumb {
    .thumb();
  }
}

.shaka-range-container {
  .range-container();
}

.shaka-volume-bar-container {
  width: 100px;
  padding: 0;
  transition-property: opacity, width;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

  &:hover {
    width: 100px !important;
    opacity: 1 !important;
  }
}

@media (max-width: 474px) {
  .shaka-volume-bar-container {
    width: 50px;

    &:hover {
      width: 50px !important;
    }
  }

  .shaka-mute-button:hover + .shaka-volume-bar-container-allow-hiding {
    width: 50px;
    opacity: 1;
  }
}

/* stylelint-disable-next-line max-line-length */
.shaka-mute-button + .shaka-volume-bar-container-allow-hiding:not(:focus-within) {
  width: 0;
  opacity: 0;
}

@media (min-width: 475px) {
  .shaka-mute-button:hover + .shaka-volume-bar-container-allow-hiding {
    width: 100px;
    opacity: 1;
  }
}

.shaka-range-element {
  .range-element();
}

.shaka-seek-bar-container {
  .show-when-controls-shown();
  top: 5px;
  height: 5px;

  /* add spacing between seek-bar-container and controls-button-panel */
  margin-bottom: var(--shaka-track-h);

  background-clip: padding-box !important;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;

  /* Decrease the z-index of shaka-seek-bar-container to prevent convering the
   * controls button panel */
  z-index: -1;
}

.shaka-ad-markers,
.shaka-chapter-markers {
  .overlay-child();
}