diff options
Diffstat (limited to 'src/sass/plyr.scss')
| -rw-r--r-- | src/sass/plyr.scss | 110 |
1 files changed, 68 insertions, 42 deletions
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index de386cd8..7cefca3a 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -44,15 +44,18 @@ $control-color-hover: null !default; // Tooltips $tooltip-bg: $controls-bg !default; +$tooltip-border-color: transparentize(@gray-dark, .1) !default; +$tooltip-border-width: 1px; +$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color; $tooltip-color: $control-color !default; $tooltip-padding: $control-spacing !default; -$tooltip-arrow-size: 5px !default; +$tooltip-arrow-size: 6px !default; $tooltip-radius: 3px !default; // Progress -$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default; +$progress-bg: transparentize($gray, .2) !default; $progress-playing-bg: $blue !default; -$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default; +$progress-buffered-bg: transparentize($gray, .25) !default; $progress-loading-size: 40px !default; $progress-loading-bg: rgba(0,0,0, .15) !default; @@ -70,7 +73,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Animation // --------------------------------------- - @keyframes progress { to { background-position: $progress-loading-size 0; } } @@ -149,7 +151,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Styles // ------------------------------- // Base -.player { +.plyr { position: relative; max-width: 100%; min-width: 290px; @@ -178,6 +180,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger &-video-embed { padding-bottom: 56.25%; /* 16:9 */ height: 0; + overflow: hidden; + background: #000; iframe { position: absolute; @@ -187,6 +191,13 @@ $bp-captions-large: 768px !default; // When captions jump to the larger height: 100%; border: 0; } + + // Vimeo hack + > div { + position: relative; + padding-bottom: 200%; + transform: translateY(-35.95%); + } } // Captions @@ -222,7 +233,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(); @@ -290,7 +301,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; @@ -301,7 +312,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) { @@ -326,41 +337,56 @@ $bp-captions-large: 768px !default; // When captions jump to the larger opacity: 0; background: $tooltip-bg; + box-shadow: $tooltip-shadow; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; line-height: 1.5; font-weight: 600; - transform: translate(-50%, ($tooltip-padding * 3)) scale(0); + transform: translate(-50%, ($tooltip-padding * 3)) scale(.8); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - &::after { + // Arrows + &::after, + &::before { content: ''; - display: block; position: absolute; - left: 50%; - bottom: -$tooltip-arrow-size; - margin-left: -$tooltip-arrow-size; width: 0; height: 0; - transition: inherit; - border-style: solid; - border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size; - border-color: $controls-bg transparent transparent; + top: 100%; + left: 50%; + transform: translateX(-50%); + } + // The border triangle + &::after { + $border-arrow-size: ($tooltip-arrow-size + ($tooltip-border-width * 1)); + bottom: -($border-arrow-size + $tooltip-border-width); + border-right: $border-arrow-size solid transparent; + border-top: $border-arrow-size solid $tooltip-border-color; + border-left: $border-arrow-size solid transparent; + z-index: 1; + } + // The background triangle + &::before { + bottom: -$tooltip-arrow-size; + border-right: $tooltip-arrow-size solid transparent; + border-top: $tooltip-arrow-size solid $tooltip-bg; + border-left: $tooltip-arrow-size solid transparent; + z-index: 2; } } - 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; @@ -459,7 +485,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; @@ -477,11 +503,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; } @@ -553,7 +579,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; } @@ -564,10 +590,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; @@ -589,11 +615,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; @@ -602,22 +628,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; @@ -629,8 +655,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 { @@ -639,12 +665,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; } } |