mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-16 16:16:40 +03:00
Álvaro Velad Galván
6562859506
The build system is updated to generate two CSS outputs: A legacy stylesheet (.css) where CSS custom properties are flattened using postcss-custom-properties for compatibility with older browsers. A modern stylesheet (.modern.css) that preserves CSS custom properties for modern browsers. Both outputs are generated from the same LESS source and processed through Autoprefixer and cssnano, ensuring consistent styling while supporting different browser capabilities. This enables a gradual migration path between legacy and modern UI styling without breaking existing consumers. Close https://github.com/shaka-project/shaka-player/issues/10145
121 lines
3.6 KiB
Plaintext
121 lines
3.6 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.
|
|
*/
|
|
|
|
/* .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;
|
|
|
|
& > .shaka-tooltip,
|
|
& > .shaka-tooltip-status {
|
|
position: relative;
|
|
|
|
/* The :after pseudo-element contains the tooltip */
|
|
&:hover:after,
|
|
&:focus-visible:after,
|
|
&:active:after {
|
|
content: attr(aria-label);
|
|
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
font-size: var(--shaka-font-size);
|
|
|
|
/* Styling */
|
|
background: var(--shaka-bg);
|
|
color: var(--shaka-font-color);
|
|
border-radius: 2px;
|
|
padding: 2px 10px;
|
|
|
|
/* Positioning */
|
|
position: absolute;
|
|
bottom: calc(var(--shaka-icon-size) + 14px);
|
|
|
|
/* Left attribute is set to half of the width of the parent button */
|
|
left: calc(var(--shaka-icon-size) / 2);
|
|
|
|
/* The tooltip is also translated 50% to appear centered */
|
|
transform: translateX(-50%);
|
|
|
|
@media (prefers-reduced-transparency) {
|
|
background-color: var(--shaka-bg-90);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If the seekbar is missing, this is positioned lower.
|
|
&.shaka-tooltips-bottom {
|
|
& > .shaka-tooltip {
|
|
&:hover:after,
|
|
&:focus-visible:after,
|
|
&:active:after {
|
|
bottom: calc(var(--shaka-icon-size) / 2 * -1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// If the seekbar is missing, this is positioned lower.
|
|
&.shaka-tooltips-low-position {
|
|
& > .shaka-tooltip {
|
|
&:hover:after,
|
|
&:focus-visible:after,
|
|
&:active:after {
|
|
bottom: var(--shaka-icon-size);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
transform: 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: var(--shaka-icon-size);
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
}
|