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

Docs tweaks

Browse Source
This commit is contained in:
Sam Potts 2016-04-27 00:34:44 +10:00
parent 68c4b52dfa
commit b077bb9f5f
9 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/src/less/components/base.less
View File

@ -16,7 +16,7 @@
// Base // Base
html { html {
height: 100%; height: 100%;
background: linear-gradient(#fff, @body-background) fixed; background: @body-background fixed;
} }
body { body {
margin: 0; margin: 0;

2
docs/src/less/components/buttons.less
View File

@ -99,7 +99,7 @@ nav {
// Buttons // Buttons
.btn { .btn {
padding: (@padding-base / 2) ((@padding-base / 2) + 2); padding: (@padding-base / 2) ((@padding-base / 2) + 2);
background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%)); background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
border: 1px solid @gray-light; border: 1px solid @gray-light;
box-shadow: 0 1px 1px rgba(0,0,0, .05); box-shadow: 0 1px 1px rgba(0,0,0, .05);
text-shadow: 0 1px 1px #fff; text-shadow: 0 1px 1px #fff;

19
docs/src/less/components/examples.less
View File

@ -7,20 +7,25 @@ section {
max-width: @example-width-video; max-width: @example-width-video;
} }
video,
.plyr__video-embed {
max-width: 100%;
vertical-align: middle;
}
// Example players // Example players
.plyr { .plyr {
margin: 0 auto; margin: 0 auto;
border-radius: @border-radius-base; border-radius: @border-radius-large;
} }
.plyr--audio { .plyr--audio {
max-width: @example-width-audio; max-width: @example-width-audio;
} }
.plyr--video::after {
content: "";
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid fade(#000, 15%);
border-radius: inherit;
}
// Style full supported player // Style full supported player
.plyr__cite { .plyr__cite {

3
docs/src/less/components/type.less
View File

@ -19,14 +19,13 @@ body {
h1, h1,
h2 { h2 {
letter-spacing: -.025em; letter-spacing: -.025em;
color: #2E3C44; color: @brand-primary;
margin: 0 0 (@padding-base / 2); margin: 0 0 (@padding-base / 2);
line-height: 1.2; line-height: 1.2;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
} }
h1 { h1 {
.font-size(@font-size-h1); .font-size(@font-size-h1);
color: #3498DB;
} }
// Paragraph and small // Paragraph and small

21
docs/src/less/variables.less
View File

@ -3,43 +3,46 @@
// ========================================================================== // ==========================================================================
// Colors // Colors
@blue: #3498db;
@gray-dark: #343f4a; @gray-dark: #343f4a;
@gray: #55646b; @gray: #55646b;
@gray-light: #cbd0d3; @gray-light: #cbd0d3;
@gray-lighter: #dbe3e8; @gray-lighter: #dbe3e8;
@off-white: #f2f5f7; @off-white: #f2f5f7;
@brand-primary: #3498db;
@brand-secondary: #02BD9B;
// Brands // Brands
@color-twitter: #4BAAF4; @color-twitter: #4BAAF4;
@color-youtube: #cc181e; @color-youtube: #cc181e;
@color-vimeo: #19b7ed; @color-vimeo: #19b7ed;
// Base // Base
@body-background: @off-white; @body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
// Type // Type
@font-size-base: 16; @font-size-base: 16;
@font-size-small: 14; @font-size-small: 14;
@font-size-h1: 64; @font-size-h1: 64;
@font-weight-base: 500; @font-weight-base: 500;
@font-weight-bold: 700; @font-weight-bold: 700;
// Elements // Elements
@link-color: @blue; @link-color: @brand-primary;
@padding-base: 20px; @padding-base: 20px;
@arrow-size: 8px; @arrow-size: 8px;
// Icons // Icons
@icon-size: 18px; @icon-size: 18px;
// Breakpoints // Breakpoints
@screen-sm: 480px; @screen-sm: 480px;
@screen-md: 768px; @screen-md: 768px;
// Radii // Radii
@border-radius-base: 4px; @border-radius-base: 4px;
@border-radius-large: 6px;
// Examples // Examples
@example-width-audio: 520px; @example-width-audio: 520px;
@example-width-video: 1200px; @example-width-video: 1200px;

1
src/less/plyr.less
View File

@ -371,6 +371,7 @@
background: @plyr-video-control-bg-hover; background: @plyr-video-control-bg-hover;
border: 4px solid @plyr-video-control-color; border: 4px solid @plyr-video-control-color;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
color: @plyr-video-control-color; color: @plyr-video-control-color;
transition: opacity .3s ease, visibility .3s ease; transition: opacity .3s ease, visibility .3s ease;

2
src/less/variables.less
View File

@ -4,7 +4,7 @@
// ========================================================================== // ==========================================================================
// Colors // Colors
@plyr-color-main: #3498DB; @plyr-color-main: #02BD9B;
// Font sizes // Font sizes
@plyr-font-size-small: 14px; @plyr-font-size-small: 14px;