Special handling for inputs when using Smallipop

Special support for form elements

Special support for form elements

Smallipop will appear when form elements are focused and diff --git a/pages/methods.html b/pages/methods.html index cac53ca..5367793 100644 --- a/pages/methods.html +++ b/pages/methods.html @@ -2,7 +2,9 @@ - + + + diff --git a/pages/options.html b/pages/options.html index 0520d98..3f68ae6 100644 --- a/pages/options.html +++ b/pages/options.html @@ -2,7 +2,9 @@ - + + + @@ -327,25 +329,27 @@

Change content on the fly and use callbacks

Use referenced element as tooltip content

-<a id="tipReferenced" data-smallipop-referenced-content="#tipReferencedTarget" title="Referenced content">
+<a id="tipReferenced" data-smallipop-referenced-content="#tipReferencedTarget > *" title="Referenced content">
     Hover me!
 </a>
 <div id="tipReferencedTarget">
diff --git a/pages/tours.html b/pages/tours.html
index e896ac5..90d4edc 100644
--- a/pages/tours.html
+++ b/pages/tours.html
@@ -2,7 +2,9 @@
 
     
         
-        
+        
+        
+        
         
         
         
diff --git a/smallipop.jquery.json b/smallipop.jquery.json
index 0ba0498..666addb 100644
--- a/smallipop.jquery.json
+++ b/smallipop.jquery.json
@@ -1,6 +1,6 @@
 {
     "name": "smallipop",
-    "version": "0.6.1",
+    "version": "0.6.2",
     "title": "jQuery Smallipop",
     "description": "A versatile jQuery plugin for displaying beautiful tooltips and interactive tours",
     "homepage": "http://projects.sebastianhelzle.net/jquery.smallipop",
diff --git a/src/coffee/jquery.smallipop.coffee b/src/coffee/jquery.smallipop.coffee
index 078e62a..ddd5354 100644
--- a/src/coffee/jquery.smallipop.coffee
+++ b/src/coffee/jquery.smallipop.coffee
@@ -1,5 +1,5 @@
 ###!
-Smallipop (07/12/2013)
+Smallipop (07/14/2013)
 Copyright (c) 2011-2013 Small Improvements (http://www.small-improvements.com)
 
 Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -86,7 +86,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
   popupTemplate = "
"
 
   $.smallipop = sip =
-    version: '0.6.1'
+    version: '0.6.2'
     defaults:
       autoscrollPadding: 200
       contentAnimationSpeed: 150
@@ -232,12 +232,12 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
 
               triggerOptions.onAfterHide?()
 
-  showSmallipop= (e) ->
+  onClickTrigger = (e) ->
     triggerData = $(@).data classBase
     return unless triggerData
 
     if triggerData.popupInstance.data(dataShown) isnt triggerData.id \
-      and not triggerData.type in ['checkbox', 'radio']
+      and not triggerData.type not in ['checkbox', 'radio']
         e?.preventDefault()
 
     triggerMouseover.call @
@@ -734,7 +734,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
     # Handle direct method calls
     if typeof(options) is 'string'
       switch options.toLowerCase()
-        when 'show' then showSmallipop.call @first().get(0)
+        when 'show' then triggerMouseover.call @first().get(0)
         when 'hide' then hideSmallipop @first().get(0)
         when 'destroy' then destroy @
         when 'tour' then runTour @first(), hint
@@ -760,7 +760,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
       # If it's inline markup, create a deep copy of the hint html
       objHint = hint or $self.attr('title')
 
-      $objInfo = $ "> .#{options.infoClass}:first", $self
+      $objInfo = $ ".#{options.infoClass}:first", $self
       if $objInfo.length
         objHint = $objInfo.clone(true, true).removeClass options.infoClass
 
@@ -814,7 +814,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
 
           # Check whether the trigger should activate smallipop by click or hover
           if triggerOptions.triggerOnClick or touchTrigger
-            triggerEvents[eventClick] = showSmallipop
+            triggerEvents[eventClick] = onClickTrigger
           else
             triggerEvents[eventClick] = triggerMouseout
             triggerEvents[eventMouseOver] = triggerMouseover
diff --git a/src/coffee/main.coffee b/src/coffee/main.coffee
index dcf839a..876a08f 100644
--- a/src/coffee/main.coffee
+++ b/src/coffee/main.coffee
@@ -10,7 +10,7 @@ requirejs.config
     piwik: "https://tracking.sebastianhelzle.net/piwik"
 
 # Load modernizr and the demo initialization module
-requirejs ['jquery', 'prettify', 'piwik', 'smallipop'], ($) ->
+requirejs ['jquery', 'prettify', 'smallipop', 'piwik'], ($) ->
   # Floating side menu
   sideMenu = $ '.side-menu'
   sideMenuItems = $ 'a', sideMenu
@@ -110,9 +110,9 @@ requirejs ['jquery', 'prettify', 'piwik', 'smallipop'], ($) ->
 
   $('#tipChangeContent').smallipop
     onAfterShow: (trigger) ->
-      $.smallipop.setContent trigger, "I'm the new content and I have replaced the old boring content!"
+      trigger.smallipop 'update', "I'm the new content and I have replaced the old boring content!"
     onBeforeHide: (trigger) ->
-      $.smallipop.setContent trigger, "Bye bye"
+      trigger.smallipop 'update', "Bye bye"
 
   $('#tipCSSAnimated').smallipop
     cssAnimations:
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index a209102..47453fa 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -6,15 +6,27 @@
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 }
 
-@mixin border-color-top($color) {
-  border-color: $color transparent transparent transparent;
+@mixin border-color($orientation, $color) {
+  @if $orientation == top {
+    border-color: $color transparent transparent transparent;
+  } @else if $orientation == right {
+    border-color: transparent $color transparent transparent;
+  } @else if $orientation == bottom {
+    border-color: transparent transparent $color transparent;
+  } @else if $orientation == left {
+    border-color: transparent transparent transparent $color;
+  }
 }
-@mixin border-color-right($color) {
-  border-color: transparent $color transparent transparent;
-}
-@mixin border-color-bottom($color) {
-  border-color: transparent transparent $color transparent;
-}
-@mixin border-color-left($color) {
-  border-color: transparent transparent transparent $color;
+
+@mixin smallipop-arrow($inner-color, $outer-color) {
+
+  &:before { @include border-color(top, $outer-color); }
+  &:after { @include border-color(top, $inner-color); }
+
+  @each $orientation in bottom, left, right {
+    &.smallipop-#{$orientation} {
+      &:before { @include border-color(#{$orientation}, $outer-color); }
+      &:after { @include border-color(#{$orientation}, $inner-color); }
+    }
+  }
 }
diff --git a/src/scss/_theme_black.scss b/src/scss/_theme_black.scss
index f5ad235..23aa4e7 100644
--- a/src/scss/_theme_black.scss
+++ b/src/scss/_theme_black.scss
@@ -10,27 +10,14 @@ $black-background-color: #222;
   color: #f5f5f5;
   @include box-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
   @include background(linear-gradient(#333333, #222222));
-  @include border-radius(5px);
+  @include border-radius(3px);
 
   a {
     color: #eef8ff;
     text-shadow: 0 -1px 1px #111;
   }
-  &:before { @include border-color-top($black-arrow-color); }
-  &:after { @include border-color-top($black-arrow-border-color); }
 
-  &.smallipop-bottom {
-    &:before { @include border-color-bottom($black-arrow-color); }
-    &:after { @include border-color-bottom($black-arrow-border-color); }
-  }
-  &.smallipop-left {
-    &:before { @include border-color-left($black-arrow-color); }
-    &:after { @include border-color-left($black-arrow-border-color); }
-  }
-  &.smallipop-right {
-    &:before { @include border-color-right($black-arrow-color); }
-    &:after { @include border-color-right($black-arrow-border-color); }
-  }
+  @include smallipop-arrow($black-arrow-color, $black-arrow-border-color);
 
   .smallipop-content {
     border-top: 1px solid #666;
diff --git a/src/scss/_theme_blue.scss b/src/scss/_theme_blue.scss
index 3acae14..e3b0bc3 100644
--- a/src/scss/_theme_blue.scss
+++ b/src/scss/_theme_blue.scss
@@ -8,33 +8,27 @@ $blue-background-color: #fcfcfc;
   color: #111;
   border: 10px solid $blue-arrow-border-color;
   @include box-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
-  @include border-radius(7px);
+  @include border-radius(3px);
 
   a {
     color: #2276aa;
   }
 
-  &:after {
-    bottom: -34px;
-    @include border-color-top($blue-arrow-border-color);
-  }
   &:before {
-    display: none;
+    bottom: -30px;
   }
-
-  &.smallipop-bottom:after {
-    top: -34px;
-    @include border-color-bottom($blue-arrow-border-color);
+  &.smallipop-bottom:before {
+    top: -30px;
   }
-  &.smallipop-left {
-    right: -26px;
-    &:after { @include border-color-left($blue-arrow-border-color); }
+  &.smallipop-left:before {
+    right: -22px;
   }
-  &.smallipop-right {
-    left: -26px;
-    &:after { @include border-color-right($blue-arrow-border-color); }
+  &.smallipop-right:before {
+    left: -22px;
   }
 
+  @include smallipop-arrow(transparent, $blue-arrow-border-color);
+
   .smallipop-content {
     border: 0;
     background: $blue-background-color;
diff --git a/src/scss/_theme_default.scss b/src/scss/_theme_default.scss
index ef68c1e..b160e3a 100644
--- a/src/scss/_theme_default.scss
+++ b/src/scss/_theme_default.scss
@@ -6,8 +6,7 @@ $default-arrow-border-color: $base-color;
   text-shadow: $default-text-shadow;
   @include box-shadow($default-box-shadow);
   @include border-radius($default-border-radius);
-  @include background(linear-gradient(rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9))); /* Fallback for opera */
-  @include background(radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px));
+  @include background(linear-gradient(rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)));
 
   a {
     text-shadow: $default-link-text-shadow;
@@ -18,22 +17,7 @@ $default-arrow-border-color: $base-color;
     @include border-radius($default-border-radius);
   }
 
-  &:before { @include border-color-top($default-arrow-color); }
-  &:after { @include border-color-top($default-arrow-border-color); }
-
-  &.smallipop-bottom {
-    &:before { @include border-color-bottom($default-arrow-color); }
-    &:after { @include border-color-bottom($default-arrow-border-color); }
-  }
-
-  &.smallipop-left {
-    &:before { @include border-color-left($default-arrow-color); }
-    &:after { @include border-color-left($default-arrow-border-color); }
-  }
-  &.smallipop-right {
-    &:before { @include border-color-right($default-arrow-color); }
-    &:after { @include border-color-right($default-arrow-border-color); }
-  }
+  @include smallipop-arrow($default-arrow-color, $default-arrow-border-color);
 }
 .cssgradients.rgba .smallipop-theme-default {
   background-color: transparent;
diff --git a/src/scss/_theme_orange.scss b/src/scss/_theme_orange.scss
index 1562258..3b855a2 100644
--- a/src/scss/_theme_orange.scss
+++ b/src/scss/_theme_orange.scss
@@ -10,28 +10,14 @@ $orange-background-color: #f9aa18;
   color: #714900;
   @include background(linear-gradient(#fff24d, #f9aa18));
   @include box-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
-  @include border-radius(10px);
+  @include border-radius(8px);
 
   a {
     color: #145d95;
     text-shadow:0 1px 1px #fff24d;
   }
 
-  &:before { @include border-color-top($orange-arrow-color); }
-  &:after { @include border-color-top($orange-arrow-border-color); }
-
-  &.smallipop-bottom {
-    &:before { @include border-color-bottom($orange-arrow-color); }
-    &:after { @include border-color-bottom($orange-arrow-border-color); }
-  }
-  &.smallipop-left {
-    &:before { @include border-color-left($orange-arrow-color); }
-    &:after { @include border-color-left($orange-arrow-border-color); }
-  }
-  &.smallipop-right {
-    &:before { @include border-color-right($orange-arrow-color); }
-    &:after { @include border-color-right($orange-arrow-border-color); }
-  }
+  @include smallipop-arrow($orange-arrow-color, $orange-arrow-border-color);
 
   .smallipop-content {
     border-top:1px solid #fffabc;
diff --git a/src/scss/_theme_white.scss b/src/scss/_theme_white.scss
index 280311e..f670c0b 100644
--- a/src/scss/_theme_white.scss
+++ b/src/scss/_theme_white.scss
@@ -1,33 +1,19 @@
 /* white theme */
 $white-arrow-color: #fcfcfc;
-$white-arrow-border-color: #ccc;
+$white-arrow-border-color: #777;
 $white-background-color: #fcfcfc;
+$white-transparent-border-color: rgba(255, 255, 255, 0.8);
 
 .smallipop-theme-white {
   background-color: $white-background-color;
-  border-color:#ccc;
-  text-shadow:0 1px 1px #eee;
-  color:#444;
-  width:200px;
-  max-width:200px;
+  border-color: $white-arrow-border-color;
+  color: #444;
+  width: 200px;
+  max-width: 200px;
   @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
-  @include border-radius(6px);
+  @include border-radius(3px);
 
-  &:before { @include border-color-top($white-arrow-color); }
-  &:after { @include border-color-top($white-arrow-border-color); }
-
-  &.smallipop-bottom {
-    &:before { @include border-color-bottom($white-arrow-color); }
-    &:after { @include border-color-bottom($white-arrow-border-color); }
-  }
-  &.smallipop-left {
-    &:before { @include border-color-left($white-arrow-color); }
-    &:after { @include border-color-left($white-arrow-border-color); }
-  }
-  &.smallipop-right {
-    &:before { @include border-color-right($white-arrow-color); }
-    &:after { @include border-color-right($white-arrow-border-color); }
-  }
+  @include smallipop-arrow($white-arrow-color, $white-arrow-border-color);
 
   .smallipop-content {
     text-align:center;
@@ -62,24 +48,8 @@ $white-background-color: #fcfcfc;
 
 /* white theme extended, requires rgba support */
 .smallipop-theme-white-transparent {
-  background-color: rgba(255, 255, 255, 0.8);
-
-  &:before {
-    bottom: -21px;
-    border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
-  }
-  &:after {
-    border-color: transparent;
-  }
+  background-color: $white-transparent-border-color;
+  border: 0;
 
-  &.sipAlignBottom:before {
-    top: -21px;
-    border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent;
-  }
-  &.sipPositionedLeft:before {
-    border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
-  }
-  &.sipPositionedRight:before {
-    border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent;
-  }
+  @include smallipop-arrow($white-transparent-border-color, transparent);
 }
diff --git a/src/scss/jquery.smallipop.scss b/src/scss/jquery.smallipop.scss
index a7650bc..8daef54 100644
--- a/src/scss/jquery.smallipop.scss
+++ b/src/scss/jquery.smallipop.scss
@@ -4,7 +4,7 @@
 $base-color: #0f161e;
 $default-background-color: #314b64;
 $default-border: 1px solid $base-color;
-$default-border-radius: 12px;
+$default-border-radius: 3px;
 $default-box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
 $default-color: #d2dfe7;
 $default-text-shadow: 0 -1px 1px $base-color;
@@ -41,9 +41,9 @@ $fat-shadow: 0 2px 20px rgba(0, 0, 0, .8);
   color: $default-color;
   z-index: 9999;
   max-width: $max-width;
-  font {
-    size: 11px;
-    family: arial;
+  font: {
+    size: 12px;
+    family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
   }
 
   a {
@@ -59,29 +59,27 @@ $fat-shadow: 0 2px 20px rgba(0, 0, 0, .8);
     pointer-events: none;
   }
   &:before {
-    bottom: -20px;
+    bottom: -21px;
     margin-left: -10px;
     border: 10px solid transparent;
   }
   &:after {
-    bottom: -24px;
-    margin-left: -12px;
-    border: 12px solid transparent;
+    bottom: -20px;
+    margin-left: -10px;
+    border: 10px solid transparent;
   }
 }
 
 .smallipop-align-left {
   &:before, &:after { margin-left:0; left:auto; right:20px; }
-  &:after { right:18px; }
 }
 .smallipop-align-right {
   &:before, &:after { margin-left:0; left:20px; right:auto; }
-  &:after { left:18px; }
 }
 
 .smallipop-bottom {
   &:before, &:after { bottom:auto; top:-20px; }
-  &:after { top:-24px; }
+  &:before { top:-21px; }
 }
 .smallipop-left,
 .smallipop-right {
@@ -94,7 +92,7 @@ $fat-shadow: 0 2px 20px rgba(0, 0, 0, .8);
     border-width: 8px;
     margin: -8px 0 0;
   }
-  &:after {
+  &:before {
     right: -20px;
     border-width: 10px;
     margin: -10px 0 0;
@@ -107,7 +105,7 @@ $fat-shadow: 0 2px 20px rgba(0, 0, 0, .8);
     left: -16px;
     right: auto;
   }
-  &:after {
+  &:before {
     left: -20px;
   }
 }
diff --git a/src/scss/screen.scss b/src/scss/screen.scss
index 8899dba..f3fa8db 100644
--- a/src/scss/screen.scss
+++ b/src/scss/screen.scss
@@ -10,7 +10,7 @@ html {
 
 body {
   height: 100%;
-  font-family: arial;
+  font-family: "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
   font-size: 1em;
   line-height: 1.3em;
   padding: 30px 0;
@@ -119,15 +119,16 @@ img.inline { margin: 10px; }
   background-color: #ffe199;
   font-size: 1.1em;
   text-shadow:0 1px 1px #fff24d;
-  @include border-radius(6px);
+  @include border-radius(3px);
   @include box-shadow(0 1px 4px rgba(255, 162, 0, 0.3));
+  @include background(linear-gradient(#fff24d, #f9aa18));
 
   &.white,
   &.black,
   &.blue,
   &.green,
   &.default {
-    @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
+    @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
   }
 
   &.big {
@@ -140,30 +141,38 @@ img.inline { margin: 10px; }
     background-color: #fff4d9;
     border-color: #ffd777;
     text-decoration: none;
+    @include background(linear-gradient(#fff24d, #fdc661));
   }
 
   &.white {
     background-color: #fff;
     border-color: #ddd;
     text-shadow:none;
+    @include background(linear-gradient(#ffffff, #fafafa));
   }
   &.green {
     background-color: #2ea41e;
     border-color: #239714;
     color: #fafafa;
     text-shadow: 0 1px 1px #196d0e;
+    @include background(linear-gradient(#35b125, #29a219));
+    &:hover {
+      @include background(linear-gradient(#40bb30, #31aa21));
+    }
   }
   &.black {
     background-color: #333;
     color: #eee;
     border-color: #000;
     text-shadow:none;
+    @include background(linear-gradient(#444444, #111111));
   }
   &.blue {
     background-color: #0064b4;
     color: #eee;
     border-color: #0064b4;
     text-shadow:none;
+    @include background(linear-gradient(#1279cb, #0064b4));
   }
   &.orange {
     background-color: #fbb913;
@@ -174,32 +183,6 @@ img.inline { margin: 10px; }
     color: #eee;
     border-color: #314b64;
     text-shadow:none;
-  }
-}
-.cssgradients .sampleElement {
-  @include background(linear-gradient(#fff24d, #f9aa18));
-
-  &:hover {
-    @include background(linear-gradient(#fff24d, #fdc661));
-  }
-
-  &.white {
-    @include background(linear-gradient(#ffffff, #fafafa));
-  }
-  &.green {
-    @include background(linear-gradient(#35b125, #29a219));
-    &:hover {
-      @include background(linear-gradient(#40bb30, #31aa21));
-    }
-  }
-  &.black {
-    @include background(linear-gradient(#444444, #111111));
-  }
-  &.blue {
-    @include background(linear-gradient(#1279cb, #0064b4));
-    color: #eee;
-  }
-  &.default {
     @include background(linear-gradient(#4f6c88, #314b64));
   }
 }
@@ -249,12 +232,13 @@ img.inline { margin: 10px; }
   width: 21px; height: 21px;
   font-size: 26px;
   font-weight: bold;
-  line-height: 21px;
+  line-height: 18px;
   text-align: center;
   color: #6fc048;
   background-color: #fff;
   opacity: 0.95;
   @include border-radius(2px);
+  @include background(linear-gradient(#ffffff, #fafafa));
 
   .indicatorPlus {
     width: 14px;
@@ -262,9 +246,6 @@ img.inline { margin: 10px; }
     overflow:hidden;
   }
 }
-.cssgradients .indicator {
-  @include background(linear-gradient(#ffffff, #fafafa));
-}
 
 .smallipopArrow {
   width: 25px;
@@ -330,38 +311,42 @@ img.inline { margin: 10px; }
 
 /* pulser */
 .pulser {
-  height:12px; width:12px;
-  position:absolute;
+  height: 12px;
+  width: 12px;
+  position: absolute;
 
   &,
   .outer,
   .inner { @include border-radius(30px); }
-}
-.pulser .inner {
-  height:16px; width:16px;
-  position:absolute;
-  left:0px; top:0px;
-  background:#fcfcfc;
-  color:#1ec016;
-  text-shadow:0 -1px 1px #ccc;
-  font-size:16px;
-  line-height:16px;
-  font-weight:bold;
-  text-align:center;
-}
-.cssgradients .pulser .inner {
-  @include background(linear-gradient(#fafafa, #dddddd));
-}
-.cssanimations .pulser .outer {
-  height: 12px; width: 12px;
-  position: absolute;
-  left:0; top:0;
-  border: 2px solid #50b6f4;
-  -webkit-animation: pulsate 1.2s ease-out;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation: pulsate 1.2s ease-out;
-  -moz-animation-iteration-count: infinite;
-  opacity: 0.0;
+
+  .inner {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    background: #fcfcfc;
+    color: #1ec016;
+    text-shadow: 0 -1px 1px #ccc;
+    font-size: 16px;
+    line-height: 14px;
+    font-weight: bold;
+    text-align: center;
+    @include background(linear-gradient(#fafafa, #dddddd));
+  }
+  .outer {
+    height: 12px;
+    width: 12px;
+    position: absolute;
+    left:0;
+    top:0;
+    border: 2px solid #50b6f4;
+    -webkit-animation: pulsate 1.2s ease-out;
+    -webkit-animation-iteration-count: infinite;
+    -moz-animation: pulsate 1.2s ease-out;
+    -moz-animation-iteration-count: infinite;
+    opacity: 0.0;
+  }
 }
 @-webkit-keyframes pulsate {
   0% {-webkit-transform: scale(1, 1); opacity: 0.0;}
@@ -387,7 +372,6 @@ img.inline { margin: 10px; }
   border: 1px solid #ccc;
   padding: 10px;
   background: #fafafa;
-
   @include box-shadow(0 1px 3px 1px rgba(0, 0, 0, 0.2));
 }