diff options
Diffstat (limited to 'src/less/plyr.less')
| -rw-r--r-- | src/less/plyr.less | 26 |
1 files changed, 16 insertions, 10 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index 69f490e1..08a9178d 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -316,6 +316,8 @@ // Tooltips &-tooltip { + @border-base: darken(@tooltip-bg, 8%); + visibility: hidden; position: absolute; z-index: 2; @@ -325,6 +327,7 @@ opacity: 0; background: @tooltip-bg; + border: 1px solid @border-base; border-radius: @tooltip-radius; color: @tooltip-color; font-size: @font-size-small; @@ -334,20 +337,23 @@ transform: translate(-50%, (@tooltip-padding * 3)) scale(0); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - + + // Arrow &::after { content: ""; - display: block; position: absolute; + z-index: 1; + top: 100%; left: 50%; - bottom: -@tooltip-arrow-size; - margin-left: -@tooltip-arrow-size; - width: 0; - height: 0; - transition: inherit; - border-style: solid; - border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size; - border-color: @controls-bg transparent transparent; + display: block; + width: 10px; + height: 10px; + background: @tooltip-bg; + transform: translate(-50%, -50%) rotate(45deg) translateY(2px); + + @arrow-border-color: darken(@border-base, 5%); + border: 1px solid rgba(red(@arrow-border-color), green(@arrow-border-color), blue(@arrow-border-color), .8); + border-width: 0 1px 1px 0; } } label:hover .player-tooltip, |