diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/js/ui.js | 2 | ||||
-rw-r--r-- | src/js/utils.js | 4 | ||||
-rw-r--r-- | src/less/base.less | 7 | ||||
-rw-r--r-- | src/less/components/badges.less | 3 | ||||
-rw-r--r-- | src/less/components/buttons.less | 10 | ||||
-rw-r--r-- | src/less/components/captions.less | 1 | ||||
-rw-r--r-- | src/less/components/menus.less | 14 | ||||
-rw-r--r-- | src/less/components/progress.less | 1 | ||||
-rw-r--r-- | src/less/components/sliders.less | 22 | ||||
-rw-r--r-- | src/less/components/times.less | 2 | ||||
-rw-r--r-- | src/less/components/tooltips.less | 2 | ||||
-rw-r--r-- | src/less/lib/mixins.less | 11 | ||||
-rw-r--r-- | src/less/settings.less | 20 |
13 files changed, 62 insertions, 37 deletions
diff --git a/src/js/ui.js b/src/js/ui.js index 14b8d1cb..bc7443b5 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -144,7 +144,7 @@ const ui = { utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused); this.toggleControls(!this.playing); - }, 10); + }, 100); }, // Check if media is loading diff --git a/src/js/utils.js b/src/js/utils.js index aeb5ecd2..36fdaa6e 100644 --- a/src/js/utils.js +++ b/src/js/utils.js @@ -41,7 +41,9 @@ const utils = { return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue); }, track(input) { - return this.instanceof(input, window.TextTrack) || this.string(input.kind); + return ( + this.instanceof(input, window.TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind)) + ); }, nullOrUndefined(input) { return input === null || typeof input === 'undefined'; diff --git a/src/less/base.less b/src/less/base.less index 0fb14bd8..9839b533 100644 --- a/src/less/base.less +++ b/src/less/base.less @@ -8,12 +8,12 @@ max-width: 100%; min-width: 200px; font-family: @plyr-font-family; - font-weight: @plyr-font-weight-normal; + font-weight: @plyr-font-weight-regular; line-height: @plyr-line-height; direction: ltr; text-shadow: none; transition: box-shadow 0.3s ease; - .plyr-font-smoothing(off); + .plyr-font-smoothing(@plyr-font-smoothing); // Media elements video, @@ -25,8 +25,7 @@ } &:focus { - outline: 0; - box-shadow: 0 0 0 3px fade(#000, 10%); + .plyr-tab-focus(); } } diff --git a/src/less/components/badges.less b/src/less/components/badges.less index d87706df..2668674c 100644 --- a/src/less/components/badges.less +++ b/src/less/components/badges.less @@ -7,7 +7,6 @@ border-radius: 2px; background: @plyr-menu-color; color: @plyr-menu-bg; - font-size: @plyr-font-size-tiny; + font-size: @plyr-font-size-micro; line-height: 1; - .plyr-font-smoothing(on); } diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less index 3a9057c6..238f13c9 100644 --- a/src/less/components/buttons.less +++ b/src/less/components/buttons.less @@ -9,7 +9,7 @@ background: transparent; border-radius: 3px; cursor: pointer; - transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; + transition: all 0.3s ease; color: inherit; svg { @@ -29,6 +29,11 @@ &:focus { outline: 0; } + + // Tab focus + &.plyr__tab-focus { + .plyr-tab-focus(); + } } // Change icons on state change @@ -85,8 +90,7 @@ } &.plyr__tab-focus { - outline: 0; - box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%); + .plyr-tab-focus(); } } diff --git a/src/less/components/captions.less b/src/less/components/captions.less index 3082b899..14c1d2e7 100644 --- a/src/less/components/captions.less +++ b/src/less/components/captions.less @@ -19,7 +19,6 @@ color: @plyr-captions-color; font-size: @plyr-font-size-captions-small; text-align: center; - .plyr-font-smoothing(on); span { border-radius: 2px; diff --git a/src/less/components/menus.less b/src/less/components/menus.less index 2b3ae418..80b8fabe 100644 --- a/src/less/components/menus.less +++ b/src/less/components/menus.less @@ -34,7 +34,7 @@ white-space: nowrap; text-align: left; color: @plyr-menu-color; - font-size: @plyr-font-size-small; + font-size: @plyr-font-size-base; > div { overflow: hidden; @@ -67,7 +67,6 @@ width: 100%; padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2); color: @plyr-menu-color; - font-weight: @plyr-font-weight-bold; user-select: none; &::after { @@ -101,7 +100,7 @@ margin: @plyr-control-padding; margin-bottom: floor(@plyr-control-padding / 2); padding-left: ceil(@plyr-control-padding * 4); - font-weight: @plyr-font-weight-normal; + font-weight: @plyr-font-weight-regular; &::after { left: @plyr-control-padding; @@ -166,6 +165,10 @@ } } + input[type='radio']:focus + span { + .plyr-tab-focus(); + } + &.plyr__tab-focus input[type='radio'] + span, &:hover input[type='radio'] + span { background: fade(#000, 10%); @@ -181,11 +184,6 @@ padding-left: ceil(@plyr-control-padding * 3.5); pointer-events: none; overflow: hidden; - font-weight: @plyr-font-weight-normal; - - .plyr__badge { - font-weight: @plyr-font-weight-bold; - } } } } diff --git a/src/less/components/progress.less b/src/less/components/progress.less index 0022dfe0..1472f9c5 100644 --- a/src/less/components/progress.less +++ b/src/less/components/progress.less @@ -15,6 +15,7 @@ // Seek tooltip to show time .plyr__tooltip { left: 0; + font-size: @plyr-font-size-time; } } diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less index dff1da8b..b420c8ad 100644 --- a/src/less/components/sliders.less +++ b/src/less/components/sliders.less @@ -81,6 +81,20 @@ border: 0; } + &.plyr__tab-focus { + &::-webkit-slider-runnable-track { + .plyr-tab-focus(); + } + + &::-moz-range-track { + .plyr-tab-focus(); + } + + &::-ms-track { + .plyr-tab-focus(); + } + } + // Pressed styles &:active { &::-webkit-slider-thumb { @@ -110,10 +124,6 @@ &::-ms-track { background: @plyr-video-range-track-bg; } - - &.plyr__tab-focus { - box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%); - } } // Audio range inputs @@ -129,8 +139,4 @@ &::-ms-track { background: @plyr-audio-range-track-bg; } - - &.plyr__tab-focus { - box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%); - } } diff --git a/src/less/components/times.less b/src/less/components/times.less index ea4466d1..29b06aa0 100644 --- a/src/less/components/times.less +++ b/src/less/components/times.less @@ -5,7 +5,7 @@ .plyr__time { display: inline-block; vertical-align: middle; - font-size: @plyr-font-size-small; + font-size: @plyr-font-size-time; } // Media duration hidden on small screens diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less index 7b85d3ff..79b8e404 100644 --- a/src/less/components/tooltips.less +++ b/src/less/components/tooltips.less @@ -15,7 +15,7 @@ box-shadow: @plyr-tooltip-shadow; color: @plyr-tooltip-color; font-size: @plyr-font-size-small; - font-weight: @plyr-font-weight-normal; + font-weight: @plyr-font-weight-regular; line-height: 1.3; transform: translate(-50%, 10px) scale(0.8); transform-origin: 50% 100%; diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less index 22ffed9d..e58bb16e 100644 --- a/src/less/lib/mixins.less +++ b/src/less/lib/mixins.less @@ -3,6 +3,13 @@ // https://github.com/sampotts/plyr // ========================================================================== +// Nicer focus styles +// --------------------------------------- +.plyr-tab-focus(@color: @plyr-tab-focus-default-color) { + outline: 0; + box-shadow: 0 0 0 3px fade(@color, 35%); +} + // Font smoothing // --------------------------------------- .plyr-font-smoothing(@mode: on) when(@mode = on) { @@ -15,12 +22,14 @@ } // <input type="range"> styling +// --------------------------------------- .plyr-range-track() { height: @plyr-range-track-height; background: transparent; border: 0; border-radius: (@plyr-range-track-height / 2); user-select: none; + transition: all 0.3s ease; } .plyr-range-thumb() { @@ -42,9 +51,11 @@ } // Fullscreen styles +// --------------------------------------- .plyr-fullscreen-active() { height: 100%; width: 100%; + margin: 0; background: #000; border-radius: 0 !important; diff --git a/src/less/settings.less b/src/less/settings.less index bbcca869..c4854037 100644 --- a/src/less/settings.less +++ b/src/less/settings.less @@ -12,21 +12,26 @@ @plyr-color-main: #1aafff; // Font -@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; -@plyr-font-size-base: 16px; -@plyr-font-size-small: 14px; -@plyr-font-size-tiny: 10px; -@plyr-font-weight-normal: 500; +@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; +@plyr-font-size-base: 13px; +@plyr-font-size-small: 12px; +@plyr-font-size-tiny: 11px; +@plyr-font-size-micro: 9px; +@plyr-font-weight-regular: 500; @plyr-font-weight-bold: 600; @plyr-line-height: 1.7; +@plyr-font-smoothing: on; + +// Focus +@plyr-tab-focus-default-color: @plyr-color-main; // Captions @plyr-captions-bg: fade(#000, 80%); @plyr-captions-color: #fff; @plyr-font-size-captions-base: @plyr-font-size-base; @plyr-font-size-captions-small: @plyr-font-size-small; -@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.25); -@plyr-font-size-captions-large: (@plyr-font-size-base * 1.5); +@plyr-font-size-captions-medium: 18px; +@plyr-font-size-captions-large: 21px; // Controls @plyr-control-icon-size: 18px; @@ -41,6 +46,7 @@ @plyr-audio-control-color: #565d64; @plyr-audio-control-color-hover: #fff; @plyr-audio-control-bg-hover: @plyr-color-main; +@plyr-font-size-time: @plyr-font-size-tiny; // Tooltips @plyr-tooltip-bg: fade(#fff, 90%); |