mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-15 16:06:41 +03:00
Joey Parrish
a5e9ed61eb
The new version requires additional configuration for less syntax, and has new default rules we were out of compliance with. I disabled rules about avoiding explicit vendor prefixes (such as "-webkit") because we are not using any auto-prefixer tools. Other violations have been fixed: - kebab-case for element ids - quotes around URLs - double quotes instead of single quotes - disable class selector pattern matching for MDL (external) - use modern rgb/rgba syntax - no quotes on font families - no long-hand when short-hand will do This brings our NPM audit vulnerabilities from 20 down to 10.
98 lines
3.3 KiB
Plaintext
98 lines
3.3 KiB
Plaintext
/*!
|
|
* @license
|
|
* The tooltip is based on https://github.com/felipefialho/css-components/
|
|
* Local modifications have been performed.
|
|
*
|
|
* Copyright (c) 2017 Felipe Fialho
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in
|
|
* all copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*/
|
|
|
|
@material-icons-width: 32px;
|
|
|
|
.translateX(@percent) {
|
|
-webkit-transform: translateX(percentage(@percent));
|
|
-moz-transform: translateX(percentage(@percent));
|
|
-ms-transform: translateX(percentage(@percent));
|
|
-o-transform: translateX(percentage(@percent));
|
|
transform: translateX(percentage(@percent));
|
|
}
|
|
|
|
/* .shaka-tooltips-on enables the tooltips and is only added to the
|
|
* control panel when the 'enableTooltips' option is set to true */
|
|
.shaka-tooltips-on {
|
|
overflow: visible;
|
|
|
|
& > [class*="shaka-tooltip"] {
|
|
position: relative;
|
|
|
|
/* The :after pseudo-element contains the tooltip */
|
|
&:hover:after, &:focus-visible:after, &:active:after {
|
|
content: attr(aria-label);
|
|
|
|
/* Override .material-icons-round text styling */
|
|
font-family: Roboto-Regular, Roboto, sans-serif;
|
|
line-height: calc(@material-icons-width / 2);
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
|
|
/* Styling */
|
|
background: rgba(35 35 35 / 90%);
|
|
color: white;
|
|
border-radius: 3px;
|
|
padding: 5px 10px;
|
|
|
|
/* Positioning */
|
|
position: absolute;
|
|
bottom: calc(@material-icons-width + 5px);
|
|
|
|
/* Left attribute is set to half of the width of the parent button */
|
|
left: calc(@material-icons-width / 2);
|
|
|
|
/* The tooltip is also translated 50% to appear centered */
|
|
.translateX(-0.5);
|
|
}
|
|
}
|
|
|
|
/* Adds an additional attribute for the status in .shaka-tooltip-status */
|
|
& > .shaka-tooltip-status {
|
|
&:hover:after, &:focus-visible:after, &:active:after {
|
|
content: attr(aria-label) " (" attr(shaka-status) ")";
|
|
}
|
|
}
|
|
|
|
/* The first tooltip of the panel is not centered on top of the button
|
|
* but rather aligned with the left border of the control panel */
|
|
button:first-child {
|
|
&:hover:after, &:focus-visible:after, &:active:after {
|
|
left: 0;
|
|
.translateX(0);
|
|
}
|
|
}
|
|
|
|
/* The last tooltip of the panel is not centered on top of the button
|
|
* but rather aligned with the right border of the control panel */
|
|
button:last-child {
|
|
&:hover:after, &:focus-visible:after,&:active:after {
|
|
left: @material-icons-width;
|
|
.translateX(-1);
|
|
}
|
|
}
|
|
}
|