shaka-player/ui/less/buttons.less

DASH/EME video player library

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

/* The main buttons in the UI controls. */

.disabled-button() {
  /* Set the background and the color, otherwise it might be overwritten by
   * the css styles in demo. */
  background-color: transparent;
  color: var(--shaka-font-color);
  cursor: default;
}

/* This button contains the current time and duration of the video.
 * It's only clickable when the content is live, and current time is behind live
 * edge. Otherwise, the button is disabled.
 */
.shaka-current-time {
  font-size: var(--shaka-font-size);
  color: var(--shaka-font-color);
  cursor: pointer;
  width: auto;
  padding: 0 5px;

  &[disabled] {
    .disabled-button();
  }
}

.shaka-content-title {
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: var(--shaka-title-size);
  color: var(--shaka-font-color);
  width: auto;
  padding: 0 5px;

  /* This shadow allows good visibility with any type of background. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 80%), 0 2px 6px rgba(0, 0, 0, 60%);
}

/* Use a consistent outline focus style across browsers. */
.shaka-controls-container {
  button:focus, input:focus {
    /* Most browsers will fall back to "Highlight" (system setting) color for
     * the focus outline. */
    outline: 1px solid Highlight;
  }

  /* Disable this Mozilla-specific focus ring, since we have an outline defined
   * for focus. */
  button:-moz-focus-inner, input:-moz-focus-outer {
    outline: none;
    border: 0;
  }
}

/* Outline on focus is important for accessibility, but
 * it doesn't look great. This removes the outline for
 * mouse users while leaving it for keyboard users. */
.shaka-controls-container:not(.shaka-keyboard-navigation) {
  button:focus, input:focus {
    outline: none;
  }
}

.shaka-fast-forward-container,
.shaka-rewind-container {
  height: 100%;
  width: 100%;
  .shrinkable();
  .absolute-position();

  /* Keep all the elements inside button div in center and in row */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  /* To be properly positioned, this should have no margin. */
  margin: 0;

  /* No border. */
  border: none;
  color: var(--shaka-font-color);
  background-color: var(--shaka-bg);
  cursor: default;
  font-size: 20px;

  /* Hidding the container by setting opacity */
  opacity: 0;

  /* Make the text inside this button unselectable */
  .unselectable();
}

.shaka-fast-forward-container {
  border-radius: 40% 0  0 40%;
}

.shaka-rewind-container {
  border-radius: 0 40% 40% 0;
}

/* This class is instead of material-icon-round
 * because the font-size of 24 doesn't look good */
.shaka-forward-rewind-container-icon {
  font-size: 32px;
}

/* The autoplay toggle is drawn as a switch rather than an icon, because it
 * reflects a persistent setting instead of an action.  The glyph inside the
 * knob shows what happens when the current item ends: play the next one, or
 * stop. */
.autoplay-switch-size(@scale) {
  .shaka-autoplay-switch {
    width: calc(var(--shaka-icon-size) * @scale * 0.75);
    height: calc(var(--shaka-icon-size) * @scale * 0.42);
    padding: calc(var(--shaka-icon-size) * @scale * 0.04);
    border-radius: calc(var(--shaka-icon-size) * @scale * 0.21);
  }

  .shaka-autoplay-knob {
    width: calc(var(--shaka-icon-size) * @scale * 0.34);
    height: calc(var(--shaka-icon-size) * @scale * 0.34);

    .shaka-ui-icon {
      font-size: calc(var(--shaka-icon-size) * @scale * 0.2);
    }
  }

  &[aria-pressed="true"] .shaka-autoplay-knob {
    transform: translateX(calc(var(--shaka-icon-size) * @scale * 0.33));
  }
}

.shaka-autoplay-button {
  .autoplay-switch-size(1);

  .shaka-autoplay-switch {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 30%);
    transition: background cubic-bezier(0.4, 0, 0.6, 1) 100ms;
  }

  .shaka-autoplay-knob {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--shaka-font-color);
    color: var(--shaka-bg-solid);
    transition: transform cubic-bezier(0.4, 0, 0.6, 1) 100ms;

    .shaka-ui-icon {
      /* The overflow menu pads the icons of its rows; inside the knob the
       * glyph has to stay centred. */
      padding: 0;
    }
  }

  &[aria-pressed="true"] {
    .shaka-autoplay-switch {
      background: var(--shaka-font-color);
    }

    .shaka-autoplay-knob {
      background: var(--shaka-bg-solid);
      color: var(--shaka-font-color);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shaka-autoplay-switch,
    .shaka-autoplay-knob {
      transition: none;
    }
  }
}

/* Inside the overflow menu the switch stands in for a row icon, so it is
 * scaled down to the width of the icon column and given the same gap before
 * the label.  At that size the glyph is unreadable, and the row already
 * spells the state out ("On" / "Off"), so it is dropped. */
.shaka-overflow-menu .shaka-autoplay-button {
  .autoplay-switch-size(0.667);

  .shaka-autoplay-switch {
    margin-right: 10px;
  }

  .shaka-autoplay-knob .shaka-ui-icon {
    display: none;
  }
}