aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/plyr.less
diff options
context:
space:
mode:
Diffstat (limited to 'src/less/plyr.less')
-rw-r--r--src/less/plyr.less26
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,