1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
// --------------------------------------------------------------
// 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;
border-radius: @plyr-tooltip-radius;
box-shadow: @plyr-tooltip-shadow;
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
font-weight: @plyr-font-weight-normal;
line-height: 1.3;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
&::before {
// Arrows
content: '';
position: absolute;
width: 0;
height: 0;
left: 50%;
transform: translateX(-50%);
// The background triangle
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;
}
}
// Displaying
.plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.plyr .plyr__control:hover .plyr__tooltip {
z-index: 3;
}
// First tooltip
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
&::before {
left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
}
}
// Last tooltip
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
right: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
&::before {
left: auto;
right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
transform: translateX(50%);
}
}
.plyr__controls > .plyr__control:first-child,
.plyr__controls > .plyr__control:first-child + .plyr__control,
.plyr__controls > .plyr__control:last-child {
&:hover .plyr__tooltip,
&.tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
transform: translate(0, 0) scale(1);
}
}
|
