diff options
Diffstat (limited to 'src/sass/plyr.scss')
| -rw-r--r-- | src/sass/plyr.scss | 96 |
1 files changed, 60 insertions, 36 deletions
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index bf027db0..011a5368 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -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%); } } } |