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