Docs updates, small tweaks

1 files changed, 0 insertions, 719 deletions

diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
deleted file mode 100644
index 8de9af6e..00000000
--- a/src/sass/plyr.scss
+++ /dev/null
@@ -1,719 +0,0 @@
-// ==========================================================================
-// Plyr styles
-// https://github.com/selz/plyr
-// ==========================================================================
-
-// Variables
-// -------------------------------
-
-// Colors
-$plyr-blue:                          #3498DB !default;
-$plyr-gray-dark:                     #343F4A !default;
-$plyr-gray:                          #565D64 !default;
-$plyr-gray-light:                    #6B7D86 !default;
-$plyr-gray-lighter:                  #CBD0D3 !default;
-$plyr-off-white:                     #D6DADD !default;
-
-// Font sizes
-$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-font-size-captions-medium:     ceil($plyr-font-size-base * 1.5) !default;
-$plyr-font-size-captions-large:      ($plyr-font-size-base * 2) !default;
-
-// Controls
-$plyr-control-spacing:               10px !default;
-$plyr-controls-bg:                   #fff !default;
-$plyr-control-bg-hover:              $plyr-blue !default;
-
-// Contrast
-@if lightness($plyr-controls-bg) >= 65% {
-    $plyr-control-color:             $plyr-gray-light !default;
-}
-@else {
-    $plyr-control-color:             $plyr-gray-lighter !default;
-}
-@if lightness($plyr-control-bg-hover) >= 65% {
-    $plyr-control-color-hover:       $plyr-gray !default;
-}
-@else {
-    $plyr-control-color-hover:       #fff !default;
-}
-
-// Tooltips
-$plyr-tooltip-bg:                    $plyr-controls-bg !default;
-$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .9) !default;
-$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .8) !default;
-
-$plyr-tooltip-border-width:          1px;
-$plyr-tooltip-shadow:                0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
-$plyr-tooltip-color:                 $plyr-control-color !default;
-$plyr-tooltip-padding:               $plyr-control-spacing !default;
-$plyr-tooltip-arrow-size:            6px !default;
-$plyr-tooltip-radius:                3px !default;
-
-// Progress
-$plyr-progress-bg:                   transparentize($plyr-gray, .8) !default;
-$plyr-progress-playing-bg:           $plyr-blue !default;
-$plyr-progress-buffered-bg:          transparentize($plyr-gray, .75) !default;
-$plyr-progress-loading-size:         40px !default;
-$plyr-progress-loading-bg:           transparentize(#000, .85) !default;
-
-// Volume
-$plyr-volume-track-height:           6px !default;
-$plyr-volume-track-bg:               darken($plyr-controls-bg, 10%) !default;
-$plyr-volume-thumb-height:           ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-width:            ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-bg:               $plyr-control-color !default;
-$plyr-volume-thumb-bg-focus:         $plyr-control-bg-hover !default;
-
-// Breakpoints
-$plyr-bp-control-split:              560px !default; // When controls split into left/right
-$plyr-bp-captions-large:             768px !default; // When captions jump to the larger font size
-
-// Animation
-// ---------------------------------------
-@keyframes plyr-progress {
-    to { background-position: $plyr-progress-loading-size 0; }
-}
-
-// Font smoothing
-@mixin font-smoothing($mode: on)
-{
-    @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;
-    }
-}
-
-// <input type="range"> styling
-@mixin volume-thumb() {
-    height: $plyr-volume-thumb-height;
-    width: $plyr-volume-thumb-width;
-    background: $plyr-volume-thumb-bg;
-    border: 0;
-    border-radius: 100%;
-    transition: background .3s ease;
-    cursor: ew-resize;
-}
-@mixin volume-track() {
-    height: $plyr-volume-track-height;
-    background: $plyr-volume-track-bg;
-    border: 0;
-    border-radius: ($plyr-volume-track-height / 2);
-}
-@mixin seek-thumb() {
-    background: transparent;
-    border: 0;
-    width: 1px;
-    height: $plyr-control-spacing;
-}
-@mixin seek-thumb-touch() {
-    width: ($plyr-control-spacing * 4);
-    transform: translateX(-50%);
-}
-@mixin seek-track() {
-    background: none;
-    border: 0;
-}
-
-// Styles
-// -------------------------------
-// Base
-.plyr {
-    position: relative;
-    max-width: 100%;
-    min-width: 290px;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
-
-    // border-box everything
-    // http://paulirish.com/2012/box-sizing-border-box-ftw/
-    &,
-    *,
-    *::after,
-    *::before {
-        box-sizing: border-box;
-    }
-
-    // Fix 300ms delay
-    a, button, input, label {
-        touch-action: manipulation;
-    }
-
-    // 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;
-    }
-
-    // For video
-    &__video-wrapper {
-        position: relative;
-    }
-    video,
-    audio {
-        width: 100%;
-        height: auto;
-        vertical-align: middle;
-    }
-
-    // Hide default captions
-    video::-webkit-media-text-track-container {
-        display: none;
-    }
-
-    // For embeds
-    &__video-embed {
-        padding-bottom: 56.25%; /* 16:9 */
-        height: 0;
-        overflow: hidden;
-        background: #000;
-
-        iframe {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border: 0;
-            user-select: none;
-        }
-
-        // Vimeo hack
-        > div {
-            position: relative;
-            padding-bottom: 200%;
-            transform: translateY(-35.95%);
-        }
-
-        // To allow mouse events to be captured if full support
-        &.plyr iframe {
-            pointer-events: none;
-        }
-    }
-
-    // Captions
-    &__captions {
-        display: none;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 3);
-        color: #fff;
-        font-size: $plyr-font-size-captions-base;
-        text-align: center;
-        @include font-smoothing();
-
-        span {
-            border-radius: 2px;
-            padding: 3px 10px;
-            background: transparentize(#000, .1);
-        }
-        span:empty {
-            display: none;
-        }
-
-        @media (min-width: $plyr-bp-captions-large) {
-            font-size: $plyr-font-size-captions-medium;
-        }
-    }
-    &--captions-active &__captions {
-        display: block;
-    }
-    &--fullscreen-active &__captions {
-        font-size: $plyr-font-size-captions-large;
-    }
-
-    // Playback controls
-    &__controls {
-        @include font-smoothing();
-        position: relative;
-        padding: $plyr-control-spacing;
-        background: $plyr-controls-bg;
-        line-height: 1;
-        text-align: center;
-        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
-
-        // Clear floats
-        &::after {
-            content: '';
-            display: table;
-            clear: both;
-        }
-
-        // Layout
-        &--right {
-            display: block;
-            margin: $plyr-control-spacing auto 0;
-        }
-        @media (min-width: $plyr-bp-control-split) {
-            &--left {
-                float: left;
-            }
-            &--right {
-                float: right;
-                margin-top: 0;
-            }
-        }
-
-        // Buttons
-        button {
-            display: inline-block;
-            vertical-align: middle;
-            margin: 0 2px;
-            padding: ($plyr-control-spacing / 2) $plyr-control-spacing;
-            overflow: hidden;
-            border: 0;
-            background: transparent;
-            border-radius: 3px;
-            cursor: pointer;
-            color: $plyr-control-color;
-            transition: background .3s ease, color .3s ease, opacity .3s ease;
-
-            svg {
-                width: 18px;
-                height: 18px;
-                display: block;
-                fill: currentColor;
-                transition: fill .3s ease;
-            }
-
-            // Hover and tab focus
-            &.tab-focus:hover,
-            &:hover {
-                background: $plyr-control-bg-hover;
-                color: $plyr-control-color-hover;
-            }
-            // Default focus
-            &:focus {
-                outline: 0;
-            }
-        }
-
-        // Hide toggle icons by default
-        .icon--exit-fullscreen,
-        .icon--muted,
-        .icon--captions-on {
-            display: none;
-        }
-
-        // Time display
-        .plyr__time {
-            display: inline-block;
-            vertical-align: middle;
-            margin-left: $plyr-control-spacing;
-            color: $plyr-control-color;
-            font-weight: 600;
-            font-size: $plyr-font-size-small;
-        }
-
-        // Media duration hidden on small screens
-        .plyr__time + .plyr__time {
-            display: none;
-
-            @media (min-width: $plyr-bp-control-split) {
-                display: inline-block;
-            }
-
-            // Add a slash in before
-            &::before {
-                content: '\2044';
-                margin-right: $plyr-control-spacing;
-            }
-        }
-    }
-
-    // Tooltips
-    &__tooltip {
-        visibility: hidden;
-        position: absolute;
-        z-index: 2;
-        bottom: 100%;
-        margin-bottom: $plyr-tooltip-padding;
-        padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
-        pointer-events: none;
-
-        opacity: 0;
-        background: $plyr-tooltip-bg;
-        box-shadow: $plyr-tooltip-shadow;
-        border-radius: $plyr-tooltip-radius;
-        color: $plyr-tooltip-color;
-        font-size: $plyr-font-size-small;
-        line-height: 1.5;
-        font-weight: 600;
-
-        transform: translate(-50%, 10px) scale(.8);
-        transform-origin: 50% 100%;
-        transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
-
-        // Arrows
-        &::after,
-        &::before {
-            content: '';
-            position: absolute;
-            width: 0;
-            height: 0;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-        // The border triangle
-        &::after {
-            $plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
-            bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
-            border-right: $plyr-border-arrow-size solid transparent;
-            border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
-            border-left: $plyr-border-arrow-size solid transparent;
-            z-index: 1;
-        }
-        // The background triangle
-        &::before {
-            bottom: -$plyr-tooltip-arrow-size;
-            border-right: $plyr-tooltip-arrow-size solid transparent;
-            border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
-            border-left: $plyr-tooltip-arrow-size solid transparent;
-            z-index: 2;
-        }
-    }
-    button:hover .plyr__tooltip,
-    button.tab-focus:focus .plyr__tooltip,
-    &__tooltip--visible {
-        visibility: visible;
-        opacity: 1;
-        transform: translate(-50%, 0) scale(1);
-    }
-    button:hover .plyr__tooltip {
-        z-index: 3;
-    }
-
-    // Common range styles
-    input[type='range'].tab-focus:focus {
-        outline: thin dotted transparentize($plyr-gray-dark, .8);
-        outline-offset: 3px;
-    }
-
-    // Playback progress
-    // <progress> element
-    &__progress {
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: $plyr-control-spacing;
-        background: $plyr-progress-bg;
-
-        &--buffer[value],
-        &--played[value],
-        &--seek[type='range'] {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: $plyr-control-spacing;
-            margin: 0;
-            padding: 0;
-            vertical-align: top;
-
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            border: none;
-            background: transparent;
-        }
-        &--buffer[value],
-        &--played[value] {
-            &::-webkit-progress-bar {
-                background: transparent;
-                transition: width .2s ease;
-            }
-
-            // Inherit from currentColor;
-            &::-webkit-progress-value {
-                background: currentColor;
-                transition: width .2s ease;
-            }
-            &::-moz-progress-bar {
-                background: currentColor;
-                transition: width .2s ease;
-            }
-        }
-        &--played[value] {
-            z-index: 2;
-            color: $plyr-progress-playing-bg;
-        }
-        &--buffer[value] {
-            color: $plyr-progress-buffered-bg;
-        }
-
-        // Seek control
-        // <input[type='range']> element
-        // Specificity is for bootstrap compatibility
-        &--seek[type='range'] {
-            z-index: 4;
-            cursor: pointer;
-            outline: 0;
-
-            // Webkit
-            &::-webkit-slider-runnable-track {
-                @include seek-track();
-            }
-            &::-webkit-slider-thumb {
-                -webkit-appearance: none;
-                @include seek-thumb();
-            }
-
-            // Mozilla
-            &::-moz-range-track {
-                @include seek-track();
-            }
-            &::-moz-range-thumb {
-                -moz-appearance: none;
-                @include seek-thumb();
-            }
-
-            // Microsoft
-            &::-ms-track {
-                color: transparent;
-                @include seek-track();
-            }
-            &::-ms-fill-lower,
-            &::-ms-fill-upper {
-                @include seek-track();
-            }
-            &::-ms-thumb {
-                @include seek-thumb();
-            }
-
-            &:focus {
-                outline: 0;
-            }
-            &::-moz-focus-outer {
-                border: 0;
-            }
-        }
-
-        // Seek tooltip to show time
-        .plyr__tooltip {
-            left: 0;
-        }
-    }
-
-    // Touch seek wider handle
-    &--is-touch &--seek[type='range'] {
-        &::-webkit-slider-thumb {
-            @include seek-thumb-touch();
-        }
-        // Mozilla
-        &::-moz-range-thumb {
-            @include seek-thumb-touch();
-        }
-        // Microsoft
-        &::-ms-thumb {
-            @include seek-thumb-touch();
-        }
-    }
-
-    // Loading state
-    &--loading .plyr__progress--buffer {
-        animation: plyr-progress 1s linear infinite;
-        background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
-        background-repeat: repeat-x;
-        background-color: $plyr-progress-buffered-bg;
-        background-image: linear-gradient(
-            -45deg,
-            $plyr-progress-loading-bg 25%,
-            transparent 25%,
-            transparent 50%,
-            $plyr-progress-loading-bg 50%,
-            $plyr-progress-loading-bg 75%,
-            transparent 75%,
-            transparent);
-        color: transparent;
-    }
-
-    // States
-    &__controls [data-plyr='pause'],
-    &--playing .plyr__controls [data-plyr='play'] {
-        display: none;
-    }
-    &--playing .plyr__controls [data-plyr='pause'] {
-        display: inline-block;
-    }
-
-    // Volume control
-    // <input[type='range']> element
-    // Specificity is for bootstrap compatibility
-    &__volume[type='range'] {
-        display: inline-block;
-        vertical-align: middle;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        width: 100px;
-        margin: 0 $plyr-control-spacing 0 0;
-        padding: 0;
-        cursor: pointer;
-        background: transparent;
-        border: none;
-
-        // Webkit
-        &::-webkit-slider-runnable-track {
-            @include volume-track();
-        }
-        &::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            margin-top: -(($plyr-volume-thumb-height - $plyr-volume-track-height) / 2);
-            @include volume-thumb();
-        }
-
-        // Mozilla
-        &::-moz-range-track {
-            @include volume-track();
-        }
-        &::-moz-range-thumb {
-            @include volume-thumb();
-        }
-
-        // Microsoft
-        &::-ms-track {
-            height: $plyr-volume-track-height;
-            background: transparent;
-            border-color: transparent;
-            border-width: (($plyr-volume-thumb-height - $plyr-volume-track-height) / 2) 0;
-            color: transparent;
-        }
-        &::-ms-fill-lower,
-        &::-ms-fill-upper {
-            @include volume-track();
-        }
-        &::-ms-thumb {
-            @include volume-thumb();
-        }
-
-        &:focus {
-            outline: 0;
-
-            &::-webkit-slider-thumb {
-                background: $plyr-volume-thumb-bg-focus;
-            }
-            &::-moz-range-thumb {
-                background: $plyr-volume-thumb-bg-focus;
-            }
-            &::-ms-thumb {
-                background: $plyr-volume-thumb-bg-focus;
-            }
-        }
-    }
-
-    // Hide sound controls on iOS
-    // 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
-    &--is-ios &__volume,
-    &--is-ios [data-plyr='mute'],
-    &--is-ios.plyr--audio &__controls--right {
-        display: none;
-    }
-    // Center buttons so it looks less odd
-    &--is-ios.plyr--audio &__controls--left {
-        float: none;
-    }
-
-    // Audio specific styles
-    // Position the progress within the container
-    &--audio .plyr__controls {
-        padding-top: ($plyr-control-spacing * 2);
-    }
-    &--audio .plyr__progress {
-        bottom: auto;
-        top: 0;
-        background: $plyr-off-white;
-    }
-
-    // Full screen mode
-    &--fullscreen,
-    &--fullscreen-active  {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 100%;
-        width: 100%;
-        z-index: 10000000;
-        background: #000;
-
-        video {
-            height: 100%;
-        }
-        .plyr__video-wrapper {
-            height: 100%;
-            width: 100%;
-        }
-        .plyr__controls {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-        }
-    }
-
-    // Hide controls when playing in full screen
-    &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-    &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-        .plyr__controls {
-            transform: translateY(100%) translateY($plyr-control-spacing / 2);
-            transition: transform .3s .2s ease;
-        }
-        .plyr__captions {
-            bottom: ($plyr-control-spacing / 2);
-            transition: bottom .3s .2s ease;
-        }
-        &.plyr--hover .plyr__controls {
-            transform: translateY(0);
-        }
-    }
-
-    // Captions
-    &.plyr--fullscreen .plyr__captions,
-    &--fullscreen-active .plyr__captions,
-    &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-        top: auto;
-        bottom: 90px;
-
-        @media (min-width: $plyr-bp-control-split) {
-            bottom: 60px;
-        }
-    }
-
-    // Change icons on state change
-    &--fullscreen-active .icon--exit-fullscreen,
-    &--muted .plyr__controls .icon--muted,
-    &--captions-active .plyr__controls .icon--captions-on {
-        display: block;
-
-        & + svg {
-            display: none;
-        }
-    }
-
-    // Some options are hidden by default
-    [data-plyr='captions'],
-    [data-plyr='fullscreen'] {
-        display: none;
-    }
-    &--captions-enabled [data-plyr='captions'],
-    &--fullscreen-enabled [data-plyr='fullscreen'] {
-        display: inline-block;
-    }
-}