shaka-player/ui/less/range_elements.less

DASH/EME video player library

/** @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. */

/* These control the color and size of the various pieces. */
@thumb-color: white;
@track-default-color: white;
@thumb-size: 12px;
@track-height: 4px;

/* 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((@thumb-size - @track-height) / 2) 6px;

  /* Smaller height to contain the background for the virtual track. */
  height: @track-height;

  /* Rounded ends on the virtual track. */
  border-radius: @track-height;

  /* Until we set a gradient background in JS, this will be the track color. */
  background: @track-default-color;
}

/* 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: @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: @thumb-size;
  height: @thumb-size;
  width: @thumb-size;

  /* Give it the desired color. */
  background: @thumb-color;
}

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

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

  /* The range element should be big enough to contain the thumb without
   * clipping it.  It is very tricky to make the thumb show outside the track
   * on IE 11. */
  height: @thumb-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 thumb. */
  top: calc((@track-height - @thumb-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;
}

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

.shaka-seek-bar-container {
  .show-when-controls-shown();
}

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