Docs to build custom CSS for plyr

2 files changed, 23 insertions, 0 deletions

diff --git a/demo/src/less/bundles/demo.less b/demo/src/less/bundles/demo.less
index 449720b4..5b76a27f 100644
--- a/demo/src/less/bundles/demo.less
+++ b/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';
diff --git a/demo/src/less/settings/plyr.less b/demo/src/less/settings/plyr.less
new file mode 100644
index 00000000..c39fd44b
--- /dev/null
+++ b/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;