diff --git a/bundles.json b/bundles.json index ab92813c..caf9f133 100644 --- a/bundles.json +++ b/bundles.json @@ -1,14 +1,25 @@ { - "less": { - "plyr.css": ["src/less/plyr.less"], - "docs.css": ["src/less/docs.less"] + "plyr": { + "less": { + "plyr.css": ["src/less/plyr.less"] + }, + "sass": { + "plyr.css": ["src/less/plyr.sass"] + }, + "js": { + "plyr.js": ["src/js/plyr.js"] + } }, - "js": { - "plyr.js": ["src/js/plyr.js"], - "docs.js": [ - "src/js/lib/hogan-3.0.2.mustache.js", - "dist/js/templates.js", - "src/js/docs.js" - ] + "docs": { + "less": { + "docs.css": ["docs/src/less/docs.less"] + }, + "js": { + "docs.js": [ + "docs/src/js/lib/hogan-3.0.2.mustache.js", + "docs/dist/js/templates.js", + "docs/src/js/docs.js" + ] + } } } \ No newline at end of file diff --git a/dist/css/docs.css b/dist/css/docs.css deleted file mode 100644 index 4846c937..00000000 --- a/dist/css/docs.css +++ /dev/null @@ -1 +0,0 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600} \ No newline at end of file diff --git a/docs/dist/css/docs.css b/docs/dist/css/docs.css new file mode 100644 index 00000000..19f19fb1 --- /dev/null +++ b/docs/dist/css/docs.css @@ -0,0 +1 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px} \ No newline at end of file diff --git a/dist/js/docs.js b/docs/dist/js/docs.js similarity index 100% rename from dist/js/docs.js rename to docs/dist/js/docs.js diff --git a/dist/js/templates.js b/docs/dist/js/templates.js similarity index 100% rename from dist/js/templates.js rename to docs/dist/js/templates.js diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..5a9ae5fc --- /dev/null +++ b/docs/index.html @@ -0,0 +1,79 @@ + + + + + Plyr - A simple HTML5 media player + + + + + + + + + + + +
+

Plyr

+

A simple HTML5 media player with custom controls and WebVTT captions.

+ Download on Github +
+ +
+
+
+ +
+ Big Buck Bunny. More info can be found at peach.blender.org. +
+ +
+
+ +
+ "96" by Logistics, which can be purchased from Hospital Records. +
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/js/docs.js b/docs/src/js/docs.js similarity index 100% rename from src/js/docs.js rename to docs/src/js/docs.js diff --git a/src/js/lib/hogan-3.0.2.mustache.js b/docs/src/js/lib/hogan-3.0.2.mustache.js similarity index 100% rename from src/js/lib/hogan-3.0.2.mustache.js rename to docs/src/js/lib/hogan-3.0.2.mustache.js diff --git a/src/less/docs.less b/docs/src/less/docs.less similarity index 94% rename from src/less/docs.less rename to docs/src/less/docs.less index 890f69dd..8e08546f 100644 --- a/src/less/docs.less +++ b/docs/src/less/docs.less @@ -3,9 +3,11 @@ // ========================================================================== // Reset -@import "docs/normalize.less"; +@import "lib/normalize.less"; // Mixins -@import "docs/mixins.less"; +@import "lib/mixins.less"; +// Fonts - docs only! +@import "lib/fontface.less"; // Variables // --------------------------------------- @@ -146,8 +148,4 @@ footer { p { margin-bottom: (@padding-base / 2); } -} - -// Fonts -// Last to not block rendering -@import "docs/fontface.less"; \ No newline at end of file +} \ No newline at end of file diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less new file mode 100644 index 00000000..e4375177 --- /dev/null +++ b/docs/src/less/lib/fontface.less @@ -0,0 +1,16 @@ +@font-face { + font-family: "Avenir"; + src: url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff2") format("woff2"), + url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.woff") format("woff"), + url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Medium.ttf") format("truetype"); + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "Avenir"; + src: url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), + url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.woff") format("woff"), + url("//cdn.sampotts.me/plyr/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); + font-style: normal; + font-weight: 600; +} \ No newline at end of file diff --git a/src/less/docs/mixins.less b/docs/src/less/lib/mixins.less similarity index 100% rename from src/less/docs/mixins.less rename to docs/src/less/lib/mixins.less diff --git a/src/less/docs/normalize.less b/docs/src/less/lib/normalize.less similarity index 100% rename from src/less/docs/normalize.less rename to docs/src/less/lib/normalize.less diff --git a/src/templates/controls.html b/docs/src/templates/controls.html similarity index 100% rename from src/templates/controls.html rename to docs/src/templates/controls.html diff --git a/gulpfile.js b/gulpfile.js index 0d1cf8fb..22740ed0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -10,8 +10,9 @@ var fs = require("fs"), concat = require("gulp-concat"), uglify = require("gulp-uglify"), less = require("gulp-less"), - minifyCss = require("gulp-minify-css"), - runSequence = require("run-sequence"), + sass = require("gulp-sass"), + minify = require("gulp-minify-css"), + run = require("run-sequence"), prefix = require("gulp-autoprefixer"), svgstore = require("gulp-svgstore"), svgmin = require("gulp-svgmin"), @@ -19,32 +20,42 @@ var fs = require("fs"), var root = __dirname, paths = { - // Watch paths - watch: { - less: path.join(root, "src/less/**/*"), - js: path.join(root, "src/js/**/*"), - sprite: path.join(root, "src/sprite/*.svg"), - templates: path.join(root, "src/templates/*.html"), - }, - // Output paths - output: { - js: path.join(root, "dist/js/"), - css: path.join(root, "dist/css/"), - sprite: path.join(root, "dist/") - } + plyr: { + // Source paths + src: { + less: path.join(root, "src/less/**/*"), + sass: path.join(root, "src/sass/**/*"), + js: path.join(root, "src/js/**/*"), + sprite: path.join(root, "src/sprite/*.svg") + }, + // Output paths + output: { + js: path.join(root, "dist/js/"), + css: path.join(root, "dist/css/"), + sprite: path.join(root, "dist/") + } + }, + docs: { + // Source paths + src: { + less: path.join(root, "docs/src/less/**/*"), + js: path.join(root, "docs/src/js/**/*"), + templates: path.join(root, "docs/src/templates/*.html") + }, + // Output paths + output: { + js: path.join(root, "docs/dist/js/"), + css: path.join(root, "docs/dist/css/") + } + } }, -// Task names -taskNames = { - jsAll: "js-all", - lessBuild: "less-", - jsBuild: "js-", - sprite: "sprite-build", - templates: "templates" -}, // Task arrays -lessBuildTasks = [], -jsBuildTasks = [], +tasks = { + less: [], + sass: [], + js: [] +}, // Fetch bundles from JSON bundles = loadJSON(path.join(root, "bundles.json")); @@ -54,81 +65,126 @@ function loadJSON(path) { return JSON.parse(fs.readFileSync(path)); } -// Build templates -gulp.task(taskNames.templates, function () { - return gulp - .src(paths.watch.templates) - .pipe(hogan("templates.js", { - wrapper: false, - templateName: function (file) { - return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); - } - })) - .pipe(gulp.dest(paths.output.js)); -}); +var build = { + js: function (files, bundle, output) { + for (var key in files) { + (function(key) { + var name = "js-" + key; + tasks.js.push(name); -// Process JS -for (var key in bundles.js) { - (function(key) { - var taskName = taskNames.jsBuild + key; - jsBuildTasks.push(taskName); + gulp.task(name, function () { + return gulp + .src(bundles[bundle].js[key]) + .pipe(concat(key)) + .pipe(uglify()) + .pipe(gulp.dest(output)); + }); + })(key); + } + }, + less: function(files, bundle, output) { + for (var key in files) { + (function (key) { + var name = "less-" + key; + tasks.less.push(name); - gulp.task(taskName, function () { - return gulp - .src(bundles.js[key]) - .pipe(concat(key)) - .pipe(uglify()) - .pipe(gulp.dest(paths.output.js)); - }); - })(key); -} + gulp.task(name, function () { + return gulp + .src(bundles[bundle].less[key]) + .pipe(less()) + .on("error", gutil.log) + .pipe(concat(key)) + .pipe(prefix(["last 2 versions"], { cascade: true })) + .pipe(minify()) + .pipe(gulp.dest(output)); + }); + })(key); + } + }, + sass: function(files, bundle, output) { + for (var key in files) { + (function (key) { + var name = "sass-" + key; + tasks.sass.push(name); -// Process CSS -for (var key in bundles.less) { - (function (key) { - var taskName = taskNames.lessBuild + key; - lessBuildTasks.push(taskName); - - gulp.task(taskName, function () { + gulp.task(name, function () { + return gulp + .src(bundles[bundle].sass[key]) + .pipe(sass()) + .on("error", gutil.log) + .pipe(concat(key)) + .pipe(prefix(["last 2 versions"], { cascade: true })) + .pipe(minify()) + .pipe(gulp.dest(output)); + }); + })(key); + } + }, + sprite: function(source, output) { + // Process Icons + gulp.task("sprite", function () { return gulp - .src(bundles.less[key]) - .pipe(less()) - .on("error", gutil.log) - .pipe(concat(key)) - .pipe(prefix(["last 2 versions"], { cascade: true })) - .pipe(minifyCss()) - .pipe(gulp.dest(paths.output.css)); + .src(source) + .pipe(svgmin({ + plugins: [{ + removeDesc: true + }] + })) + .pipe(svgstore()) + .pipe(gulp.dest(output)); }); - })(key); -} + }, + templates: function(source, output) { + // Build templates + gulp.task("templates", function () { + return gulp + .src(source) + .pipe(hogan("templates.js", { + wrapper: false, + templateName: function (file) { + return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); + } + })) + .pipe(gulp.dest(output)); + }); + } +}; -// Process Icons -gulp.task(taskNames.sprite, function () { - return gulp - .src(paths.watch.sprite) - .pipe(svgmin({ - plugins: [{ - removeDesc: true - }] - })) - .pipe(svgstore()) - .pipe(gulp.dest(paths.output.sprite)); -}); +// Plyr core files +build.js(bundles.plyr.js, "plyr", paths.plyr.output.js); +build.less(bundles.plyr.less, "plyr", paths.plyr.output.css); +build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css); +build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite); + +// Docs files +build.templates(paths.docs.src.templates, paths.docs.output.js); +build.less(bundles.docs.less, "docs", paths.docs.output.css); +build.js(bundles.docs.js, "docs", paths.docs.output.js); // Default gulp task gulp.task("default", function(){ - runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch")); + run("templates", tasks.js, tasks.less, "sprite"); }); // Build all JS (inc. templates) -gulp.task(taskNames.jsAll, function(){ - runSequence(taskNames.templates, jsBuildTasks); +gulp.task("js", function(){ + run("templates", tasks.js); +}); + +// Build SASS (for testing, default is LESS) +gulp.task("sass", function(){ + run(tasks.sass); }); // Watch for file changes gulp.task("watch", function () { - //gulp.watch(paths.watch.templates, [taskNames.jsAll]); - //gulp.watch(paths.watch.js, [taskNames.jsAll]); - gulp.watch(paths.watch.less, lessBuildTasks); - gulp.watch(paths.watch.sprite, [taskNames.iconBuild]); + // Plyr core + gulp.watch(paths.plyr.src.js, tasks.js); + gulp.watch(paths.plyr.src.less, tasks.less); + gulp.watch(paths.plyr.src.sprite, "sprite"); + + // Docs + gulp.watch(paths.docs.src.js, tasks.js); + gulp.watch(paths.docs.src.less, tasks.less); + gulp.watch(paths.docs.src.templates, "js"); }); \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 2fe40054..00000000 --- a/index.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - Plyr - A simple HTML5 media player - - - - - - - - - -
-

Plyr

-

A simple HTML5 media player with custom controls and WebVTT captions.

- Download on Github -
- -
-
- -
- Big Buck Bunny. More info can be found at peach.blender.org. -
- -
-
- -
- "96" by Logistics, which can be purchased from Hospital Records. -
- - - - - - - - - - - - - \ No newline at end of file diff --git a/package.json b/package.json index 1fc1e99d..c968a2af 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "gulp-hogan-compile": "^0.4.1", "gulp-less": "~1.3.1", "gulp-minify-css": "~0.3.6", + "gulp-sass": "^1.3.3", "gulp-svgmin": "^1.0.0", "gulp-svgstore": "^5.0.0", "gulp-uglify": "~0.3.1", diff --git a/src/fonts/AvenirLTStd-Heavy.ttf b/src/fonts/AvenirLTStd-Heavy.ttf deleted file mode 100644 index 7bee7997..00000000 Binary files a/src/fonts/AvenirLTStd-Heavy.ttf and /dev/null differ diff --git a/src/fonts/AvenirLTStd-Heavy.woff b/src/fonts/AvenirLTStd-Heavy.woff deleted file mode 100644 index 771c45a1..00000000 Binary files a/src/fonts/AvenirLTStd-Heavy.woff and /dev/null differ diff --git a/src/fonts/AvenirLTStd-Heavy.woff2 b/src/fonts/AvenirLTStd-Heavy.woff2 deleted file mode 100755 index b889b061..00000000 Binary files a/src/fonts/AvenirLTStd-Heavy.woff2 and /dev/null differ diff --git a/src/fonts/AvenirLTStd-Medium.ttf b/src/fonts/AvenirLTStd-Medium.ttf deleted file mode 100644 index 73ec1e54..00000000 Binary files a/src/fonts/AvenirLTStd-Medium.ttf and /dev/null differ diff --git a/src/fonts/AvenirLTStd-Medium.woff b/src/fonts/AvenirLTStd-Medium.woff deleted file mode 100644 index bc2a778e..00000000 Binary files a/src/fonts/AvenirLTStd-Medium.woff and /dev/null differ diff --git a/src/fonts/AvenirLTStd-Medium.woff2 b/src/fonts/AvenirLTStd-Medium.woff2 deleted file mode 100755 index bcf4649b..00000000 Binary files a/src/fonts/AvenirLTStd-Medium.woff2 and /dev/null differ diff --git a/src/less/docs/fontface.less b/src/less/docs/fontface.less deleted file mode 100644 index 6cd9eb68..00000000 --- a/src/less/docs/fontface.less +++ /dev/null @@ -1,16 +0,0 @@ -@font-face { - font-family: "Avenir"; - src: url("../../src/fonts/AvenirLTStd-Medium.woff2") format("woff2"), - url("../../src/fonts/AvenirLTStd-Medium.woff") format("woff"), - url("../../src/fonts/AvenirLTStd-Medium.ttf") format("truetype"); - font-style: normal; - font-weight: 400; -} -@font-face { - font-family: "Avenir"; - src: url("../../src/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), - url("../../src/fonts/AvenirLTStd-Heavy.woff") format("woff"), - url("../../src/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); - font-style: normal; - font-weight: 600; -} \ No newline at end of file diff --git a/src/sass/docs.scss b/src/sass/docs.scss deleted file mode 100644 index 666474ae..00000000 --- a/src/sass/docs.scss +++ /dev/null @@ -1,140 +0,0 @@ -// ========================================================================== -// HTML5 Video Player Demo Page -// ========================================================================== - -// Reset -@import "docs/normalize"; -// Mixins -@import "docs/mixins"; - -// Variables -// --------------------------------------- -// Colors -$blue: #3498DB; -$gray-dark: #343f4a; -$gray: #565d64; -$gray-light: #cbd0d3; - -// Elements -$link-color: $blue; -$padding-base: 20px; - -// Breakpoints -$screen-md: 768px; - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Base -html { - //font-size: 62.5%; -} -body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: #fff; - line-height: 1.5; - text-align: center; - color: #6D797F; -} - -// Type -h1, -h2 { - letter-spacing: -.025em; - color: #2E3C44; - margin: 0 0 ($padding-base / 2); - line-height: 1.2; - @include font-smoothing(); -} -h1 { - @include font-size(64); - color: #3498DB; -} -p, -small { - margin: 0 0 $padding-base; -} -small { - display: block; - padding: 0 ($padding-base / 2); - @include font-size(14); -} - -// Header -header { - padding: $padding-base; - margin-bottom: $padding-base; - - p { - @include font-size(18); - } - @media (min-width: 560px) { - padding-top: ($padding-base * 3); - padding-bottom: ($padding-base * 3); - } -} - -// Sections -section { - padding-bottom: $padding-base; - - @media (min-width: 560px) { - padding-bottom: ($padding-base * 2); - } -} - -// Links & Buttons -a { - text-decoration: none; - color: $link-color; - border-bottom: 1px solid currentColor; - transition: all .3s ease; - - &:hover, - &:focus { - color: #000; - } - &:focus { - @include tab-focus(); - } -} -.btn { - display: inline-block; - padding: ($padding-base / 2) ($padding-base * 1.5); - background: $link-color; - border: 0; - color: #fff; - @include font-smoothing(on); - font-weight: 600; - border-radius: 3px; - - &:hover, - &:focus { - color: #fff; - background: darken($link-color, 5%); - } -} - -// Players -.example-audio .player { - max-width: 480px; -} -.example-video .player { - max-width: 1200px; -} -.example-audio .player, -.example-video .player { - margin: 0 auto $padding-base; - - &-fullscreen, - &.fullscreen-active { - max-width: none; - } -} - -// Fonts -// Last to not block rendering -@import "docs/fontface.less"; diff --git a/src/sass/docs/fontface.scss b/src/sass/docs/fontface.scss deleted file mode 100644 index 6cd9eb68..00000000 --- a/src/sass/docs/fontface.scss +++ /dev/null @@ -1,16 +0,0 @@ -@font-face { - font-family: "Avenir"; - src: url("../../src/fonts/AvenirLTStd-Medium.woff2") format("woff2"), - url("../../src/fonts/AvenirLTStd-Medium.woff") format("woff"), - url("../../src/fonts/AvenirLTStd-Medium.ttf") format("truetype"); - font-style: normal; - font-weight: 400; -} -@font-face { - font-family: "Avenir"; - src: url("../../src/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), - url("../../src/fonts/AvenirLTStd-Heavy.woff") format("woff"), - url("../../src/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); - font-style: normal; - font-weight: 600; -} \ No newline at end of file diff --git a/src/sass/docs/mixins.scss b/src/sass/docs/mixins.scss deleted file mode 100644 index 24412575..00000000 --- a/src/sass/docs/mixins.scss +++ /dev/null @@ -1,47 +0,0 @@ -// ========================================================================== -// Mixins -// ========================================================================== - -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ -// --------------------------------------- -@mixin clearfix() -{ - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } -} - -// Webkit-style focus -// --------------------------------------- -@mixin tab-focus() -{ - // Default - outline: thin dotted $gray-dark; - // Webkit - //outline: 5px auto -webkit-focus-ring-color; - outline-offset: 1px; -} - -// Use rems for font sizing -// Leave at 100%/16px -// --------------------------------------- -@mixin font-size($font-size: 16) -{ - $rem: round(($font-size / 16), 1); - font-size: ($font-size * 1px); - font-size: #{"${rem}rem"}; -} - -// Font smoothing -// --------------------------------------- -@mixin font-smoothing($mode: on) when ($mode = on) -{ - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} -@mixin font-smoothing($mode: on) when ($mode = off) -{ - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; -} \ No newline at end of file diff --git a/src/sass/docs/normalize.scss b/src/sass/docs/normalize.scss deleted file mode 100644 index 562891ab..00000000 --- a/src/sass/docs/normalize.scss +++ /dev/null @@ -1,406 +0,0 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background: transparent; -} - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre-wrap; -} - -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index f0d74989..998398bb 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -312,7 +312,8 @@ $bp-captions-large: 768px; // When captions jump to the larger font size // Volume control // element - &-volume { + // Specificty is for bootstrap compatibility + &-volume[type=range] { vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; diff --git a/src/sprite/icon-bubble.svg b/src/sprite/icon-bubble.svg index 7090121a..0b279b7c 100755 --- a/src/sprite/icon-bubble.svg +++ b/src/sprite/icon-bubble.svg @@ -3,4 +3,4 @@ - + \ No newline at end of file