mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-14 15:56:38 +03:00
Theodore Abshire
de478295ca
Previously, StyleLint had a problem that was preventing us from using their library in our buildbot tests. To get around this, we made a custom branch of their library. Recently, they almost fixed the issue. There's just one minor change left before we can use their master branch. In the meantime, this CL changes Shaka Player to use a new fork of StyleLint that is based on their current master branch, and makes the LESS modifications that the newest versions ask for. Change-Id: I78624b3d366e6c22c577ca6707f5a3311f8e808e
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 6px;
|
|
}
|
|
|
|
/* 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%;
|