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

Controls cleanup, work on captions bug, click to invert time

Browse Source
This commit is contained in:
Sam Potts
2017-11-18 19:30:26 +11:00
parent d7a1c44281
commit 6984d6fb16
32 changed files with 360 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/less/base.less
View File

@ -12,6 +12,7 @@
line-height: @plyr-line-height;
direction: ltr;
text-shadow: none;
transition: box-shadow 0.3s ease;
.plyr-font-smoothing(off);
// Media elements
@ -22,6 +23,11 @@
vertical-align: middle;
border-radius: inherit;
}
&:focus {
outline: 0;
box-shadow: 0 0 0 3px fade(#000, 10%);
}
}
// Full UI only

1
src/less/bundle.less
View File

@ -26,4 +26,5 @@
@import 'states/fullscreen';
@import 'utils/animation';
@import 'utils/hidden';

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

@ -3,11 +3,11 @@
// --------------------------------------------------------------
.plyr__badge {
padding: 0 4px;
padding: 3px 4px;
border-radius: 2px;
background: @plyr-menu-color;
color: @plyr-menu-bg;
font-size: @plyr-font-size-tiny;
line-height: 1.5;
line-height: 1;
.plyr-font-smoothing(on);
}

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

@ -57,9 +57,9 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: ceil(@plyr-control-spacing * 1.25);
padding: ceil(@plyr-control-spacing * 1.5);
background: fade(@plyr-video-control-bg-hover, 80%);
border: 3px solid currentColor;
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color;
@ -81,7 +81,12 @@
}
&:focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
outline: 0;
}
&.plyr__tab-focus {
outline: 0;
box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
}
}

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

@ -129,11 +129,45 @@
}
label.plyr__control {
padding-left: ceil(@plyr-control-padding * 2.5);
padding-left: @plyr-control-padding;
input[type='radio'] {
/*input[type='radio'] {
position: relative;
left: -@plyr-control-padding;
}*/
input[type='radio'] + span {
position: relative;
display: block;
height: 14px;
width: 14px;
border-radius: 100%;
background: fade(#000, 10%);
margin-right: @plyr-control-spacing;
box-shadow: inset 0 1px 1px fade(#000, 15%);
&::after {
content: '';
position: absolute;
height: 6px;
width: 6px;
top: 4px;
left: 4px;
transform: scale(0);
opacity: 0;
background: #fff;
border-radius: 100%;
transition: transform 0.3s ease, opacity 0.3s ease;
}
}
input[type='radio']:checked + span {
background: @plyr-color-main;
&::after {
transform: scale(1);
opacity: 1;
}
}
}

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

@ -12,6 +12,8 @@
cursor: pointer;
border: none;
background: transparent;
transition: box-shadow 0.3s ease;
border-radius: (@plyr-range-thumb-height * 2);
// Used in JS to populate lower fill for WebKit
color: @plyr-range-selected-bg;
@ -79,10 +81,6 @@
border: 0;
}
&.plyr__tab-focus {
outline-offset: 3px;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@ -114,7 +112,7 @@
}
&.plyr__tab-focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
}
}
@ -133,6 +131,6 @@
}
&.plyr__tab-focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%);
}
}

7
src/less/utils/animation.less Normal file
View File

@ -0,0 +1,7 @@
// --------------------------------------------------------------
// Animation utils
// --------------------------------------------------------------
.plyr--no-transition {
transition: none !important;
}