adblockpluschrome: Open share page in lightbox

skin/firstRun.css

 body
 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   background: repeating-linear-gradient(0deg, #F8F6F5, #F6F4F2 50%, #FCFBF9);
   background: -webkit-repeating-linear-gradient(0deg, #F5F4F3, #FAF9F8 50%, #F5F4F3);
   background-size: 5px 5px;
   max-width: 800px;
   margin: auto;
   line-height: 1.5;
@@ skipping 96 matching lines @@
 .share-facebook
 {
   background-image: url(/skin/facebook.png);
 }
 
 .share-twitter
 {
   background-image: url(/skin/twitter.png);
 }
 
+#glass-pane
+{
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.5);
+
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+
+  display: box;
+  box-orient: horizontal;
+  box-pack: center;
+  box-align: center;
+}
+
+#share-popup
+{
+  width: 550px;
+  height: 550px;
+  border: none;
+}
+
+#glass-pane, #share-popup
+{
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition-property: opacity, visibility;
+  transition-property: opactiy, visibility;

[Wladimir Palant, 2012/10/25 10:45:03]

opactiy => opacity?

[Felix Dahlke, 2012/10/25 12:00:51]

Yes, ouch.

+}
+
+#glass-pane
+{
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;

[Wladimir Palant, 2012/10/25 10:45:03]

Maybe merge this with the #glass-pane rules above?

[Felix Dahlke, 2012/10/25 12:00:51]

This is actually what I came up with fine tuning the animation. I think it's
worth keeping, feels a little better.

+}
+
+#share-popup
+{
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+}

[Wladimir Palant, 2012/10/25 10:45:03]

Maybe merge this with the #share-popup rules above?

[Felix Dahlke, 2012/10/25 12:00:51]

Same as above.

+
+#glass-pane.visible, #share-popup.visible
+{
+  visibility: visible;
+  opacity: 1;
+}
+
+#share-popup.visible
+{
+  -webkit-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+}
+
 /* Adjust font size on smaller screens */
 @media (max-height: 800px)
 {
   body
   {
     font-size: 19px;
   }
 }
 
 @media (max-height: 750px)
 {
   body
   {
     font-size: 17px;
   }
 }
 
 @media (max-height: 700px)
 {
   body
   {
     font-size: 16px;
   }
 }