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);
 }
 
-.share-popup-glass-pane
+#glass-pane
 {
   position: absolute;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
-  width: 100%;
-  height: 100%;

[Wladimir Palant, 2012/10/25 07:12:00]

I think that percentage width/height are a bit problematic in HTML, they depend
on the parent element. Maybe replace by bottom: 0 and right: 0?

   background: rgba(0, 0, 0, 0.5);
-  display: none;
+
+  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
+#share-popup
 {
-  width: 550px;
-  height: 550px;

[Wladimir Palant, 2012/10/25 07:12:00]

A hardcoded size? Is it guaranteed to match pop-up contents?

[Felix Dahlke, 2012/10/25 09:58:28]

Too bad, seems like I can't use iframe.contentDocument in Chrome unless the
frame content is loaded from the same domain as the page it is included on.
Loading it from a local file doesn't seem to work either. So it would only work
if we put the first run page on our server.

   border: none;
-  display: none;
+}
+
+#glass-pane, #share-popup
+{
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition-property: opacity, visibility;
+  transition-property: opacity, visibility;
+}
+
+#glass-pane
+{
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+#share-popup
+{
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+}
+
+#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;
   }
 }