shaka-player/ui/less/containers.less

/**
 * Copyright 2016 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* All of the top-level containers into which various visible features go. */

/* A container for the entire video + controls combo.  This is the auto-setup
 * div which we populate. */
.shaka-video-container {
  .overlay-parent();

  /* Without this, the container somehow winds up being a tad taller than it
   * should be (484px vs 480px). */
  display: flex;
}

/* Each browser has a different prefixed pseudo-class for fullscreened elements.
 * Define the properties of a fullscreened element in a mixin, then apply to
 * each of the browser-specific pseudo-classes.
 * NOTE: These fullscreen pseudo-classes can't be combined with commas into a
 * single delcaration.  Browsers ignore the rest of the list once they hit one
 * pseudo-class they don't support. */
.fullscreen-container() {
  width: 100%;
  height: 100%;
}
.shaka-video-container:fullscreen { .fullscreen-container(); }
.shaka-video-container:-webkit-full-screen { .fullscreen-container(); }
.shaka-video-container:-moz-full-screen { .fullscreen-container(); }
.shaka-video-container:-ms-fullscreen { .fullscreen-container(); }

/* The actual video element.  Sits inside .shaka-video-container and gives it a
 * size in non-fullscreen mode.  In fullscreen mode, the sizing relationship
 * flips.  CSS is just great like that.  :-( */
.shaka-video {
  /* At the moment, nothing special is required here.
   * Note that this should NOT be an overlay-child, as its size should dictate
   * the size of the container, not vice-versa. */
}

/* A container for all controls, including the giant play button, seek bar, etc.
 * Sits inside .shaka-video-container, on top of (Z axis) .shaka-video, and
 * below (Y axis) .shaka-play-button-container. */
.shaka-controls-container {
  .overlay-child();

  /* The padding defines a region around the video in which controls cannot
   * exist.  The two-value settings are shorthand for vertical followed by
   * horizontal. */
  padding: 12px 5px;

  /* Without this, the controls container overflows the video container. */
  box-sizing: border-box;

  /* A flex container, to make layout of children easier to reason about. */
  display: flex;
  /* Defines in which direction the children should flow. */
  flex-direction: column;
  /* Pushes the children toward the bottom of the container. */
  justify-content: flex-end;
  /* Centers children horizontally. */
  align-items: center;

  /* A black gradient at the bottom, behind the controls, but only so high. */
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0,
      rgba(0, 0, 0, 0) 92px);

  /* By default, do not allow any of our controls to shrink.
   * Specific controls can use .shrinkable() to override. */
  * { .unshrinkable(); }

  /* Transparent unless explicitly made opaque through "shown=true" attribute */
  opacity: 0;

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

  &[shown="true"] {
    opacity: 1;
  }

  /* Always show controls while casting. */
  &[casting="true"] {
    opacity: 1;

    /* Hide fullscreen button while casting. */
    .shaka-fullscreen-button {
      .hidden();
    }
  }
}

/* This is the container for the horizontal row of controls above the seek bar.
 * It sits above (Y axis) the seek bar, and below (Y axis) the giant play button
 * in the middle. */
.shaka-controls-button-panel {
  /* Fill the space horizontally, with no extra padding or margin. */
  width: 100%;
  padding: 0;
  margin: 0;

  /* This is itself a flex container, with children layed out horizontally. */
  display: flex;
  flex-direction: row;
  /* Push children to the right. */
  justify-content: flex-end;
  /* Center children vertically. */
  align-items: center;

  /* TODO: Document why. */
  overflow: hidden;
  min-width: 48px;

  /* Make sure we don't inherit odd font sizes and styles from the environment.
   * TODO: When did this happen?  What forced us to do this? */
  font-size: 12px;
  font-weight: normal;
  font-style: normal;

  /* Make sure contents cannot be selected. */
  .unselectable();

  /* All buttons, divs, and other controls directly inside this panel should
   * have these characteristics by default. */
  & > * {
    /* White text or button icons. */
    color: white;

    /* 32px tall controls. */
    height: 32px;

    /* Consistent margins (external) and padding (internal) between controls. */
    margin: 1px 6px;
    padding: 0;

    /* Transparent backgrounds, no borders, and a pointer when you mouse over
     * them. */
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  /* Active and disabled buttons will change colors. */
  button:active {
    background: rgba(100, 100, 100, 0.4);
  }
  button:disabled {
    color: rgba(255, 255, 255, 0.3);
  }
}

/* The container for the giant play button and spinner.  Sits above (Y axis) the
 * other video controls and seek bar, in the middle of the video frame, on top
 * of (Z axis) the video. */
.shaka-play-button-container {
  /* Take up as much space as possible, but shrink (vertically) to accomodate
   * the controls at the bottom. */
  margin: 0;
  width: 100%;
  height: 100%;
  .shrinkable();

  /* Keep the play button in the middle of this container. */
  display: flex;
  justify-content: center;
  align-items: center;
}