Merge branch 'master' into develop

# Conflicts:
#	dist/plyr.css
#	dist/plyr.js

1 files changed, 84 insertions, 14 deletions

diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index f68e0148..d4ef32b9 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -12,14 +12,16 @@
 // Variables
 // ---------------------------------------
 // Colors
-@blue:                      #3498DB;
+@blue:                      #3498db;
 @gray-dark:                 #343f4a;
 @gray:                      #565d64;
 @gray-light:                #cbd0d3;
+@off-white:                 #f2f5f7;
 
 // Elements
 @link-color:                @blue;
 @padding-base:              20px;
+@arrow-size:                8px;
 
 // Breakpoints
 @screen-md:                 768px;
@@ -33,10 +35,10 @@
 // Base
 body {
     font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: #fff;
+    background: @off-white;
     line-height: 1.5;
     text-align: center;
-    color: #6D797F;
+    color: @gray;
 }
 
 // Error page
@@ -102,6 +104,22 @@ section {
 }
 
 // Links & Buttons
+.actions {
+    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;
+    }
+}
 a {
     text-decoration: none;
     color: @link-color;
@@ -119,41 +137,93 @@ a {
         border: 0;
     }
 }
-.btn {
+.btn,
+.btn-count {
     display: inline-block;
-    padding: (@padding-base / 2) (@padding-base * 1.5);
-    background: @link-color;
-    border: 0;
-    color: #fff;
+    vertical-align: middle;
+    border-radius: 3px;
     .font-smoothing(on);
     font-weight: 600;
-    border-radius: 3px;
     user-select: none;
+}
+.btn {
+    padding: (@padding-base / 2) @padding-base;
+    background: @link-color;
+    border: 0;
+    color: #fff;
     
     &:hover,
     &:focus {
         color: #fff;
         background: darken(@link-color, 5%);
     }
+
+    &-twitter {
+        background: #8799A2;
+
+        &:hover,
+        &:focus {
+            background: darken(#8799A2, 5%);
+        }
+    }
+}
+.btn-count {
+    position: relative;
+    margin-left: 6px;
+    padding: ((@padding-base / 2) - 1px);
+    background: #fff;
+    border: 1px solid @gray-light;
+
+    &::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: @arrow-size;
+        height: @arrow-size;
+        left: 1px;
+        top: 50%;
+        margin-top: -(@arrow-size / 2);
+
+        background: inherit;
+        border: inherit;
+        border-width: 1px 0 0 1px;
+        transform: rotate(-45deg) translate(-50%, -50%);
+    }
 }
 
-// Players
+// Example players
+.example-audio .player,
+.example-video .player {
+    margin: 0 auto @padding-base;
+
+    &-controls {
+        border-radius: 0 0 4px 4px;
+    }
+}
 .example-audio .player {
     max-width: 520px;
+
+    &-controls {
+        border-radius: 4px;
+    }
+    &-progress {
+        border-radius: 4px 4px 0 0;
+        overflow: hidden;
+    }
 }
 .example-video .player {
     max-width: 1200px;
-}
-.example-audio .player,
-.example-video .player {
-    margin: 0 auto @padding-base;
 
+    video {
+        border-radius: 4px 4px 0 0;
+    }
     &-fullscreen,
     &.fullscreen-active {
         max-width: none;
     }
 }
 
+
 // Footer
 footer {
     margin-bottom: @padding-base;