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

@material-icons-width: 32px;

.translateX(@percent) {
  -webkit-transform: translateX(percentage(@percent));
  -moz-transform: translateX(percentage(@percent));
  -ms-transform: translateX(percentage(@percent));
  -o-transform: translateX(percentage(@percent));
  transform: translateX(percentage(@percent));
}

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

  & > [class*="shaka-tooltip"] {
    position: relative;

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

      /* Override .material-icons-round text styling */
      font-family: Roboto, sans-serif, TengwarTelcontar;
      line-height: calc(@material-icons-width / 2);
      white-space: nowrap;
      font-size: 13px;

      /* Styling */
      background: rgba(35, 35, 35, 90%);
      color: white;
      border-radius: 3px;
      padding: 5px 10px;

      /* Positioning */
      position: absolute;
      bottom: calc(@material-icons-width + 5px);

      /* Left attribute is set to half of the width of the parent button */
      left: calc(@material-icons-width / 2);

      /* The tooltip is also translated 50% to appear centered */
      .translateX(-0.5);
    }
  }

  /* 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;
      .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: @material-icons-width;
      .translateX(-1);
    }
  }
}