Docs/demo refresh
This commit is contained in:
Sam Potts
parent
57517a9dcc
commit
378aa159b8
5
.gitignore
vendored
5
.gitignore
vendored
@ -1,12 +1,7 @@
|
||||
node_modules
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
.DS_Store
|
||||
aws.json
|
||||
*.mp4
|
||||
!dist/blank.mp4
|
||||
index-*.html
|
||||
notes.txt
|
||||
.idea
|
||||
.DS_Store
|
||||
npm-debug.log
|
||||
@ -1,22 +1,23 @@
|
||||
{
|
||||
"plyr": {
|
||||
"less": {
|
||||
"plyr.css": ["src/less/plyr.less"]
|
||||
"plyr.css": "src/less/plyr.less"
|
||||
},
|
||||
"scss": {
|
||||
"plyr.css": ["src/scss/plyr.scss"]
|
||||
"plyr.css": "src/scss/plyr.scss"
|
||||
},
|
||||
"js": {
|
||||
"plyr.js": ["src/js/plyr.js"]
|
||||
"plyr.js": "src/js/plyr.js"
|
||||
}
|
||||
},
|
||||
"demo": {
|
||||
"less": {
|
||||
"demo.css": ["demo/src/less/demo.less"]
|
||||
"demo.css": "demo/src/less/bundle.less"
|
||||
},
|
||||
"js": {
|
||||
"demo.js": [
|
||||
"demo/src/js/lib/classlist.js",
|
||||
"demo/src/js/lib/tab-focus.js",
|
||||
"demo/src/js/lib/sprite.js",
|
||||
"demo/src/js/main.js"
|
||||
]
|
||||
|
||||
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
@ -17,59 +17,28 @@
|
||||
<!-- Preload -->
|
||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
|
||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
|
||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="grid">
|
||||
<header>
|
||||
<h1>Plyr</h1>
|
||||
<p>A simple, accessible HTML5 media player by
|
||||
<a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a>
|
||||
<p>A simple, accessible HTML5
|
||||
<button type="button" class="faux-link" data-source="video">Video</button>,
|
||||
<button type="button" class="faux-link" data-source="audio">Audio</button>,
|
||||
<button type="button" class="faux-link" data-source="youtube">YouTube</button> and
|
||||
<button type="button" class="faux-link" data-source="vimeo">Vimeo</button> media player.
|
||||
</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
|
||||
|
||||
<a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#icon-github"></use>
|
||||
</svg>Download on GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
|
||||
target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#icon-twitter"></use>
|
||||
</svg>Tweet
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main" id="main">
|
||||
<nav class="btn__bar">
|
||||
<ul>
|
||||
<li class="active">
|
||||
<button type="button" class="btn" data-source="video">Video</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn" data-source="audio">Audio</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn--youtube" data-source="youtube">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#icon-youtube"></use>
|
||||
</svg>YouTube</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="btn btn--vimeo" data-source="vimeo">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#icon-vimeo"></use>
|
||||
</svg>Vimeo</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<video controls crossorigin playsinline loop poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
|
||||
id="player">
|
||||
<!-- Video files -->
|
||||
@ -116,27 +85,24 @@
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<aside>If you like Plyr, get the word out and
|
||||
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
|
||||
target="_blank" data-shr-network="twitter">tweet it</a>
|
||||
</aside>
|
||||
|
||||
<!-- Plyr core script -->
|
||||
<script src="../src/js/plyr.js"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="dist/demo.js"></script>
|
||||
<!-- Sharing libary (https://shr.one) -->
|
||||
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
|
||||
|
||||
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
|
||||
<script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
|
||||
|
||||
<!-- Sharing libary (https://shr.one) -->
|
||||
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
|
||||
<script>
|
||||
if (window.shr) {
|
||||
window.shr.setup({
|
||||
count: {
|
||||
classname: 'btn__count'
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<!-- Docs script -->
|
||||
<script src="dist/demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
26
demo/src/js/lib/tab-focus.js
Normal file
26
demo/src/js/lib/tab-focus.js
Normal file
@ -0,0 +1,26 @@
|
||||
// ==========================================================================
|
||||
// tab-focus.js
|
||||
// Detect keyboard tabbing
|
||||
// ==========================================================================
|
||||
|
||||
(function() {
|
||||
var className = 'tab-focus';
|
||||
|
||||
// Remove class on blur
|
||||
document.addEventListener('focusout', function(event) {
|
||||
event.target.classList.remove(className);
|
||||
});
|
||||
|
||||
// Add classname to tabbed elements
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.keyCode !== 9) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Delay the adding of classname until the focus has changed
|
||||
// This event fires before the focusin event
|
||||
window.setTimeout(function() {
|
||||
document.activeElement.classList.add(className);
|
||||
}, 0);
|
||||
});
|
||||
})();
|
||||
@ -7,6 +7,14 @@
|
||||
/*global Plyr*/
|
||||
|
||||
(function() {
|
||||
if (window.shr) {
|
||||
window.shr.setup({
|
||||
count: {
|
||||
classname: 'button__count',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/*document.body.addEventListener('ready', function(event) {
|
||||
console.log(event);
|
||||
});*/
|
||||
@ -17,10 +25,10 @@
|
||||
title: 'View From A Blue Moon',
|
||||
iconUrl: '../dist/plyr.svg',
|
||||
tooltips: {
|
||||
controls: true
|
||||
controls: true,
|
||||
},
|
||||
captions: {
|
||||
defaultActive: true
|
||||
defaultActive: true,
|
||||
},
|
||||
controls: [
|
||||
'play-large',
|
||||
@ -33,8 +41,8 @@
|
||||
'settings',
|
||||
'fullscreen',
|
||||
'pip',
|
||||
'airplay'
|
||||
]
|
||||
'airplay',
|
||||
],
|
||||
});
|
||||
|
||||
// Expose for testing
|
||||
@ -49,7 +57,7 @@
|
||||
video: 'video',
|
||||
audio: 'audio',
|
||||
youtube: 'youtube',
|
||||
vimeo: 'vimeo'
|
||||
vimeo: 'vimeo',
|
||||
};
|
||||
var currentType = window.location.hash.replace('#', '');
|
||||
var historySupport = window.history && window.history.pushState;
|
||||
@ -64,7 +72,7 @@
|
||||
if (historySupport) {
|
||||
history.pushState(
|
||||
{
|
||||
type: type
|
||||
type: type,
|
||||
},
|
||||
'',
|
||||
'#' + type
|
||||
@ -93,7 +101,7 @@
|
||||
if (currentType in types) {
|
||||
history.replaceState(
|
||||
{
|
||||
type: currentType
|
||||
type: currentType,
|
||||
},
|
||||
'',
|
||||
video ? '' : '#' + currentType
|
||||
@ -109,12 +117,7 @@
|
||||
// Toggle class on an element
|
||||
function toggleClass(element, className, state) {
|
||||
if (element) {
|
||||
if (element.classList) {
|
||||
element.classList[state ? 'add' : 'remove'](className);
|
||||
} else {
|
||||
var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
|
||||
element.className = name + (state ? ' ' + className : '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -133,8 +136,8 @@
|
||||
sources: [
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||
type: 'video/mp4'
|
||||
}
|
||||
type: 'video/mp4',
|
||||
},
|
||||
],
|
||||
poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||
tracks: [
|
||||
@ -143,15 +146,15 @@
|
||||
label: 'English',
|
||||
srclang: 'en',
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
kind: 'captions',
|
||||
label: 'French',
|
||||
srclang: 'fr',
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
|
||||
}
|
||||
]
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
|
||||
},
|
||||
],
|
||||
});
|
||||
break;
|
||||
|
||||
@ -162,13 +165,13 @@
|
||||
sources: [
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
|
||||
type: 'audio/mp3'
|
||||
type: 'audio/mp3',
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
||||
type: 'audio/ogg'
|
||||
}
|
||||
]
|
||||
type: 'audio/ogg',
|
||||
},
|
||||
],
|
||||
});
|
||||
break;
|
||||
|
||||
@ -179,9 +182,9 @@
|
||||
sources: [
|
||||
{
|
||||
src: 'https://www.youtube.com/watch?v=bTqVqk7FSmY',
|
||||
type: 'youtube'
|
||||
}
|
||||
]
|
||||
type: 'youtube',
|
||||
},
|
||||
],
|
||||
});
|
||||
break;
|
||||
|
||||
@ -192,9 +195,9 @@
|
||||
sources: [
|
||||
{
|
||||
src: 'https://vimeo.com/76979871',
|
||||
type: 'vimeo'
|
||||
}
|
||||
]
|
||||
type: 'vimeo',
|
||||
},
|
||||
],
|
||||
});
|
||||
break;
|
||||
}
|
||||
@ -208,7 +211,7 @@
|
||||
}
|
||||
|
||||
// Set active on parent
|
||||
toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true);
|
||||
toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true);
|
||||
|
||||
// Show cite
|
||||
[].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
|
||||
|
||||
35
demo/src/less/bundle.less
Normal file
35
demo/src/less/bundle.less
Normal file
@ -0,0 +1,35 @@
|
||||
// ==========================================================================
|
||||
// Plyr.io Demo Page
|
||||
// ==========================================================================
|
||||
|
||||
// Libs
|
||||
@import 'lib/animation';
|
||||
@import 'lib/fontface';
|
||||
@import 'lib/mixins';
|
||||
@import 'lib/normalize';
|
||||
|
||||
// Settings
|
||||
@import 'settings/breakpoints';
|
||||
@import 'settings/colors';
|
||||
@import 'settings/cosmetic';
|
||||
@import 'settings/icons';
|
||||
@import 'settings/layout';
|
||||
@import 'settings/spacing';
|
||||
@import 'settings/type';
|
||||
|
||||
// Layout
|
||||
@import 'layout/core';
|
||||
@import 'layout/grid';
|
||||
|
||||
// Type
|
||||
@import 'type/base';
|
||||
@import 'type/headings';
|
||||
|
||||
// Components
|
||||
@import 'components/buttons';
|
||||
@import 'components/header';
|
||||
@import 'components/icons';
|
||||
@import 'components/links';
|
||||
@import 'components/lists';
|
||||
@import 'components/navigation';
|
||||
@import 'components/players';
|
||||
@ -1,43 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Base layout
|
||||
// ==========================================================================
|
||||
|
||||
// BORDER-BOX ALL THE THINGS!
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Hidden
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Base
|
||||
html {
|
||||
height: 100%;
|
||||
background: @body-background fixed;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto @padding-base;
|
||||
padding: (@padding-base / 2);
|
||||
max-width: @example-width-video;
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
margin-bottom: (@padding-base * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
header {
|
||||
padding: @padding-base;
|
||||
margin-bottom: @padding-base;
|
||||
|
||||
p {
|
||||
.font-size(18);
|
||||
}
|
||||
@media (min-width: @screen-sm) {
|
||||
padding-top: (@padding-base * 3);
|
||||
padding-bottom: (@padding-base * 3);
|
||||
}
|
||||
}
|
||||
@ -2,160 +2,54 @@
|
||||
// Buttons
|
||||
// ==========================================================================
|
||||
|
||||
nav {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-top: (@padding-base / 2);
|
||||
.font-size();
|
||||
white-space: nowrap;
|
||||
}
|
||||
li + li {
|
||||
margin-left: @padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.btn__bar {
|
||||
position: relative;
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: @gray-lighter;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
|
||||
&:first-child .btn {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
&:last-child .btn {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
& + li .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
&.active .btn {
|
||||
&:extend(.btn--primary);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&.active + li .btn:hover {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) {
|
||||
margin-bottom: (@padding-base * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Shared
|
||||
.btn,
|
||||
.btn__count {
|
||||
display: inline-block;
|
||||
.button,
|
||||
.button__count {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
padding: (@spacing-base * 0.75);
|
||||
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 1px 1px fade(#000, 10%);
|
||||
background: #fff;
|
||||
border: 0;
|
||||
|
||||
color: @gray;
|
||||
user-select: none;
|
||||
font-weight: @font-weight-bold;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
padding: (@padding-base / 2) ((@padding-base / 2) + 2);
|
||||
background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
|
||||
border: 1px solid @gray-light;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .05);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
color: @gray;
|
||||
transition: background .1s ease, color .1s ease;
|
||||
.font-size(@font-size-small);
|
||||
.button {
|
||||
padding-left: @spacing-base;
|
||||
padding-right: @spacing-base;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: darken(@gray-light, 8%);
|
||||
color: @gray;
|
||||
color: @gray-dark;
|
||||
outline: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.btn--large {
|
||||
padding: (@padding-base / 2) @padding-base;
|
||||
.font-size();
|
||||
}
|
||||
|
||||
// Styles
|
||||
.btn--primary {
|
||||
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
|
||||
background-color: @link-color;
|
||||
border-color: darken(@link-color, 10%);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .15);
|
||||
text-shadow: 0 1px 1px rgba(0,0,0, .1);
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
border-color: darken(@link-color, 20%);
|
||||
}
|
||||
}
|
||||
.btn--youtube .icon {
|
||||
color: @color-youtube;
|
||||
}
|
||||
.btn--vimeo .icon {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
.btn--twitter .icon {
|
||||
color: @color-twitter;
|
||||
|
||||
&.tab-focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Count bubble
|
||||
.btn__count {
|
||||
position: relative;
|
||||
margin-left: (@padding-base / 2);
|
||||
padding: (@padding-base / 2) (@padding-base * .75);
|
||||
background: #fff;
|
||||
border: 1px solid @gray-light;
|
||||
.button__count {
|
||||
margin-left: (@spacing-base / 2);
|
||||
animation: fadein 0.2s ease;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: @arrow-size;
|
||||
|
||||
24
demo/src/less/components/header.less
Normal file
24
demo/src/less/components/header.less
Normal file
@ -0,0 +1,24 @@
|
||||
// ==========================================================================
|
||||
// Header
|
||||
// ==========================================================================
|
||||
|
||||
header {
|
||||
padding: @spacing-base;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
.font-size(18);
|
||||
margin-bottom: @spacing-base * 1.5;
|
||||
}
|
||||
|
||||
@media @mq-sm {
|
||||
padding-top: (@spacing-base * 3);
|
||||
padding-bottom: (@spacing-base * 3);
|
||||
}
|
||||
|
||||
@media @mq-md {
|
||||
max-width: 400px;
|
||||
margin-right: (@spacing-base * 2);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,6 @@
|
||||
fill: currentColor;
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
|
||||
// Within elements
|
||||
@ -16,11 +15,8 @@ button svg,
|
||||
label svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a .icon,
|
||||
.btn .icon {
|
||||
margin-right: (@padding-base / 2);
|
||||
}
|
||||
.btn:not(.btn-large) .icon {
|
||||
width: (@icon-size - 2);
|
||||
height: (@icon-size - 2);
|
||||
margin-right: (@spacing-base / 2);
|
||||
}
|
||||
|
||||
46
demo/src/less/components/links.less
Normal file
46
demo/src/less/components/links.less
Normal file
@ -0,0 +1,46 @@
|
||||
// ==========================================================================
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
// Make a <button> look like an <a>
|
||||
button.faux-link {
|
||||
.cancel-button-styles();
|
||||
|
||||
&:extend(a all);
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
position: relative;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
color: @color-link;
|
||||
font-weight: @font-weight-bold;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 1px;
|
||||
transition: width 0.2s ease;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom-color: transparent;
|
||||
outline: 0;
|
||||
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
11
demo/src/less/components/lists.less
Normal file
11
demo/src/less/components/lists.less
Normal file
@ -0,0 +1,11 @@
|
||||
// ==========================================================================
|
||||
// Lists
|
||||
// ==========================================================================
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
9
demo/src/less/components/navigation.less
Normal file
9
demo/src/less/components/navigation.less
Normal file
@ -0,0 +1,9 @@
|
||||
// ==========================================================================
|
||||
// Navigation
|
||||
// ==========================================================================
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: @spacing-base;
|
||||
}
|
||||
@ -11,13 +11,11 @@ video {
|
||||
// Example players
|
||||
.plyr {
|
||||
margin: 0 auto;
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
.plyr--audio {
|
||||
max-width: @example-width-audio;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 2px 5px fade(#000, 20%);
|
||||
}
|
||||
.plyr__video-wrapper::after {
|
||||
content: "";
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -31,10 +29,10 @@ video {
|
||||
// Style full supported player
|
||||
.plyr__cite {
|
||||
display: none;
|
||||
margin-top: @padding-base;
|
||||
margin-top: @spacing-base;
|
||||
|
||||
.icon {
|
||||
margin-right: (@padding-base / 4);
|
||||
margin-right: (@spacing-base / 4);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
// Base
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
body {
|
||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
font-weight: @font-weight-base;
|
||||
.font-smoothing();
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2 {
|
||||
letter-spacing: -.025em;
|
||||
color: @brand-primary;
|
||||
margin: 0 0 (@padding-base / 2);
|
||||
line-height: 1.2;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
h1 {
|
||||
.font-size(@font-size-h1);
|
||||
}
|
||||
|
||||
// Paragraph and small
|
||||
p,
|
||||
small {
|
||||
margin: 0 0 @padding-base;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
padding: 0 (@padding-base / 2);
|
||||
.font-size(@font-size-small);
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @link-color;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @gray-dark;
|
||||
border-bottom-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
&.logo {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color--vimeo {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
.color--youtube {
|
||||
color: @color-youtube;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Plyr.io Demo Page
|
||||
// ==========================================================================
|
||||
|
||||
// CSS Reset
|
||||
@import "lib/normalize.less";
|
||||
|
||||
// Mixins
|
||||
@import "lib/mixins.less";
|
||||
|
||||
// Variables
|
||||
@import "variables.less";
|
||||
|
||||
// Animation
|
||||
@import "lib/animation.less";
|
||||
|
||||
// Type
|
||||
@import "lib/fontface.less";
|
||||
@import "components/type.less";
|
||||
|
||||
// Components
|
||||
@import "components/base.less";
|
||||
@import "components/icons.less";
|
||||
@import "components/buttons.less";
|
||||
@import "components/error.less";
|
||||
@import "components/examples.less";
|
||||
44
demo/src/less/layout/core.less
Normal file
44
demo/src/less/layout/core.less
Normal file
@ -0,0 +1,44 @@
|
||||
// ==========================================================================
|
||||
// Core
|
||||
// ==========================================================================
|
||||
|
||||
html {
|
||||
background: @page-background;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 100%;
|
||||
padding: (@spacing-base * 0.75);
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
text-shadow: none;
|
||||
|
||||
a {
|
||||
color: @color-twitter;
|
||||
|
||||
&.tab-focus {
|
||||
.tab-focus(@color-twitter);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -7,11 +7,13 @@ html.error,
|
||||
.error body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.error body {
|
||||
width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.error main {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
19
demo/src/less/layout/grid.less
Normal file
19
demo/src/less/layout/grid.less
Normal file
@ -0,0 +1,19 @@
|
||||
// ==========================================================================
|
||||
// Super basic grid
|
||||
// ==========================================================================
|
||||
|
||||
.grid {
|
||||
margin: 0 auto;
|
||||
padding: @spacing-base;
|
||||
|
||||
@media @mq-md {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: @container-max-width;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,11 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Fade
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -19,3 +19,12 @@
|
||||
font-weight: @font-weight-bold;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3") format("woff2"),
|
||||
url("https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: @font-weight-heavy;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@ -2,31 +2,39 @@
|
||||
// Mixins
|
||||
// ==========================================================================
|
||||
|
||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
||||
// Convert a <button> into an <a>
|
||||
// ---------------------------------------
|
||||
.clearfix() {
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after { content: ""; display: table; }
|
||||
&:after { clear: both; }
|
||||
.cancel-button-styles() {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
vertical-align: baseline;
|
||||
text-align: inherit;
|
||||
font: inherit;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
-moz-user-select: text;
|
||||
text-shadow: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Webkit-style focus
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
.tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted @gray-dark;
|
||||
// Webkit
|
||||
outline-offset: 1px;
|
||||
.tab-focus(@color: @tab-focus-default-color) {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px fade(@color, 35%);
|
||||
}
|
||||
|
||||
// Use rems for font sizing
|
||||
// Leave <body> at 100%/16px
|
||||
// ---------------------------------------
|
||||
.font-size(@font-size: 16){
|
||||
.font-size(@font-size: 16) {
|
||||
@rem: round((@font-size / 16), 3);
|
||||
font-size: (@font-size * 1px);
|
||||
font-size: ~"@{rem}rem";
|
||||
font-size: ~'@{rem}rem';
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
|
||||
11
demo/src/less/lib/reset.less
Normal file
11
demo/src/less/lib/reset.less
Normal file
@ -0,0 +1,11 @@
|
||||
// ==========================================================================
|
||||
// Resets
|
||||
// ==========================================================================
|
||||
|
||||
// BORDER-BOX ALL THE THINGS!
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
9
demo/src/less/settings/breakpoints.less
Normal file
9
demo/src/less/settings/breakpoints.less
Normal file
@ -0,0 +1,9 @@
|
||||
// ==========================================================================
|
||||
// Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
@screen-sm: 480px;
|
||||
@screen-md: 768px;
|
||||
|
||||
@mq-sm: ~"only screen and (min-width: @{screen-sm}) ";
|
||||
@mq-md: ~"only screen and (min-width: @{screen-md}) ";
|
||||
27
demo/src/less/settings/colors.less
Normal file
27
demo/src/less/settings/colors.less
Normal file
@ -0,0 +1,27 @@
|
||||
// ==========================================================================
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
// Greyscale
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #55646b;
|
||||
@gray-light: #cbd0d3;
|
||||
@gray-lighter: #dbe3e8;
|
||||
@off-white: #f2f5f7;
|
||||
|
||||
// Text
|
||||
@color-text: #fff;
|
||||
|
||||
// Plyr
|
||||
@color-brand-primary: #1aafff;
|
||||
|
||||
// Brands
|
||||
@color-twitter: #4baaf4;
|
||||
@color-youtube: #cc181e;
|
||||
@color-vimeo: #19b7ed;
|
||||
|
||||
// Elements
|
||||
@color-link: #fff;
|
||||
|
||||
// Focus
|
||||
@tab-focus-default-color: #fff;
|
||||
12
demo/src/less/settings/cosmetic.less
Normal file
12
demo/src/less/settings/cosmetic.less
Normal file
@ -0,0 +1,12 @@
|
||||
// ==========================================================================
|
||||
// Misc cosmetic
|
||||
// ==========================================================================
|
||||
|
||||
// Button count arrow size
|
||||
@arrow-size: 8px;
|
||||
|
||||
// Radii
|
||||
@border-radius-base: 4px;
|
||||
|
||||
// Background
|
||||
@page-background: linear-gradient(to left top, lighten(@color-brand-primary, 15%), darken(@color-brand-primary, 15%));
|
||||
5
demo/src/less/settings/icons.less
Normal file
5
demo/src/less/settings/icons.less
Normal file
@ -0,0 +1,5 @@
|
||||
// ==========================================================================
|
||||
// Icons
|
||||
// ==========================================================================
|
||||
|
||||
@icon-size: 18px;
|
||||
5
demo/src/less/settings/layout.less
Normal file
5
demo/src/less/settings/layout.less
Normal file
@ -0,0 +1,5 @@
|
||||
// ==========================================================================
|
||||
// Layout
|
||||
// ==========================================================================
|
||||
|
||||
@container-max-width: 1280px;
|
||||
5
demo/src/less/settings/spacing.less
Normal file
5
demo/src/less/settings/spacing.less
Normal file
@ -0,0 +1,5 @@
|
||||
// ==========================================================================
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
@spacing-base: 20px;
|
||||
17
demo/src/less/settings/type.less
Normal file
17
demo/src/less/settings/type.less
Normal file
@ -0,0 +1,17 @@
|
||||
// ==========================================================================
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
@font-sans-serif: 'Avenir', 'Helvetica Neue', sans-serif;
|
||||
|
||||
@font-size-base: 16;
|
||||
@font-size-small: 14;
|
||||
@font-size-h1: 64;
|
||||
|
||||
@font-weight-base: 500;
|
||||
@font-weight-bold: 700;
|
||||
@font-weight-heavy: 900;
|
||||
|
||||
@line-height-base: 1.5;
|
||||
|
||||
@letter-spacing-headings: -0.025em;
|
||||
33
demo/src/less/type/base.less
Normal file
33
demo/src/less/type/base.less
Normal file
@ -0,0 +1,33 @@
|
||||
// ==========================================================================
|
||||
// Base
|
||||
// ==========================================================================
|
||||
|
||||
// Set to 100% for rem sizing
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-sans-serif;
|
||||
line-height: @line-height-base;
|
||||
color: @color-text;
|
||||
font-weight: @font-weight-base;
|
||||
.font-smoothing();
|
||||
text-shadow: 0 1px 1px fade(#000, 15%);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p,
|
||||
small {
|
||||
margin: 0 0 @spacing-base;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
.font-size(@font-size-small);
|
||||
}
|
||||
10
demo/src/less/type/headings.less
Normal file
10
demo/src/less/type/headings.less
Normal file
@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// Headings
|
||||
// ==========================================================================
|
||||
|
||||
h1 {
|
||||
margin: 0 0 (@spacing-base / 2);
|
||||
.font-size(@font-size-h1);
|
||||
font-weight: @font-weight-heavy;
|
||||
letter-spacing: @letter-spacing-headings;
|
||||
}
|
||||
10
demo/src/less/utilities/color.less
Normal file
10
demo/src/less/utilities/color.less
Normal file
@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// Color
|
||||
// ==========================================================================
|
||||
|
||||
.color--vimeo {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
.color--youtube {
|
||||
color: @color-youtube;
|
||||
}
|
||||
7
demo/src/less/utilities/hidden.less
Normal file
7
demo/src/less/utilities/hidden.less
Normal file
@ -0,0 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Hidden
|
||||
// ==========================================================================
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Variables
|
||||
// ==========================================================================
|
||||
|
||||
// Colors
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #55646b;
|
||||
@gray-light: #cbd0d3;
|
||||
@gray-lighter: #dbe3e8;
|
||||
@off-white: #f2f5f7;
|
||||
|
||||
@brand-primary: #3498db;
|
||||
@brand-secondary: #02bd9b;
|
||||
|
||||
// Brands
|
||||
@color-twitter: #4baaf4;
|
||||
@color-youtube: #cc181e;
|
||||
@color-vimeo: #19b7ed;
|
||||
|
||||
// Base
|
||||
@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
|
||||
|
||||
// Type
|
||||
@font-size-base: 16;
|
||||
@font-size-small: 14;
|
||||
@font-size-h1: 64;
|
||||
@font-weight-base: 500;
|
||||
@font-weight-bold: 700;
|
||||
|
||||
// Elements
|
||||
@link-color: @brand-primary;
|
||||
@padding-base: 20px;
|
||||
@arrow-size: 8px;
|
||||
|
||||
// Icons
|
||||
@icon-size: 18px;
|
||||
|
||||
// Breakpoints
|
||||
@screen-sm: 480px;
|
||||
@screen-md: 768px;
|
||||
|
||||
// Radii
|
||||
@border-radius-base: 4px;
|
||||
@border-radius-large: 6px;
|
||||
|
||||
// Examples
|
||||
@example-width-audio: 520px;
|
||||
@example-width-video: 1200px;
|
||||
18
gulpfile.js
18
gulpfile.js
@ -77,8 +77,7 @@ function loadJSON(path) {
|
||||
|
||||
var build = {
|
||||
js: function(files, bundle) {
|
||||
for (var key in files) {
|
||||
(function(key) {
|
||||
Object.keys(files).forEach(function(key) {
|
||||
var name = 'js-' + key;
|
||||
tasks.js.push(name);
|
||||
|
||||
@ -89,12 +88,10 @@ var build = {
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
});
|
||||
},
|
||||
less: function(files, bundle) {
|
||||
for (var key in files) {
|
||||
(function(key) {
|
||||
Object.keys(files).forEach(function(key) {
|
||||
var name = 'less-' + key;
|
||||
tasks.less.push(name);
|
||||
|
||||
@ -108,12 +105,10 @@ var build = {
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
});
|
||||
},
|
||||
scss: function(files, bundle) {
|
||||
for (var key in files) {
|
||||
(function(key) {
|
||||
Object.keys(files).forEach(function(key) {
|
||||
var name = 'scss-' + key;
|
||||
tasks.scss.push(name);
|
||||
|
||||
@ -127,8 +122,7 @@ var build = {
|
||||
.pipe(cleanCSS())
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
});
|
||||
},
|
||||
sprite: function(bundle) {
|
||||
var name = 'sprite-' + bundle;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
}.call(this, 'Plyr', this, function() {
|
||||
'use strict';
|
||||
/* global jQuery, console */
|
||||
/* global jQuery */
|
||||
|
||||
// Globals
|
||||
var scroll = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user