diff options
Diffstat (limited to 'src/less')
| -rw-r--r-- | src/less/plyr.less | 43 | ||||
| -rw-r--r-- | src/less/variables.less | 10 |
2 files changed, 45 insertions, 8 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 16f82453..d60c281f 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -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; & when (@plyr-border-box = true) { // border-box everything @@ -177,7 +178,6 @@ padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; - border-radius: inherit; iframe { position: absolute; @@ -251,6 +251,7 @@ .plyr ::-webkit-media-controls-enclosure { display: none; } + // Playback controls .plyr__controls { display: flex; @@ -285,7 +286,7 @@ flex-shrink: 0; overflow: visible; // IE11 vertical-align: middle; - padding: (@plyr-control-spacing * .7); + padding: @plyr-control-padding; border: 0; background: transparent; border-radius: 3px; @@ -294,8 +295,8 @@ color: inherit; svg { - width: 18px; - height: 18px; + width: @plyr-control-icon-size; + height: @plyr-control-icon-size; display: block; fill: currentColor; } @@ -485,6 +486,40 @@ 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 diff --git a/src/less/variables.less b/src/less/variables.less index 0b2d0895..5798d496 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -16,14 +16,16 @@ @plyr-font-size-base: 16px; // Captions -@plyr-captions-bg: fade(#000, 70%); -@plyr-captions-color: #fff; +@plyr-captions-bg: fade(#000, 70%); +@plyr-captions-color: #fff; @plyr-font-size-captions-base: @plyr-font-size-base; @plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); @plyr-font-size-captions-large: (@plyr-font-size-base * 2); // Controls +@plyr-control-icon-size: 18px; @plyr-control-spacing: 10px; +@plyr-control-padding: (@plyr-control-spacing * .7); @plyr-video-controls-bg: #000; @plyr-video-control-color: #fff; @plyr-video-control-color-hover: #fff; @@ -37,7 +39,7 @@ // Tooltips @plyr-tooltip-bg: fade(#000, 70%); -@plyr-tooltip-color: #fff; +@plyr-tooltip-color: #fff; @plyr-tooltip-padding: (@plyr-control-spacing / 2); @plyr-tooltip-arrow-size: 4px; @plyr-tooltip-radius: 3px; @@ -62,7 +64,7 @@ @plyr-range-thumb-active-scale: 1.25; @plyr-video-range-track-bg: @plyr-video-progress-buffered-bg; @plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg; -@plyr-range-selected-bg: @plyr-color-main; +@plyr-range-selected-bg: @plyr-color-main; // Breakpoints @plyr-bp-screen-sm: 480px; |