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

Small tweaks

Browse Source
This commit is contained in:
Sam Potts
2017-07-23 21:13:11 +10:00
parent dfc516baf6
commit 7b60e473fa
11 changed files with 125 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/less/plyr.less
View File

@ -78,14 +78,13 @@
width: 100%;
margin: 0;
padding: 0;
vertical-align: middle;
appearance: none;
cursor: pointer;
border: none;
background: transparent;
// WebKit
-webkit-appearance: none;
&::-webkit-slider-runnable-track {
.plyr-range-track();
}
@ -413,9 +412,9 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: @plyr-control-spacing;
background: @plyr-video-control-bg-hover;
border: 4px solid currentColor;
padding: ceil(@plyr-control-spacing * 1.25);
background: fade(@plyr-video-control-bg-hover, 80%);
border: 3px solid currentColor;
border-radius: 100%;
box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color;
@ -431,6 +430,11 @@
pointer-events: none;
}
&:hover,
&:focus {
background: @plyr-video-control-bg-hover;
}
&:focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
}
@ -759,10 +763,13 @@
margin: -(@plyr-range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
appearance: none;
border: none;
border-radius: 100px;
// WebKit
-webkit-appearance: none;
&::-webkit-progress-bar {
background: transparent;
}
@ -771,11 +778,15 @@
border-radius: 100px;
min-width: @plyr-range-track-height;
}
// Mozilla
&::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: @plyr-range-track-height;
}
// Microsoft
&::-ms-fill {
border-radius: 100px;
}

10
src/less/variables.less
View File

@ -15,11 +15,11 @@
@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-weight-normal: 400;
@plyr-font-weight-normal: 500;
@plyr-font-weight-bold: 600;
// Captions
@plyr-captions-bg: fade(#000, 60%);
@plyr-captions-bg: fade(#343f4a, 80%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@ -29,13 +29,13 @@
@plyr-control-icon-size: 18px;
@plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * .7);
@plyr-video-controls-bg: #000;
@plyr-video-controls-bg: #343f4a;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: #fff;
@plyr-audio-controls-border: 1px solid #dbe3e8;
@plyr-audio-control-color: #565D64;
@plyr-audio-control-color: #565d64;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
@ -56,7 +56,7 @@
@plyr-progress-loading-bg: fade(#343f4a, 20%);
@plyr-video-progress-bg: fade(#fff, 25%);
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
@plyr-audio-progress-bg: fade(#C6D6DB, 66%);
@plyr-audio-progress-bg: fade(#c6d6db, 66%);
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
// Range sliders