Fixing Vimeo captions, WIP on settings menu, prettier and VS code settings
This commit is contained in:
Sam Potts
parent
2196665495
commit
2bba1f30e2
@ -14,6 +14,7 @@
|
||||
"SwitchCase": 1
|
||||
}],
|
||||
"quotes": ["error", "single"],
|
||||
"semi": ["error", "always"]
|
||||
"semi": ["error", "always"],
|
||||
"eqeqeq": ["error", "always"]
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
{
|
||||
"html": {
|
||||
"allowed_file_extensions": []
|
||||
},
|
||||
"css": {
|
||||
"allowed_file_extensions": []
|
||||
},
|
||||
"js": {
|
||||
"allowed_file_extensions": ["js", "json", "jsbeautifyrc"],
|
||||
"brace_style": "collapse",
|
||||
"break_chained_methods": false,
|
||||
"e4x": false,
|
||||
"end_with_newline": false,
|
||||
"indent_char": " ",
|
||||
"indent_level": 0,
|
||||
"indent_size": 4,
|
||||
"indent_with_tabs": false,
|
||||
"jslint_happy": false,
|
||||
"keep_array_indentation": true,
|
||||
"keep_function_indentation": true,
|
||||
"max_preserve_newlines": 2,
|
||||
"preserve_newlines": true,
|
||||
"space_after_anon_function": false,
|
||||
"space_before_conditional": true,
|
||||
"space_in_empty_paren": false,
|
||||
"space_in_paren": false,
|
||||
"unescape_strings": false,
|
||||
"wrap_line_length": 0,
|
||||
"wrap_attributes": "auto",
|
||||
"wrap_attributes_indent_size": 4
|
||||
}
|
||||
}
|
||||
25
.vscode/settings.json
vendored
Normal file
25
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
// Exclude from the editor
|
||||
"files.exclude": {
|
||||
"**/node_modules": true
|
||||
},
|
||||
|
||||
// Exclude from search
|
||||
"search.exclude": {
|
||||
"dist/": true
|
||||
},
|
||||
|
||||
// Formatting
|
||||
"editor.tabSize": 4,
|
||||
"editor.insertSpaces": true,
|
||||
"editor.formatOnSave": true,
|
||||
|
||||
// Trim on save
|
||||
"files.trimTrailingWhitespace": true,
|
||||
|
||||
// Prettier settings
|
||||
"prettier.tabWidth": 4,
|
||||
"prettier.eslintIntegration": true,
|
||||
"prettier.printWidth": 120,
|
||||
"prettier.cssEnable": ["css", "less", "scss"]
|
||||
}
|
||||
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
File diff suppressed because one or more lines are too long
@ -52,7 +52,7 @@
|
||||
vimeo: 'vimeo'
|
||||
};
|
||||
var currentType = window.location.hash.replace('#', '');
|
||||
var historySupport = (window.history && window.history.pushState);
|
||||
var historySupport = window.history && window.history.pushState;
|
||||
|
||||
// Bind to each button
|
||||
[].forEach.call(buttons, function(button) {
|
||||
@ -62,9 +62,13 @@
|
||||
newSource(type);
|
||||
|
||||
if (historySupport) {
|
||||
history.pushState({
|
||||
'type': type
|
||||
}, '', '#' + type);
|
||||
history.pushState(
|
||||
{
|
||||
type: type
|
||||
},
|
||||
'',
|
||||
'#' + type
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -87,9 +91,13 @@
|
||||
|
||||
// Replace current history state
|
||||
if (currentType in types) {
|
||||
history.replaceState({
|
||||
'type': currentType
|
||||
}, '', (video ? '' : '#' + currentType));
|
||||
history.replaceState(
|
||||
{
|
||||
type: currentType
|
||||
},
|
||||
'',
|
||||
video ? '' : '#' + currentType
|
||||
);
|
||||
}
|
||||
|
||||
// If it's not video, load the source
|
||||
@ -122,18 +130,28 @@
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||
type: 'video/mp4'
|
||||
}],
|
||||
sources: [
|
||||
{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||
type: 'video/mp4'
|
||||
}
|
||||
],
|
||||
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||
tracks: [{
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
srclang: 'en',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
||||
default: true
|
||||
}]
|
||||
tracks: [
|
||||
{
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
srclang: 'en',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
||||
default: true
|
||||
},
|
||||
{
|
||||
kind: 'captions',
|
||||
label: 'French',
|
||||
srclang: 'fr',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
|
||||
@ -141,13 +159,16 @@
|
||||
player.source({
|
||||
type: 'audio',
|
||||
title: 'Kishi Bashi – “It All Began With A Burst”',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
|
||||
type: 'audio/mp3'
|
||||
}, {
|
||||
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
||||
type: 'audio/ogg'
|
||||
}]
|
||||
sources: [
|
||||
{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
|
||||
type: 'audio/mp3'
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
||||
type: 'audio/ogg'
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
|
||||
@ -155,10 +176,12 @@
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [{
|
||||
src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
|
||||
type: 'youtube'
|
||||
}]
|
||||
sources: [
|
||||
{
|
||||
src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
|
||||
type: 'youtube'
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
|
||||
@ -166,10 +189,12 @@
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [{
|
||||
src: 'https://vimeo.com/76979871',
|
||||
type: 'vimeo'
|
||||
}]
|
||||
sources: [
|
||||
{
|
||||
src: 'https://vimeo.com/76979871',
|
||||
type: 'vimeo'
|
||||
}
|
||||
]
|
||||
});
|
||||
break;
|
||||
}
|
||||
@ -198,9 +223,11 @@
|
||||
if (window.location.host === 'plyr.io') {
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i.GoogleAnalyticsObject = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
};
|
||||
i[r] =
|
||||
i[r] ||
|
||||
function() {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
};
|
||||
i[r].l = 1 * new Date();
|
||||
a = s.createElement(o);
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
@ -210,4 +237,4 @@ if (window.location.host === 'plyr.io') {
|
||||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||
window.ga('create', 'UA-40881672-11', 'auto');
|
||||
window.ga('send', 'pageview');
|
||||
}
|
||||
}
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
100
package.json
100
package.json
@ -1,51 +1,51 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "2.0.13",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-clean-css": "^2.0.12",
|
||||
"gulp-concat": "^2.3.3",
|
||||
"gulp-less": "^3.0.5",
|
||||
"gulp-open": "^2.0.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.5.3",
|
||||
"gulp-s3": "^0.3.0",
|
||||
"gulp-sass": "^2.3.2",
|
||||
"gulp-size": "^2.1.0",
|
||||
"gulp-svgmin": "^1.2.2",
|
||||
"gulp-svgstore": "^6.0.0",
|
||||
"gulp-uglify": "^2.0.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.2.2",
|
||||
"through2": "^2.0.1"
|
||||
},
|
||||
"keywords": [
|
||||
"HTML5 Video",
|
||||
"HTML5 Audio",
|
||||
"Media Player",
|
||||
"DASH",
|
||||
"Shaka",
|
||||
"WordPress",
|
||||
"HLS"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/sampotts/plyr.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/sampotts/plyr/issues"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "readme.md"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Sam Potts <sam@potts.es>"
|
||||
}
|
||||
"name": "plyr",
|
||||
"version": "2.0.13",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^4.0.0",
|
||||
"gulp-clean-css": "^3.7.0",
|
||||
"gulp-concat": "^2.3.3",
|
||||
"gulp-less": "^3.3.2",
|
||||
"gulp-open": "^2.0.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.6.1",
|
||||
"gulp-s3": "^0.11.0",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-size": "^2.1.0",
|
||||
"gulp-svgmin": "^1.2.4",
|
||||
"gulp-svgstore": "^6.0.0",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.2.2",
|
||||
"through2": "^2.0.1"
|
||||
},
|
||||
"keywords": [
|
||||
"HTML5 Video",
|
||||
"HTML5 Audio",
|
||||
"Media Player",
|
||||
"DASH",
|
||||
"Shaka",
|
||||
"WordPress",
|
||||
"HLS"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/sampotts/plyr.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/sampotts/plyr/issues"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "readme.md"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Sam Potts <sam@potts.es>"
|
||||
}
|
||||
1154
src/js/plyr.js
1154
src/js/plyr.js
File diff suppressed because it is too large
Load Diff
@ -9,7 +9,9 @@
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@keyframes plyr-progress {
|
||||
to { background-position: @plyr-progress-loading-size 0; }
|
||||
to {
|
||||
background-position: @plyr-progress-loading-size 0;
|
||||
}
|
||||
}
|
||||
@keyframes plyr-popup {
|
||||
from {
|
||||
@ -46,7 +48,10 @@
|
||||
|
||||
& when (@plyr-touch-action = true) {
|
||||
// Fix 300ms delay
|
||||
a, button, input, label {
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
@ -232,19 +237,20 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: (@plyr-control-spacing * 2);
|
||||
padding: @plyr-control-spacing;
|
||||
transform: translateY(-(@plyr-control-spacing * 4));
|
||||
transition: transform .3s ease;
|
||||
color: @plyr-captions-color;
|
||||
font-size: @plyr-font-size-captions-base;
|
||||
font-size: @plyr-font-size-captions-small;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
border-radius: 2px;
|
||||
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
|
||||
padding: .2em .5em;
|
||||
background: @plyr-captions-bg;
|
||||
box-decoration-break: clone;
|
||||
line-height: 150%;
|
||||
line-height: 170%;
|
||||
white-space: pre-wrap;
|
||||
|
||||
// Firefox adds a <div> when using getCueAsHTML()
|
||||
div {
|
||||
@ -255,6 +261,10 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: @plyr-bp-screen-sm) {
|
||||
padding: (@plyr-control-spacing * 2);
|
||||
font-size: @plyr-font-size-captions-base;
|
||||
}
|
||||
@media (min-width: @plyr-bp-screen-md) {
|
||||
font-size: @plyr-font-size-captions-medium;
|
||||
}
|
||||
@ -335,9 +345,7 @@
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background .3s ease,
|
||||
color .3s ease,
|
||||
opacity .3s ease;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
color: inherit;
|
||||
|
||||
svg {
|
||||
@ -346,7 +354,9 @@
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 1px 1px fade(#000, 15%));
|
||||
}
|
||||
|
||||
// Hide toggle icons by default
|
||||
.icon--exit-fullscreen,
|
||||
.icon--muted,
|
||||
@ -367,8 +377,8 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
|
||||
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
|
||||
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
|
||||
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: @plyr-video-control-color;
|
||||
@ -521,8 +531,7 @@
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
transition: height .35s cubic-bezier(.4, 0, .2, 1),
|
||||
width .35s cubic-bezier(.4, 0, .2, 1);
|
||||
transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
|
||||
}
|
||||
|
||||
// Arrow
|
||||
@ -719,7 +728,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Playback progress
|
||||
// --------------------------------------------------------------
|
||||
// <progress> element
|
||||
@ -763,7 +771,7 @@
|
||||
margin: -(@plyr-range-track-height / 2) 0 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
|
||||
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
|
||||
@ -830,6 +838,7 @@
|
||||
.plyr--video .plyr__progress--buffer,
|
||||
.plyr--video .plyr__volume--display {
|
||||
background: @plyr-video-range-track-bg;
|
||||
box-shadow: 0 1px 1px fade(#000, 15%);
|
||||
}
|
||||
.plyr--video .plyr__progress--buffer {
|
||||
color: @plyr-video-progress-buffered-bg;
|
||||
@ -855,7 +864,8 @@
|
||||
@plyr-progress-loading-bg 50%,
|
||||
@plyr-progress-loading-bg 75%,
|
||||
transparent 75%,
|
||||
transparent);
|
||||
transparent
|
||||
);
|
||||
color: transparent;
|
||||
}
|
||||
.plyr--video.plyr--loading .plyr__progress--buffer {
|
||||
@ -886,6 +896,9 @@
|
||||
margin-right: @plyr-control-spacing;
|
||||
}
|
||||
}
|
||||
.plyr--video .plyr__time {
|
||||
text-shadow: 0 1px 1px fade(#000, 15%);
|
||||
}
|
||||
|
||||
// Volume
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@ -4,76 +4,77 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Settings
|
||||
@plyr-border-box: true;
|
||||
@plyr-touch-action: true;
|
||||
@plyr-sr-only-important: true;
|
||||
@plyr-border-box: true;
|
||||
@plyr-touch-action: true;
|
||||
@plyr-sr-only-important: true;
|
||||
|
||||
// Colors
|
||||
@plyr-color-main: #1aafff;
|
||||
@plyr-color-main: #1aafff;
|
||||
|
||||
// Font
|
||||
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
@plyr-font-weight-normal: 500;
|
||||
@plyr-font-weight-bold: 600;
|
||||
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
@plyr-font-size-small: 14px;
|
||||
@plyr-font-size-base: 16px;
|
||||
@plyr-font-weight-normal: 500;
|
||||
@plyr-font-weight-bold: 600;
|
||||
|
||||
// Captions
|
||||
@plyr-captions-bg: fade(#343f4a, 80%);
|
||||
@plyr-captions-color: #fff;
|
||||
@plyr-font-size-captions-base: @plyr-font-size-base;
|
||||
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
|
||||
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
|
||||
@plyr-captions-bg: fade(#343f4a, 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);
|
||||
|
||||
// Controls
|
||||
@plyr-control-icon-size: 18px;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-control-padding: (@plyr-control-spacing * .7);
|
||||
@plyr-video-controls-bg: #343f4a;
|
||||
@plyr-video-control-color: #fff;
|
||||
@plyr-video-control-color-hover: #fff;
|
||||
@plyr-video-control-bg-hover: @plyr-color-main;
|
||||
@plyr-audio-controls-bg: #fff;
|
||||
@plyr-audio-controls-border: 1px solid #dbe3e8;
|
||||
@plyr-audio-control-color: #565d64;
|
||||
@plyr-audio-control-color-hover: #fff;
|
||||
@plyr-audio-control-bg-hover: @plyr-color-main;
|
||||
@plyr-control-icon-size: 18px;
|
||||
@plyr-control-spacing: 10px;
|
||||
@plyr-control-padding: (@plyr-control-spacing * .7);
|
||||
@plyr-video-controls-bg: #343f4a;
|
||||
@plyr-video-control-color: #fff;
|
||||
@plyr-video-control-color-hover: #fff;
|
||||
@plyr-video-control-bg-hover: @plyr-color-main;
|
||||
@plyr-audio-controls-bg: #fff;
|
||||
@plyr-audio-controls-border: 1px solid #dbe3e8;
|
||||
@plyr-audio-control-color: #565d64;
|
||||
@plyr-audio-control-color-hover: #fff;
|
||||
@plyr-audio-control-bg-hover: @plyr-color-main;
|
||||
|
||||
// Tooltips
|
||||
@plyr-tooltip-bg: fade(#343f4a, 90%);
|
||||
@plyr-tooltip-color: #fff;
|
||||
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
|
||||
@plyr-tooltip-arrow-size: 4px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
@plyr-tooltip-bg: fade(#343f4a, 90%);
|
||||
@plyr-tooltip-color: #fff;
|
||||
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
|
||||
@plyr-tooltip-arrow-size: 4px;
|
||||
@plyr-tooltip-radius: 3px;
|
||||
|
||||
// Menus
|
||||
@plyr-menu-bg: @plyr-tooltip-bg;
|
||||
@plyr-menu-color: @plyr-tooltip-color;
|
||||
@plyr-menu-arrow-size: 6px;
|
||||
@plyr-menu-bg: @plyr-tooltip-bg;
|
||||
@plyr-menu-color: @plyr-tooltip-color;
|
||||
@plyr-menu-arrow-size: 6px;
|
||||
|
||||
// Progress
|
||||
@plyr-progress-loading-size: 25px;
|
||||
@plyr-progress-loading-bg: fade(#343f4a, 20%);
|
||||
@plyr-video-progress-bg: fade(#fff, 25%);
|
||||
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
|
||||
@plyr-audio-progress-bg: fade(#c6d6db, 66%);
|
||||
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
|
||||
@plyr-progress-loading-size: 25px;
|
||||
@plyr-progress-loading-bg: fade(#343f4a, 20%);
|
||||
@plyr-video-progress-bg: fade(#fff, 25%);
|
||||
@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
|
||||
@plyr-audio-progress-bg: fade(#c6d6db, 66%);
|
||||
@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
|
||||
|
||||
// Range sliders
|
||||
@plyr-range-track-height: 8px;
|
||||
@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
|
||||
@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
|
||||
@plyr-range-thumb-bg: #fff;
|
||||
@plyr-range-thumb-border: 2px solid transparent;
|
||||
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
|
||||
@plyr-range-thumb-active-border-color: #fff;
|
||||
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
|
||||
@plyr-range-thumb-active-scale: 1.25;
|
||||
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
|
||||
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
|
||||
@plyr-range-selected-bg: @plyr-color-main;
|
||||
@plyr-range-track-height: 8px;
|
||||
@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
|
||||
@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
|
||||
@plyr-range-thumb-bg: #fff;
|
||||
@plyr-range-thumb-border: 2px solid transparent;
|
||||
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
|
||||
@plyr-range-thumb-active-border-color: #fff;
|
||||
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
|
||||
@plyr-range-thumb-active-scale: 1.25;
|
||||
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
|
||||
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
|
||||
@plyr-range-selected-bg: @plyr-color-main;
|
||||
|
||||
// Breakpoints
|
||||
@plyr-bp-screen-sm: 480px;
|
||||
@plyr-bp-screen-md: 768px;
|
||||
@plyr-bp-screen-lg: 1024px;
|
||||
@plyr-bp-screen-sm: 480px;
|
||||
@plyr-bp-screen-md: 768px;
|
||||
@plyr-bp-screen-lg: 1024px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user