ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Docs to build custom CSS for plyr

Browse Source
This commit is contained in:
Sam Potts 2017-11-20 23:53:54 +11:00
parent da1e987444
commit 92cd67effb
8 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

5
demo/index.html
View File

@ -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 -->

5
demo/src/less/bundles/demo.less
View File

@ -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';

18
demo/src/less/settings/plyr.less Normal file
View File

@ -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;

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/less/components/badges.less
View File

@ -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;
}

17
src/less/settings.less
View File

@ -11,15 +11,18 @@
// Colors
@plyr-color-main: #1aafff;
// Font
@plyr-font-family: inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-base: 13px;
@plyr-font-size-small: 12px;
@plyr-font-size-tiny: 11px;
@plyr-font-size-micro: 9px;
// Type
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-base: 16px;
@plyr-font-size-small: 14px;
@plyr-font-size-time: 14px;
@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;