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
html {
height: 100%;
background: linear-gradient(#fff, @body-background) fixed;
background: @body-background fixed;
}
body {
margin: 0;

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

@ -99,7 +99,7 @@ nav {
// Buttons
.btn {
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;
box-shadow: 0 1px 1px rgba(0,0,0, .05);
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;
}
video,
.plyr__video-embed {
max-width: 100%;
vertical-align: middle;
}
// Example players
.plyr {
margin: 0 auto;
border-radius: @border-radius-base;
border-radius: @border-radius-large;
}
.plyr--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
.plyr__cite {

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

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

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

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

1
src/less/plyr.less
View File

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

2
src/less/variables.less
View File

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