Docs to build custom CSS for plyr

demo/index.html

@@ -26,9 +26,6 @@
     <meta name="twitter:creator" content="@sam_potts">
     <meta name="twitter:card" content="summary_large_image">
 
-    <!-- Styles -->
-    <link rel="stylesheet" href="../dist/plyr.css">
-
     <!-- Docs styles -->
     <link rel="stylesheet" href="dist/demo.css">
 
@@ -83,7 +80,7 @@
         <main>
             <video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
                 <!-- Video files -->
-                <!--<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">-->
+                <source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
                 <source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">
 
                 <!-- Text track file -->

demo/src/less/bundles/demo.less

@@ -14,6 +14,7 @@
 @import '../settings/cosmetic';
 @import '../settings/icons';
 @import '../settings/layout';
+
 @import '../settings/spacing';
 @import '../settings/type';
 
@@ -33,3 +34,7 @@
 @import '../components/lists';
 @import '../components/navigation';
 @import '../components/players';
+
+// Plyr
+@import '../../../../src/less/bundle';
+@import '../settings/plyr';

demo/src/less/settings/plyr.less

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Plyr Settings
+// ==========================================================================
+
+// Font
+@plyr-font-family: inherit;
+
+// Sizes
+@plyr-font-size-base: 13px;
+@plyr-font-size-small: 12px;
+@plyr-font-size-time: 11px;
+@plyr-font-size-badges: 9px;
+
+// Captions
+@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;

src/less/components/badges.less

@@ -7,6 +7,6 @@
     border-radius: 2px;
     background: @plyr-menu-color;
     color: @plyr-menu-bg;
-    font-size: @plyr-font-size-micro;
+    font-size: @plyr-font-size-badge;
     line-height: 1;
 }

src/less/settings.less

@@ -11,15 +11,18 @@
 // Colors
 @plyr-color-main: #1aafff;
 
-// Font
+// Type
-@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-@plyr-font-size-base: 13px;
+@plyr-font-size-base: 16px;
-@plyr-font-size-small: 12px;
+@plyr-font-size-small: 14px;
-@plyr-font-size-tiny: 11px;
+@plyr-font-size-time: 14px;
-@plyr-font-size-micro: 9px;
+@plyr-font-size-badge: 10px;
+
 @plyr-font-weight-regular: 500;
 @plyr-font-weight-bold: 600;
+
 @plyr-line-height: 1.7;
+
 @plyr-font-smoothing: on;
 
 // Focus
@@ -46,8 +49,6 @@
 @plyr-audio-control-color: #565d64;
 @plyr-audio-control-color-hover: #fff;
 @plyr-audio-control-bg-hover: @plyr-color-main;
-@plyr-font-size-time: @plyr-font-size-tiny;
-
 // Tooltips
 @plyr-tooltip-bg: fade(#fff, 90%);
 @plyr-tooltip-color: #565d64;