diff options
Diffstat (limited to 'src/less/components/tooltips.less')
| -rw-r--r-- | src/less/components/tooltips.less | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less new file mode 100644 index 00000000..6a3b0488 --- /dev/null +++ b/src/less/components/tooltips.less @@ -0,0 +1,51 @@ +// Tooltips +// -------------------------------------------------------------- + +.plyr__tooltip { + position: absolute; + z-index: 2; + bottom: 100%; + margin-bottom: (@plyr-tooltip-padding * 2); + padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5); + pointer-events: none; + + opacity: 0; + background: @plyr-tooltip-bg; + box-shadow: @plyr-tooltip-shadow; + border-radius: @plyr-tooltip-radius; + + color: @plyr-tooltip-color; + font-size: @plyr-font-size-small; + line-height: 1.3; + + transform: translate(-50%, 10px) scale(.8); + transform-origin: 50% 100%; + transition: transform .2s .1s ease, opacity .2s .1s ease; + + // Arrows + &::before { + content: ''; + position: absolute; + width: 0; + height: 0; + left: 50%; + transform: translateX(-50%); + } + // The background triangle + &::before { + bottom: -@plyr-tooltip-arrow-size; + border-right: @plyr-tooltip-arrow-size solid transparent; + border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg; + border-left: @plyr-tooltip-arrow-size solid transparent; + z-index: 2; + } +} +.plyr button:hover .plyr__tooltip, +.plyr button.tab-focus:focus .plyr__tooltip, +.plyr__tooltip--visible { + opacity: 1; + transform: translate(-50%, 0) scale(1); +} +.plyr button:hover .plyr__tooltip { + z-index: 3; +}
\ No newline at end of file |