mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-16 16:16:40 +03:00
Amila Sampath
6c0283e7d0
Currently, player buttons clickable area are 24px by 32px which is not close to WCAG guidelines(44px by 44px) Solution would be moving margins around buttons to paddings since padding rendered as touchable area. This makes player buttons 34*32px. (and makes focus indicators look nicer too :) Co-authored-by: Joey Parrish <joeyparrish@users.noreply.github.com>
132 lines
3.4 KiB
Plaintext
132 lines
3.4 KiB
Plaintext
/** @license
|
|
* Shaka Player
|
|
* Copyright 2016 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/* General utility mixins and classes with broad applicability. */
|
|
|
|
/* Make a thing unselectable. There are currently no cases where we make it
|
|
* selectable again. */
|
|
.unselectable() {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.hidden() {
|
|
display: none;
|
|
}
|
|
|
|
.shaka-hidden {
|
|
/* Make this override equally specific classes.
|
|
* If it's hidden, always hide it! */
|
|
display: none !important;
|
|
}
|
|
|
|
.fill-container() {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bottom-align-children() {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bottom-panels-elements-margin() {
|
|
margin: 1px;
|
|
}
|
|
|
|
/* For containers which host elements overlaying other things. */
|
|
.overlay-parent() {
|
|
/* For a detailed explanation of how this achieves an overlay, please refer
|
|
* to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
|
|
*
|
|
* But you don't have to, because we've encapsulated these high level
|
|
* concepts into classes.
|
|
*
|
|
* This makes it possible for some children of this container to overlay the
|
|
* others using .overlay-child(). */
|
|
position: relative;
|
|
|
|
/* Make sure any top or left styles applied from outside don't move this from
|
|
* it's original position, now that it's relative to that original position.
|
|
* This is a defensive move that came out of intensive debugging on IE 11. */
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* For things which overlay other things. */
|
|
.overlay-child() {
|
|
/* For a detailed explanation of how this achieves an overlay, please refer
|
|
* to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
|
|
*
|
|
* But you don't have to, because we've encapsulated these high level
|
|
* concepts into classes.
|
|
*
|
|
* This makes it possible for this child to overlay the other children of a
|
|
* .overlay-parent() object. */
|
|
position: absolute;
|
|
|
|
/* Fill the container by default. */
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
.fill-container();
|
|
}
|
|
|
|
.absolute-position() {
|
|
/* When setting "position: absolute" it uses the left,right,top,bottom
|
|
* properties to determine the positioning. We should set all these
|
|
* properties to ensure it is positioned properly on all platforms. */
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* For things that should not shrink inside a flex container.
|
|
* This will be used for all controls by default. */
|
|
.unshrinkable() {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Use this to override .unshrinkable() in particular cases that *should* shrink
|
|
* inside a flex container. */
|
|
.shrinkable() {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.show-when-controls-shown() {
|
|
/* Transparent unless explicitly made opaque through container attributes. */
|
|
opacity: 0;
|
|
|
|
/* When we show/hide this, do it gradually using cubic-bezier timing. */
|
|
transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 600ms;
|
|
|
|
/* Show controls when the container's "shown" or "casting" attributes are
|
|
* set. */
|
|
.shaka-controls-container[shown="true"] &,
|
|
.shaka-controls-container[casting="true"] & {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.hide-when-shaka-controls-disabled() {
|
|
.shaka-video-container:not([shaka-controls="true"]) & {
|
|
.hidden();
|
|
}
|
|
}
|
|
|
|
/* The width of the bottom-section controls: seek bar, ad controls, and
|
|
the control buttons panel. */
|
|
@bottom-controls-width: 96%;
|