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

Reverted LESS structure for now

Browse Source
This commit is contained in:
Sam Potts
2016-05-19 11:31:27 +10:00
parent e0ef7482c6
commit 126f80ed78
9 changed files with 740 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/scss/plyr.scss
View File

@ -215,7 +215,7 @@
padding: ($plyr-control-spacing * 2);
transform: translateY(-($plyr-control-spacing * 6));
transition: transform .3s ease;
color: #fff;
color: $plyr-captions-color;
font-size: $plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
@ -223,7 +223,7 @@
span {
border-radius: 2px;
padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
background: transparentize(#000, .15);
background: $plyr-captions-bg;
}
span:empty {
display: none;
@ -277,8 +277,9 @@
position: relative;
display: inline-block;
flex-shrink: 0;
overflow: visible; // IE11
vertical-align: middle;
padding: ($plyr-control-spacing / 2);
padding: ($plyr-control-spacing * .7);
border: 0;
background: transparent;
border-radius: 3px;
@ -312,9 +313,6 @@
.plyr__time {
margin-left: $plyr-control-spacing;
}
button {
padding: ($plyr-control-spacing / 2) $plyr-control-spacing;
}
}
}
// Hide controls
@ -342,11 +340,6 @@
color: $plyr-video-control-color-hover;
}
}
@media (min-width: $plyr-bp-screen-sm) {
padding-left: ($plyr-control-spacing * 1.5);
padding-right: ($plyr-control-spacing * 1.5);
}
}
// Audio controls
@ -370,6 +363,7 @@
// Large play button (video only)
.plyr__play-large {
display: none;
position: absolute;
top: 50%;
left: 50%;
@ -395,6 +389,9 @@
outline: 1px dotted transparentize($plyr-video-control-color, .5);
}
}
.plyr .plyr__play-large {
display: inline-block;
}
.plyr--audio .plyr__play-large {
display: none;
}
@ -445,7 +442,6 @@
opacity: 0;
background: $plyr-tooltip-bg;
box-shadow: $plyr-tooltip-shadow;
border-radius: $plyr-tooltip-radius;
color: $plyr-tooltip-color;
@ -487,8 +483,8 @@
// --------------------------------------------------------------
// <progress> element
.plyr__progress {
display: none;
position: relative;
display: inline-block;
flex: 1;
input[type="range"] {
@ -511,6 +507,9 @@
left: 0;
}
}
.plyr .plyr__progress {
display: inline-block;
}
.plyr__progress--buffer,
.plyr__progress--played,
@ -556,12 +555,14 @@
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transition: none;
}
&::-moz-progress-bar {
min-width: $plyr-range-track-height;
max-width: 99%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transition: none;
}
&::-ms-fill {
display: none;
@ -641,8 +642,10 @@
// Volume
// --------------------------------------------------------------
.plyr .plyr__volume {
.plyr__volume {
display: none;
}
.plyr .plyr__volume {
flex: 1;
position: relative;
@ -695,4 +698,11 @@
left: 0;
right: 0;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
top: 50%;
transform: translateY(-50%);
}
}

12
src/scss/variables.scss
View File

@ -17,7 +17,9 @@ $plyr-font-size-small: 14px !default;
$plyr-font-size-base: 16px !default;
// Captions
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
$plyr-captions-bg: transparentize(#000, .3) !default;
$plyr-captions-color: #fff !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
@ -35,12 +37,8 @@ $plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main;
// Tooltips
$plyr-tooltip-bg: $plyr-video-controls-bg !default;
$plyr-tooltip-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .9) !default;
$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-video-controls-bg, 75%), .8) !default;
$plyr-tooltip-border-width: 1px !default;
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color !default;
$plyr-tooltip-color: $plyr-video-control-color !default;
$plyr-tooltip-bg: transparentize(#000, .3) !default;
$plyr-tooltip-color: #fff !default;
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
$plyr-tooltip-arrow-size: 4px !default;
$plyr-tooltip-radius: 3px !default;