<commit_before>/**
 * @license
 * 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.
 */

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

@play-button-size-percentage: 15%;

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

/* The giant play button, which sits inside .shaka-player-button-container. */
.shaka-play-button {
  /* Set width & height in a round-about way.  By using padding, we can keep
   * a 1:1 aspect ratio and size the button relative to the container width.
   *
   * Since padding is applied equally to top, bottom, left, and right, only use
   * half of the intended percentage for each.
   *
   * Based on tips from https://stackoverflow.com/a/12925343 */
  box-sizing: border-box;
  padding: @play-button-size-percentage / 2;
  width: 0;
  height: 0;

  /* To be properly positioned in the center, this should have no margin.
   * This might have been set for buttons generally by the app or user-agent. */
  margin: 0;

  /* This makes the button a circle. */
  border-radius: 50%;

  /* A small drop shadow below the button. */
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;

  /* No border. */
  border: none;

  /* The play arrow is a picture. It is treated a background image.
   * The following settings ensure it shows only once and in the
   * center of the button. */
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center center;

  /* A background color behind the play arrow. */
  background-color: rgba(255, 255, 255, 0.9);

  /* Actual icon images for the two states this could be in.
   * These will be inlined as data URIs when compiled, and so do not need to be
   * deployed separately from the compiled CSS.
   * Note that these URIs should relative to ui/controls.less, not this file. */
  &[icon="play"] {
    background-image: data-uri('images/play_arrow.svg');
  }

  &[icon="pause"] {
    background-image: data-uri('images/pause.svg');
  }
}

/* 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: 14px;
  color: rgb(255, 255, 255);

  /* Make the time element the right size for the text, instead of defaulting
   * to the same size as the rest of the controls. */
  height: auto;
  cursor: pointer;

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

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

    /* WebKit-based and Blink-based browsers have this as their default outline
     * color. */
    outline: 1px solid -webkit-focus-ring-color;
  }

  /* 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;
    border: 0;
  }
}

/* On mobile devices, hide the volume button by default. */
.shaka-mobile {
  .shaka-volume-bar-container {
    display: none;
  }
}<commit_msg>CSS: Keep border on buttons during mouse navigation.<commit_after>/**
 * @license
 * 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.
 */

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

@play-button-size-percentage: 15%;

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

/* The giant play button, which sits inside .shaka-player-button-container. */
.shaka-play-button {
  /* Set width & height in a round-about way.  By using padding, we can keep
   * a 1:1 aspect ratio and size the button relative to the container width.
   *
   * Since padding is applied equally to top, bottom, left, and right, only use
   * half of the intended percentage for each.
   *
   * Based on tips from https://stackoverflow.com/a/12925343 */
  box-sizing: border-box;
  padding: @play-button-size-percentage / 2;
  width: 0;
  height: 0;

  /* To be properly positioned in the center, this should have no margin.
   * This might have been set for buttons generally by the app or user-agent. */
  margin: 0;

  /* This makes the button a circle. */
  border-radius: 50%;

  /* A small drop shadow below the button. */
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;

  /* No border. */
  border: none;

  /* The play arrow is a picture. It is treated a background image.
   * The following settings ensure it shows only once and in the
   * center of the button. */
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center center;

  /* A background color behind the play arrow. */
  background-color: rgba(255, 255, 255, 0.9);

  /* Actual icon images for the two states this could be in.
   * These will be inlined as data URIs when compiled, and so do not need to be
   * deployed separately from the compiled CSS.
   * Note that these URIs should relative to ui/controls.less, not this file. */
  &[icon="play"] {
    background-image: data-uri('images/play_arrow.svg');
  }

  &[icon="pause"] {
    background-image: data-uri('images/pause.svg');
  }
}

/* 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: 14px;
  color: rgb(255, 255, 255);

  /* Make the time element the right size for the text, instead of defaulting
   * to the same size as the rest of the controls. */
  height: auto;
  cursor: pointer;

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

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

    /* WebKit-based and Blink-based browsers have this as their default outline
     * color. */
    outline: 1px solid -webkit-focus-ring-color;
  }

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

/* On mobile devices, hide the volume button by default. */
.shaka-mobile {
  .shaka-volume-bar-container {
    display: none;
  }
}
{'fraction_non_alphanumeric': 0.10169082125603865, 'fraction_numerical': 0.01533816425120773, 'mean_word_length': 3.093425605536332, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7619517', 'n_tokens_mistral': 2536, 'n_tokens_neox': 2379, 'n_words': 1029}