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

Tooltip tweak

Browse Source
This commit is contained in:
Sam Potts
2015-07-25 21:35:12 +10:00
parent 06ed345f29
commit 5d19b43888
3 changed files with 8 additions and 14 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

11
src/less/plyr.less
View File

@ -28,6 +28,7 @@
// Tooltips // Tooltips
@tooltip-bg: @controls-bg; @tooltip-bg: @controls-bg;
@tooltip-border-color: @off-white;
@tooltip-color: @control-color; @tooltip-color: @control-color;
@tooltip-padding: @control-spacing; @tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px; @tooltip-arrow-size: 5px;
@ -316,8 +317,6 @@
// Tooltips // Tooltips
&-tooltip { &-tooltip {
@border-base: darken(@tooltip-bg, 8%);
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
@ -327,7 +326,7 @@
opacity: 0; opacity: 0;
background: @tooltip-bg; background: @tooltip-bg;
border: 1px solid @border-base; border: 1px solid @tooltip-border-color;
border-radius: @tooltip-radius; border-radius: @tooltip-radius;
color: @tooltip-color; color: @tooltip-color;
font-size: @font-size-small; font-size: @font-size-small;
@ -349,10 +348,8 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
background: @tooltip-bg; background: @tooltip-bg;
transform: translate(-50%, -50%) rotate(45deg) translateY(2px); transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
border: 1px solid @tooltip-border-color;
@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; border-width: 0 1px 1px 0;
} }
} }

9
src/sass/plyr.scss
View File

@ -28,6 +28,7 @@ $control-bg-hover: @blue !default;
// Tooltips // Tooltips
$tooltip-bg: $controls-bg !default; $tooltip-bg: $controls-bg !default;
$tooltip-border-color: $off-white !default;
$tooltip-color: $control-color !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;
@ -314,8 +315,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Tooltips // Tooltips
&-tooltip { &-tooltip {
$border-base: darken($tooltip-bg, 8%);
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
@ -325,7 +324,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
opacity: 0; opacity: 0;
background: $tooltip-bg; background: $tooltip-bg;
border: 1px solid $border-base; border: 1px solid $tooltip-border-color;
border-radius: $tooltip-radius; border-radius: $tooltip-radius;
color: $tooltip-color; color: $tooltip-color;
font-size: $font-size-small; font-size: $font-size-small;
@ -348,9 +347,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
height: 10px; height: 10px;
background: $tooltip-bg; background: $tooltip-bg;
transform: translate(-50%, -50%) rotate(45deg) translateY(2px); transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
border: 1px solid $tooltip-border-color;
$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; border-width: 0 1px 1px 0;
} }
} }