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

Linting and minor changes

Browse Source
This commit is contained in:
Sam Potts
2017-10-27 15:06:16 +11:00
parent 71db66d802
commit dd9d5c8898
20 changed files with 8509 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/plyr.js
View File

@ -90,7 +90,7 @@
// Speed default and options to display
speed: {
default: 1,
options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
},
// Keyboard shortcut settings

44
src/less/plyr.less
View File

@ -32,9 +32,11 @@
position: relative;
max-width: 100%;
min-width: 200px;
overflow: hidden;
font-family: @plyr-font-family;
font-weight: @plyr-font-weight-normal;
direction: ltr;
text-shadow: none;
& when(@plyr-border-box = true) {
// border-box everything
@ -320,7 +322,6 @@
.plyr__controls {
display: flex;
align-items: center;
line-height: 1;
text-align: center;
// Spacing
@ -354,11 +355,6 @@
}
}
}
// Hide controls
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
}
// Buttons
.plyr__control {
@ -408,7 +404,7 @@
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
transition: opacity 0.3s ease;
transition: all 0.4s ease-in-out;
.plyr__control {
svg {
@ -424,6 +420,12 @@
}
}
}
// Hide controls
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
// Audio controls
.plyr--audio .plyr__controls {
@ -552,6 +554,7 @@
background: @plyr-menu-bg;
border-radius: 4px;
box-shadow: 0 1px 2px fade(#000, 20%);
white-space: nowrap;
text-align: left;
@ -585,8 +588,9 @@
// Options
.plyr__control {
display: flex;
align-items: center;
width: 100%;
padding: @plyr-control-padding (@plyr-control-padding * 2);
padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
color: @plyr-menu-color;
font-weight: @plyr-font-weight-bold;
user-select: none;
@ -597,6 +601,7 @@
top: 50%;
transform: translateY(-50%);
border: 4px solid transparent;
transition: border-color 0.2s ease;
}
&--forward {
@ -606,6 +611,11 @@
right: 5px;
border-left-color: fade(@plyr-menu-color, 80%);
}
&.tab-focus::after,
&:hover::after {
border-left-color: currentColor;
}
}
&--back {
@ -615,7 +625,7 @@
margin: @plyr-control-padding;
margin-bottom: floor(@plyr-control-padding / 2);
padding-left: ceil(@plyr-control-padding * 4);
font-weight: 500;
font-weight: @plyr-font-weight-normal;
&::after {
left: @plyr-control-padding;
@ -633,6 +643,11 @@
background: fade(#000, 15%);
box-shadow: 0 1px 0 fade(#fff, 10%);
}
&.tab-focus::after,
&:hover::after {
border-right-color: currentColor;
}
}
}
@ -647,13 +662,13 @@
// Option value
.plyr__menu__value {
display: inherit;
display: flex;
align-items: center;
margin-left: auto;
padding-left: ceil(@plyr-control-padding * 3.5);
pointer-events: none;
overflow: hidden;
font-weight: 500;
color: fade(@plyr-menu-color, 80%);
font-weight: @plyr-font-weight-normal;
.plyr__badge {
font-weight: @plyr-font-weight-bold;
@ -665,7 +680,7 @@
// Badge
// --------------------------------------------------------------
.plyr__badge {
padding: 2px 4px;
padding: 1px 4px;
border-radius: 2px;
background: @plyr-menu-color;
color: @plyr-menu-bg;
@ -685,10 +700,11 @@
opacity: 0;
background: @plyr-tooltip-bg;
border-radius: @plyr-tooltip-radius;
box-shadow: 0 1px 2px fade(#000, 10%);
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
font-weight: 500;
font-weight: @plyr-font-weight-normal;
line-height: 1.3;
transform: translate(-50%, 10px) scale(0.8);

9
src/less/variables.less
View File

@ -13,13 +13,14 @@
// Font
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small: 14px;
@plyr-font-size-base: 16px;
@plyr-font-size-small: 14px;
@plyr-font-size-tiny: 10px;
@plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600;
// Captions
@plyr-captions-bg: fade(#343f4a, 80%);
@plyr-captions-bg: fade(#000, 80%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-small: @plyr-font-size-small;
@ -41,8 +42,8 @@
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@plyr-tooltip-bg: fade(#343f4a, 90%);
@plyr-tooltip-color: #fff;
@plyr-tooltip-bg: fade(#fff, 90%);
@plyr-tooltip-color: #565d64;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;