ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP on docs example

Browse Source
This commit is contained in:
Sam Potts 2017-11-20 21:23:49 +11:00
parent 2d4a166218
commit da1e987444
27 changed files with 121 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/error.css vendored
View File

File diff suppressed because one or more lines are too long

15
demo/index.html
View File

@ -33,16 +33,15 @@
<link rel="stylesheet" href="dist/demo.css"> <link rel="stylesheet" href="dist/demo.css">
<!-- Preload --> <!-- Preload -->
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2"> <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2"> <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3">
</head> </head>
<body> <body>
<div class="grid"> <div class="grid">
<header> <header>
<h1>Plyr</h1> <h1>Plyr</h1>
<p>A simple, accessible <p>A simple, accessible and customisable media player for
<button type="button" class="faux-link" data-source="video"> <button type="button" class="faux-link" data-source="video">
<svg class="icon" title="HTML5"> <svg class="icon" title="HTML5">
<path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path> <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
@ -62,7 +61,7 @@
<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4 C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path> c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
</svg>Vimeo</button> media player. </svg>Vimeo</button>
</p> </p>
<span class="action"> <span class="action">
@ -84,7 +83,7 @@
<main> <main>
<video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> <video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files --> <!-- Video files -->
<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> <!--<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">-->
<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4"> <source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">
<!-- Text track file --> <!-- Text track file -->
@ -114,7 +113,7 @@
</li> </li>
<li class="plyr__cite plyr__cite--youtube" hidden> <li class="plyr__cite plyr__cite--youtube" hidden>
<small> <small>
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
<span class="color--youtube"> <span class="color--youtube">
<svg class="icon" title="YouTube"> <svg class="icon" title="YouTube">
<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8 <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
@ -126,7 +125,7 @@
</li> </li>
<li class="plyr__cite plyr__cite--vimeo" hidden> <li class="plyr__cite plyr__cite--vimeo" hidden>
<small> <small>
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
<span class="color--vimeo"> <span class="color--vimeo">
<svg class="icon" title="Vimeo"> <svg class="icon" title="Vimeo">
<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5 <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5

5
demo/src/less/components/buttons.less
View File

@ -14,10 +14,9 @@
box-shadow: 0 1px 1px fade(#000, 10%); box-shadow: 0 1px 1px fade(#000, 10%);
background: #fff; background: #fff;
border: 0; border: 0;
color: @gray;
user-select: none; user-select: none;
font-weight: @font-weight-bold;
text-shadow: none; text-shadow: none;
color: @gray;
} }
// Buttons // Buttons
@ -25,6 +24,7 @@
padding-left: @spacing-base; padding-left: @spacing-base;
padding-right: @spacing-base; padding-right: @spacing-base;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: @font-weight-bold;
&:hover, &:hover,
&:focus { &:focus {
@ -45,6 +45,7 @@
.button__count { .button__count {
margin-left: (@spacing-base / 2); margin-left: (@spacing-base / 2);
animation: fadein 0.2s ease; animation: fadein 0.2s ease;
font-weight: @font-weight-medium;
&::before { &::before {
content: ''; content: '';

1
demo/src/less/components/header.less
View File

@ -8,7 +8,6 @@ header {
p { p {
margin-bottom: (@spacing-base * 1.5); margin-bottom: (@spacing-base * 1.5);
.font-size(@font-size-large);
} }
.action { .action {

4
demo/src/less/components/icons.less
View File

@ -7,7 +7,7 @@
fill: currentColor; fill: currentColor;
width: @icon-size; width: @icon-size;
height: @icon-size; height: @icon-size;
vertical-align: -0.15em; vertical-align: -3px;
} }
// Within elements // Within elements
@ -19,5 +19,5 @@ label svg {
a .icon, a .icon,
.btn .icon { .btn .icon {
margin-right: (@spacing-base / 4); margin-right: floor(@spacing-base / 3);
} }

2
demo/src/less/components/players.less
View File

@ -33,7 +33,7 @@ video {
margin-top: @spacing-base; margin-top: @spacing-base;
.icon { .icon {
margin-right: (@spacing-base / 4); margin-right: ceil(@spacing-base / 6);
} }
} }

40
demo/src/less/lib/fontface.less
View File

@ -3,28 +3,46 @@
// ========================================================================== // ==========================================================================
@font-face { @font-face {
font-family: 'Avenir'; font-family: 'Gordita';
src: local('Avenir-Medium'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'), src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff'); url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff2');
font-weight: @font-weight-light;
font-style: normal; font-style: normal;
font-weight: @font-weight-base;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Avenir'; font-family: 'Gordita';
src: local('Avenir-Heavy'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'), src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff'); url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff2');
font-weight: @font-weight-regular;
font-style: normal; font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff2');
font-weight: @font-weight-medium;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Gordita';
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff2');
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'Avenir'; font-family: 'Gordita';
src: local('Avenir-Black'), url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'), src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff'); url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff2');
font-weight: @font-weight-black;
font-style: normal; font-style: normal;
font-weight: @font-weight-heavy;
font-display: swap; font-display: swap;
} }

16
demo/src/less/settings/type.less
View File

@ -2,17 +2,19 @@
// Typography // Typography
// ========================================================================== // ==========================================================================
@font-sans-serif: 'Avenir', 'Helvetica Neue', sans-serif; @font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
@font-size-base: 16; @font-size-base: 15;
@font-size-small: 14; @font-size-small: 13;
@font-size-large: 18; @font-size-large: 18;
@font-size-h1: 64; @font-size-h1: 64;
@font-weight-base: 500; @font-weight-light: 300;
@font-weight-bold: 700; @font-weight-regular: 400;
@font-weight-heavy: 900; @font-weight-medium: 500;
@font-weight-bold: 600;
@font-weight-black: 900;
@line-height-base: 1.5; @line-height-base: 1.75;
@letter-spacing-headings: -0.025em; @letter-spacing-headings: -0.025em;

3
demo/src/less/type/base.less
View File

@ -11,9 +11,10 @@ body {
font-family: @font-sans-serif; font-family: @font-sans-serif;
line-height: @line-height-base; line-height: @line-height-base;
color: @color-text; color: @color-text;
font-weight: @font-weight-base; font-weight: @font-weight-medium;
text-shadow: 0 1px 1px fade(#000, 15%); text-shadow: 0 1px 1px fade(#000, 15%);
.font-smoothing(); .font-smoothing();
.font-size(@font-size-base);
} }
button, button,

2
demo/src/less/type/headings.less
View File

@ -4,7 +4,7 @@
h1 { h1 {
margin: 0 0 (@spacing-base / 2); margin: 0 0 (@spacing-base / 2);
font-weight: @font-weight-heavy; font-weight: @font-weight-bold;
letter-spacing: @letter-spacing-headings; letter-spacing: @letter-spacing-headings;
.font-size(@font-size-h1); .font-size(@font-size-h1);
} }

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/js/ui.js
View File

@ -144,7 +144,7 @@ const ui = {
utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused); utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
this.toggleControls(!this.playing); this.toggleControls(!this.playing);
}, 10); }, 100);
}, },
// Check if media is loading // Check if media is loading

4
src/js/utils.js
View File

@ -41,7 +41,9 @@ const utils = {
return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
}, },
track(input) { track(input) {
return this.instanceof(input, window.TextTrack) || this.string(input.kind); return (
this.instanceof(input, window.TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind))
);
}, },
nullOrUndefined(input) { nullOrUndefined(input) {
return input === null || typeof input === 'undefined'; return input === null || typeof input === 'undefined';

7
src/less/base.less
View File

@ -8,12 +8,12 @@
max-width: 100%; max-width: 100%;
min-width: 200px; min-width: 200px;
font-family: @plyr-font-family; font-family: @plyr-font-family;
font-weight: @plyr-font-weight-normal; font-weight: @plyr-font-weight-regular;
line-height: @plyr-line-height; line-height: @plyr-line-height;
direction: ltr; direction: ltr;
text-shadow: none; text-shadow: none;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
.plyr-font-smoothing(off); .plyr-font-smoothing(@plyr-font-smoothing);
// Media elements // Media elements
video, video,
@ -25,8 +25,7 @@
} }
&:focus { &:focus {
outline: 0; .plyr-tab-focus();
box-shadow: 0 0 0 3px fade(#000, 10%);
} }
} }

3
src/less/components/badges.less
View File

@ -7,7 +7,6 @@
border-radius: 2px; border-radius: 2px;
background: @plyr-menu-color; background: @plyr-menu-color;
color: @plyr-menu-bg; color: @plyr-menu-bg;
font-size: @plyr-font-size-tiny; font-size: @plyr-font-size-micro;
line-height: 1; line-height: 1;
.plyr-font-smoothing(on);
} }

10
src/less/components/buttons.less
View File

@ -9,7 +9,7 @@
background: transparent; background: transparent;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; transition: all 0.3s ease;
color: inherit; color: inherit;
svg { svg {
@ -29,6 +29,11 @@
&:focus { &:focus {
outline: 0; outline: 0;
} }
// Tab focus
&.plyr__tab-focus {
.plyr-tab-focus();
}
} }
// Change icons on state change // Change icons on state change
@ -85,8 +90,7 @@
} }
&.plyr__tab-focus { &.plyr__tab-focus {
outline: 0; .plyr-tab-focus();
box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
} }
} }

1
src/less/components/captions.less
View File

@ -19,7 +19,6 @@
color: @plyr-captions-color; color: @plyr-captions-color;
font-size: @plyr-font-size-captions-small; font-size: @plyr-font-size-captions-small;
text-align: center; text-align: center;
.plyr-font-smoothing(on);
span { span {
border-radius: 2px; border-radius: 2px;

14
src/less/components/menus.less
View File

@ -34,7 +34,7 @@
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
color: @plyr-menu-color; color: @plyr-menu-color;
font-size: @plyr-font-size-small; font-size: @plyr-font-size-base;
> div { > div {
overflow: hidden; overflow: hidden;
@ -67,7 +67,6 @@
width: 100%; width: 100%;
padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2); padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
color: @plyr-menu-color; color: @plyr-menu-color;
font-weight: @plyr-font-weight-bold;
user-select: none; user-select: none;
&::after { &::after {
@ -101,7 +100,7 @@
margin: @plyr-control-padding; margin: @plyr-control-padding;
margin-bottom: floor(@plyr-control-padding / 2); margin-bottom: floor(@plyr-control-padding / 2);
padding-left: ceil(@plyr-control-padding * 4); padding-left: ceil(@plyr-control-padding * 4);
font-weight: @plyr-font-weight-normal; font-weight: @plyr-font-weight-regular;
&::after { &::after {
left: @plyr-control-padding; left: @plyr-control-padding;
@ -166,6 +165,10 @@
} }
} }
input[type='radio']:focus + span {
.plyr-tab-focus();
}
&.plyr__tab-focus input[type='radio'] + span, &.plyr__tab-focus input[type='radio'] + span,
&:hover input[type='radio'] + span { &:hover input[type='radio'] + span {
background: fade(#000, 10%); background: fade(#000, 10%);
@ -181,11 +184,6 @@
padding-left: ceil(@plyr-control-padding * 3.5); padding-left: ceil(@plyr-control-padding * 3.5);
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
font-weight: @plyr-font-weight-normal;
.plyr__badge {
font-weight: @plyr-font-weight-bold;
}
} }
} }
} }

1
src/less/components/progress.less
View File

@ -15,6 +15,7 @@
// Seek tooltip to show time // Seek tooltip to show time
.plyr__tooltip { .plyr__tooltip {
left: 0; left: 0;
font-size: @plyr-font-size-time;
} }
} }

22
src/less/components/sliders.less
View File

@ -81,6 +81,20 @@
border: 0; border: 0;
} }
&.plyr__tab-focus {
&::-webkit-slider-runnable-track {
.plyr-tab-focus();
}
&::-moz-range-track {
.plyr-tab-focus();
}
&::-ms-track {
.plyr-tab-focus();
}
}
// Pressed styles // Pressed styles
&:active { &:active {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@ -110,10 +124,6 @@
&::-ms-track { &::-ms-track {
background: @plyr-video-range-track-bg; background: @plyr-video-range-track-bg;
} }
&.plyr__tab-focus {
box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
}
} }
// Audio range inputs // Audio range inputs
@ -129,8 +139,4 @@
&::-ms-track { &::-ms-track {
background: @plyr-audio-range-track-bg; background: @plyr-audio-range-track-bg;
} }
&.plyr__tab-focus {
box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%);
}
} }

2
src/less/components/times.less
View File

@ -5,7 +5,7 @@
.plyr__time { .plyr__time {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
font-size: @plyr-font-size-small; font-size: @plyr-font-size-time;
} }
// Media duration hidden on small screens // Media duration hidden on small screens

2
src/less/components/tooltips.less
View File

@ -15,7 +15,7 @@
box-shadow: @plyr-tooltip-shadow; box-shadow: @plyr-tooltip-shadow;
color: @plyr-tooltip-color; color: @plyr-tooltip-color;
font-size: @plyr-font-size-small; font-size: @plyr-font-size-small;
font-weight: @plyr-font-weight-normal; font-weight: @plyr-font-weight-regular;
line-height: 1.3; line-height: 1.3;
transform: translate(-50%, 10px) scale(0.8); transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%; transform-origin: 50% 100%;

11
src/less/lib/mixins.less
View File

@ -3,6 +3,13 @@
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// ========================================================================== // ==========================================================================
// Nicer focus styles
// ---------------------------------------
.plyr-tab-focus(@color: @plyr-tab-focus-default-color) {
outline: 0;
box-shadow: 0 0 0 3px fade(@color, 35%);
}
// Font smoothing // Font smoothing
// --------------------------------------- // ---------------------------------------
.plyr-font-smoothing(@mode: on) when(@mode = on) { .plyr-font-smoothing(@mode: on) when(@mode = on) {
@ -15,12 +22,14 @@
} }
// <input type="range"> styling // <input type="range"> styling
// ---------------------------------------
.plyr-range-track() { .plyr-range-track() {
height: @plyr-range-track-height; height: @plyr-range-track-height;
background: transparent; background: transparent;
border: 0; border: 0;
border-radius: (@plyr-range-track-height / 2); border-radius: (@plyr-range-track-height / 2);
user-select: none; user-select: none;
transition: all 0.3s ease;
} }
.plyr-range-thumb() { .plyr-range-thumb() {
@ -42,9 +51,11 @@
} }
// Fullscreen styles // Fullscreen styles
// ---------------------------------------
.plyr-fullscreen-active() { .plyr-fullscreen-active() {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0;
background: #000; background: #000;
border-radius: 0 !important; border-radius: 0 !important;

20
src/less/settings.less
View File

@ -12,21 +12,26 @@
@plyr-color-main: #1aafff; @plyr-color-main: #1aafff;
// Font // Font
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; @plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-base: 16px; @plyr-font-size-base: 13px;
@plyr-font-size-small: 14px; @plyr-font-size-small: 12px;
@plyr-font-size-tiny: 10px; @plyr-font-size-tiny: 11px;
@plyr-font-weight-normal: 500; @plyr-font-size-micro: 9px;
@plyr-font-weight-regular: 500;
@plyr-font-weight-bold: 600; @plyr-font-weight-bold: 600;
@plyr-line-height: 1.7; @plyr-line-height: 1.7;
@plyr-font-smoothing: on;
// Focus
@plyr-tab-focus-default-color: @plyr-color-main;
// Captions // Captions
@plyr-captions-bg: fade(#000, 80%); @plyr-captions-bg: fade(#000, 80%);
@plyr-captions-color: #fff; @plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base; @plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-small: @plyr-font-size-small; @plyr-font-size-captions-small: @plyr-font-size-small;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.25); @plyr-font-size-captions-medium: 18px;
@plyr-font-size-captions-large: (@plyr-font-size-base * 1.5); @plyr-font-size-captions-large: 21px;
// Controls // Controls
@plyr-control-icon-size: 18px; @plyr-control-icon-size: 18px;
@ -41,6 +46,7 @@
@plyr-audio-control-color: #565d64; @plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff; @plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main; @plyr-audio-control-bg-hover: @plyr-color-main;
@plyr-font-size-time: @plyr-font-size-tiny;
// Tooltips // Tooltips
@plyr-tooltip-bg: fade(#fff, 90%); @plyr-tooltip-bg: fade(#fff, 90%);