diff options
| author | Sam Potts <me@sampotts.me> | 2015-07-25 21:35:12 +1000 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2015-07-25 21:35:12 +1000 |
| commit | 5d19b438884dcb0dd203d6dccc146ca889657b3b (patch) | |
| tree | 38e9706f56abe1515411e168ace609053fa99e76 /src | |
| parent | 06ed345f293aaf273e96b9f67cc25b07db43db4f (diff) | |
| download | plyr-5d19b438884dcb0dd203d6dccc146ca889657b3b.tar.lz plyr-5d19b438884dcb0dd203d6dccc146ca889657b3b.tar.xz plyr-5d19b438884dcb0dd203d6dccc146ca889657b3b.zip | |
Tooltip tweak
Diffstat (limited to 'src')
| -rw-r--r-- | src/less/plyr.less | 11 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 9 |
2 files changed, 7 insertions, 13 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less index bf4e5cc0..60ab3f28 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -28,6 +28,7 @@ // Tooltips @tooltip-bg: @controls-bg; +@tooltip-border-color: @off-white; @tooltip-color: @control-color; @tooltip-padding: @control-spacing; @tooltip-arrow-size: 5px; @@ -316,8 +317,6 @@ // Tooltips &-tooltip { - @border-base: darken(@tooltip-bg, 8%); - visibility: hidden; position: absolute; z-index: 2; @@ -327,7 +326,7 @@ opacity: 0; background: @tooltip-bg; - border: 1px solid @border-base; + border: 1px solid @tooltip-border-color; border-radius: @tooltip-radius; color: @tooltip-color; font-size: @font-size-small; @@ -349,10 +348,8 @@ 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); + transform: translate(-50%, -50%) rotate(45deg) translateY(1px); + border: 1px solid @tooltip-border-color; border-width: 0 1px 1px 0; } } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 7b7c1f93..b0107459 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -28,6 +28,7 @@ $control-bg-hover: @blue !default; // Tooltips $tooltip-bg: $controls-bg !default; +$tooltip-border-color: $off-white !default; $tooltip-color: $control-color !default; $tooltip-padding: $control-spacing !default; $tooltip-arrow-size: 5px !default; @@ -314,8 +315,6 @@ $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; @@ -325,7 +324,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo opacity: 0; background: $tooltip-bg; - border: 1px solid $border-base; + border: 1px solid $tooltip-border-color; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; @@ -348,9 +347,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo 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: 1px solid $tooltip-border-color; border-width: 0 1px 1px 0; } } |