mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-14 15:56:38 +03:00
Álvaro Velad Galván
3fd73ce941
- The following buttons are registered: play_pause, mute, fullscreen, rewind, fast_forward, picture_in_picture, remote, loop, skip_next, skip_previous - SmallPlayButton and BigPlayButton are removed - The following buttons are used by default on mobile: skip_previous, play_pause, skip_next
117 lines
2.7 KiB
Plaintext
117 lines
2.7 KiB
Plaintext
/** @license
|
|
* Shaka Player
|
|
* Copyright 2016 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/* The main buttons in the UI controls. */
|
|
|
|
.disabled-button() {
|
|
/* Set the background and the color, otherwise it might be overwritten by
|
|
* the css styles in demo. */
|
|
background-color: transparent;
|
|
color: @general-font-color;
|
|
cursor: default;
|
|
}
|
|
|
|
/* 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: @general-font-size;
|
|
color: @general-font-color;
|
|
cursor: pointer;
|
|
width: auto;
|
|
padding: 0 5px;
|
|
|
|
&[disabled] {
|
|
.disabled-button();
|
|
}
|
|
}
|
|
|
|
.shaka-content-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
font-size: @content-title-font-size;
|
|
color: @general-font-color;
|
|
width: auto;
|
|
padding: 0 5px;
|
|
|
|
/* This shadow allows good visibility with any type of background. */
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 80%), 0 2px 6px rgba(0, 0, 0, 60%);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
.shaka-fast-forward-container,
|
|
.shaka-rewind-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
.shrinkable();
|
|
.absolute-position();
|
|
|
|
/* Keep all the elements inside button div in center and in row */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
/* To be properly positioned, this should have no margin. */
|
|
margin: 0;
|
|
|
|
/* No border. */
|
|
border: none;
|
|
|
|
color: @general-font-color;
|
|
background-color: @general-background-color;
|
|
|
|
cursor: default;
|
|
font-size: 20px;
|
|
|
|
/* Hidding the container by setting opacity */
|
|
opacity: 0;
|
|
|
|
/* Make the text inside this button unselectable */
|
|
.unselectable();
|
|
}
|
|
|
|
.shaka-fast-forward-container {
|
|
border-radius: 40% 0 0 40%;
|
|
}
|
|
|
|
.shaka-rewind-container {
|
|
border-radius: 0 40% 40% 0;
|
|
}
|
|
|
|
/* This class is instead of material-icon-round
|
|
* because the font-size of 24 doesn't look good */
|
|
.shaka-forward-rewind-container-icon {
|
|
font-size: 32px;
|
|
}
|