Journal: Shinedot.css: Make Slashdot discussions readable

/*    shinydot.css

    Preview: http://img47.imageshack.us/img47/7970/shinydotcrushup8.png

    Only tested with WebKit (i.e., Safari), and known not to work with
    Gecko; see below. Suggestions welcome.

    Known bug: Collapsed comments cause some visual artifacts. The
    workaround, for now, is to set the entire discussion to be visible at
    once. To do this, set the following comment options under user
    preferences:

         Display Mode: Threaded
         Threshold: -1, Uncut and Raw
         Highlight Threshold: -1, Uncut and Raw
         ...
         Index Spill: 0

    Why no support for Gecko (Firefox)? Because Gecko lacks support for the
    box-shadow, background-size, and text-shadow properties and for colors
    specified as rgba() values, and its support for border-radius is
    incomplete. Also, Gecko differs from WebKit in positioning the generated
    content element, though I don't claim to know which behavior is correct.
    Finally, Gecko tends to render type like shit, so I can't really bring
    myself to care that it renders Slashdot the same way.
*/

/* LI: a comment & its list of replies */
li.comment {
    margin: 0 !important; padding: 0 !important;
    /*outline: 3px dotted red !important;*/
    background: #eee !important;
    -webkit-box-shadow: rgba(0,0,0,0.25) 0 .25em 1em !important;
    -webkit-border-top-left-radius: 1em !important;
    -webkit-border-bottom-right-radius: 1em !important;
    width: 42em !important;

    margin: 0 0 2em 0 !important;
    position: relative !important;
}

li.comment li.comment {
    margin-left: 3em !important;
}

    /* DIV: the comment itself */
    li.comment > div[id ^= 'comment_'] {
        margin: 0 !important; padding: 0 !important;
        /*outline: 1px dotted teal !important;*/
        position:  relative;
        z-index: 0 !important;
    }

    li.comment > ul::before,
    li.comment > wbr > ul::before {
        background: url(http://images.slashdot.org/commentsub-bg.png);
        -webkit-background-size: 100% 200% !important;
        background-position: 0 75% !important;
        /*background: deeppink !important;*/
        display: block;
        position: absolute;
        top: -2.125em; right: 0;
        width: 2em; height: 2.125em;
        font-size: smaller;
        content: "";
    }

    /* UL: list of replies to a comment */
    li.comment > ul,
    li.comment > wbr > ul {
        margin: 0 !important; padding: 0 !important;
        /*outline: 5px dashed darkred !important;*/
        position: relative !important;
        z-index:  1 !important;

        padding-top: 2em !important;
        padding-bottom: 1px !important;
    }

ul#commentlisting {
    margin-top: 2em !important;
}

/*** DEEPLY NESTED THREADS ***/

/* LI of root comment, undoing for child (flat) comment LIs: */
li.comment li.comment li.comment li.comment li.comment li.comment {
    background: transparent !important;
    border: 0.5em dotted #ddd !important;
    border-right-color: #e5e5e5 !important;
    width:  41em !important;
    -webkit-box-shadow: none !important;
    -webkit-border-bottom-right-radius: 1em !important;
} li.comment li.comment li.comment li.comment li.comment li.comment    li.comment {
    border:  none !important;
    width:  42em !important;
}

    /* Comment DIV of root comment, undoing for child (flat) comment DIVs: */
    li.comment li.comment li.comment li.comment li.comment li.comment    > div[id ^= 'comment_'] {
        margin: -0.5em !important; /* compensate for border */
        -webkit-box-shadow: rgba(0,0,0,0.25) 0 .25em 1em !important;
        -webkit-border-bottom-right-radius: 1em !important;
        -webkit-border-top-left-radius: 1em !important;
    } li.comment li.comment li.comment li.comment li.comment li.comment li.comment    > div[id ^= 'comment_'] {
        margin: 0 !important;
        -webkit-box-shadow: none !important;
        -webkit-border-bottom-right-radius: 0 !important;
        -webkit-border-top-left-radius: 0 !important;
    }

    li.comment li.comment li.comment li.comment li.comment li.comment > ul::before,
    li.comment li.comment li.comment li.comment li.comment li.comment > wbr > ul::before {
        -webkit-box-shadow: rgba(0,0,0,0.04) .75em 1em .75em; /* repair rounded shadow */
    }

    /* UL containing flat comment LIs: */
    li.comment li.comment li.comment li.comment li.comment li.comment    > ul,
    li.comment li.comment li.comment li.comment li.comment li.comment    > wbr > ul {
        margin: .5em -0.5em -0.5em -0.5em !important; /* compensate for border and space comment */
    }

        /* All flat comment LIs:, except the first: */
        li.comment li.comment li.comment li.comment li.comment li.comment    li.comment {
            -webkit-box-shadow: rgba(0,0,0,0.125) 0 .5em 2em !important; /* ghost shadow */ }
        li.comment li.comment li.comment li.comment li.comment li.comment    > ul
        > li.comment:first-child,
        li.comment li.comment li.comment li.comment li.comment li.comment    > wbr > ul
        > li.comment:first-child {
            -webkit-box-shadow: rgba(0,0,0,0.25) 0 .25em 1em !important; /* restore normal shadow */
        }

            /* All flat comment DIVs, except the first: */
            li.comment li.comment li.comment li.comment li.comment li.comment    li.comment
            > div[id ^= 'comment_'] {
                opacity: 0.6 !important; /* ghost opacity */ }
            li.comment li.comment li.comment li.comment li.comment li.comment    > ul
            > li.comment:first-child > div[id ^= 'comment_'],
            li.comment li.comment li.comment li.comment li.comment li.comment    > wbr > ul
            > li.comment:first-child > div[id ^= 'comment_'] {
                opacity: 1.0 !important; /* restore normal opacity */
            }

/*** COMMENT DIV CONTENT STYLES ***/

div.commentTop {
    margin: 0 !important;
}

div.commentTop div.title {
    -webkit-border-top-left-radius: 1em !important;
    -webkit-background-size: 100% 100% !important;
    position: static !important;
    padding: 0.4em 1em !important;
    border-bottom: none !important;
}

div.commentTop div.title h4 {
    float: none !important;
    display: inline !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    background: none !important;
}

div.commentTop div.title span.score {
    padding: 0 !important;
    height: auto !important;
    margin-left: 0.5em !important;
    font-size: 94% !important;
}

div.commentTop div.details {
    padding: 0.5em 1em !important;
    background: #e5e5e5 !important;
    font-size: smaller !important;
}

div.commentTop div.details .zooicon img {
    vertical-align: baseline;
    height: 1em;
}

div.commentBody {
    padding: 0.5em 1em !important;
    background: white !important;
}

div.commentSub {
    -webkit-border-bottom-right-radius: 1em !important;
                        /* webkit bug: doesn't crop background to container's rounded border */
    -webkit-background-size: 100% 200% !important;
    background-position: 0 75% !important;
    /*background: deepskyblue !important;*/
    margin:  0 !important;
    padding: 0.5em 1em !important;
    border-bottom: none !important;
    font-size: smaller !important;
    color: #999 !important;
}
div.commentSub::after {
    content: " "
}

/*** OTHER SETTINGS ***/

body {
    font: 13px helvetica !important;
}

div.generaltitle div.title {
    border-bottom: none !important;
}

h1, h2, h3, h4, h5, h6 {
    text-shadow: inherit !important;
}

div.title {
    text-shadow: rgba(0,0,0,0.4) 0 -1px 1px !important;
}

div.title a:not([href]) {
    text-decoration:  none !important
}
div.search input[name='query'] {
    width: 10em !important;
}

div.article div.details {
    line-height: normal !important;
    padding:  .5em 1em !important;
}

div.commentwrap fieldset select {
    margin-right: 1em;
}

div.commentwrap fieldset input.button[name='savechanges'] {
    margin-right: 1em;
}

div.linkCommentPage {
    background-color: #eee !important;
    margin:  0 !important;
}

    /* ADBLOCKING */
div.ad1, div.ad2, div.ad3, div.ad4, div.ad5, div.ad6, div.ad7, div.ad8 {
    display: none !important;
}

    /*** Restore italics and emphasis in blockquotes: ***/
div.commentBody blockquote *    { font-style: inherit !important; }
div.commentBody blockquote i,
div.commentBody blockquote em    { font-style: italic !important; }

    /*** Shrink text in slashboxes: ***/
div.block    { font-size: smaller !important; }
div.block div.title h4 {
    font-size: 100% !important;
}
div#links div.block div.content ul li a,
div#links div.block div.content ul,
div#slashboxes div.block div.content ul li {
    border-color: rgba(255,255,255,0.5) !important;
}
div#links div.block div.content ul li a {
    font-size: 100% !important;
}
div#links div.block div.title h4,
div.tags div.tagtitleclosed span.tagsheader {
    -webkit-background-size: 0.75em auto !important;
}
div#slashboxes div.block div.content {
    padding: 0.5em 1em !important;
}
div#slashboxes div.block div.content ul li {
    padding: 0.35em 0 !important;
    margin:  0 !important;
}
div#slashboxes div.block div.content ul li:first-child {
    border-top: none !important;
}