Work on Audio UI
This commit is contained in:
Sam
parent
d41249bd90
commit
e26694c322
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/sprite.svg
vendored
2
dist/sprite.svg
vendored
@ -1 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 16 16"><path d="M7 6.4L0 1v14l7-5.4V15l9-7-9-7"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 16 16"><path d="M5 1H2c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM14 1h-3c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="icon-play" viewBox="0 0 16 16"><path d="M13.6 7.2l-10-7C2.9-.3 2 .2 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 16 16"><path d="M9 1L0 8l9 7V9.6l7 5.4V1L9 6.4"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol><symbol id="ui-16px-1_settings-gear-65" viewBox="0 0 16 16"><path d="M15.135 6.784c-1.303-.326-1.92-1.818-1.23-2.97.322-.535.225-.997-.094-1.315l-.31-.31c-.317-.32-.78-.416-1.315-.095-1.152.69-2.644.073-2.97-1.23C9.066.258 8.67 0 8.22 0h-.44c-.45 0-.844.258-.996.865-.326 1.303-1.818 1.92-2.97 1.23-.535-.322-.998-.225-1.316.093l-.31.31c-.318.318-.415.78-.093 1.317.69 1.152.073 2.644-1.23 2.97C.26 6.934 0 7.33 0 7.78v.44c0 .45.258.844.865.996 1.303.326 1.92 1.818 1.23 2.97-.322.535-.225.997.094 1.315l.31.31c.318.32.78.416 1.315.095 1.152-.69 2.644-.073 2.97 1.23.15.607.546.865.996.865h.44c.45 0 .844-.258.996-.865.326-1.303 1.818-1.92 2.97-1.23.534.32.996.225 1.315-.094l.31-.31c.32-.317.416-.78.095-1.315-.69-1.152-.073-2.644 1.23-2.97.607-.15.865-.546.865-.996v-.44c0-.45-.26-.845-.865-.996zM8 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></symbol><symbol id="ui-16px-2_enlarge-57" viewBox="0 0 16 16"><path d="M2 2h4V0H0v6h2M10 2h4v4h2V0h-6M14 14h-4v2h6v-6h-2M6 14H2v-4H0v6h6M4 6h8v4H4z"/></symbol></svg>
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 16 16"><path d="M7 6.4L0 1v14l7-5.4V15l9-7-9-7"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 16 16"><path d="M5 1H2c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM14 1h-3c-.6 0-1 .4-1 1v12c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1z"/></symbol><symbol id="icon-play" viewBox="0 0 16 16"><path d="M13.6 7.2l-10-7C2.9-.3 2 .2 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 16 16"><path d="M9 1L0 8l9 7V9.6l7 5.4V1L9 6.4"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
|
||||
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 3.6 KiB |
@ -1317,6 +1317,12 @@
|
||||
// Add type class
|
||||
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
|
||||
|
||||
// Add video class for embeds
|
||||
// This will require changes if audio embeds are added
|
||||
if (_inArray(config.types.embed, plyr.type)) {
|
||||
_toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
|
||||
}
|
||||
|
||||
// If there's no autoplay attribute, assume the video is stopped and add state class
|
||||
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
|
||||
|
||||
@ -2176,7 +2182,7 @@
|
||||
|
||||
// Show the player controls in fullscreen mode
|
||||
function _toggleControls(toggle) {
|
||||
if (!config.hideControls) {
|
||||
if (!config.hideControls || plyr.type === 'audio') {
|
||||
return;
|
||||
}
|
||||
var delay = false,
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
// -------------------------------
|
||||
|
||||
// Colors
|
||||
@plyr-color-main: #3498DB;
|
||||
@plyr-color-main: #63B4E1;
|
||||
|
||||
// Font sizes
|
||||
@plyr-font-size-small: 14px;
|
||||
@ -19,29 +19,32 @@
|
||||
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
|
||||
|
||||
// Controls
|
||||
@plyr-controls-bg: #000;
|
||||
@plyr-control-color: #fff;
|
||||
@plyr-control-color-hover: #fff;
|
||||
// #C6D6DB
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-control-bg-hover: @plyr-color-main;
|
||||
//.contrast-control-color(@plyr-controls-bg);
|
||||
//.contrast-control-color-hover(@plyr-control-bg-hover);
|
||||
@plyr-video-controls-bg: #000;
|
||||
@plyr-video-control-color: #fff;
|
||||
@plyr-video-control-color-hover: #fff;
|
||||
@plyr-video-control-bg-hover: @plyr-color-main;
|
||||
@plyr-audio-controls-bg: transparent;
|
||||
@plyr-audio-control-color: #565D64;
|
||||
@plyr-audio-control-color-hover: #fff;
|
||||
@plyr-audio-control-bg-hover: @plyr-color-main;
|
||||
|
||||
// Tooltips
|
||||
@plyr-tooltip-bg: @plyr-controls-bg;
|
||||
@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
|
||||
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
|
||||
@plyr-tooltip-bg: @plyr-video-controls-bg;
|
||||
@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%);
|
||||
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%);
|
||||
@plyr-tooltip-border-width: 1px;
|
||||
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
|
||||
@plyr-tooltip-color: @plyr-control-color;
|
||||
@plyr-tooltip-color: @plyr-video-control-color;
|
||||
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
|
||||
@plyr-tooltip-arrow-size: 4px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
|
||||
// Progress
|
||||
@plyr-progress-bg: fade(@plyr-control-color, 25%);
|
||||
@plyr-progress-bg: fade(@plyr-video-control-color, 25%);
|
||||
@plyr-progress-playing-bg: @plyr-color-main;
|
||||
@plyr-progress-buffered-bg: fade(@plyr-control-color, 25%);
|
||||
@plyr-progress-buffered-bg: fade(@plyr-video-control-color, 25%);
|
||||
@plyr-progress-loading-size: 25px;
|
||||
@plyr-progress-loading-bg: fade(#000, 15%);
|
||||
|
||||
@ -53,8 +56,8 @@
|
||||
@range-thumb-bg: #fff;
|
||||
@range-thumb-border: 2px solid transparent;
|
||||
@range-thumb-active-border-color: #fff;
|
||||
@range-thumb-active-bg: @plyr-control-bg-hover;
|
||||
@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%);
|
||||
@range-thumb-active-bg: @plyr-video-control-bg-hover;
|
||||
@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
|
||||
|
||||
// Breakpoints
|
||||
@plyr-bp-control-split: 560px; // When controls split into left/right
|
||||
@ -68,20 +71,6 @@
|
||||
|
||||
// Mixins
|
||||
// -------------------------------
|
||||
// Contrast
|
||||
/*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
|
||||
@plyr-control-color: @plyr-gray-light;
|
||||
}
|
||||
.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
|
||||
@plyr-control-color: @plyr-gray-lighter;
|
||||
}
|
||||
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
|
||||
@plyr-control-color-hover: @plyr-gray;
|
||||
}
|
||||
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
|
||||
@plyr-control-color-hover: #fff;
|
||||
}*/
|
||||
|
||||
// <input type="range"> styling
|
||||
.range-track() {
|
||||
height: @range-track-height;
|
||||
@ -205,7 +194,7 @@
|
||||
border: 0;
|
||||
}
|
||||
&.tab-focus:focus {
|
||||
outline: 1px dotted fade(@plyr-control-color, 50%);
|
||||
outline: 1px dotted fade(@plyr-video-control-color, 50%);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@ -267,7 +256,7 @@
|
||||
}
|
||||
}
|
||||
// To allow mouse events to be captured if full support
|
||||
.plyr.plyr__video-embed iframe {
|
||||
.plyr .plyr__video-embed iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -319,17 +308,8 @@
|
||||
|
||||
// Playback controls
|
||||
.plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
|
||||
|
||||
background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 50%));
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
@ -337,15 +317,17 @@
|
||||
// Spacing
|
||||
> button,
|
||||
.plyr__progress,
|
||||
.plyr__time,
|
||||
.plyr__volume[type="range"] {
|
||||
.plyr__time {
|
||||
margin-left: @plyr-control-spacing;
|
||||
|
||||
&::first-child {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
[data-plyr="mute"] {
|
||||
.plyr__volume[type="range"] {
|
||||
margin-left: (@plyr-control-spacing / 2);
|
||||
}
|
||||
[data-plyr="pause"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -360,8 +342,8 @@
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: @plyr-control-color;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
@ -370,12 +352,6 @@
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
// Hover and tab focus
|
||||
&.tab-focus:focus,
|
||||
&:hover {
|
||||
background: @plyr-control-bg-hover;
|
||||
color: @plyr-control-color-hover;
|
||||
}
|
||||
// Default focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
@ -390,6 +366,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Video controls
|
||||
.plyr--video .plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: (@plyr-control-spacing * 5) (@plyr-control-spacing * 1.5) @plyr-control-spacing;
|
||||
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: @plyr-video-control-color;
|
||||
|
||||
button {
|
||||
// Hover and tab focus
|
||||
&.tab-focus:focus,
|
||||
&:hover {
|
||||
background: @plyr-video-control-bg-hover;
|
||||
color: @plyr-video-control-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plyr--audio .plyr__controls {
|
||||
padding: @plyr-control-spacing;
|
||||
border-radius: inherit;
|
||||
background: @plyr-audio-controls-bg;
|
||||
color: @plyr-audio-control-color;
|
||||
|
||||
button {
|
||||
// Hover and tab focus
|
||||
&.tab-focus:focus,
|
||||
&:hover {
|
||||
background: @plyr-audio-control-bg-hover;
|
||||
color: @plyr-audio-control-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large play button
|
||||
.plyr__play-large {
|
||||
position: absolute;
|
||||
@ -397,10 +410,10 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: @plyr-control-spacing;
|
||||
background: @plyr-control-bg-hover;
|
||||
border: 4px solid @plyr-control-color;
|
||||
background: @plyr-video-control-bg-hover;
|
||||
border: 4px solid @plyr-video-control-color;
|
||||
border-radius: 100%;
|
||||
color: @plyr-control-color;
|
||||
color: @plyr-video-control-color;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
@ -412,9 +425,12 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 1px dotted fade(@plyr-control-color, 50%);
|
||||
outline: 1px dotted fade(@plyr-video-control-color, 50%);
|
||||
}
|
||||
}
|
||||
.plyr--audio .plyr__play-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// States
|
||||
.plyr__controls [data-plyr='pause'],
|
||||
@ -572,13 +588,11 @@
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
min-width: @range-track-height;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
min-width: @range-track-height;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
@ -627,7 +641,6 @@
|
||||
.plyr__time {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: @plyr-control-color;
|
||||
font-size: @plyr-font-size-small;
|
||||
line-height: .95;
|
||||
}
|
||||
@ -668,18 +681,6 @@
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Audio
|
||||
// --------------------------------------------------------------
|
||||
// Position the progress within the container
|
||||
.plyr--audio .plyr__controls {
|
||||
padding-top: (@plyr-control-spacing * 2);
|
||||
}
|
||||
.plyr--audio .plyr__progress {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
// --------------------------------------------------------------
|
||||
.plyr--fullscreen,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user