diff options
Diffstat (limited to 'src/sass')
37 files changed, 1142 insertions, 1143 deletions
diff --git a/src/sass/base.scss b/src/sass/base.scss index 74dbb70f..8ab3e1a8 100644 --- a/src/sass/base.scss +++ b/src/sass/base.scss @@ -4,66 +4,66 @@ // Base .plyr { - @include plyr-font-smoothing($plyr-font-smoothing); - align-items: center; - direction: ltr; - display: flex; - flex-direction: column; - font-family: var(--plyr-font-family); - font-variant-numeric: tabular-nums; // Force monosace-esque number widths - font-weight: var(--plyr-font-weight-regular); + @include plyr-font-smoothing($plyr-font-smoothing); + align-items: center; + direction: ltr; + display: flex; + flex-direction: column; + font-family: $plyr-font-family; + font-variant-numeric: tabular-nums; // Force monosace-esque number widths + font-weight: $plyr-font-weight-regular; + height: 100%; + line-height: $plyr-line-height; + max-width: 100%; + min-width: 200px; + position: relative; + text-shadow: none; + transition: box-shadow 0.3s ease; + z-index: 0; // Force any border radius + + // Media elements + video, + audio, + iframe { + display: block; height: 100%; - line-height: var(--plyr-line-height); - max-width: 100%; - min-width: 200px; - position: relative; - text-shadow: none; - transition: box-shadow 0.3s ease; - z-index: 0; // Force any border radius + width: 100%; + } - // Media elements - video, - audio, - iframe { - display: block; - height: 100%; - width: 100%; - } + button { + font: inherit; + line-height: inherit; + width: auto; + } - button { - font: inherit; - line-height: inherit; - width: auto; - } - - // Ignore focus - &:focus { - outline: 0; - } + // Ignore focus + &:focus { + outline: 0; + } } // border-box everything // http://paulirish.com/2012/box-sizing-border-box-ftw/ @if $plyr-border-box { - .plyr--full-ui { - box-sizing: border-box; + .plyr--full-ui { + box-sizing: border-box; - *, - *::after, - *::before { - box-sizing: inherit; - } + *, + *::after, + *::before { + box-sizing: inherit; } + } } // Fix 300ms delay @if $plyr-touch-action { - .plyr--full-ui { - a, - button, - input, - label { - touch-action: manipulation; - } + .plyr--full-ui { + a, + button, + input, + label { + touch-action: manipulation; } + } } diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss index b0d575bb..83d045a6 100644 --- a/src/sass/components/badges.scss +++ b/src/sass/components/badges.scss @@ -3,10 +3,10 @@ // -------------------------------------------------------------- .plyr__badge { - background: var(--plyr-badge-background, $plyr-badge-background); - border-radius: 2px; - color: var(--plyr-badge-color, $plyr-badge-color); - font-size: var(--plyr-font-size-badge, $plyr-font-size-badge); - line-height: 1; - padding: 3px 4px; + background: $plyr-badge-background; + border-radius: $plyr-badge-border-radius; + color: $plyr-badge-color; + font-size: $plyr-font-size-badge; + line-height: 1; + padding: 3px 4px; } diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss index 85899ef3..eb3c9389 100644 --- a/src/sass/components/captions.scss +++ b/src/sass/components/captions.scss @@ -4,57 +4,55 @@ // Hide default captions .plyr--full-ui ::-webkit-media-text-track-container { - display: none; + display: none; } .plyr__captions { - animation: plyr-fade-in 0.3s ease; - bottom: 0; - display: none; - font-size: $plyr-font-size-captions-small; - left: 0; - padding: $plyr-control-spacing; - position: absolute; - text-align: center; - transition: transform 0.4s ease-in-out; - width: 100%; - - .plyr__caption { - background: $plyr-captions-background; - background: var(--plyr-captions-background, $plyr-captions-background); - border-radius: 2px; - box-decoration-break: clone; - color: $plyr-captions-text-color; - color: var(--plyr-captions-text-color, $plyr-captions-text-color); - line-height: 185%; - padding: 0.2em 0.5em; - white-space: pre-wrap; - - // Firefox adds a <div> when using getCueAsHTML() - div { - display: inline; - } + animation: plyr-fade-in 0.3s ease; + bottom: 0; + display: none; + font-size: $plyr-font-size-captions-small; + left: 0; + padding: $plyr-control-spacing; + position: absolute; + text-align: center; + transition: transform 0.4s ease-in-out; + width: 100%; + + .plyr__caption { + background: $plyr-captions-background; + border-radius: 2px; + box-decoration-break: clone; + color: $plyr-captions-text-color; + line-height: 185%; + padding: 0.2em 0.5em; + white-space: pre-wrap; + + // Firefox adds a <div> when using getCueAsHTML() + div { + display: inline; } + } - span:empty { - display: none; - } + span:empty { + display: none; + } - @media (min-width: $plyr-bp-sm) { - font-size: $plyr-font-size-captions-base; - padding: ($plyr-control-spacing * 2); - } + @media (min-width: $plyr-bp-sm) { + font-size: $plyr-font-size-captions-base; + padding: calc(#{$plyr-control-spacing} * 2); + } - @media (min-width: $plyr-bp-md) { - font-size: $plyr-font-size-captions-medium; - } + @media (min-width: $plyr-bp-md) { + font-size: $plyr-font-size-captions-medium; + } } .plyr--captions-active .plyr__captions { - display: block; + display: block; } // If the lower controls are shown and not empty .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { - transform: translateY(-($plyr-control-spacing * 4)); + transform: translateY(calc(#{$plyr-control-spacing} * -4)); } diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 2940897b..8671fa2a 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -3,45 +3,44 @@ // -------------------------------------------------------------- .plyr__control { - background: transparent; - border: 0; - border-radius: $plyr-control-radius; - border-radius: var(--plyr-control-radius, $plyr-control-radius); - color: inherit; - cursor: pointer; - flex-shrink: 0; - overflow: visible; // IE11 - padding: var(--plyr-control-padding, $plyr-control-padding); - position: relative; - transition: all 0.3s ease; + background: transparent; + border: 0; + border-radius: $plyr-control-radius; + color: inherit; + cursor: pointer; + flex-shrink: 0; + overflow: visible; // IE11 + padding: $plyr-control-padding; + position: relative; + transition: all 0.3s ease; - svg { - display: block; - fill: currentColor; - height: var(--plyr-control-icon-size, $plyr-control-icon-size); - pointer-events: none; - width: var(--plyr-control-icon-size, $plyr-control-icon-size); - } + svg { + display: block; + fill: currentColor; + height: $plyr-control-icon-size; + pointer-events: none; + width: $plyr-control-icon-size; + } - // Default focus - &:focus { - outline: 0; - } + // Default focus + &:focus { + outline: 0; + } - // Tab focus - &.plyr__tab-focus { - @include plyr-tab-focus(); - } + // Tab focus + &.plyr__tab-focus { + @include plyr-tab-focus(); + } } // Remove any link styling a.plyr__control { - text-decoration: none; + text-decoration: none; - &::after, - &::before { - display: none; - } + &::after, + &::before { + display: none; + } } // Change icons on state change @@ -49,5 +48,5 @@ a.plyr__control { .plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed, .plyr__control.plyr__control--pressed .label--not-pressed { - display: none; + display: none; } diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index 50333701..60ee774d 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -4,49 +4,49 @@ // Hide native controls .plyr--full-ui ::-webkit-media-controls { - display: none; + display: none; } // Playback controls .plyr__controls { - align-items: center; - display: flex; - justify-content: flex-end; - text-align: center; - - .plyr__progress__container { - flex: 1; - min-width: 0; // Fix for Edge issue where content would overflow - } + align-items: center; + display: flex; + justify-content: flex-end; + text-align: center; - // Spacing - .plyr__controls__item { - margin-left: ($plyr-control-spacing / 4); + .plyr__progress__container { + flex: 1; + min-width: 0; // Fix for Edge issue where content would overflow + } - &:first-child { - margin-left: 0; - margin-right: auto; - } + // Spacing + .plyr__controls__item { + margin-left: calc(#{$plyr-control-spacing} / 4); - &.plyr__progress__container { - padding-left: ($plyr-control-spacing / 4); - } + &:first-child { + margin-left: 0; + margin-right: auto; + } - &.plyr__time { - padding: 0 ($plyr-control-spacing / 2); - } + &.plyr__progress__container { + padding-left: calc(#{$plyr-control-spacing} / 4); + } - &.plyr__progress__container:first-child, - &.plyr__time:first-child, - &.plyr__time + .plyr__time { - padding-left: 0; - } + &.plyr__time { + padding: 0 calc(#{$plyr-control-spacing} / 2); } - // Hide empty controls - &:empty { - display: none; + &.plyr__progress__container:first-child, + &.plyr__time:first-child, + &.plyr__time + .plyr__time { + padding-left: 0; } + } + + // Hide empty controls + &:empty { + display: none; + } } // Some options are hidden by default @@ -54,11 +54,11 @@ .plyr [data-plyr='pip'], .plyr [data-plyr='airplay'], .plyr [data-plyr='fullscreen'] { - display: none; + display: none; } .plyr--captions-enabled [data-plyr='captions'], .plyr--pip-supported [data-plyr='pip'], .plyr--airplay-supported [data-plyr='airplay'], .plyr--fullscreen-enabled [data-plyr='fullscreen'] { - display: inline-block; + display: inline-block; } diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index 50a47248..49cec6f5 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -3,198 +3,200 @@ // -------------------------------------------------------------- .plyr__menu { - display: flex; // Edge fix - position: relative; + display: flex; // Edge fix + position: relative; + + // Animate the icon + .plyr__control svg { + transition: transform 0.3s ease; + } + .plyr__control[aria-expanded='true'] { + svg { + transform: rotate(90deg); + } - // Animate the icon - .plyr__control svg { - transition: transform 0.3s ease; + // Hide tooltip + .plyr__tooltip { + display: none; + } + } + + // The actual menu container + &__container { + animation: plyr-popup 0.2s ease; + background: $plyr-menu-background; + border-radius: 4px; + bottom: 100%; + box-shadow: $plyr-menu-shadow; + color: $plyr-menu-color; + font-size: $plyr-font-size-base; + margin-bottom: 10px; + position: absolute; + right: -3px; + text-align: left; + white-space: nowrap; + z-index: 3; + + > div { + overflow: hidden; + transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } - .plyr__control[aria-expanded='true'] { - svg { - transform: rotate(90deg); - } - // Hide tooltip - .plyr__tooltip { - display: none; - } + // Arrow + &::after { + border: 4px solid transparent; + border-top-color: $plyr-menu-background; + content: ''; + height: 0; + position: absolute; + right: 15px; + top: 100%; + width: 0; + } + + [role='menu'] { + padding: $plyr-control-padding; + } + + [role='menuitem'], + [role='menuitemradio'] { + margin-top: 2px; + + &:first-child { + margin-top: 0; + } } - // The actual menu container - &__container { - animation: plyr-popup 0.2s ease; - background: $plyr-menu-background; - border-radius: 4px; - bottom: 100%; - box-shadow: $plyr-menu-shadow; - color: $plyr-menu-color; - font-size: $plyr-font-size-base; - margin-bottom: 10px; + // Options + .plyr__control { + align-items: center; + color: $plyr-menu-color; + display: flex; + font-size: $plyr-font-size-menu; + padding-bottom: calc(#{$plyr-control-padding} / 1.5); + padding-left: calc(#{$plyr-control-padding} * 1.5); + padding-right: calc(#{$plyr-control-padding} * 1.5); + padding-top: calc(#{$plyr-control-padding} / 1.5); + user-select: none; + width: 100%; + + > span { + align-items: inherit; + display: flex; + width: 100%; + } + + &::after { + border: 4px solid transparent; + content: ''; position: absolute; - right: -3px; - text-align: left; - white-space: nowrap; - z-index: 3; - - > div { - overflow: hidden; - transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); - } + top: 50%; + transform: translateY(-50%); + } + + &--forward { + padding-right: calc(#{$plyr-control-padding} * 4); - // Arrow &::after { - border: 4px solid transparent; - border-top-color: $plyr-menu-background; - content: ''; - height: 0; - position: absolute; - right: 15px; - top: 100%; - width: 0; + border-left-color: $plyr-menu-arrow-color; + right: 5px; } - [role='menu'] { - padding: $plyr-control-padding; + &.plyr__tab-focus::after, + &:hover::after { + border-left-color: currentColor; } + } - [role='menuitem'], - [role='menuitemradio'] { - margin-top: 2px; + &--back { + font-weight: $plyr-font-weight-regular; + margin: $plyr-control-padding; + margin-bottom: calc(#{$plyr-control-padding} / 2); + padding-left: calc(#{$plyr-control-padding} * 4); + position: relative; + width: calc(100% - (#{$plyr-control-padding} * 2)); - &:first-child { - margin-top: 0; - } + &::after { + border-right-color: $plyr-menu-arrow-color; + left: $plyr-control-padding; } - // Options - .plyr__control { - align-items: center; - color: $plyr-menu-color; - display: flex; - font-size: $plyr-font-size-menu; - padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5); - user-select: none; - width: 100%; - - > span { - align-items: inherit; - display: flex; - width: 100%; - } - - &::after { - border: 4px solid transparent; - content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); - } - - &--forward { - padding-right: ceil($plyr-control-padding * 4); - - &::after { - border-left-color: rgba($plyr-menu-color, 0.8); - right: 5px; - } - - &.plyr__tab-focus::after, - &:hover::after { - border-left-color: currentColor; - } - } - - &--back { - $horizontal-padding: ($plyr-control-padding * 2); - font-weight: $plyr-font-weight-regular; - margin: $plyr-control-padding; - margin-bottom: floor($plyr-control-padding / 2); - padding-left: ceil($plyr-control-padding * 4); - position: relative; - width: calc(100% - #{$horizontal-padding}); - - &::after { - border-right-color: rgba($plyr-menu-color, 0.8); - left: $plyr-control-padding; - } - - &::before { - background: $plyr-menu-border-color; - box-shadow: 0 1px 0 $plyr-menu-border-shadow-color; - content: ''; - height: 1px; - left: 0; - margin-top: ceil($plyr-control-padding / 2); - overflow: hidden; - position: absolute; - right: 0; - top: 100%; - } - - &.plyr__tab-focus::after, - &:hover::after { - border-right-color: currentColor; - } - } + &::before { + background: $plyr-menu-border-color; + box-shadow: 0 1px 0 $plyr-menu-border-shadow-color; + content: ''; + height: 1px; + left: 0; + margin-top: calc(#{$plyr-control-padding} / 2); + overflow: hidden; + position: absolute; + right: 0; + top: 100%; } - .plyr__control[role='menuitemradio'] { - padding-left: $plyr-control-padding; - - &::before, - &::after { - border-radius: 100%; - } - - &::before { - background: rgba(#000, 0.1); - content: ''; - display: block; - flex-shrink: 0; - height: 16px; - margin-right: $plyr-control-spacing; - transition: all 0.3s ease; - width: 16px; - } - - &::after { - background: #fff; - border: 0; - height: 6px; - left: 12px; - opacity: 0; - top: 50%; - transform: translateY(-50%) scale(0); - transition: transform 0.3s ease, opacity 0.3s ease; - width: 6px; - } - - &[aria-checked='true'] { - &::before { - background: var(--plyr-color-main, $plyr-color-main); - } - &::after { - opacity: 1; - transform: translateY(-50%) scale(1); - } - } - - &.plyr__tab-focus::before, - &:hover::before { - background: rgba(#000, 0.1); - } + &.plyr__tab-focus::after, + &:hover::after { + border-right-color: currentColor; } + } + } - // Option value - .plyr__menu__value { - align-items: center; - display: flex; - margin-left: auto; - margin-right: -($plyr-control-padding - 2); - overflow: hidden; - padding-left: ceil($plyr-control-padding * 3.5); - pointer-events: none; + .plyr__control[role='menuitemradio'] { + padding-left: $plyr-control-padding; + + &::before, + &::after { + border-radius: 100%; + } + + &::before { + background: rgba(#000, 0.1); + content: ''; + display: block; + flex-shrink: 0; + height: 16px; + margin-right: $plyr-control-spacing; + transition: all 0.3s ease; + width: 16px; + } + + &::after { + background: #fff; + border: 0; + height: 6px; + left: 12px; + opacity: 0; + top: 50%; + transform: translateY(-50%) scale(0); + transition: transform 0.3s ease, opacity 0.3s ease; + width: 6px; + } + + &[aria-checked='true'] { + &::before { + background: $plyr-control-toggle-checked-background; } + &::after { + opacity: 1; + transform: translateY(-50%) scale(1); + } + } + + &.plyr__tab-focus::before, + &:hover::before { + background: rgba($plyr-color-gray-900, 0.1); + } + } + + // Option value + .plyr__menu__value { + align-items: center; + display: flex; + margin-left: auto; + margin-right: calc((#{$plyr-control-padding} - 2) * -1); + overflow: hidden; + padding-left: calc(#{$plyr-control-padding} * 3.5); + pointer-events: none; } + } } diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss index 9b239d4f..2e966a32 100644 --- a/src/sass/components/poster.scss +++ b/src/sass/components/poster.scss @@ -3,20 +3,20 @@ // -------------------------------------------------------------- .plyr__poster { - background-color: #000; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: contain; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - top: 0; - transition: opacity 0.2s ease; - width: 100%; - z-index: 1; + background-color: #000; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: contain; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + transition: opacity 0.2s ease; + width: 100%; + z-index: 1; } .plyr--stopped.plyr__poster-enabled .plyr__poster { - opacity: 1; + opacity: 1; } diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index c15ee911..be5bc126 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -6,89 +6,89 @@ $plyr-progress-offset: $plyr-range-thumb-height; .plyr__progress { - left: $plyr-progress-offset / 2; - margin-right: $plyr-progress-offset; - position: relative; + left: calc(#{$plyr-progress-offset} * 0.5); + margin-right: $plyr-progress-offset; + position: relative; - input[type='range'], - &__buffer { - margin-left: -($plyr-progress-offset / 2); - margin-right: -($plyr-progress-offset / 2); - width: calc(100% + #{$plyr-progress-offset}); - } + input[type='range'], + &__buffer { + margin-left: calc(#{$plyr-progress-offset} * -0.5); + margin-right: calc(#{$plyr-progress-offset} * -0.5); + width: calc(100% + #{$plyr-progress-offset}); + } - input[type='range'] { - position: relative; - z-index: 2; - } + input[type='range'] { + position: relative; + z-index: 2; + } - // Seek tooltip to show time - .plyr__tooltip { - font-size: $plyr-font-size-time; - left: 0; - } + // Seek tooltip to show time + .plyr__tooltip { + font-size: $plyr-font-size-time; + left: 0; + } } .plyr__progress__buffer { - -webkit-appearance: none; /* stylelint-disable-line */ - background: transparent; - border: 0; - border-radius: 100px; - height: $plyr-range-track-height; - left: 0; - margin-top: -($plyr-range-track-height / 2); - padding: 0; - position: absolute; - top: 50%; + -webkit-appearance: none; /* stylelint-disable-line */ + background: transparent; + border: 0; + border-radius: 100px; + height: $plyr-range-track-height; + left: 0; + margin-top: calc((#{$plyr-range-track-height} / 2) * -1); + padding: 0; + position: absolute; + top: 50%; - &::-webkit-progress-bar { - background: transparent; - } + &::-webkit-progress-bar { + background: transparent; + } - &::-webkit-progress-value { - background: currentColor; - border-radius: 100px; - min-width: $plyr-range-track-height; - transition: width 0.2s ease; - } + &::-webkit-progress-value { + background: currentColor; + border-radius: 100px; + min-width: $plyr-range-track-height; + transition: width 0.2s ease; + } - // Mozilla - &::-moz-progress-bar { - background: currentColor; - border-radius: 100px; - min-width: $plyr-range-track-height; - transition: width 0.2s ease; - } + // Mozilla + &::-moz-progress-bar { + background: currentColor; + border-radius: 100px; + min-width: $plyr-range-track-height; + transition: width 0.2s ease; + } - // Microsoft - &::-ms-fill { - border-radius: 100px; - transition: width 0.2s ease; - } + // Microsoft + &::-ms-fill { + border-radius: 100px; + transition: width 0.2s ease; + } } // Loading state .plyr--loading .plyr__progress__buffer { - animation: plyr-progress 1s linear infinite; - background-image: linear-gradient( - -45deg, - var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%, - transparent 25%, - transparent 50%, - var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%, - var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%, - transparent 75%, - transparent - ); - background-repeat: repeat-x; - background-size: $plyr-progress-loading-size $plyr-progress-loading-size; - color: transparent; + animation: plyr-progress 1s linear infinite; + background-image: linear-gradient( + -45deg, + $plyr-progress-loading-background 25%, + transparent 25%, + transparent 50%, + $plyr-progress-loading-background 50%, + $plyr-progress-loading-background 75%, + transparent 75%, + transparent + ); + background-repeat: repeat-x; + background-size: $plyr-progress-loading-size $plyr-progress-loading-size; + color: transparent; } .plyr--video.plyr--loading .plyr__progress__buffer { - background-color: $plyr-video-progress-buffered-background; + background-color: $plyr-video-progress-buffered-background; } .plyr--audio.plyr--loading .plyr__progress__buffer { - background-color: $plyr-audio-progress-buffered-background; + background-color: $plyr-audio-progress-buffered-background; } diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 7b13348e..b7872bcb 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -3,92 +3,92 @@ // -------------------------------------------------------------- .plyr--full-ui input[type='range'] { - // WebKit + // WebKit + -webkit-appearance: none; /* stylelint-disable-line */ + background: transparent; + border: 0; + border-radius: calc(#{$plyr-range-thumb-height} * 2); + // color is used in JS to populate lower fill for WebKit + color: $plyr-range-fill-background; + display: block; + height: $plyr-range-max-height; + margin: 0; + padding: 0; + transition: box-shadow 0.3s ease; + width: 100%; + + &::-webkit-slider-runnable-track { + @include plyr-range-track(); + background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); + } + + &::-webkit-slider-thumb { + @include plyr-range-thumb(); -webkit-appearance: none; /* stylelint-disable-line */ - background: transparent; + margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1); + } + + // Mozilla + &::-moz-range-track { + @include plyr-range-track(); + } + + &::-moz-range-thumb { + @include plyr-range-thumb(); + } + + &::-moz-range-progress { + background: currentColor; + border-radius: calc(#{$plyr-range-track-height} / 2); + height: $plyr-range-track-height; + } + + // Microsoft + &::-ms-track { + @include plyr-range-track(); + color: transparent; + } + + &::-ms-fill-upper { + @include plyr-range-track(); + } + + &::-ms-fill-lower { + @include plyr-range-track(); + + background: currentColor; + } + + &::-ms-thumb { + @include plyr-range-thumb(); + // For some reason, Edge uses the -webkit margin above + margin-top: 0; + } + + &::-ms-tooltip { + display: none; + } + + // Focus styles + &:focus { + outline: 0; + } + + &::-moz-focus-outer { border: 0; - border-radius: ($plyr-range-thumb-height * 2); - // color is used in JS to populate lower fill for WebKit - color: $plyr-range-fill-background; - display: block; - height: $plyr-range-max-height; - margin: 0; - padding: 0; - transition: box-shadow 0.3s ease; - width: 100%; + } + &.plyr__tab-focus { &::-webkit-slider-runnable-track { - @include plyr-range-track(); - background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); + @include plyr-tab-focus(); } - &::-webkit-slider-thumb { - @include plyr-range-thumb(); - -webkit-appearance: none; /* stylelint-disable-line */ - margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2); - } - - // Mozilla &::-moz-range-track { - @include plyr-range-track(); - } - - &::-moz-range-thumb { - @include plyr-range-thumb(); - } - - &::-moz-range-progress { - background: currentColor; - border-radius: ($plyr-range-track-height / 2); - height: $plyr-range-track-height; + @include plyr-tab-focus(); } - // Microsoft &::-ms-track { - @include plyr-range-track(); - color: transparent; - } - - &::-ms-fill-upper { - @include plyr-range-track(); - } - - &::-ms-fill-lower { - @include plyr-range-track(); - - background: currentColor; - } - - &::-ms-thumb { - @include plyr-range-thumb(); - // For some reason, Edge uses the -webkit margin above - margin-top: 0; - } - - &::-ms-tooltip { - display: none; - } - - // Focus styles - &:focus { - outline: 0; - } - - &::-moz-focus-outer { - border: 0; - } - - &.plyr__tab-focus { - &::-webkit-slider-runnable-track { - @include plyr-tab-focus(); - } - - &::-moz-range-track { - @include plyr-tab-focus(); - } - - &::-ms-track { - @include plyr-tab-focus(); - } + @include plyr-tab-focus(); } + } } diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss index 7d7a50f1..db41275d 100644 --- a/src/sass/components/times.scss +++ b/src/sass/components/times.scss @@ -3,18 +3,18 @@ // -------------------------------------------------------------- .plyr__time { - font-size: $plyr-font-size-time; + font-size: $plyr-font-size-time; } // Media duration hidden on small screens .plyr__time + .plyr__time { - // Add a slash in before - &::before { - content: '\2044'; - margin-right: $plyr-control-spacing; - } + // Add a slash in before + &::before { + content: '\2044'; + margin-right: $plyr-control-spacing; + } - @media (max-width: $plyr-bp-sm-max) { - display: none; - } + @media (max-width: calc(#{$plyr-bp-md} - 1)) { + display: none; + } } diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss index 15f11f03..2d5eceaf 100644 --- a/src/sass/components/tooltips.scss +++ b/src/sass/components/tooltips.scss @@ -3,86 +3,86 @@ // -------------------------------------------------------------- .plyr__tooltip { - background: $plyr-tooltip-background; - border-radius: $plyr-tooltip-radius; - bottom: 100%; - box-shadow: $plyr-tooltip-shadow; - color: $plyr-tooltip-color; - font-size: $plyr-font-size-small; - font-weight: $plyr-font-weight-regular; + background: $plyr-tooltip-background; + border-radius: $plyr-tooltip-radius; + bottom: 100%; + box-shadow: $plyr-tooltip-shadow; + color: $plyr-tooltip-color; + font-size: $plyr-font-size-small; + font-weight: $plyr-font-weight-regular; + left: 50%; + line-height: 1.3; + margin-bottom: calc(#{$plyr-tooltip-padding} * 2); + opacity: 0; + padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5); + pointer-events: none; + position: absolute; + transform: translate(-50%, 10px) scale(0.8); + transform-origin: 50% 100%; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; + white-space: nowrap; + z-index: 2; + + // The background triangle + &::before { + border-left: $plyr-tooltip-arrow-size solid transparent; + border-right: $plyr-tooltip-arrow-size solid transparent; + border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background; + bottom: calc(#{$plyr-tooltip-arrow-size} * -1); + content: ''; + height: 0; left: 50%; - line-height: 1.3; - margin-bottom: ($plyr-tooltip-padding * 2); - opacity: 0; - padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5); - pointer-events: none; position: absolute; - transform: translate(-50%, 10px) scale(0.8); - transform-origin: 50% 100%; - transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; - white-space: nowrap; + transform: translateX(-50%); + width: 0; z-index: 2; - - // The background triangle - &::before { - border-left: $plyr-tooltip-arrow-size solid transparent; - border-right: $plyr-tooltip-arrow-size solid transparent; - border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background; - bottom: -$plyr-tooltip-arrow-size; - content: ''; - height: 0; - left: 50%; - position: absolute; - transform: translateX(-50%); - width: 0; - z-index: 2; - } + } } // Displaying .plyr .plyr__control:hover .plyr__tooltip, .plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__tooltip--visible { - opacity: 1; - transform: translate(-50%, 0) scale(1); + opacity: 1; + transform: translate(-50%, 0) scale(1); } .plyr .plyr__control:hover .plyr__tooltip { - z-index: 3; + z-index: 3; } // First tooltip .plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip { - left: 0; - transform: translate(0, 10px) scale(0.8); - transform-origin: 0 100%; + left: 0; + transform: translate(0, 10px) scale(0.8); + transform-origin: 0 100%; - &::before { - left: ($plyr-control-icon-size / 2) + $plyr-control-padding; - } + &::before { + left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}); + } } // Last tooltip .plyr__controls > .plyr__control:last-child .plyr__tooltip { - left: auto; - right: 0; - transform: translate(0, 10px) scale(0.8); - transform-origin: 100% 100%; + left: auto; + right: 0; + transform: translate(0, 10px) scale(0.8); + transform-origin: 100% 100%; - &::before { - left: auto; - right: ($plyr-control-icon-size / 2) + $plyr-control-padding; - transform: translateX(50%); - } + &::before { + left: auto; + right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}); + transform: translateX(50%); + } } .plyr__controls > .plyr__control:first-child, .plyr__controls > .plyr__control:first-child + .plyr__control, .plyr__controls > .plyr__control:last-child { - &:hover .plyr__tooltip, - &.plyr__tab-focus .plyr__tooltip, - .plyr__tooltip--visible { - transform: translate(0, 0) scale(1); - } + &:hover .plyr__tooltip, + &.plyr__tab-focus .plyr__tooltip, + .plyr__tooltip--visible { + transform: translate(0, 0) scale(1); + } } diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss index 614b35f5..be82f536 100644 --- a/src/sass/components/volume.scss +++ b/src/sass/components/volume.scss @@ -3,23 +3,23 @@ // -------------------------------------------------------------- .plyr__volume { - align-items: center; - display: flex; - max-width: 110px; - min-width: 80px; - position: relative; - width: 20%; + align-items: center; + display: flex; + max-width: 110px; + min-width: 80px; + position: relative; + width: 20%; - input[type='range'] { - margin-left: ($plyr-control-spacing / 2); - margin-right: ($plyr-control-spacing / 2); - position: relative; - z-index: 2; - } + input[type='range'] { + margin-left: calc(#{$plyr-control-spacing} / 2); + margin-right: calc(#{$plyr-control-spacing} / 2); + position: relative; + z-index: 2; + } } // Auto size on iOS as there's no slider .plyr--is-ios .plyr__volume { - min-width: 0; - width: auto; + min-width: 0; + width: auto; } diff --git a/src/sass/lib/animation.scss b/src/sass/lib/animation.scss index b6c22d42..b0443798 100644 --- a/src/sass/lib/animation.scss +++ b/src/sass/lib/animation.scss @@ -3,29 +3,29 @@ // -------------------------------------------------------------- @keyframes plyr-progress { - to { - background-position: $plyr-progress-loading-size 0; - } + to { + background-position: $plyr-progress-loading-size 0; + } } @keyframes plyr-popup { - 0% { - opacity: 0.5; - transform: translateY(10px); - } + 0% { + opacity: 0.5; + transform: translateY(10px); + } - to { - opacity: 1; - transform: translateY(0); - } + to { + opacity: 1; + transform: translateY(0); + } } @keyframes plyr-fade-in { - from { - opacity: 0; - } + from { + opacity: 0; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index 493df3a8..fb30f3a7 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -11,12 +11,12 @@ $css-vars-use-native: false !default; // Assigns a variable to the global map /// @function css-var-assign($varName: null, $varValue: null) { - @return map-merge( - $css-vars, - ( - $varName: $varValue, - ) - ); + @return map-merge( + $css-vars, + ( + $varName: $varValue, + ) + ); } /// @@ -30,33 +30,33 @@ $css-vars-use-native: false !default; // background: var(--main-background, green); /// @function var($args...) { - // CHECK PARAMS - @if (length($args) ==0) { - @error 'Variable name is expected to be passed to the var() function'; - } - @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') { - @error "Variable name is expected to start from '--'"; - } + // CHECK PARAMS + @if (length($args) ==0) { + @error 'Variable name is expected to be passed to the var() function'; + } + @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') { + @error "Variable name is expected to start from '--'"; + } - // PROCESS - $var-name: nth($args, 1); - $var-value: map-get($css-vars, $var-name); + // PROCESS + $var-name: nth($args, 1); + $var-value: map-get($css-vars, $var-name); - @if ($css-vars-use-native) { - // CSS variables - // Native CSS: don't process function in case of native - @return unquote('var(' + $args + ')'); - } @else { - @if ($var-value == null) { - // variable is not provided so far - @if (length($args) == 2) { - $var-value: nth($args, 2); - } - } - - // Sass: return value from the map - @return $var-value; + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: don't process function in case of native + @return unquote('var(' + $args + ')'); + } @else { + @if ($var-value == null) { + // variable is not provided so far + @if (length($args) == 2) { + $var-value: nth($args, 2); + } } + + // Sass: return value from the map + @return $var-value; + } } /// @@ -69,32 +69,32 @@ $css-vars-use-native: false !default; // )); /// @mixin css-vars($var-map: null) { - // CHECK PARAMS - @if ($var-map == null) { - @error 'Map of variables is expected, instead got: null'; - } - @if (type_of($var-map) != map) { - @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}'; - } + // CHECK PARAMS + @if ($var-map == null) { + @error 'Map of variables is expected, instead got: null'; + } + @if (type_of($var-map) != map) { + @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}'; + } - // PROCESS - @if ($css-vars-use-native) { - // CSS variables - // Native CSS: assign CSS custom properties to the global scope - @at-root :root { - @each $var-name, $var-value in $var-map { - @if (type_of($var-value) == string) { - #{$var-name}: $var-value; // to prevent quotes interpolation - } @else { - #{$var-name}: #{$var-value}; - } - } - } - } @else { - // Sass or debug - // merge variables and values to the global map (provides no output) - @each $var-name, $var-value in $var-map { - $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable + // PROCESS + @if ($css-vars-use-native) { + // CSS variables + // Native CSS: assign CSS custom properties to the global scope + @at-root :root { + @each $var-name, $var-value in $var-map { + @if (type_of($var-value) == string) { + #{$var-name}: $var-value; // to prevent quotes interpolation + } @else { + #{$var-name}: #{$var-value}; } + } + } + } @else { + // Sass or debug + // merge variables and values to the global map (provides no output) + @each $var-name, $var-value in $var-map { + $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable } + } } diff --git a/src/sass/lib/functions.scss b/src/sass/lib/functions.scss index a99a1b80..e991e2d8 100644 --- a/src/sass/lib/functions.scss +++ b/src/sass/lib/functions.scss @@ -3,5 +3,5 @@ // ========================================================================== @function to-percentage($input) { - @return $input * 1%; + @return $input * 1%; } diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 2426ef68..1eaa1a6c 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -4,97 +4,95 @@ // Nicer focus styles // --------------------------------------- -@mixin plyr-tab-focus() { - // box-shadow: 0 0 0 5px rgba($color, 0.5); - // outline: 0; - outline-color: var(--plyr-color-main); - outline-offset: 2px; - outline-style: dotted; - outline-width: 3px; +@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) { + outline-color: $color; + outline-offset: 2px; + outline-style: dotted; + outline-width: 3px; } // Font smoothing // --------------------------------------- @mixin plyr-font-smoothing($mode: true) { - @if $mode { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } @else { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } + @if $mode { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } @else { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } } // <input type="range"> styling // --------------------------------------- @mixin plyr-range-track() { - background: transparent; - border: 0; - border-radius: ($plyr-range-track-height / 2); - height: $plyr-range-track-height; - transition: box-shadow 0.3s ease; - user-select: none; + background: transparent; + border: 0; + border-radius: calc(#{$plyr-range-track-height} / 2); + height: $plyr-range-track-height; + transition: box-shadow 0.3s ease; + user-select: none; } @mixin plyr-range-thumb() { - background: $plyr-range-thumb-background; - border: 0; - border-radius: 100%; - box-shadow: $plyr-range-thumb-shadow; - height: $plyr-range-thumb-height; - position: relative; - transition: all 0.2s ease; - width: $plyr-range-thumb-height; + background: $plyr-range-thumb-background; + border: 0; + border-radius: 100%; + box-shadow: $plyr-range-thumb-shadow; + height: $plyr-range-thumb-height; + position: relative; + transition: all 0.2s ease; + width: $plyr-range-thumb-height; } -@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-background, 0.5)) { - box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; +@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) { + box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; } // Fullscreen styles // --------------------------------------- @mixin plyr-fullscreen-active() { - background: #000; - border-radius: 0 !important; - height: 100%; - margin: 0; - width: 100%; + background: #000; + border-radius: 0 !important; + height: 100%; + margin: 0; + width: 100%; - video { - height: 100%; - } + video { + height: 100%; + } - .plyr__video-wrapper { - height: 100%; - position: static; - } + .plyr__video-wrapper { + height: 100%; + position: static; + } - // Vimeo requires some different styling - &.plyr--vimeo .plyr__video-wrapper { - height: 0; - position: relative; - top: 50%; - transform: translateY(-50%); - } + // Vimeo requires some different styling + &.plyr--vimeo .plyr__video-wrapper { + height: 0; + position: relative; + top: 50%; + transform: translateY(-50%); + } - // Display correct icon - .plyr__control .icon--exit-fullscreen { - display: block; + // Display correct icon + .plyr__control .icon--exit-fullscreen { + display: block; - + svg { - display: none; - } + + svg { + display: none; } + } - // Hide cursor in fullscreen when controls hidden - &.plyr--hide-controls { - cursor: none; - } + // Hide cursor in fullscreen when controls hidden + &.plyr--hide-controls { + cursor: none; + } - // Large captions in full screen on larger screens - @media (min-width: $plyr-bp-lg) { - .plyr__captions { - font-size: $plyr-font-size-captions-large; - } + // Large captions in full screen on larger screens + @media (min-width: $plyr-bp-lg) { + .plyr__captions { + font-size: $plyr-font-size-captions-large; } + } } diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index a577e680..16fb43e4 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -3,54 +3,54 @@ // ========================================================================== .plyr__ads { - border-radius: inherit; - bottom: 0; - cursor: pointer; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: -1; // Hide it by default + border-radius: inherit; + bottom: 0; + cursor: pointer; + left: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + z-index: -1; // Hide it by default - // Make sure the inner container is big enough for the ad creative. - > div, - > div iframe { - height: 100%; - position: absolute; - width: 100%; - } + // Make sure the inner container is big enough for the ad creative. + > div, + > div iframe { + height: 100%; + position: absolute; + width: 100%; + } - // The countdown label - &::after { - background: rgba($plyr-color-gray-900, 0.8); - border-radius: 2px; - bottom: $plyr-control-spacing; - color: #fff; - content: attr(data-badge-text); - font-size: 11px; - padding: 2px 6px; - pointer-events: none; - position: absolute; - right: $plyr-control-spacing; - z-index: 3; - } + // The countdown label + &::after { + background: $plyr-color-gray-900; + border-radius: 2px; + bottom: $plyr-control-spacing; + color: #fff; + content: attr(data-badge-text); + font-size: 11px; + padding: 2px 6px; + pointer-events: none; + position: absolute; + right: $plyr-control-spacing; + z-index: 3; + } - &::after:empty { - display: none; - } + &::after:empty { + display: none; + } } // Advertisement cue's for the progress bar .plyr__cues { - background: currentColor; - display: block; - height: $plyr-range-track-height; - left: 0; - margin: -($plyr-range-track-height / 2) 0 0; - opacity: 0.8; - position: absolute; - top: 50%; - width: 3px; - z-index: 3; // Between progress and thumb + background: currentColor; + display: block; + height: $plyr-range-track-height; + left: 0; + margin: -($plyr-range-track-height / 2) 0 0; + opacity: 0.8; + position: absolute; + top: 50%; + width: 3px; + z-index: 3; // Between progress and thumb } diff --git a/src/sass/plugins/preview-thumbnails.scss b/src/sass/plugins/preview-thumbnails.scss deleted file mode 100644 index d20c9d18..00000000 --- a/src/sass/plugins/preview-thumbnails.scss +++ /dev/null @@ -1,118 +0,0 @@ -// -------------------------------------------------------------- -// Preview Thumbnails -// -------------------------------------------------------------- - -$plyr-preview-padding: $plyr-tooltip-padding !default; -$plyr-preview-background: $plyr-tooltip-background !default; -$plyr-preview-radius: $plyr-tooltip-radius !default; -$plyr-preview-shadow: $plyr-tooltip-shadow !default; -$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default; -$plyr-preview-image-background: $plyr-color-gray-200 !default; -$plyr-preview-time-font-size: $plyr-font-size-time !default; -$plyr-preview-time-padding: 3px 6px !default; -$plyr-preview-time-background: rgba(0, 0, 0, 0.55); -$plyr-preview-time-color: #fff; -$plyr-preview-time-bottom-offset: 6px; - -.plyr__preview-thumb { - background-color: $plyr-preview-background; - border-radius: 3px; - bottom: 100%; - box-shadow: $plyr-preview-shadow; - margin-bottom: $plyr-preview-padding * 2; - opacity: 0; - padding: $plyr-preview-radius; - pointer-events: none; - position: absolute; - transform: translate(0, 10px) scale(0.8); - transform-origin: 50% 100%; - transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; - z-index: 2; - - &--is-shown { - opacity: 1; - transform: translate(0, 0) scale(1); - } - - // The background triangle - &::before { - border-left: $plyr-preview-arrow-size solid transparent; - border-right: $plyr-preview-arrow-size solid transparent; - border-top: $plyr-preview-arrow-size solid $plyr-preview-background; - bottom: -$plyr-preview-arrow-size; - content: ''; - height: 0; - left: 50%; - position: absolute; - transform: translateX(-50%); - width: 0; - z-index: 2; - } - - &__image-container { - background: $plyr-preview-image-background; - border-radius: ($plyr-preview-radius - 1px); - overflow: hidden; - position: relative; - z-index: 0; - - img { - height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript - left: 0; - max-height: none; - max-width: none; - position: absolute; - top: 0; - width: 100%; - } - } - - // Seek time text - &__time-container { - bottom: $plyr-preview-time-bottom-offset; - left: 0; - position: absolute; - right: 0; - white-space: nowrap; - z-index: 3; - - span { - background-color: $plyr-preview-time-background; - border-radius: ($plyr-preview-radius - 1px); - color: $plyr-preview-time-color; - font-size: $plyr-preview-time-font-size; - padding: $plyr-preview-time-padding; - } - } -} - -.plyr__preview-scrubbing { - bottom: 0; - filter: blur(1px); - height: 100%; - left: 0; - margin: auto; // Required when video is different dimensions to container (e.g. fullscreen) - opacity: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - transition: opacity 0.3s ease; - width: 100%; - z-index: 1; - - &--is-shown { - opacity: 1; - } - - img { - height: 100%; - left: 0; - max-height: none; - max-width: none; - object-fit: contain; - position: absolute; - top: 0; - width: 100%; - } -} diff --git a/src/sass/plugins/preview-thumbnails/index.scss b/src/sass/plugins/preview-thumbnails/index.scss new file mode 100644 index 00000000..6a0382d0 --- /dev/null +++ b/src/sass/plugins/preview-thumbnails/index.scss @@ -0,0 +1,108 @@ +// -------------------------------------------------------------- +// Preview Thumbnails +// -------------------------------------------------------------- + +@import './settings.scss'; + +.plyr__preview-thumb { + background-color: $plyr-preview-background; + border-radius: 3px; + bottom: 100%; + box-shadow: $plyr-preview-shadow; + margin-bottom: calc(#{$plyr-preview-padding} * 2); + opacity: 0; + padding: $plyr-preview-radius; + pointer-events: none; + position: absolute; + transform: translate(0, 10px) scale(0.8); + transform-origin: 50% 100%; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; + z-index: 2; + + &--is-shown { + opacity: 1; + transform: translate(0, 0) scale(1); + } + + // The background triangle + &::before { + border-left: $plyr-preview-arrow-size solid transparent; + border-right: $plyr-preview-arrow-size solid transparent; + border-top: $plyr-preview-arrow-size solid $plyr-preview-background; + bottom: calc(#{$plyr-preview-arrow-size} * -1); + content: ''; + height: 0; + left: 50%; + position: absolute; + transform: translateX(-50%); + width: 0; + z-index: 2; + } + + &__image-container { + background: $plyr-preview-image-background; + border-radius: calc(#{$plyr-preview-radius} - 1px); + overflow: hidden; + position: relative; + z-index: 0; + + img { + height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript + left: 0; + max-height: none; + max-width: none; + position: absolute; + top: 0; + width: 100%; + } + } + + // Seek time text + &__time-container { + bottom: $plyr-preview-time-bottom-offset; + left: 0; + position: absolute; + right: 0; + white-space: nowrap; + z-index: 3; + + span { + background-color: $plyr-preview-time-background; + border-radius: ($plyr-preview-radius - 1px); + color: $plyr-preview-time-color; + font-size: $plyr-preview-time-font-size; + padding: $plyr-preview-time-padding; + } + } +} + +.plyr__preview-scrubbing { + bottom: 0; + filter: blur(1px); + height: 100%; + left: 0; + margin: auto; // Required when video is different dimensions to container (e.g. fullscreen) + opacity: 0; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + transition: opacity 0.3s ease; + width: 100%; + z-index: 1; + + &--is-shown { + opacity: 1; + } + + img { + height: 100%; + left: 0; + max-height: none; + max-width: none; + object-fit: contain; + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/src/sass/plugins/preview-thumbnails/settings.scss b/src/sass/plugins/preview-thumbnails/settings.scss new file mode 100644 index 00000000..155d6019 --- /dev/null +++ b/src/sass/plugins/preview-thumbnails/settings.scss @@ -0,0 +1,15 @@ +// -------------------------------------------------------------- +// Preview Thumbnails +// -------------------------------------------------------------- + +$plyr-preview-padding: $plyr-tooltip-padding !default; +$plyr-preview-background: $plyr-tooltip-background !default; +$plyr-preview-radius: $plyr-tooltip-radius !default; +$plyr-preview-shadow: $plyr-tooltip-shadow !default; +$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default; +$plyr-preview-image-background: $plyr-color-gray-200 !default; +$plyr-preview-time-font-size: $plyr-font-size-time !default; +$plyr-preview-time-padding: 3px 6px !default; +$plyr-preview-time-background: rgba(0, 0, 0, 0.55); +$plyr-preview-time-color: #fff; +$plyr-preview-time-bottom-offset: 6px; diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 3672b689..3a8ca093 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -46,7 +46,7 @@ $css-vars-use-native: true; @import 'states/fullscreen'; @import 'plugins/ads'; -@import 'plugins/preview-thumbnails'; +@import 'plugins/preview-thumbnails/index'; @import 'utils/animation'; @import 'utils/hidden'; diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss index 7915c048..0148f570 100644 --- a/src/sass/settings/badges.scss +++ b/src/sass/settings/badges.scss @@ -2,5 +2,6 @@ // Badges // ========================================================================== -$plyr-badge-background: $plyr-color-gray-700 !default; -$plyr-badge-color: #fff !default; +$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default; +$plyr-badge-color: var(--plyr-badge-color, #fff) !default; +$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default; diff --git a/src/sass/settings/breakpoints.scss b/src/sass/settings/breakpoints.scss index 77a5b93a..daa58f68 100644 --- a/src/sass/settings/breakpoints.scss +++ b/src/sass/settings/breakpoints.scss @@ -1,12 +1,9 @@ // ========================================================================== // Breakpoints +// NOTE: we can't use CSS variables for breakpoints unfortunately +// https://www.w3.org/TR/css-variables-1/#using-variables // ========================================================================== $plyr-bp-sm: 480px !default; $plyr-bp-md: 768px !default; $plyr-bp-lg: 1024px !default; - -// Max-width media queries -$plyr-bp-xs-max: ($plyr-bp-sm - 1); -$plyr-bp-sm-max: ($plyr-bp-md - 1); -$plyr-bp-md-max: ($plyr-bp-lg - 1); diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 50f577dc..85735faf 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -2,10 +2,10 @@ // Captions // ========================================================================== -$plyr-captions-background: rgba(#000, 0.8) !default; -$plyr-captions-text-color: #fff !default; +$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default; +$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default; -$plyr-font-size-captions-base: $plyr-font-size-base !default; -$plyr-font-size-captions-small: $plyr-font-size-small !default; -$plyr-font-size-captions-medium: $plyr-font-size-large !default; -$plyr-font-size-captions-large: $plyr-font-size-xlarge !default; +$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default; +$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default; +$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default; +$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default; diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index 6c9b0a3f..f1364905 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -2,32 +2,16 @@ // Colors // ========================================================================== -$plyr-color-main: hsl(198, 100%, 50%) !default; +$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default; // Grayscale -$plyr-color-gray-900: hsl(210, 15%, 16%); -$plyr-color-gray-800: lighten($plyr-color-gray-900, 9%); -$plyr-color-gray-700: lighten($plyr-color-gray-800, 9%); -$plyr-color-gray-600: lighten($plyr-color-gray-700, 9%); -$plyr-color-gray-500: lighten($plyr-color-gray-600, 9%); -$plyr-color-gray-400: lighten($plyr-color-gray-500, 9%); -$plyr-color-gray-300: lighten($plyr-color-gray-400, 9%); -$plyr-color-gray-200: lighten($plyr-color-gray-300, 9%); -$plyr-color-gray-100: lighten($plyr-color-gray-200, 9%); -$plyr-color-gray-50: lighten($plyr-color-gray-100, 9%); - -@include css-vars( - ( - --plyr-color-main: $plyr-color-main, - --plyr-color-gray-900: $plyr-color-gray-900, - --plyr-color-gray-800: $plyr-color-gray-800, - --plyr-color-gray-700: $plyr-color-gray-700, - --plyr-color-gray-600: $plyr-color-gray-600, - --plyr-color-gray-500: $plyr-color-gray-500, - --plyr-color-gray-400: $plyr-color-gray-400, - --plyr-color-gray-300: $plyr-color-gray-300, - --plyr-color-gray-200: $plyr-color-gray-200, - --plyr-color-gray-100: $plyr-color-gray-100, - --plyr-color-gray-50: $plyr-color-gray-50 - ) -); +$plyr-color-gray-900: hsl(216, 15%, 16%) !default; +$plyr-color-gray-800: hsl(216, 15%, 25%) !default; +$plyr-color-gray-700: hsl(216, 15%, 34%) !default; +$plyr-color-gray-600: hsl(216, 15%, 43%) !default; +$plyr-color-gray-500: hsl(216, 15%, 52%) !default; +$plyr-color-gray-400: hsl(216, 15%, 61%) !default; +$plyr-color-gray-300: hsl(216, 15%, 70%) !default; +$plyr-color-gray-200: hsl(216, 15%, 79%) !default; +$plyr-color-gray-100: hsl(216, 15%, 88%) !default; +$plyr-color-gray-50: hsl(216, 15%, 97%) !default; diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index a4009758..64882f4e 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -2,17 +2,31 @@ // Controls // ========================================================================== -$plyr-control-icon-size: 18px !default; -$plyr-control-spacing: 10px !default; -$plyr-control-padding: ($plyr-control-spacing * 0.7) !default; -$plyr-control-radius: 3px !default; +$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default; +$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default; +$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default; +$plyr-control-radius: var(--plyr-control-radius, 3px) !default; -$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default; -$plyr-video-control-color: #fff !default; -$plyr-video-control-color-hover: #fff !default; -$plyr-video-control-background-hover: $plyr-color-main !default; +$plyr-control-toggle-checked-background: var( + --plyr-control-toggle-checked-background, + var(--plyr-color-main, $plyr-color-main) +) !default; -$plyr-audio-controls-background: #fff !default; -$plyr-audio-control-color: $plyr-color-gray-700 !default; -$plyr-audio-control-color-hover: #fff !default; -$plyr-audio-control-background-hover: $plyr-color-main !default; +$plyr-video-controls-background: var( + --plyr-video-controls-background, + linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) +) !default; +$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default; +$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default; +$plyr-video-control-background-hover: var( + --plyr-video-control-background-hover, + var(--plyr-color-main, $plyr-color-main) +) !default; + +$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default; +$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default; +$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default; +$plyr-audio-control-background-hover: var( + --plyr-audio-control-background-hover, + var(--plyr-color-main, $plyr-color-main) +) !default; diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss index 80063850..3320ae7f 100644 --- a/src/sass/settings/cosmetics.scss +++ b/src/sass/settings/cosmetics.scss @@ -2,6 +2,4 @@ // Cosmetic // ========================================================================== -$plyr-tab-focus-default-color: $plyr-color-main !default; - -@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color)); +$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default; diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss index 62c3dd04..bdd1eb36 100644 --- a/src/sass/settings/menus.scss +++ b/src/sass/settings/menus.scss @@ -2,9 +2,14 @@ // Menus // ========================================================================== -$plyr-menu-background: rgba(#fff, 0.9) !default; -$plyr-menu-color: $plyr-color-gray-700 !default; -$plyr-menu-arrow-size: 6px !default; -$plyr-menu-border-color: rgba($plyr-color-gray-500, 0.2) !default; -$plyr-menu-border-shadow-color: #fff !default; -$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default; +$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default; +$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default; + +$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default; + +$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default; +$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default; + +// Border seperators +$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default; +$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default; diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss index a0e7f755..7e76da19 100644 --- a/src/sass/settings/progress.scss +++ b/src/sass/settings/progress.scss @@ -3,9 +3,12 @@ // ========================================================================== // Loading -$plyr-progress-loading-size: 25px !default; -$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default; +$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default; +$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default; // Buffered -$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default; -$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default; +$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default; +$plyr-audio-progress-buffered-background: var( + --plyr-audio-progress-buffered-background, + rgba($plyr-color-gray-200, 0.66) +) !default; diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index 17740623..928a46b3 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -2,23 +2,40 @@ // Sliders // ========================================================================== -// Active state -$plyr-range-thumb-active-shadow-width: 3px !default; - // Thumb -$plyr-range-thumb-height: 13px !default; -$plyr-range-thumb-background: #fff !default; -$plyr-range-thumb-border: 2px solid transparent !default; -$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default; +$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default; +$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default; +$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default; +$plyr-range-thumb-shadow: var( + --plyr-range-thumb-shadow, + 0 1px 1px rgba($plyr-color-gray-900, 0.15), + 0 0 0 1px rgba($plyr-color-gray-900, 0.2) +) !default; + +// Active state +$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5)); +$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default; // Track -$plyr-range-track-height: 5px !default; -$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default; +$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default; +$plyr-range-max-height: var( + --plyr-range-max-height, + calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height}) +) !default; // Fill -$plyr-range-fill-background: var(--plyr-color-main); +$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default; // Type specific -$plyr-video-range-track-background: $plyr-video-progress-buffered-background !default; -$plyr-audio-range-track-background: $plyr-audio-progress-buffered-background !default; -$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default; +$plyr-video-range-track-background: var( + --plyr-video-range-track-background, + $plyr-video-progress-buffered-background +) !default; +$plyr-audio-range-track-background: var( + --plyr-audio-range-track-background, + $plyr-audio-progress-buffered-background +) !default; +$plyr-audio-range-thumb-shadow-color: var( + --plyr-audio-range-thumb-shadow-color, + rgba($plyr-color-gray-900, 0.1) +) !default; diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss index 0ea5c582..76a9855a 100644 --- a/src/sass/settings/tooltips.scss +++ b/src/sass/settings/tooltips.scss @@ -2,9 +2,9 @@ // Tooltips // ========================================================================== -$plyr-tooltip-background: rgba(#fff, 0.9) !default; -$plyr-tooltip-color: $plyr-color-gray-700 !default; -$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default; -$plyr-tooltip-arrow-size: 4px !default; -$plyr-tooltip-radius: 3px !default; -$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default; +$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default; +$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default; +$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default; +$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default; +$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default; +$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default; diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss index e9ee2671..f424ecef 100644 --- a/src/sass/settings/type.scss +++ b/src/sass/settings/type.scss @@ -2,35 +2,20 @@ // Typography // ========================================================================== -$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default; -$plyr-font-size-base: 16px !default; -$plyr-font-size-small: 14px !default; -$plyr-font-size-large: 18px !default; -$plyr-font-size-xlarge: 21px !default; +$plyr-font-family: var(--plyr-font-family) !default; +$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default; +$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default; +$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default; +$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default; -$plyr-font-size-time: var(--plyr-font-size-small) !default; -$plyr-font-size-badge: 9px !default; -$plyr-font-size-menu: var(--plyr-font-size-small) !default; +$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default; +$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default; +$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default; +$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default; -$plyr-font-weight-regular: 500 !default; -$plyr-font-weight-bold: 600 !default; +$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default; +$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default; -$plyr-line-height: 1.7 !default; +$plyr-line-height: var(--plyr-line-height, 1.7) !default; $plyr-font-smoothing: false !default; - -@include css-vars( - ( - --plyr-font-family: $plyr-font-family, - --plyr-font-size-base: $plyr-font-size-base, - --plyr-font-size-small: $plyr-font-size-small, - --plyr-font-size-large: $plyr-font-size-large, - --plyr-font-size-xlarge: $plyr-font-size-xlarge, - --plyr-font-size-time: $plyr-font-size-time, - --plyr-font-size-badge: $plyr-font-size-badge, - --plyr-font-size-menu: $plyr-font-size-menu, - --plyr-font-weight-regular: $plyr-font-weight-regular, - --plyr-font-weight-bold: $plyr-font-weight-bold, - --plyr-line-height: $plyr-line-height - ) -); diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss index 73dffd29..4143d28e 100644 --- a/src/sass/states/fullscreen.scss +++ b/src/sass/states/fullscreen.scss @@ -3,32 +3,32 @@ // -------------------------------------------------------------- .plyr:fullscreen { - @include plyr-fullscreen-active(); + @include plyr-fullscreen-active(); } /* stylelint-disable-next-line */ .plyr:-webkit-full-screen { - @include plyr-fullscreen-active(); + @include plyr-fullscreen-active(); } /* stylelint-disable-next-line */ .plyr:-moz-full-screen { - @include plyr-fullscreen-active(); + @include plyr-fullscreen-active(); } /* stylelint-disable-next-line */ .plyr:-ms-fullscreen { - @include plyr-fullscreen-active(); + @include plyr-fullscreen-active(); } // Fallback for unsupported browsers .plyr--fullscreen-fallback { - @include plyr-fullscreen-active(); - bottom: 0; - display: block; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 10000000; + @include plyr-fullscreen-active(); + bottom: 0; + display: block; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 10000000; } diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss index d39f6f96..154d1ce9 100644 --- a/src/sass/types/audio.scss +++ b/src/sass/types/audio.scss @@ -4,61 +4,58 @@ // Container .plyr--audio { - display: block; + display: block; } // Controls container .plyr--audio .plyr__controls { - background: var(--plyr-audio-controls-background, $plyr-audio-controls-background); - border-radius: inherit; - color: var(--plyr-audio-control-color, $plyr-audio-control-color); - padding: $plyr-control-spacing; + background: $plyr-audio-controls-background; + border-radius: inherit; + color: $plyr-audio-control-color; + padding: $plyr-control-spacing; } // Control elements .plyr--audio .plyr__control { - &.plyr__tab-focus, - &:hover, - &[aria-expanded='true'] { - background: var( - --plyr-audio-control-background-hover, - var(--plyr-color-main, $plyr-audio-control-background-hover) - ); - color: var(--plyr-audio-control-color-hover, $plyr-audio-control-color-hover); - } + &.plyr__tab-focus, + &:hover, + &[aria-expanded='true'] { + background: $plyr-audio-control-background-hover; + color: $plyr-audio-control-color-hover; + } } // Range inputs .plyr--full-ui.plyr--audio input[type='range'] { - &::-webkit-slider-runnable-track { - background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background); - } - - &::-moz-range-track { - background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background); + &::-webkit-slider-runnable-track { + background-color: $plyr-audio-range-track-background; + } + + &::-moz-range-track { + background-color: $plyr-audio-range-track-background; + } + + &::-ms-track { + background-color: $plyr-audio-range-track-background; + } + + // Pressed styles + &:active { + &::-webkit-slider-thumb { + @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); } - &::-ms-track { - background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background); + &::-moz-range-thumb { + @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); } - // Pressed styles - &:active { - &::-webkit-slider-thumb { - @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); - } - - &::-moz-range-thumb { - @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); - } - - &::-ms-thumb { - @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); - } + &::-ms-thumb { + @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); } + } } // Progress .plyr--audio .plyr__progress__buffer { - color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background); + color: $plyr-audio-progress-buffered-background; } diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss index 6a17a51a..a259465f 100644 --- a/src/sass/types/video.scss +++ b/src/sass/types/video.scss @@ -4,20 +4,20 @@ // Container .plyr--video { - background: #000; - overflow: hidden; + background: #000; + overflow: hidden; - &.plyr--menu-open { - overflow: visible; - } + &.plyr--menu-open { + overflow: visible; + } } .plyr__video-wrapper { - background: #000; - height: 100%; - margin: auto; - overflow: hidden; - width: 100%; + background: #000; + height: 100%; + margin: auto; + overflow: hidden; + width: 100%; } // Default to 16:9 ratio but this is set by JavaScript based on config @@ -25,142 +25,138 @@ $embed-padding: ((100 / 16) * 9); .plyr__video-embed, .plyr__video-wrapper--fixed-ratio { - height: 0; - padding-bottom: to-percentage($embed-padding); + height: 0; + padding-bottom: to-percentage($embed-padding); } .plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video { - border: 0; - left: 0; - position: absolute; - top: 0; + border: 0; + left: 0; + position: absolute; + top: 0; } // If the full custom UI is supported .plyr--full-ui .plyr__video-embed { - $height: 240; - $offset: to-percentage(($height - $embed-padding) / ($height / 50)); - - // Only used for Vimeo - > .plyr__video-embed__container { - padding-bottom: to-percentage($height); - position: relative; - transform: translateY(-$offset); - } + $height: 240; + $offset: to-percentage(($height - $embed-padding) / ($height / 50)); + + // Only used for Vimeo + > .plyr__video-embed__container { + padding-bottom: to-percentage($height); + position: relative; + transform: translateY(-$offset); + } } // Controls container .plyr--video .plyr__controls { - background: $plyr-video-controls-background; - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; - bottom: 0; - color: var(--plyr-video-control-color, $plyr-video-control-color); - left: 0; - padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2); - position: absolute; - right: 0; - transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; - z-index: 3; - - @media (min-width: $plyr-bp-sm) { - padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing; - } + background: $plyr-video-controls-background; + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + bottom: 0; + color: $plyr-video-control-color; + left: 0; + padding: calc(#{$plyr-control-spacing} / 2); + padding-top: calc(#{$plyr-control-spacing} * 2); + position: absolute; + right: 0; + transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; + z-index: 3; + + @media (min-width: $plyr-bp-sm) { + padding: $plyr-control-spacing; + padding-top: calc(#{$plyr-control-spacing} * 3.5); + } } // Hide controls .plyr--video.plyr--hide-controls .plyr__controls { - opacity: 0; - pointer-events: none; - transform: translateY(100%); + opacity: 0; + pointer-events: none; + transform: translateY(100%); } // Control elements .plyr--video .plyr__control { - // Hover and tab focus - &.plyr__tab-focus, - &:hover, - &[aria-expanded='true'] { - background: var( - --plyr-video-control-background-hover, - var(--plyr-color-main, $plyr-video-control-background-hover) - ); - color: var(--plyr-video-control-color-hover, $plyr-video-control-color-hover); - } + // Hover and tab focus + &.plyr__tab-focus, + &:hover, + &[aria-expanded='true'] { + background: $plyr-video-control-background-hover; + color: $plyr-video-control-color-hover; + } } // Large play button (video only) .plyr__control--overlaid { - background: var( - --plyr-video-control-background-hover, - var(--plyr-color-main, $plyr-video-control-background-hover) - ); - border: 0; - border-radius: 100%; - color: $plyr-video-control-color; - display: none; - left: 50%; - opacity: 0.9; - padding: ceil($plyr-control-spacing * 1.5); - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - transition: 0.3s; - z-index: 2; - - // Offset icon to make the play button look right - svg { - left: 2px; - position: relative; - } - - &:hover, - &:focus { - opacity: 1; - } + background: $plyr-video-control-background-hover; + border: 0; + border-radius: 100%; + color: $plyr-video-control-color; + display: none; + left: 50%; + opacity: 0.9; + padding: calc(#{$plyr-control-spacing} * 1.5); + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: 0.3s; + z-index: 2; + + // Offset icon to make the play button look right + svg { + left: 2px; + position: relative; + } + + &:hover, + &:focus { + opacity: 1; + } } .plyr--playing .plyr__control--overlaid { - opacity: 0; - visibility: hidden; + opacity: 0; + visibility: hidden; } .plyr--full-ui.plyr--video .plyr__control--overlaid { - display: block; + display: block; } // Video range inputs .plyr--full-ui.plyr--video input[type='range'] { - &::-webkit-slider-runnable-track { - background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background); - } - - &::-moz-range-track { - background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background); + &::-webkit-slider-runnable-track { + background-color: $plyr-video-range-track-background; + } + + &::-moz-range-track { + background-color: $plyr-video-range-track-background; + } + + &::-ms-track { + background-color: $plyr-video-range-track-background; + } + + // Pressed styles + &:active { + &::-webkit-slider-thumb { + @include plyr-range-thumb-active(); } - &::-ms-track { - background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background); + &::-moz-range-thumb { + @include plyr-range-thumb-active(); } - // Pressed styles - &:active { - &::-webkit-slider-thumb { - @include plyr-range-thumb-active(); - } - - &::-moz-range-thumb { - @include plyr-range-thumb-active(); - } - - &::-ms-thumb { - @include plyr-range-thumb-active(); - } + &::-ms-thumb { + @include plyr-range-thumb-active(); } + } } // Progress .plyr--video .plyr__progress__buffer { - color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background); + color: $plyr-video-progress-buffered-background; } diff --git a/src/sass/utils/animation.scss b/src/sass/utils/animation.scss index 4a5b6b90..e7b09e1c 100644 --- a/src/sass/utils/animation.scss +++ b/src/sass/utils/animation.scss @@ -3,5 +3,5 @@ // -------------------------------------------------------------- .plyr--no-transition { - transition: none !important; + transition: none !important; } diff --git a/src/sass/utils/hidden.scss b/src/sass/utils/hidden.scss index a42c3be8..bdd96173 100644 --- a/src/sass/utils/hidden.scss +++ b/src/sass/utils/hidden.scss @@ -4,25 +4,25 @@ // Screen reader only elements .plyr__sr-only { - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + overflow: hidden; - // !important is not always needed - @if $plyr-sr-only-important { - border: 0 !important; - height: 1px !important; - padding: 0 !important; - position: absolute !important; - width: 1px !important; - } @else { - border: 0; - height: 1px; - padding: 0; - position: absolute; - width: 1px; - } + // !important is not always needed + @if $plyr-sr-only-important { + border: 0 !important; + height: 1px !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + } @else { + border: 0; + height: 1px; + padding: 0; + position: absolute; + width: 1px; + } } .plyr [hidden] { - display: none !important; + display: none !important; } |