aboutsummaryrefslogtreecommitdiffstats
path: root/src/sass/plyr.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/sass/plyr.scss')
-rw-r--r--src/sass/plyr.scss28
1 files changed, 17 insertions, 11 deletions
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index eeda4f4c..95a444a2 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -314,6 +314,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Tooltips
&-tooltip {
+ $border-base: darken($tooltip-bg, 8%);
+
visibility: hidden;
position: absolute;
z-index: 2;
@@ -323,6 +325,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
opacity: 0;
background: $tooltip-bg;
+ border: 1px solid $border-base;
border-radius: $tooltip-radius;
color: $tooltip-color;
font-size: $font-size-small;
@@ -333,25 +336,28 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
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,
- input:focus + label .player-tooltip,
+ input.tab-focus:focus + label .player-tooltip,
button:hover .player-tooltip,
- button:focus .player-tooltip {
+ button.tab-focus:focus .player-tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0) scale(1);