diff options
Diffstat (limited to 'src/sass')
| -rw-r--r-- | src/sass/components/menus.scss | 79 | ||||
| -rw-r--r-- | src/sass/components/poster.scss | 7 | ||||
| -rw-r--r-- | src/sass/components/progress.scss | 1 | ||||
| -rw-r--r-- | src/sass/components/sliders.scss | 18 | ||||
| -rw-r--r-- | src/sass/lib/mixins.scss | 6 | ||||
| -rw-r--r-- | src/sass/utils/hidden.scss | 4 |
6 files changed, 65 insertions, 50 deletions
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index 3ad4039a..be354e46 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -54,18 +54,16 @@ width: 0; } - ul { - list-style: none; - margin: 0; - overflow: hidden; + [role='menu'] { padding: $plyr-control-padding; + } - li { - margin-top: 2px; + [role='menuitem'], + [role='menuitemradio'] { + margin-top: 2px; - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; } } @@ -75,10 +73,16 @@ color: $plyr-menu-color; display: flex; font-size: $plyr-font-size-menu; - padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2); + padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5); user-select: none; width: 100%; + > span { + align-items: inherit; + display: flex; + width: 100%; + } + &::after { border: 4px solid transparent; content: ''; @@ -135,50 +139,49 @@ } } - label.plyr__control { + .plyr__control[role='menuitemradio'] { padding-left: $plyr-control-padding; - input[type='radio'] + span { - background: rgba(#000, 0.1); + &::before, + &::after { border-radius: 100%; + } + + &::before { + background: rgba(#000, 0.1); + content: ''; display: block; flex-shrink: 0; height: 16px; margin-right: $plyr-control-spacing; - position: relative; transition: all 0.3s ease; width: 16px; - - &::after { - background: #fff; - border-radius: 100%; - content: ''; - height: 6px; - left: 5px; - opacity: 0; - position: absolute; - top: 5px; - transform: scale(0); - transition: transform 0.3s ease, opacity 0.3s ease; - width: 6px; - } } - input[type='radio']:checked + span { - background: $plyr-color-main; + &::after { + background: #fff; + border: 0; + height: 6px; + left: 12px; + opacity: 0; + top: 50%; + transform: translateY(-50%) scale(0); + transition: transform 0.3s ease, opacity 0.3s ease; + width: 6px; + } + &[aria-checked='true'] { + &::before { + background: $plyr-color-main; + } &::after { opacity: 1; - transform: scale(1); + transform: translateY(-50%) scale(1); } } - input[type='radio']:focus + span { - @include plyr-tab-focus(); - } - - &.plyr__tab-focus input[type='radio'] + span, - &:hover input[type='radio'] + span { + &.plyr__tab-focus::before, + &:hover::before { background: rgba(#000, 0.1); } } @@ -188,7 +191,7 @@ align-items: center; display: flex; margin-left: auto; - margin-right: -$plyr-control-padding; + margin-right: -($plyr-control-padding - 2); overflow: hidden; padding-left: ceil($plyr-control-padding * 3.5); pointer-events: none; diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss index 9bf7398d..15e87257 100644 --- a/src/sass/components/poster.scss +++ b/src/sass/components/poster.scss @@ -7,17 +7,16 @@ background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; + display: none; height: 100%; left: 0; - opacity: 0; + pointer-events: none; position: absolute; top: 0; - transition: opacity 0.3s ease; width: 100%; z-index: 1; } .plyr--stopped.plyr__poster-enabled .plyr__poster { - opacity: 1; - pointer-events: none; + display: block; } diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss index eddd32ab..16992808 100644 --- a/src/sass/components/progress.scss +++ b/src/sass/components/progress.scss @@ -3,7 +3,6 @@ // -------------------------------------------------------------- .plyr__progress { - display: flex; flex: 1; left: $plyr-range-thumb-height / 2; margin-right: $plyr-range-thumb-height; diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index b9264b05..ee64271b 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -19,7 +19,11 @@ &::-webkit-slider-runnable-track { @include plyr-range-track(); - background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); + background-image: linear-gradient( + to right, + currentColor var(--value, 0%), + transparent var(--value, 0%) + ); } &::-webkit-slider-thumb { @@ -140,15 +144,21 @@ // Pressed styles &:active { &::-webkit-slider-thumb { - @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); + @include plyr-range-thumb-active( + $plyr-audio-range-thumb-shadow-color + ); } &::-moz-range-thumb { - @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); + @include plyr-range-thumb-active( + $plyr-audio-range-thumb-shadow-color + ); } &::-ms-thumb { - @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color); + @include plyr-range-thumb-active( + $plyr-audio-range-thumb-shadow-color + ); } } } diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index 7bbf94f5..e6afe046 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -5,7 +5,7 @@ // Nicer focus styles // --------------------------------------- @mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) { - box-shadow: 0 0 0 3px rgba($color, 0.35); + box-shadow: 0 0 0 5px rgba($color, 0.5); outline: 0; } @@ -36,7 +36,6 @@ border: 0; border-radius: 100%; box-shadow: $plyr-range-thumb-shadow; - box-sizing: border-box; height: $plyr-range-thumb-height; position: relative; transition: all 0.2s ease; @@ -44,7 +43,8 @@ } @mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) { - box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color; + box-shadow: $plyr-range-thumb-shadow, + 0 0 0 $plyr-range-thumb-active-shadow-width $color; } // Fullscreen styles diff --git a/src/sass/utils/hidden.scss b/src/sass/utils/hidden.scss index e4fa0aec..a42c3be8 100644 --- a/src/sass/utils/hidden.scss +++ b/src/sass/utils/hidden.scss @@ -22,3 +22,7 @@ width: 1px; } } + +.plyr [hidden] { + display: none !important; +} |