shaka-player/ui/less/tooltip.less

DASH/EME video player library

/*!
 * @license
 * The tooltip is based on https://github.com/felipefialho/css-components/
 * Local modifications have been performed.
 *
 * Copyright (c) 2017 Felipe Fialho
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/* .shaka-tooltips-on enables the tooltips and is only added to the
 * control panel when the 'enableTooltips' option is set to true */
.shaka-tooltips-on {
  overflow: visible;

  & > .shaka-tooltip,
  & > .shaka-tooltip-status {
    position: relative;

    /* The :after pseudo-element contains the tooltip */
    &:hover:after,
    &:focus-visible:after,
    &:active:after {
      content: attr(aria-label);

      line-height: 1.2;
      white-space: nowrap;
      font-size: var(--shaka-font-size);

      /* Styling */
      background: var(--shaka-bg);
      color: var(--shaka-font-color);
      border-radius: 2px;
      padding: 2px 10px;

      /* Positioning */
      position: absolute;
      bottom: calc(var(--shaka-icon-size) + 14px);

      /* Left attribute is set to half of the width of the parent button */
      left: calc(var(--shaka-icon-size) / 2);

      /* The tooltip is also translated 50% to appear centered */
      transform: translateX(-50%);

      @media (prefers-reduced-transparency) {
        background-color: var(--shaka-bg-90);
      }
    }
  }

  // If the seekbar is missing, this is positioned lower.
  &.shaka-tooltips-bottom {
    & > .shaka-tooltip {
      &:hover:after,
      &:focus-visible:after,
      &:active:after {
        bottom: calc(var(--shaka-icon-size) / 2 * -1);
      }
    }
  }

  // If the seekbar is missing, this is positioned lower.
  &.shaka-tooltips-low-position {
    & > .shaka-tooltip {
      &:hover:after,
      &:focus-visible:after,
      &:active:after {
        bottom: var(--shaka-icon-size);
      }
    }
  }

  /* Adds an additional attribute for the status in .shaka-tooltip-status */
  & > .shaka-tooltip-status {
    &:hover:after,
    &:focus-visible:after,
    &:active:after {
      content: attr(aria-label) " (" attr(shaka-status) ")";
    }
  }

  /* The first tooltip of the panel is not centered on top of the button
   * but rather aligned with the left border of the control panel */
  button:first-child {
    &:hover:after,
    &:focus-visible:after,
    &:active:after {
      left: 0;
      transform: translateX(0);
    }
  }

  /* The last tooltip of the panel is not centered on top of the button
   * but rather aligned with the right border of the control panel */
  button:last-child {
    &:hover:after,
    &:focus-visible:after,
    &:active:after {
      left: var(--shaka-icon-size);
      transform: translateX(-100%);
    }
  }
}