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

Clean up

Browse Source
This commit is contained in:
Sam Potts
2016-01-14 23:50:00 +11:00
parent bc7a6ebdde
commit 9fbbb474db
12 changed files with 270 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/dist/docs.css vendored
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

@ -20,12 +20,12 @@
<nav>
<ul>
<li>
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn--primary" data-shr-network="github">
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
<svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--twitter" data-shr-network="twitter">
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
<svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
</a>
</li>
@ -46,7 +46,7 @@
<button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
</li>
<li>
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo <sup>BETA</sup></button>
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
</li>
</ul>
</nav>

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

@ -98,13 +98,14 @@ nav {
// Buttons
.btn {
padding: (@padding-base / 2) @padding-base;
padding: (@padding-base / 2) ((@padding-base / 2) + 2);
background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
border: 1px solid @gray-light;
box-shadow: 0 1px 1px rgba(0,0,0, .05);
text-shadow: 0 1px 1px #fff;
color: @gray;
transition: background .1s ease, color .1s ease;
.font-size(@font-size-small);
&:hover,
&:focus {
@ -112,16 +113,15 @@ nav {
color: @gray;
outline: 0;
}
&--youtube .icon {
color: @color-youtube;
}
&--vimeo .icon {
color: @color-vimeo;
}
&--twitter .icon {
color: @color-twitter;
}
}
// Sizes
.btn--large {
padding: (@padding-base / 2) @padding-base;
.font-size();
}
// Styles
.btn--primary {
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
background-color: @link-color;
@ -136,9 +136,14 @@ nav {
border-color: darken(@link-color, 20%);
}
}
.btn--small {
padding-top: ceil(@padding-base / 3);
padding-bottom: ceil(@padding-base / 3);
.btn--youtube .icon {
color: @color-youtube;
}
.btn--vimeo .icon {
color: @color-vimeo;
}
.btn--twitter .icon {
color: @color-twitter;
}
// Count bubble

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

@ -5,6 +5,8 @@
video,
.plyr__video-embed {
border-radius: @border-radius-base;
max-width: 100%;
vertical-align: middle;
}
.plyr__video-embed {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

4
docs/src/less/components/icons.less
View File

@ -20,3 +20,7 @@ a .icon,
.btn .icon {
margin-right: (@padding-base / 2);
}
.btn:not(.btn-large) .icon {
width: (@icon-size - 2);
height: (@icon-size - 2);
}

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

@ -12,7 +12,7 @@ h2 {
.font-smoothing();
}
h1 {
.font-size(64);
.font-size(@font-size-h1);
color: #3498DB;
}
@ -24,11 +24,7 @@ small {
small {
display: block;
padding: 0 (@padding-base / 2);
.font-size(14);
}
sup {
vertical-align: 2px;
.font-size(9);
.font-size(@font-size-small);
}
// Lists

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

@ -18,6 +18,11 @@
// Base
@body-background: @off-white;
// Type
@font-size-base: 16;
@font-size-small: 14;
@font-size-h1: 64;
// Elements
@link-color: @blue;
@padding-base: 20px;