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

Sass updated

Browse Source
This commit is contained in:
Sam Potts 2015-10-05 16:38:02 +11:00
parent b164a2f3fb
commit 58f8cdd8c8
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/less/plyr.less
View File

@ -227,7 +227,7 @@
font-size: @font-size-captions-large;
}
// Plyr controls
// Playback controls
&-controls {
.clearfix();
.font-smoothing();

56
src/sass/plyr.scss
View File

@ -148,7 +148,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
// Styles
// -------------------------------
// Base
.player {
.plyr {
position: relative;
max-width: 100%;
min-width: 290px;
@ -230,7 +230,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
font-size: $font-size-captions-large;
}
// Player controls
// Playback controls
&-controls {
@include clearfix();
@include font-smoothing();
@ -298,7 +298,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
}
// Time display
.player-time {
.plyr-time {
display: inline-block;
vertical-align: middle;
margin-left: $control-spacing;
@ -309,7 +309,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
}
// Media duration hidden on small screens
.player-time + .player-time {
.plyr-time + .plyr-time {
display: none;
@media (min-width: $bp-control-split) {
@ -359,16 +359,16 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
border-color: $controls-bg transparent transparent;
}
}
button:hover .player-tooltip,
button:focus .player-tooltip {
button:hover .plyr-tooltip,
button:focus .plyr-tooltip {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
button:hover .player-tooltip {
button:hover .plyr-tooltip {
z-index: 3;
}
// Player progress
// Playback progress
// <progress> element
&-progress {
position: absolute;
@ -467,7 +467,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
}
// Loading state
&.loading .player-progress-buffer {
&.loading .plyr-progress-buffer {
animation: progress 1s linear infinite;
background-size: $progress-loading-size $progress-loading-size;
background-repeat: repeat-x;
@ -485,11 +485,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
}
// States
&-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] {
&-controls [data-plyr='pause'],
&.playing .plyr-controls [data-plyr='play'] {
display: none;
}
&.playing .player-controls [data-player='pause'] {
&.playing .plyr-controls [data-plyr='pause'] {
display: inline-block;
}
@ -561,7 +561,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
&.ios [data-plyr='mute'],
&-audio.ios &-controls-right {
display: none;
}
@ -572,10 +572,10 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
// Audio specific styles
// Position the progress within the container
&-audio .player-controls {
&-audio .plyr-controls {
padding-top: ($control-spacing * 2);
}
&-audio .player-progress {
&-audio .plyr-progress {
bottom: auto;
top: 0;
background: $off-white;
@ -597,11 +597,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
video {
height: 100%;
}
.player-video-wrapper {
.plyr-video-wrapper {
height: 100%;
width: 100%;
}
.player-controls {
.plyr-controls {
position: absolute;
bottom: 0;
left: 0;
@ -610,22 +610,22 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing {
.player-controls {
.plyr-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s .2s ease;
}
&.player-hover .player-controls {
&.plyr-hover .plyr-controls {
transform: translateY(0);
}
.player-captions {
.plyr-captions {
bottom: ($control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
.player-captions,
&.fullscreen-hide-controls.playing.player-hover .player-captions {
.plyr-captions,
&.fullscreen-hide-controls.playing.plyr-hover .plyr-captions {
top: auto;
bottom: 90px;
@ -637,8 +637,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
// Change icons on state change
&.fullscreen-active .icon-exit-fullscreen,
&.muted .player-controls .icon-muted,
&.captions-active .player-controls .icon-captions-on {
&.muted .plyr-controls .icon-muted,
&.captions-active .plyr-controls .icon-captions-on {
display: block;
& + svg {
@ -647,12 +647,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
}
// Some options are hidden by default
[data-player='captions'],
[data-player='fullscreen'] {
[data-plyr='captions'],
[data-plyr='fullscreen'] {
display: none;
}
&.captions-enabled [data-player='captions'],
&.fullscreen-enabled [data-player='fullscreen'] {
&.captions-enabled [data-plyr='captions'],
&.fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block;
}
}