Post icons

/*
 * Thread icons by Yusuki Kamiyamane (p.yusukekaminamane.com).
 * All rights reserved. Licensed under Creative Commons Attribution 3.0.
 */

/*
 * All  submitted links have the class "title".
 * In order to make the green "other" links work, we'll change *all* links to green.
 * Others (trade and PSA links) will be overridden later.
 */

a.title:link {
    color: ForestGreen !important;
}

a.title:visited {
    color: #004000 !important;
}

a.title::before {
    position: relative;
    top: 2px;
    margin-right: 2px;
    display: inline-block;
    height: 16px;
    width: 16px;
    content: "";
    /*
     * thread-icons is a spritesheet containing the four thread icons I use.
     */
    background-image: url(%%thread-icons%%);
    background-repeat: no-repeat;
}

/*
 * Use CSS attribute selectors to change the appearance of certain links.
 *
 * In this case, we want to change trade links, which all follow the title format:
 * [H] Stuff [W] Other stuff
 *
 * The resulting URL looks something like this:
 * http://reddit.com/r/SteamGameSwap/comments/.../h_stuff_w_other_stuff/
 * We'll focus on the "/h_" part, which trade threads should all contain, and
 * non-trade threads should *not* contain.
 *
 * We'll use the *= operator to specify that the href attribute can contain "/h_"
 * as any part of the string, rather than forcing it to be the whole string (=),
 * the beginning of the string (^=), or the end of the string ($=).
 */

a[href*="/h_"].title:link {
    /* The default link colors are #0000ff link, #551a8b visited. */
    color: blue !important;
}

a[href*="/h_"].title:visited {
    color: #551a8b !important;
}

a[href*="/h_"].title::before {
    /* Shift the spritesheet to show the blue-arrow icon. */
    background-position: -16px 0px;
}

/*
 * Now we'll do closed trade threads.
 * Thread closing is handled by marking something NSFW. (Trades really can't be
 * NSFW, so we're not using that for its intended purpose anyway.)
 *
 * NSFW links are contained in a div with class "over18". We'll focus on trade
 * links inside of an over18-classed element.
 */

.over18 a[href*="/h_"].title:link {
    color: FireBrick !important;
}

.over18 a[href*="/h_"].title:visited {
    color: #600000 !important;
}

.over18 a[href*="/h_"].title::before {
    background-position: 0px -16px;
}

/*
 * Now, we need to make it so that closed threads appear as "closed" and not NSFW.
 * There are a few things we need to do for this.
 *
 * First, hide the "NSFW" text.
 */

.over18 li.nsfw-stamp {
    display: none;
}

/*
 * Second, insert different text where the NSFW text was.
 */
.over18 ul.flat-list.buttons::before {
    content: "Thread Closed";
    border: 1px solid #d27979 !important;
    color: #AC3939;
    font-size: x-small;
    text-decoration: none;
    padding: 0px 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/*
 * Now, change the "nsfw" / "un-nsfw" options to read
 * "close thread" and "reopen thread".
 *
 * Step 1: Hide the "nsfw" / "un-nsfw".
 * We can't use display: none here, because that would hide the link entirely.
 * We need to replace the contents of the link, not the link itself.
 * There's no way to display: none the text inside a link, so we cheat and
 * set the font size to 0.
 *
 * The color: white is needed to work around a browser glitch on Webkit (Chrome / Safari)
 * where text-size: 0 is displayed, but with all of the characters smashed on top
 * of one another in a very ugly fashion.
 */
.link .marknsfw-button .option.active a[href="#"],
.link .unmarknsfw-button .option.active a[href="#"] {
    font-size: 0;
    color: white;
}

/*
 * Step 2: Add new text of our own devising.
 */
.link .marknsfw-button .option.active a[href="#"]::before {
    content: "close thread";
    font-size: x-small !important;
    color: FireBrick !important;
}

.link .unmarknsfw-button .option.active a[href="#"]::before {
    content: "reopen thread";
    font-size: x-small !important;
    color: ForestGreen !important;
}

/*
 * More highlighting, but this time for threads that have [PSA] or [ANNOUNCEMENT].
 */

a[href*="/psa_"].title:link, a[href*="/announcement_"].title:link {
    color: DarkGoldenRod !important;
}

a[href*="/psa_"].title:visited, a[href*="/announcement_"].title:visited {
    color: Sienna !important;
}

a[href*="/psa_"].title::before, a[href*="/announcement_"].title::before {
    background-position: -16px -16px;
}

/*
 * Finally, fiddle with colors to get it to all play nicely with Reddit
 * Enhancement Suite's night mode.
 */

.res-nightmode .link a.title:link {
    color: SpringGreen !important;
}

.res-nightmode .link a.title:visited {
    color: LimeGreen !important;
}

.res-nightmode .link a[href*="/h_"].title:link {
    color: SkyBlue !important;
}

.res-nightmode .link a[href*="/h_"].title:visited {
    color: CornflowerBlue !important;
}

.res-nightmode .link.over18 a[href*="/h_"].title:link {
    color: LightPink !important;
}

.res-nightmode .link.over18 a[href*="/h_"].title:visited {
    color: IndianRed !important;
}

.res-nightmode .link a[href*="/psa_"].title:link,
.res-nightmode .link a[href*="/announcement_"].title:link {
    color: Gold !important;
}

.res-nightmode .link a[href*="/psa_"].title:visited,
.res-nightmode .link a[href*="/announcement_"].title:visited {
    color: GoldenRod !important;
}

.res-nightmode .link .marknsfw-button .option.active a[href="#"]::before {
    color: LightPink !important;
}

.res-nightmode .link .unmarknsfw-button .option.active a[href="#"]::before {
    color: SpringGreen !important;
}