diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 8b4f3ba3..17b770a2 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -5,582 +5,588 @@
// Variables
// -------------------------------
// Colors
-$blue: #3498DB;
-$gray-dark: #343f4a;
-$gray: #565d64;
-$gray-light: #cbd0d3;
+$blue: #3498DB;
+$gray-dark: #343f4a;
+$gray: #565d64;
+$gray-light: #cbd0d3;
// Font sizes
-$font-size-small: 14px;
-$font-size-base: 16px;
-$font-size-large: ceil(($font-size-base * 1.5));
+$font-size-small: 14px;
+$font-size-base: 16px;
+$font-size-large: ceil(($font-size-base * 1.5));
// Controls
-$control-spacing: 10px;
-$controls-bg: $gray-dark;
-$control-bg-hover: $blue;
-$control-color: $gray-light;
-$control-color-inactive: $gray;
-$control-color-hover: #fff;
+$control-spacing: 10px;
+$controls-bg: $gray-dark;
+$control-bg-hover: $blue;
+$control-color: $gray-light;
+$control-color-inactive: $gray;
+$control-color-hover: #fff;
// Tooltips
-$tooltip-bg: $controls-bg;
-$tooltip-color: #fff;
-$tooltip-padding: $control-spacing;
-$tooltip-arrow-size: 5px;
-$tooltip-radius: 3px;
+$tooltip-bg: $controls-bg;
+$tooltip-color: #fff;
+$tooltip-padding: $control-spacing;
+$tooltip-arrow-size: 5px;
+$tooltip-radius: 3px;
// Progress
-$progress-bg: lighten($gray, 10%);
-$progress-playing-bg: $blue;
-$progress-buffered-bg: $gray;
-$progress-loading-size: 40px;
-$progress-loading-bg: rgba(0,0,0, .15);
+$progress-bg: lighten($gray, 10%);
+$progress-playing-bg: $blue;
+$progress-buffered-bg: $gray;
+$progress-loading-size: 40px;
+$progress-loading-bg: rgba(0,0,0, .15);
-// Range
-$volume-track-height: 6px;
-$volume-track-bg: $gray;
-$volume-thumb-height: ($volume-track-height * 2);
-$volume-thumb-width: ($volume-track-height * 2);
-$volume-thumb-bg: $control-color;
-$volume-thumb-bg-focus: $control-bg-hover;
+// Volume
+$volume-track-height: 6px;
+$volume-track-bg: $gray;
+$volume-thumb-height: ($volume-track-height * 2);
+$volume-thumb-width: ($volume-track-height * 2);
+$volume-thumb-bg: $control-color;
+$volume-thumb-bg-focus: $control-bg-hover;
// Breakpoints
-$bp-control-split: 560px; // When controls split into left/right
-$bp-captions-large: 768px; // When captions jump to the larger font size
+$bp-control-split: 560px; // When controls split into left/right
+$bp-captions-large: 768px; // When captions jump to the larger font size
// Utility classes & mixins
// -------------------------------
// Screen reader only
.sr-only {
- position: absolute !important;
- clip: rect(1px, 1px, 1px, 1px);
- padding: 0 !important;
- border: 0 !important;
- height: 1px !important;
- width: 1px !important;
- overflow: hidden;
+ position: absolute !important;
+ clip: rect(1px, 1px, 1px, 1px);
+ padding: 0 !important;
+ border: 0 !important;
+ height: 1px !important;
+ width: 1px !important;
+ overflow: hidden;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix()
{
- zoom: 1;
- &:before,
- &:after { content: ""; display: table; }
- &:after { clear: both; }
+ zoom: 1;
+ &:before,
+ &:after { content: ""; display: table; }
+ &:after { clear: both; }
}
// Tab focus styles
@mixin tab-focus()
{
- outline: thin dotted #000;
- outline-offset: 0;
+ outline: thin dotted #000;
+ outline-offset: 0;
}
// Animation
// ---------------------------------------
@keyframes progress {
- to { background-position: @progress-loading-size 0; }
+ to { background-position: $progress-loading-size 0; }
}
// styling
// ---------------------------------------
@mixin volume-thumb()
{
- height: $volume-thumb-height;
- width: $volume-thumb-width;
- background: $volume-thumb-bg;
- border: 0;
- border-radius: ($volume-thumb-height / 2);
- transition: background .3s ease;
- cursor: ew-resize;
+ height: $volume-thumb-height;
+ width: $volume-thumb-width;
+ background: $volume-thumb-bg;
+ border: 0;
+ border-radius: ($volume-thumb-height / 2);
+ transition: background .3s ease;
+ cursor: ew-resize;
}
@mixin volume-track()
{
- height: $volume-track-height;
- background: $volume-track-bg;
- border: 0;
- border-radius: ($volume-track-height / 2);
+ height: $volume-track-height;
+ background: $volume-track-bg;
+ border: 0;
+ border-radius: ($volume-track-height / 2);
}
-@mixin seek-thumb() {
- background: transparent;
- border: 0;
- width: ($control-spacing * 2);
- height: $control-spacing;
+@mixin seek-thumb()
+{
+ background: transparent;
+ border: 0;
+ width: ($control-spacing * 2);
+ height: $control-spacing;
}
-@mixin seek-track() {
- background: none;
- border: 0;
+@mixin seek-track()
+{
+ background: none;
+ border: 0;
}
// Font smoothing
// ---------------------------------------
-@mixin font-smoothing($mode: on) when ($mode = on)
+@mixin font-smoothing($mode: on)
{
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
-}
-@mixin font-smoothing($mode: on) when ($mode = off)
-{
- -moz-osx-font-smoothing: auto;
- -webkit-font-smoothing: subpixel-antialiased;
+ @if $mode == 'on' {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ } @else if $mode == 'off' {
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: subpixel-antialiased;
+ }
}
// Styles
// -------------------------------
// Base
.player {
- position: relative;
- max-width: 100%;
- min-width: 290px;
+ position: relative;
+ max-width: 100%;
+ min-width: 290px;
- // border-box everything
- // http://paulirish.com/2012/box-sizing-border-box-ftw/
- &,
- *,
- *::after,
- *::before {
- box-sizing: border-box;
- }
+ // border-box everything
+ // http://paulirish.com/2012/box-sizing-border-box-ftw/
+ &,
+ *,
+ *::after,
+ *::before {
+ box-sizing: border-box;
+ }
- // For video
- &-video-wrapper {
- position: relative;
- }
- video {
- width: 100%;
- height: auto;
- vertical-align: middle;
- }
+ // For video
+ &-video-wrapper {
+ position: relative;
+ }
+ video {
+ width: 100%;
+ height: auto;
+ vertical-align: middle;
+ }
- // Captions
- &-captions {
- display: none;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: 20px;
- min-height: 2.5em;
- color: #fff;
- font-size: $font-size-base;
- font-weight: 600;
- text-shadow:
- -1px -1px 0 $gray,
- 1px -1px 0 $gray,
- -1px 1px 0 $gray,
- 1px 1px 0 $gray;
- text-align: center;
- @include font-smoothing();
+ // Captions
+ &-captions {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: 20px;
+ min-height: 2.5em;
+ color: #fff;
+ font-size: $font-size-base;
+ font-weight: 600;
+ text-shadow:
+ -1px -1px 0 $gray,
+ 1px -1px 0 $gray,
+ -1px 1px 0 $gray,
+ 1px 1px 0 $gray;
+ text-align: center;
+ @include font-smoothing();
- @media (min-width: $bp-captions-large) {
- font-size: $font-size-large;
- }
- }
- &.captions-active &-captions {
- display: block;
- }
+ @media (min-width: $bp-captions-large) {
+ font-size: $font-size-large;
+ }
+ }
+ &.captions-active &-captions {
+ display: block;
+ }
- // Player controls
- &-controls {
- @include clearfix();
- @include font-smoothing();
- position: relative;
- padding: ($control-spacing * 2) $control-spacing $control-spacing;
- background: $controls-bg;
- line-height: 1;
- text-align: center;
+ // Player controls
+ &-controls {
+ @include clearfix();
+ @include font-smoothing();
+ position: relative;
+ padding: ($control-spacing * 2) $control-spacing $control-spacing;
+ background: $controls-bg;
+ line-height: 1;
+ text-align: center;
- // Layout
- &-sound {
- display: block;
- margin: $control-spacing auto 0;
- }
- @media (min-width: $bp-control-split) {
- &-left {
- float: left;
- }
- &-right {
- float: right;
- margin-top: 0;
- }
- }
+ // Layout
+ &-right {
+ display: block;
+ margin: $control-spacing auto 0;
+ }
+ @media (min-width: $bp-control-split) {
+ &-left {
+ float: left;
+ }
+ &-right {
+ float: right;
+ margin-top: 0;
+ }
+ }
- input + label,
- button {
- display: inline-block;
- vertical-align: middle;
- margin: 0 2px;
- padding: ($control-spacing / 2) $control-spacing;
+ input + label,
+ button {
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0 2px;
+ padding: ($control-spacing / 2) $control-spacing;
- transition: background .3s ease;
- border-radius: 3px;
- cursor: pointer;
+ transition: background .3s ease;
+ border-radius: 3px;
+ cursor: pointer;
- svg {
- width: 18px;
- height: 18px;
- display: block;
- fill: currentColor;
- transition: fill .3s ease;
- }
- }
- input + label,
- .inverted:checked + label {
- color: $control-color-inactive;
- }
- button,
- .inverted + label,
- input:checked + label {
- color: $control-color;
- }
- button {
- border: 0;
- background: transparent;
- overflow: hidden;
- }
- input:focus + label,
- button:focus {
- @include tab-focus();
- color: $control-color-focus;
- }
- button:hover,
- input + label:hover {
- background: $control-bg-hover;
- color: $control-color-hover;
- }
- .icon-exit-fullscreen,
- .icon-muted,
- .icon-captions-on {
- display: none;
- }
- .player-time {
- display: inline-block;
- vertical-align: middle;
- margin-left: $control-spacing;
- color: $control-color;
- font-weight: 600;
- font-size: $font-size-small;
- @include font-smoothing();
- }
- }
+ svg {
+ width: 18px;
+ height: 18px;
+ display: block;
+ fill: currentColor;
+ transition: fill .3s ease;
+ }
+ }
+ input + label,
+ .inverted:checked + label {
+ color: $control-color-inactive;
+ }
+ button,
+ .inverted + label,
+ input:checked + label {
+ color: $control-color;
+ }
+ button {
+ border: 0;
+ background: transparent;
+ overflow: hidden;
+ }
- // Tooltips
- &-tooltip {
- visibility: hidden;
- position: absolute;
- z-index: 2;
- bottom: 100%;
- margin-bottom: $tooltip-padding;
- padding: $tooltip-padding ($tooltip-padding * 1.5);
+ // Specificity for overriding .inverted
+ button:focus,
+ button:hover,
+ [type="checkbox"]:focus + label,
+ [type="checkbox"] + label:hover {
+ background: $control-bg-hover;
+ color: $control-color-hover;
+ }
+ button:focus,
+ input:focus + label {
+ outline: 0;
+ }
+ .icon-exit-fullscreen,
+ .icon-muted,
+ .icon-captions-on {
+ display: none;
+ }
+ .player-time {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: $control-spacing;
+ color: $control-color;
+ font-weight: 600;
+ font-size: $font-size-small;
+ @include font-smoothing();
+ }
+ }
+
+ // Tooltips
+ &-tooltip {
+ visibility: hidden;
+ position: absolute;
+ z-index: 2;
+ bottom: 100%;
+ margin-bottom: $tooltip-padding;
+ padding: $tooltip-padding ($tooltip-padding * 1.5);
opacity: 0;
- background: $tooltip-bg;
- border-radius: $tooltip-radius;
- color: $tooltip-color;
- font-size: $font-size-small;
- line-height: 1.5;
- font-weight: 600;
+ background: $tooltip-bg;
+ 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));
+ transform: translate(-50%, ($tooltip-padding * 3));
transition: transform .2s .2s ease, opacity .2s .2s ease;
- &::after {
- 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;
- }
- }
- label:hover .player-tooltip,
- input:focus + label .player-tooltip,
- button:hover .player-tooltip,
- button:focus .player-tooltip {
- visibility: visible;
- opacity: 1;
- transform: translate(-50%, 0);
- }
- label:hover .player-tooltip,
- button:hover .player-tooltip {
- z-index: 3;
- }
+ &::after {
+ 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;
+ }
+ }
+ label:hover .player-tooltip,
+ input:focus + label .player-tooltip,
+ button:hover .player-tooltip,
+ button:focus .player-tooltip {
+ visibility: visible;
+ opacity: 1;
+ transform: translate(-50%, 0);
+ }
+ label:hover .player-tooltip,
+ button:hover .player-tooltip {
+ z-index: 3;
+ }
- // Player progress
- //