_listings.scss

@import 'colors';
@import 'base';

body > .content {
    background-color: $listings-background-color;
    position: relative;
    z-index: 100;
    margin-top: 0px;
    margin-left: 16px;
    margin-right: 364px;
    padding: 16px;
    padding-top: 1px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;

    .menuarea {
        border: none;
        padding: 16px 0px 16px 0px;
        margin: 0px;
        font-size: 14px;
    }

    .panestack-title {
        margin: 0px;
    }
}

#siteTable > .thing.link {
    padding-top: 16px;
}

.thing.link,
.thing.comment,
.thing.new-comment {
    padding-left: 0px;
    margin-bottom: 16px;
    color: $listings-base-text-color;

    .rank {
        display: none;
    }

    .midcol {
        margin-left: 0px;
        margin-right: 16px;
    }

    .arrow {
        background-image: url($sprites);
        width: 15px;
        height: 14px;
    }

    .arrow.up {
        @extend .arrow;
        background-position: 0px 0px;
    }

    .arrow.upmod {
        @extend .arrow;
        background-position: -15px 0px;
    }

    .arrow.down {
        @extend .arrow;
        background-position: 0px -14px;
    }

    .arrow.downmod {
        @extend .arrow;
        background-position: -15px -14px;
    }

    .score.likes {
        color: $upvote-color;
    }

    .score.dislikes {
        color: $downvote-color;
    }

    .thumbnail {
        margin: 0px 16px 0px 0px;

        &.self {
            @extend .base-thumbnail;
            background-image: url($selfpost);
        }

        &.nsfw {
            @extend .base-thumbnail;
            background-image: url($nsfw);
        }
    }

    .expando-button {
        &.selftext.collapsed,
        &.selftext.collapsed:hover {
            @extend .base-expando;
            background-position: 0px 0px;
        }

        &.selftext.expanded,
        &.selftext.expanded:hover {
            @extend .base-expando;
            background-position: 0px -24px;
        } 

        &.video.collapsed,
        &.video.collapsed:hover {
            @extend .base-expando;
            background-position: -24px 0px;
        }

        &.video.expanded,
        &.video.expanded:hover {
            @extend .base-expando;
            background-position: -24px -24px;
        } 
    }

    &.over18 a.title {
        color: $nsfw-link-title-color !important;
        transition: text-shadow 0.3s, color 0.3s;

        &:hover,
        &:active {
            color: $nsfw-link-title-color-hover !important;
            text-shadow: 0px 0px 10px $nsfw-link-title-color;
        }

        &:before {
            content: "NSFW";
            background-color: $nsfw-link-title-color;
            color: $listings-background-color;
            border-radius: 3px;
            padding: 0px 4px;
            margin-right: 8px;
            font-size: 12px;
            font-weight: bold;
        }
    }

    .nsfw-stamp {
        display: none;
    }

    a.title {
        display: inline-block;
        color: $link-title-color !important;
        transition: text-shadow 0.3s, color 0.3s;
        vertical-align: middle;

        &:hover,
        &:active {
            color: $link-title-color-hover !important;
            text-shadow: 0px 0px 10px $link-title-color;
        }

        &:visited {
            color: $link-title-color-visited !important;
        }
    }

    &.stickied {
        background-color: $link-background-color-sticky;
        margin-left: -16px;
        margin-right: -16px;
        padding: 16px;

        &:last-child {
            margin-bottom: 32px;
        }

        a.title {
            font-weight: normal;
            color: $link-title-color-sticky !important;

            &:hover,
            &:active {
                color: $link-title-color-hover-sticky !important;
                text-shadow: 0px 0px 10px $link-title-color-sticky;
            }
        }

        .stickied-tagline {
            color: $link-title-color-sticky;
        }
    }

    &.last-clicked {
        border: none;
    }

    .domain {
        color: $listings-background-color;
        opacity: 0.5;
        transition: opacity 0.3s;
        float: right;

        &:before {
            content: "//";
            font-size: x-small;
            color: $listings-base-text-color;
        }

        &:hover {
            opacity: 1.0;
        }
    }

    .tagline {
        margin-top: 8px;
        color: $listings-base-text-color;

        a {
            color: $link-author-color;
        }
    }

    .buttons {
        margin-top: 4px;

        li a {
            color: $listings-base-text-color;
        }
    }

    .expando-button {
        margin-top: 12px;
    }

    .usertext-body .md {
        background-color: $listings-post-background-color;
        border: none;
        border-radius: 3px;
        padding: 16px;
        color: $listings-post-text-color;
    }

    .md {
        a {
            color: $page-link-color;
            transition: color 0.3s;

            &:hover,
            &:active {
                color: $page-link-color-hover;
            }

            &:visited {
                color: $page-link-color-visited;
            }
        }

        blockquote {
            color: $greentext;
            border: none;

            p:before {
                content: ">";
                display: inline;
            }
        }

        del {
            color: $listings-post-text-color;
        }

        pre {
            background-color: $listings-post-background-color;
            padding: 16px;
            border: none;

            code {
                margin: 0;
            }
        }
    }
}


.thing.comment,
.thing.new-comment {
    border: none;
    border-radius: 3px;
    padding: 16px 16px 1px 16px;
    margin-bottom: 12px;
    color: $listings-post-text-color;
    margin-left: 0px;

    .usertext-body {
        border: none;
        background-color: transparent;
        padding: 0px;

        .md {
            background-color: transparent;
            padding: 0px;
        }
    }

    .tagline {
        margin-bottom: 16px;

        a.author {
            padding: 4px;
        }

        a.submitter {
            background-color: $link-title-color;
            border-radius: 3px;
        }

        a.moderator {
            background-color: $link-author-mod-background-color;
            padding: 4px;
            border-radius: 3px;
            border: 1px solid $link-author-mod-border-color;
        }
    }

    .flat-list {
        margin-top: 16px;
    }
}

.comment.spam > .child,
.message.spam > .child {
    background-color: transparent;
}

.comment .child {
    margin-top: 16px;
    margin-left: 0px;
    border-left: 0px;
}

$rule: '.commentarea';
@for $i from 1 through 10 {
    $rule: $rule + ' .comment';
    #{$rule} {
        @if $i % 2 == 0 {
            background-color: $listings-post-background-color;
        } @else {
            background-color: $listings-post-background-color-alt;
        }
    }
}

.drop-choices {
    padding: 8px;
    border-radius: 3px;
    background-color: $listings-background-color;
}

.dropdown.lightdrop .selected {
    color: $page-link-color;
}

ul.report-reasons,
.entry .buttons li.reported-stamp {
    background-color: $listings-post-background-color;
    border: none;
    border-radius: 3px;
}

.subreddit-report-form,
.action-form {
    @extend .infobar;
    padding: 16px;

    .reason-prompt {
        font-size: 16px;
        color:  $link-title-color;
        display: block;
        margin-bottom: 8px;
    }

    ol {
        margin-bottom: 8px;
    }
}