Setup improvements, player -> plyr, docs (WIP)

docs/src/js/docs.js

@@ -37,7 +37,7 @@ shr.setup({
 	function newSource() {
 		var trigger = this,
 		type        = trigger.getAttribute('data-source'),
-		player      = document.querySelector('.player').plyr;
+		player      = document.querySelector('.plyr').plyr;
 
 		switch(type) {
 			case 'video':
@@ -81,16 +81,16 @@ shr.setup({
 			case 'youtube':
 				player.source({
 					type:       'youtube',
-					title: 		'Introducing Apple Pencil',
-					sources:    'iicnVez5U7M'
+					title: 		'Enovato interview of Dan Cederholm for Made By',
+					sources:    'Au87oAJ2jeE'
 				});
 				break;
 
 			case 'vimeo':
 				player.source({
 					type:       'vimeo',
-					title: 		'The Beaten Track',
-					sources:    '125220818'
+					title: 		'Yosemite HD II',
+					sources:    '87701971'
 				});
 				break;
 		}

docs/src/less/components/examples.less

@@ -3,7 +3,7 @@
 // ==========================================================================
 
 // Example players
-.player {
+.plyr {
     margin: 0 auto @padding-base;
     max-width: @example-width-video;
 
@@ -11,38 +11,38 @@
         border-radius: 0 0 @border-radius-base @border-radius-base;
     }
 }
-.player-audio {
+.plyr-audio {
     max-width: @example-width-audio;
 
-    .player-controls {
+    .plyr-controls {
         border-radius: @border-radius-base;
     }
-    .player-progress {
+    .plyr-progress {
         border-radius: @border-radius-base @border-radius-base 0 0;
         overflow: hidden;
     }
 }
 video,
-.player-video-embed {
+.plyr-video-embed {
     border-radius: @border-radius-base;
 }
-.player-video-embed {
+.plyr-video-embed {
     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Style full supported player
-.player-video,
-.player-youtube,
-.player-vimeo {
+.plyr-video,
+.plyr-youtube,
+.plyr-vimeo {
     video,
-    .player-video-embed {
+    .plyr-video-embed {
         border-radius: @border-radius-base @border-radius-base 0 0;
     }
-    &.player-fullscreen,
+    &.plyr-fullscreen,
     &.fullscreen-active {
         max-width: none;
 
-        .player-controls,
+        .plyr-controls,
         video,
         iframe {
             border-radius: 0;
@@ -51,4 +51,19 @@ video,
             -webkit-mask-image: none;
         }
     }
+}
+
+.cite {
+    display: none;
+
+    .icon {
+        margin-right: (@padding-base / 4);
+    }
+}
+
+.plyr-video ~ ul .cite-video,
+.plyr-audio ~ ul .cite-audio,
+.plyr-youtube ~ ul .cite-youtube,
+.plyr-vimeo ~ ul .cite-vimeo {
+    display: block;
 }

docs/src/less/components/type.less

@@ -26,17 +26,24 @@ small {
     padding: 0 (@padding-base / 2);
     .font-size(14);
 }
+ul
+li {
+    list-style: none;
+    margin: 0; 
+    padding: 0;
+}
 
 // Links
 a {
     text-decoration: none;
     color: @link-color;
-    border-bottom: 1px solid currentColor;
-    transition: background .3s ease, color .3s ease;
+    border-bottom: 1px dotted currentColor;
+    transition: background .3s ease, color .3s ease, border .3s ease;
 
     &:hover,
     &:focus {
         color: @gray-dark;
+        border-bottom-color: rgba(0,0,0,0);
     }
     &:focus {
         .tab-focus();
@@ -44,4 +51,11 @@ a {
     &.logo {
         border: 0;
     }
+}
+
+.color-vimeo {
+    color: @color-vimeo;
+}
+.color-youtube {
+    color: @color-youtube;
 }