shaka-player/ui/less/general.less

DASH/EME video player library

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

/* General utility mixins and classes with broad applicability. */

/* Make a thing unselectable.  There are currently no cases where we make it
 * selectable again. */
.unselectable() {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.hidden() {
  display: none;
}

.shaka-hidden {
  /* Make this override equally specific classes.
   * If it's hidden, always hide it! */
  display: none !important;
}

.fill-container() {
  width: 100%;
  height: 100%;
}

.bottom-align-children() {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.bottom-panels-elements-margin() {
  margin: 1px;
}

/* For containers which host elements overlaying other things. */
.overlay-parent() {
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for some children of this container to overlay the
   * others using .overlay-child(). */
  position: relative;

  /* Make sure any top or left styles applied from outside don't move this from
   * it's original position, now that it's relative to that original position.
   * This is a defensive move that came out of intensive debugging on IE 11. */
  top: 0;
  left: 0;
}

/* For things which overlay other things. */
.overlay-child() {
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for this child to overlay the other children of a
   * .overlay-parent() object. */
  position: absolute;

  /* Fill the container by default. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;

  .fill-container();
}

.absolute-position() {
  /* When setting "position: absolute" it uses the left,right,top,bottom
   * properties to determine the positioning.  We should set all these
   * properties to ensure it is positioned properly on all platforms. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* For things that should not shrink inside a flex container.
 * This will be used for all controls by default. */
.unshrinkable() {
  flex-shrink: 0;
}

/* Use this to override .unshrinkable() in particular cases that *should* shrink
 * inside a flex container. */
.shrinkable() {
  flex-shrink: 1;
}

.show-when-controls-shown() {
  /* Transparent unless explicitly made opaque through container attributes. */
  opacity: 0;

  /* When we show/hide this, do it gradually using cubic-bezier timing. */
  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 600ms;

  /* Show controls when the container's "shown" or "casting" attributes are
   * set. */
  .shaka-controls-container[shown="true"] &,
  .shaka-controls-container[casting="true"] & {
    opacity: 1;
  }
}

.hide-when-shaka-controls-disabled() {
  .shaka-video-container:not([shaka-controls="true"]) & {
    .hidden();
  }
}

/* The width of the bottom-section controls: seek bar, ad controls, and
the control buttons panel. */
@bottom-controls-width: 96%;