aboutsummaryrefslogtreecommitdiffstats
path: root/docs/src
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src')
-rw-r--r--docs/src/js/docs.js30
-rw-r--r--docs/src/less/components/buttons.less30
-rw-r--r--docs/src/less/components/examples.less30
-rw-r--r--docs/src/less/components/panels.less13
-rw-r--r--docs/src/less/components/type.less12
-rw-r--r--docs/src/less/docs.less1
6 files changed, 53 insertions, 63 deletions
diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 05cdf59b..76cd5ada 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -5,7 +5,7 @@
/*global plyr, shr*/
// Setup the player
-plyr.setup({
+plyr.setup('.js-media-player', {
debug: true,
title: 'Video demo',
tooltips: true,
@@ -20,7 +20,7 @@ plyr.setup({
// Setup shr
shr.setup({
count: {
- classname: 'btn-count'
+ classname: 'btn__count'
}
});
@@ -37,22 +37,22 @@ shr.setup({
function newSource() {
var trigger = this,
type = trigger.getAttribute('data-source'),
- player = document.querySelector('.plyr').plyr;
+ player = document.querySelector('.js-media-player').plyr;
switch(type) {
case 'video':
player.source({
type: 'video',
- title: 'Bug Buck Bunny',
+ title: 'View From A Blue Moon',
sources: [{
- src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
+ src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
type: 'video/mp4'
},
{
- src: 'https://cdn.selz.com/plyr/1.0/movie.webm',
+ src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
type: 'video/webm'
}],
- poster: 'https://cdn.selz.com/plyr/1.0/poster.jpg',
+ poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
tracks: [{
kind: 'captions',
label: 'English',
@@ -66,13 +66,13 @@ shr.setup({
case 'audio':
player.source({
type: 'audio',
- title: '96 by Logistics',
+ title: 'Kishi Bashi – “It All Began With A Burst”',
sources: [{
- src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
+ 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.0/logistics-96-sample.ogg',
+ src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
type: 'audio/ogg'
}]
});
@@ -81,25 +81,25 @@ shr.setup({
case 'youtube':
player.source({
type: 'youtube',
- title: 'Enovato interview of Dan Cederholm for Made By',
- sources: 'Au87oAJ2jeE'
+ title: 'View From A Blue Moon',
+ sources: 'bTqVqk7FSmY'
});
break;
case 'vimeo':
player.source({
type: 'vimeo',
- title: 'View from a blue moon',
+ title: 'View From A Blue Moon',
sources: '143418951'
});
break;
}
for (var x = buttons.length - 1; x >= 0; x--) {
- buttons[x].classList.remove('active');
+ buttons[x].classList.remove('btn--active');
}
- event.target.classList.add('active');
+ event.target.classList.add('btn--active');
}
})();
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 1401cd01..c42ea4bd 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -21,7 +21,7 @@ nav {
}
// Tabs
-.btn-bar {
+.btn__bar {
position: relative;
margin: 0 auto @padding-base;
max-width: @example-width-video;
@@ -60,10 +60,8 @@ nav {
display: block;
border-radius: 0;
}
- .active {
- &:extend(.btn-primary);
- }
- .btn.active {
+ .btn--active {
+ &:extend(.btn--primary);
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
position: relative;
z-index: 1;
@@ -80,7 +78,7 @@ nav {
// Shared
.btn,
-.btn-count {
+.btn__count {
display: inline-block;
vertical-align: middle;
border-radius: @border-radius-base;
@@ -91,12 +89,12 @@ nav {
// Buttons
.btn {
padding: (@padding-base / 2) @padding-base;
- background: @body-background;
+ background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
border: 1px solid @gray-light;
- box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+ box-shadow: 0 1px 1px rgba(0,0,0, .05);
text-shadow: 0 1px 1px #fff;
color: @gray;
- transition: background .3s ease, border .3s ease, color .3s ease;
+ transition: background .1s ease, color .1s ease;
&:hover,
&:focus {
@@ -104,18 +102,18 @@ nav {
color: @gray;
outline: 0;
}
- &-youtube .icon {
+ &--youtube .icon {
color: @color-youtube;
}
- &-vimeo .icon {
+ &--vimeo .icon {
color: @color-vimeo;
}
- &-twitter .icon {
+ &--twitter .icon {
color: @color-twitter;
}
}
-.btn-primary {
- background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+.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);
@@ -128,13 +126,13 @@ nav {
border-color: darken(@link-color, 20%);
}
}
-.btn-small {
+.btn--small {
padding-top: ceil(@padding-base / 3);
padding-bottom: ceil(@padding-base / 3);
}
// Count bubble
-.btn-count {
+.btn__count {
position: relative;
margin-left: (@padding-base / 2);
padding: (@padding-base / 2) (@padding-base * .75);
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 6312b642..6dde9690 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -3,10 +3,10 @@
// ==========================================================================
video,
-.plyr-video-embed {
+.plyr__video-embed {
border-radius: @border-radius-base;
}
-.plyr-video-embed {
+.plyr__video-embed {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
@@ -15,15 +15,15 @@ video,
margin: 0 auto @padding-base;
max-width: @example-width-video;
- &-controls {
+ &__controls {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
video,
- .plyr-video-embed {
+ .plyr__video-embed {
border-radius: @border-radius-base @border-radius-base 0 0;
}
- &-fullscreen,
- &.fullscreen-active {
+ &--fullscreen,
+ &--fullscreen-active {
max-width: none;
.plyr-controls,
@@ -36,20 +36,20 @@ video,
}
}
}
-.plyr-audio {
+.plyr--audio {
max-width: @example-width-audio;
- .plyr-controls {
+ .plyr__controls {
border-radius: @border-radius-base;
}
- .plyr-progress {
+ .plyr__progress {
border-radius: @border-radius-base @border-radius-base 0 0;
overflow: hidden;
}
}
// Style full supported player
-.cite {
+.plyr__cite {
display: none;
.icon {
@@ -57,9 +57,9 @@ video,
}
}
-.plyr-video ~ ul .cite-video,
-.plyr-audio ~ ul .cite-audio,
-.plyr-youtube ~ ul .cite-youtube,
-.plyr-vimeo ~ ul .cite-vimeo {
+.plyr--video ~ ul .plyr__cite--video,
+.plyr--audio ~ ul .plyr__cite--audio,
+.plyr--youtube ~ ul .plyr__cite--youtube,
+.plyr--vimeo ~ ul .plyr__cite--vimeo {
display: block;
-} \ No newline at end of file
+}
diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less
deleted file mode 100644
index 290e5dfc..00000000
--- a/docs/src/less/components/panels.less
+++ /dev/null
@@ -1,13 +0,0 @@
-// ==========================================================================
-// Panels
-// ==========================================================================
-
-// Panels
-.panel {
- display: none;
-
- &.active {
- display: block;
- animation: fade-in .3s ease;
- }
-} \ No newline at end of file
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
index 8fc200e2..854da12d 100644
--- a/docs/src/less/components/type.less
+++ b/docs/src/less/components/type.less
@@ -26,7 +26,13 @@ small {
padding: 0 (@padding-base / 2);
.font-size(14);
}
-ul
+sup {
+ vertical-align: 2px;
+ .font-size(9);
+}
+
+// Lists
+ul,
li {
list-style: none;
margin: 0;
@@ -53,9 +59,9 @@ a {
}
}
-.color-vimeo {
+.color--vimeo {
color: @color-vimeo;
}
-.color-youtube {
+.color--youtube {
color: @color-youtube;
}
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index 965dcba1..e828d3b3 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -22,6 +22,5 @@
@import "components/base.less";
@import "components/icons.less";
@import "components/buttons.less";
-@import "components/panels.less";
@import "components/error.less";
@import "components/examples.less";
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 22:56:13 +0000