diff options
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/base.less | 6 | ||||
| -rw-r--r-- | src/less/bundle.less | 1 | ||||
| -rw-r--r-- | src/less/components/badges.less | 4 | ||||
| -rw-r--r-- | src/less/components/buttons.less | 11 | ||||
| -rw-r--r-- | src/less/components/menus.less | 38 | ||||
| -rw-r--r-- | src/less/components/sliders.less | 10 | ||||
| -rw-r--r-- | src/less/utils/animation.less | 7 |
7 files changed, 64 insertions, 13 deletions
diff --git a/src/less/base.less b/src/less/base.less index c4158186..0fb14bd8 100644 --- a/src/less/base.less +++ b/src/less/base.less @@ -12,6 +12,7 @@ line-height: @plyr-line-height; direction: ltr; text-shadow: none; + transition: box-shadow 0.3s ease; .plyr-font-smoothing(off); // Media elements @@ -22,6 +23,11 @@ vertical-align: middle; border-radius: inherit; } + + &:focus { + outline: 0; + box-shadow: 0 0 0 3px fade(#000, 10%); + } } // Full UI only diff --git a/src/less/bundle.less b/src/less/bundle.less index bff7fdec..231210c8 100644 --- a/src/less/bundle.less +++ b/src/less/bundle.less @@ -26,4 +26,5 @@ @import 'states/fullscreen'; +@import 'utils/animation'; @import 'utils/hidden'; diff --git a/src/less/components/badges.less b/src/less/components/badges.less index 94035e9b..d87706df 100644 --- a/src/less/components/badges.less +++ b/src/less/components/badges.less @@ -3,11 +3,11 @@ // -------------------------------------------------------------- .plyr__badge { - padding: 0 4px; + padding: 3px 4px; border-radius: 2px; background: @plyr-menu-color; color: @plyr-menu-bg; font-size: @plyr-font-size-tiny; - line-height: 1.5; + line-height: 1; .plyr-font-smoothing(on); } diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less index a7f0ba0a..3a9057c6 100644 --- a/src/less/components/buttons.less +++ b/src/less/components/buttons.less @@ -57,9 +57,9 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - padding: ceil(@plyr-control-spacing * 1.25); + padding: ceil(@plyr-control-spacing * 1.5); background: fade(@plyr-video-control-bg-hover, 80%); - border: 3px solid currentColor; + border: 0; border-radius: 100%; box-shadow: 0 1px 1px fade(#000, 15%); color: @plyr-video-control-color; @@ -81,7 +81,12 @@ } &:focus { - outline: 1px dotted fade(@plyr-video-control-color, 50%); + outline: 0; + } + + &.plyr__tab-focus { + outline: 0; + box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%); } } diff --git a/src/less/components/menus.less b/src/less/components/menus.less index a679e69b..f96393e0 100644 --- a/src/less/components/menus.less +++ b/src/less/components/menus.less @@ -129,11 +129,45 @@ } label.plyr__control { - padding-left: ceil(@plyr-control-padding * 2.5); + padding-left: @plyr-control-padding; - input[type='radio'] { + /*input[type='radio'] { position: relative; left: -@plyr-control-padding; + }*/ + + input[type='radio'] + span { + position: relative; + display: block; + height: 14px; + width: 14px; + border-radius: 100%; + background: fade(#000, 10%); + margin-right: @plyr-control-spacing; + box-shadow: inset 0 1px 1px fade(#000, 15%); + + &::after { + content: ''; + position: absolute; + height: 6px; + width: 6px; + top: 4px; + left: 4px; + transform: scale(0); + opacity: 0; + background: #fff; + border-radius: 100%; + transition: transform 0.3s ease, opacity 0.3s ease; + } + } + + input[type='radio']:checked + span { + background: @plyr-color-main; + + &::after { + transform: scale(1); + opacity: 1; + } } } diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less index d075d69f..dff1da8b 100644 --- a/src/less/components/sliders.less +++ b/src/less/components/sliders.less @@ -12,6 +12,8 @@ cursor: pointer; border: none; background: transparent; + transition: box-shadow 0.3s ease; + border-radius: (@plyr-range-thumb-height * 2); // Used in JS to populate lower fill for WebKit color: @plyr-range-selected-bg; @@ -79,10 +81,6 @@ border: 0; } - &.plyr__tab-focus { - outline-offset: 3px; - } - // Pressed styles &:active { &::-webkit-slider-thumb { @@ -114,7 +112,7 @@ } &.plyr__tab-focus { - outline: 1px dotted fade(@plyr-video-control-color, 50%); + box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%); } } @@ -133,6 +131,6 @@ } &.plyr__tab-focus { - outline: 1px dotted fade(@plyr-audio-control-color, 50%); + box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%); } } diff --git a/src/less/utils/animation.less b/src/less/utils/animation.less new file mode 100644 index 00000000..4a5b6b90 --- /dev/null +++ b/src/less/utils/animation.less @@ -0,0 +1,7 @@ +// -------------------------------------------------------------- +// Animation utils +// -------------------------------------------------------------- + +.plyr--no-transition { + transition: none !important; +} |