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

YouTube playback, docs update

Browse Source
This commit is contained in:
Sam Potts
2015-07-20 22:24:06 +10:00
parent dcd9ca3a93
commit cdf3deb458
24 changed files with 893 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/sass/plyr.scss
View File

@ -4,12 +4,14 @@
// Variables
// -------------------------------
// Colors
$blue: #3498DB !default;
$gray-dark: #343f4a !default;
$gray: #565d64 !default;
$gray-light: #cbd0d3 !default;
$off-white: #d6dadd !default;
$gray-dark: #343F4A !default;
$gray: #565D64 !default;
$gray-light: #6B7D86 !default;
$gray-lighter: #CBD0D3 !default;
$off-white: #D6DADD !default;
// Font sizes
$font-size-small: 14px !default;
@ -18,11 +20,10 @@ $font-size-large: ceil(($font-size-base * 1.5)) !default;
// Controls
$control-spacing: 10px !default;
$controls-bg: $gray-dark !default;
$control-bg-hover: $blue !default;
$control-color: $gray-light !default;
$control-color-inactive: $gray !default;
$control-color-hover: #fff !default;
$controls-bg: #fff !default;
$control-bg-hover: @blue !default;
.contrast-control-color($controls-bg);
.contrast-control-color-hover($control-bg-hover);
// Tooltips
$tooltip-bg: $controls-bg !default;
@ -40,7 +41,7 @@ $progress-loading-bg: rgba(0,0,0, .15) !default;
// Volume
$volume-track-height: 6px !default;
$volume-track-bg: $gray !default;
$volume-track-bg: darken($controls-bg, 10%) !default;
$volume-thumb-height: ($volume-track-height * 2) !default;
$volume-thumb-width: ($volume-track-height * 2) !default;
$volume-thumb-bg: $control-color !default;
@ -50,18 +51,40 @@ $volume-thumb-bg-focus: $control-bg-hover !default;
$bp-control-split: 560px !default; // When controls split into left/right
$bp-captions-large: 768px !default; // When captions jump to the larger font size
// Utility classes & mixins
// Mixins
// -------------------------------
// Screen reader only
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
// Contrast
@mixin contrast-control-color($color: "") {
@if (lightness($color) >= 65%) {
$control-color: $gray-light;
}
@else if(lightness(@color) < 65%) {
$control-color: $gray-lighter;
}
}
@mixin contrast-control-color-hover($color: "") {
@if (lightness($color) >= 65%) {
$control-color-hover: $gray;
}
@else if (lightness($color) < 65%) {
$control-color-hover: #fff;
}
}
// Font smoothing
@mixin font-smoothing($mode: on)
{
@if ($mode == 'on') {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@else if ($mode == 'off') {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix()
{
@ -84,7 +107,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
}
// <input type="range"> styling
// ---------------------------------------
@mixin volume-thumb()
{
height: $volume-thumb-height;
@ -115,17 +137,16 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
border: 0;
}
// Font smoothing
// ---------------------------------------
@mixin font-smoothing($mode: on)
{
@if $mode == 'on' {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else if $mode == 'off' {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
// Screen reader only
// -------------------------------
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
// Styles
@ -149,7 +170,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&-video-wrapper {
position: relative;
}
video {
video,
audio {
width: 100%;
height: auto;
vertical-align: middle;
@ -192,6 +214,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
background: $controls-bg;
line-height: 1;
text-align: center;
box-shadow: 0 1px 1px rgba(red($gray-dark), green($gray-dark), blue($gray-dark), .2);
// Layout
&-right {
@ -215,7 +238,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
margin: 0 2px;
padding: ($control-spacing / 2) $control-spacing;
transition: background .3s ease;
background .3s ease, color .3s ease, opacity .3s ease;
border-radius: 3px;
cursor: pointer;
@ -229,12 +252,13 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
}
input + label,
.inverted:checked + label {
color: $control-color-inactive;
opacity: .5;
}
button,
.inverted + label,
input:checked + label {
color: $control-color;
opacity: 1;
}
button {
border: 0;
@ -249,6 +273,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
[type="checkbox"] + label:hover {
background: $control-bg-hover;
color: $control-color-hover;
opacity: 1;
}
button:focus,
input:focus + label {
@ -281,7 +306,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&::before {
content: "\2044";
margin-right: $control-spacing;
color: darken($control-color, 30%);
}
}
}