diff options
Diffstat (limited to 'src/less/plyr.less')
| -rw-r--r-- | src/less/plyr.less | 182 |
1 files changed, 121 insertions, 61 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 9a53715b..b72f0ec7 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -21,7 +21,6 @@ @control-bg-hover: @blue; @control-color: @gray-light; @control-color-inactive: @gray; -@control-color-focus: #fff; @control-color-hover: #fff; // Progress @@ -29,13 +28,13 @@ @progress-playing-bg: @blue; @progress-buffered-bg: @gray; -// Range -@range-track-height: 6px; -@range-track-bg: @gray; -@range-thumb-height: (@range-track-height * 2); -@range-thumb-width: (@range-track-height * 2); -@range-thumb-bg: @control-color; -@range-thumb-bg-focus: @control-bg-hover; +// Volume +@volume-track-height: 6px; +@volume-track-bg: @gray; +@volume-thumb-height: (@volume-track-height * 2); +@volume-thumb-width: (@volume-track-height * 2); +@volume-thumb-bg: @control-color; +@volume-thumb-bg-focus: @control-bg-hover; // Breakpoints @bp-control-split: 560px; // When controls split into left/right @@ -64,25 +63,35 @@ // Tab focus styles .tab-focus() { outline: thin dotted #000; - outline-offset: 1px; + outline-offset: 0; } -// Range styling +// <input type="range"> styling // --------------------------------------- -.range-thumb() { - height: @range-thumb-height; - width: @range-thumb-width; - background: @range-thumb-bg; +.volume-thumb() { + height: @volume-thumb-height; + width: @volume-thumb-width; + background: @volume-thumb-bg; border: 0; - border-radius: (@range-thumb-height / 2); + border-radius: (@volume-thumb-height / 2); transition: background .3s ease; cursor: ew-resize; } -.range-track() { - height: @range-track-height; - background: @range-track-bg; +.volume-track() { + height: @volume-track-height; + background: @volume-track-bg; + border: 0; + border-radius: (@volume-track-height / 2); +} +.seek-thumb() { + background: transparent; + border: 0; + width: 2px; + height: @control-spacing; +} +.seek-track() { + background: none; border: 0; - border-radius: (@range-track-height / 2); } // Font smoothing @@ -196,13 +205,13 @@ transition: fill .3s ease; } } - [type="checkbox"] + label, + input + label, .inverted:checked + label { color: @control-color-inactive; } button, .inverted + label, - [type="checkbox"]:checked + label { + input:checked + label { color: @control-color; } button { @@ -210,16 +219,18 @@ background: transparent; overflow: hidden; } - [type="checkbox"]:focus + label, - button:focus { - .tab-focus(); - color: @control-color-focus; - } + + button:focus, button:hover, - [type="checkbox"] + label:hover { + input:focus + label, + input + label:hover { background: @control-bg-hover; color: @control-color-hover; } + button:focus, + input:focus + label { + outline: 0; + } .icon-exit-fullscreen, .icon-muted, .icon-captions-on { @@ -247,44 +258,93 @@ height: @control-spacing; background: @progress-bg; - &-buffer, - &-played { + &-buffer[value], + &-played[value], + &-seek[type=range] { position: absolute; left: 0; top: 0; width: 100%; - height: 100%; + height: @control-spacing; margin: 0; + padding: 0; vertical-align: top; - - &[value] { - -webkit-appearance: none; - border: none; - background: transparent; - &::-webkit-progress-bar { - background: transparent; - } + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background: transparent; + } + &-buffer[value], + &-played[value] { + &::-webkit-progress-bar { + background: transparent; + } - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + transition: width .1s ease; + } + &::-moz-progress-bar { + background: currentColor; + transition: width .1s ease; } - } - &-played { - z-index: 2; } &-played[value] { - cursor: pointer; + z-index: 2; color: @progress-playing-bg; } &-buffer[value] { color: @progress-buffered-bg; } + + // Seek control + // <input[type='range']> element + // Specificity is for bootstrap compatibility + &-seek[type=range] { + z-index: 3; + cursor: pointer; + outline: 0; + + // Webkit + &::-webkit-slider-runnable-track { + .seek-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + .seek-thumb(); + } + + // Mozilla + &::-moz-range-track { + .seek-track(); + } + &::-moz-range-thumb { + -moz-appearance: none; + .seek-thumb(); + } + + // Microsoft + &::-ms-track { + color: transparent; + .seek-track(); + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .seek-track(); + } + &::-ms-thumb { + .seek-thumb(); + } + + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + } } // States @@ -312,49 +372,49 @@ // Webkit &::-webkit-slider-runnable-track { - .range-track(); + .volume-track(); } &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: -((@range-thumb-height - @range-track-height) / 2); - .range-thumb(); + margin-top: -((@volume-thumb-height - @volume-track-height) / 2); + .volume-thumb(); } // Mozilla &::-moz-range-track { - .range-track(); + .volume-track(); } &::-moz-range-thumb { - .range-thumb(); + .volume-thumb(); } // Microsoft &::-ms-track { - height: @range-track-height; + height: @volume-track-height; background: transparent; border-color: transparent; - border-width: ((@range-thumb-height - @range-track-height) / 2) 0; + border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0; color: transparent; } &::-ms-fill-lower, &::-ms-fill-upper { - .range-track(); + .volume-track(); } &::-ms-thumb { - .range-thumb(); + .volume-thumb(); } &:focus { outline: 0; &::-webkit-slider-thumb { - background: @range-thumb-bg-focus; + background: @volume-thumb-bg-focus; } &::-moz-range-thumb { - background: @range-thumb-bg-focus; + background: @volume-thumb-bg-focus; } &::-ms-thumb { - background: @range-thumb-bg-focus; + background: @volume-thumb-bg-focus; } } } |