ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tooltip fix (Fixes #97)

Browse Source
This commit is contained in:
Sam Potts
2015-07-21 08:51:14 +10:00
parent 4695bbf483
commit 5a414572f9
5 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.2.0", "version": "1.2.1",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

2
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.2.0 // plyr.js v1.2.1
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================

9
src/less/plyr.less
View File

@ -28,7 +28,7 @@
// Tooltips // Tooltips
@tooltip-bg: @controls-bg; @tooltip-bg: @controls-bg;
@tooltip-color: #fff; @tooltip-color: @control-color;
@tooltip-padding: @control-spacing; @tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px; @tooltip-arrow-size: 5px;
@tooltip-radius: 3px; @tooltip-radius: 3px;
@ -331,8 +331,9 @@
line-height: 1.5; line-height: 1.5;
font-weight: 600; font-weight: 600;
transform: translate(-50%, (@tooltip-padding * 3)); transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
transition: transform .2s .2s ease, opacity .2s .2s ease; transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
&::after { &::after {
content: ""; content: "";
@ -355,7 +356,7 @@
button:focus .player-tooltip { button:focus .player-tooltip {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translate(-50%, 0); transform: translate(-50%, 0) scale(1);
} }
label:hover .player-tooltip, label:hover .player-tooltip,
button:hover .player-tooltip { button:hover .player-tooltip {

9
src/sass/plyr.scss
View File

@ -28,7 +28,7 @@ $control-bg-hover: @blue !default;
// Tooltips // Tooltips
$tooltip-bg: $controls-bg !default; $tooltip-bg: $controls-bg !default;
$tooltip-color: #fff !default; $tooltip-color: $control-color !default;
$tooltip-padding: $control-spacing !default; $tooltip-padding: $control-spacing !default;
$tooltip-arrow-size: 5px !default; $tooltip-arrow-size: 5px !default;
$tooltip-radius: 3px !default; $tooltip-radius: 3px !default;
@ -329,8 +329,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
line-height: 1.5; line-height: 1.5;
font-weight: 600; font-weight: 600;
transform: translate(-50%, ($tooltip-padding * 3)); transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
transition: transform .2s .2s ease, opacity .2s .2s ease; transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
&::after { &::after {
content: ""; content: "";
@ -353,7 +354,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
button:focus .player-tooltip { button:focus .player-tooltip {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translate(-50%, 0); transform: translate(-50%, 0) scale(1);
} }
label:hover .player-tooltip, label:hover .player-tooltip,
button:hover .player-tooltip { button:hover .player-tooltip {