diff options
Diffstat (limited to 'src/scss')
| -rw-r--r-- | src/scss/plyr.scss | 39 | ||||
| -rw-r--r-- | src/scss/variables.scss | 8 |
2 files changed, 44 insertions, 3 deletions
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index c5e0bfaa..d886919f 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -245,6 +245,11 @@ // Controls // -------------------------------------------------------------- +// Hide native controls +.plyr ::-webkit-media-controls { + display: none; +} + // Playback controls .plyr__controls { display: flex; @@ -479,6 +484,40 @@ z-index: 3; } +// First tooltip +.plyr__controls button:first-child .plyr__tooltip { + $tooltip-arrow-offset: ; + 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/scss/variables.scss b/src/scss/variables.scss index 5aa0d629..5e0a16b3 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -17,14 +17,16 @@ $plyr-font-size-small: 14px !default; $plyr-font-size-base: 16px !default; // Captions -$plyr-captions-bg: transparentize(#000, .3) !default; -$plyr-captions-color: #fff !default; +$plyr-captions-bg: transparentize(#000, .3) !default; +$plyr-captions-color: #fff !default; $plyr-font-size-captions-base: $plyr-font-size-base !default; $plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default; $plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default; // Controls +$plyr-control-icon-size: 18px !default; $plyr-control-spacing: 10px !default; +$plyr-control-padding: ($plyr-control-spacing * .7) !default; $plyr-video-controls-bg: #000 !default; $plyr-video-control-color: #fff !default; $plyr-video-control-color-hover: #fff !default; @@ -63,7 +65,7 @@ $plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default; $plyr-range-thumb-active-scale: 1.25 !default; $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; $plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default; -$plyr-range-selected-bg: $plyr-color-main !default; +$plyr-range-selected-bg: $plyr-color-main !default; // Breakpoints $plyr-bp-screen-sm: 480px !default; |