Styling fixes

demo/dist/demo.js

@@ -3887,7 +3887,7 @@ singleton.Client = Client;
             });
 
             // Setup the player
-            var player = new Plyr('#player', {
+            var player = new Plyr('video', {
                 debug: true,
                 title: 'View From A Blue Moon',
                 iconUrl: '../dist/plyr.svg',

demo/src/js/demo.js

@@ -47,7 +47,7 @@ import Raven from 'raven-js';
             });
 
             // Setup the player
-            const player = new Plyr('#player', {
+            const player = new Plyr('video', {
                 debug: true,
                 title: 'View From A Blue Moon',
                 iconUrl: '../dist/plyr.svg',

demo/src/sass/settings/plyr.scss

@@ -16,3 +16,4 @@ $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
 $plyr-font-size-captions-medium: 18px;
 $plyr-font-size-captions-large: 21px;
+$plyr-font-size-menu: $plyr-font-size-base;

dist/plyr.js

@@ -77,7 +77,7 @@ var defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.1/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.1.0-beta.2/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.1.0-beta.2",
+    "version": "3.1.0",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",

src/sass/base.scss

@@ -26,6 +26,11 @@
         width: 100%;
     }
 
+    button {
+        font: inherit;
+        line-height: inherit;
+    }
+
     // Ignore focus
     &:focus {
         outline: 0;

src/sass/components/menus.scss

@@ -74,6 +74,7 @@
             align-items: center;
             color: $plyr-menu-color;
             display: flex;
+            font-size: $plyr-font-size-menu;
             padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
             user-select: none;
             width: 100%;

src/sass/settings/type.scss

@@ -8,8 +8,9 @@ $plyr-font-size-small: 14px !default;
 $plyr-font-size-large: 18px !default;
 $plyr-font-size-xlarge: 21px !default;
 
-$plyr-font-size-time: 14px !default;
+$plyr-font-size-time: $plyr-font-size-small !default;
 $plyr-font-size-badge: 9px !default;
+$plyr-font-size-menu: $plyr-font-size-small !default;
 
 $plyr-font-weight-regular: 500 !default;
 $plyr-font-weight-bold: 600 !default;