mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-26 17:46:26 +03:00
Jacob Trimble
ce90a932e4
When setting "position: absolute", you should set the "left" and "top" properties to ensure it is aligned with its parent correctly. IE11 apparently defaulted to aligning next to the video element. This ensures the spinner is aligned with the play button. Fixes #2084 Change-Id: I91041813e36dbfd18a00c22af3f3f5d7e7542f40
102 lines
2.9 KiB
Plaintext
102 lines
2.9 KiB
Plaintext
/**
|
|
* @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.
|
|
*/
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.fill-container() {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 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;
|
|
}
|