.post.fade opacity causes two issues in Firefox (and at least one in all other browsers)

[GoogleCodeExporter]

Hi,

I've noticed two rather ugly issues with faded (entered) posts in the grid mode.
1. Everything is opaque, so it's really hard to read.
2. On-hover description falls under the image of item right below current one.

Second issue could be specific to the Firefox (I haven't tested in other 
browsers) but the first one is generic and affects everyone.

So, I decided to fix it and here is my style from Stylish:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain('steamgifts.com') {
    .post.fade {
        opacity:1 !important;
    }
    .post.fade img  {
        opacity:0.3 !important;
    }
    .post.fade .sgpTileViewTimeleft {
        opacity:0.6 !important;
    }
    .post.fade .right,
    .post.fade .sgpTileViewInfoRelative {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6vwkAArkBtLy5dTEAAAAASUVORK5CYII=) !important;
        border: 1px solid rgb(228, 228, 228) !important;
    }
}

The point here is to disable opacity: 0.3 on .post.fade (which causes both 
issues) and add opaque white background image instead. As result it looks very 
similar but text in the description is very easy to read and it doesn't cause 
second issue for me.

You actually can simplify it by removal of code which adds black border to 
.post.fade elements in your script and border style in my script (which 
restores the default one).

I've added two comparison screenshots with my fix and without it.

Original issue reported on code.google.com by lain.halfbit@gmail.com on 1 Jan 2014 at 3:13

Attachments:

• [Скриншот 2014-01-01 04.36.37.png](https://storage.googleapis.com/google-code-attachments/sgplus-alternative/issue-33/comment-0/Скриншот 2014-01-01 04.36.37.png)
• [Скриншот 2014-01-01 04.59.03.png](https://storage.googleapis.com/google-code-attachments/sgplus-alternative/issue-33/comment-0/Скриншот 2014-01-01 04.59.03.png)

[GoogleCodeExporter]

Second version of my fix, removes border between top and bottom parts.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain('steamgifts.com') {
    .post.fade {
        opacity:1 !important;
    }
    .post.fade > .right > a:first-child > img {
        opacity:0.3 !important;
    }
    .post.fade > .sgpTileViewTimeleft {
        opacity:0.6 !important;
    }
    .post.fade .right,
    .post.fade .sgpTileViewInfoRelative {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6vwkAArkBtLy5dTEAAAAASUVORK5CYII=) !important;
        border: 1px solid rgb(228, 228, 228) !important;
    }
    .post.fade .right:hover {
        /* it is not 0px here to prevent block from jumping when border disappears */
        border-bottom: 1px solid rgba(0,0,0,0) !important;
    }
    .post.fade .sgpTileViewInfoRelative {
        border-top: 0px !important;
    }
}

Original comment by lain.halfbit@gmail.com on 3 Jan 2014 at 12:53