UI tweaks

docs/src/less/components/base.less

@@ -16,15 +16,9 @@
 // Base
 html {
     height: 100%;
-    font-size: 100%;
     background: linear-gradient(#fff, @body-background) fixed;
 }
 body {
-    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    text-align: center;
-    color: @gray;
-    .font-smoothing(on);
     padding: 0 (@padding-base / 2);
 }
 

docs/src/less/components/buttons.less

@@ -92,7 +92,6 @@ nav {
 	display: inline-block;
 	vertical-align: middle;
 	border-radius: @border-radius-base;
-	font-weight: 600;
 	user-select: none;
 }
 

docs/src/less/components/examples.less

@@ -9,7 +9,6 @@ section {
 
 video,
 .plyr__video-embed {
-    border-radius: @border-radius-base;
     max-width: 100%;
     vertical-align: middle;
 }
@@ -20,14 +19,8 @@ video,
 // Example players
 .plyr {
     margin: 0 auto;
+    border-radius: @border-radius-base;
 
-    &__controls {
-        border-radius: 0 0 @border-radius-base @border-radius-base;
-    }
-    video,
-    .plyr__video-embed {
-        border-radius: @border-radius-base @border-radius-base 0 0;
-    }
     &--fullscreen,
     &--fullscreen-active {
         max-width: none;
@@ -45,13 +38,18 @@ video,
 .plyr--audio {
     max-width: @example-width-audio;
 
-    .plyr__controls {
+    /*.plyr__controls {
         border-radius: @border-radius-base;
     }
     .plyr__progress {
         border-radius: @border-radius-base @border-radius-base 0 0;
-        overflow: hidden;
-    }
+
+        progress,
+        [type='range'] {
+            border-radius: @border-radius-base @border-radius-base 0 0;
+            overflow: hidden;
+        }
+    }*/
 }
 
 // Style full supported player

docs/src/less/components/type.less

@@ -2,6 +2,18 @@
 // 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;
+}
+
 // Headings
 h1,
 h2 {
@@ -10,6 +22,7 @@ h2 {
     margin: 0 0 (@padding-base / 2);
     line-height: 1.2;
     .font-smoothing();
+    font-weight: @font-weight-bold;
 }
 h1 {
     .font-size(@font-size-h1);

docs/src/less/lib/fontface.less

@@ -2,17 +2,17 @@
 // Fonts
 // ==========================================================================
 
-@font-face {
+/*@font-face {
     font-family: "Avenir";
     src:    url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
             url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
     font-style:   normal;
-    font-weight:  400;
+    font-weight:  @font-weight-base;
 }
 @font-face {
     font-family: "Avenir";
     src:    url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
             url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
     font-style:   normal;
-    font-weight:  600;
-}
+    font-weight:  @font-weight-bold;
+}*/

docs/src/less/variables.less

@@ -22,6 +22,8 @@
 @font-size-base:            16;
 @font-size-small:           14;
 @font-size-h1:              64;
+@font-weight-base: 			500;
+@font-weight-bold: 			700;
 
 // Elements
 @link-color:                @blue;