diff options
Diffstat (limited to 'src/scss/plyr.scss')
| -rw-r--r-- | src/scss/plyr.scss | 39 |
1 files changed, 37 insertions, 2 deletions
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 812f7cef..5abe18c0 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -20,6 +20,7 @@ max-width: 100%; min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + direction: ltr; @if $plyr-border-box == true { // border-box everything @@ -250,6 +251,7 @@ .plyr ::-webkit-media-controls-enclosure { display: none; } + // Playback controls .plyr__controls { display: flex; @@ -293,8 +295,8 @@ color: inherit; svg { - width: 18px; - height: 18px; + width: $plyr-control-icon-size; + height: $plyr-control-icon-size; display: block; fill: currentColor; } @@ -484,6 +486,39 @@ z-index: 3; } +// First tooltip +.plyr__controls button:first-child .plyr__tooltip { + left: 0; + transform: translate(0, 10px) scale(.8); + transform-origin: 0 100%; + + &::before { + left: ($plyr-control-icon-size / 2) + $plyr-control-padding; + } +} + +// Last tooltip +.plyr__controls button:last-child .plyr__tooltip { + right: 0; + transform: translate(0, 10px) scale(.8); + transform-origin: 100% 100%; + + &::before { + left: auto; + right: ($plyr-control-icon-size / 2) + $plyr-control-padding; + transform: translateX(50%); + } +} + +.plyr__controls button:first-child, +.plyr__controls button:last-child { + &:hover .plyr__tooltip, + &.tab-focus:focus .plyr__tooltip, + .plyr__tooltip--visible { + transform: translate(0, 0) scale(1); + } +} + // Playback progress // -------------------------------------------------------------- // <progress> element |