rps.user.css

/* ==UserStyle==
@name        RPS In Pieces
@namespace   Bzly
@version     3.0.1
@homepageURL https://github.com/Bzly/RPS-in-Pieces
@updateURL   https://raw.githubusercontent.com/Bzly/RPS-in-Pieces/main/rps.user.css
@license     GPL-3.0-or-later
@author      Bzly
@preprocessor stylus

@var checkbox darkMode "Dark Mode Enabled" 1
@var checkbox dealsPosts "Deals Posts Enabled" 1
@var checkbox supportersOnlyPosts "Supporters-Only Posts Enabled" 1
@var checkbox socialIcons "Show Social Icons" 1
@var checkbox articleAsides "Show Recommendation Asides" 1
==/UserStyle== */

@-moz-document domain("rockpapershotgun.com") {

/*  This CSS _really_ needs a tidy up (and by a tidy up I mean a rewrite from scratch). 
    Oh well. good_enough.jpg */
    
/* SITEWIDE */
.advert_container {
    display: none !important;
}

.disclaimer, .nav_trending {
    display: none;
}

#content {
    max-width: 80em;
    width: 82%;
}

.excerpt, .article_body_content, #comments .guidelines, .post.live .what {
    text-align:justify;
    hyphens: auto;
    line-height:1.4;
}

.article_body_content aside, .article_body_content .pullquote {
    text-align: left
}

.article_body_content .pullquote {
    margin-top: auto;
    margin-bottom: auto;
}

.article_body_content aside ol li:not(:first-child), .article_body_content aside ul li:not(:first-child) {
    margin-top: 0;
}

.sidebar, .sidebar .gn_sidebar {
    display: none !important;
}

#content_above {
    padding-right: 0 !important;
}

if not dealsPosts {
    [data-article-type="deals"] {
        display: none;
    }
}

if not supportersOnlyPosts {
    [data-premium="true"] {
        display: none;
    }
}
    
if not socialIcons {
    .article ul.social_icons {
        display: none;
    }
}

/* HOMEPAGE */
body[data-page="homepage"] .spotlight .container {
    grid-template-columns: 1fr 3fr;
}

body[data-page="homepage"] .spotlight .container .primary {
    padding-left: 2em;
    border-left: 1px solid #a9a9a9;
    grid-row-gap: 1em;
    order: 2;
}

body[data-page="homepage"] .spotlight .container .primary li:not(:first-of-type) {
    border-bottom: 1px solid #a9a9a933;
    padding-bottom: 1em;
}

body[data-page="homepage"] .spotlight .container .secondary {
    grid-row-gap: 0;
}

body[data-page="homepage"] .spotlight .container .secondary li {
    padding-bottom: 2em;
}

body[data-page="homepage"] .spotlight .container .secondary::before {
    padding-bottom: 1em;
}

body[data-page="homepage"] .view_archive {
    text-align: center;
    margin: 2em;
}

/* /LATEST */
.blog {
    max-width: 65%;
}

body[data-page="blog"] .page_title_wrapper {
    display: none;
}

.blog .articles>li:not(:last-of-type) .excerpt {
    border-bottom: 1px solid #161616;
    padding-bottom: 2em;
}

.blog article .excerpt {
    margin-top: 1em;
}

.blog .summary .excerpt:before {
    margin-bottom: 1em;
}

.blog .thumbnail img {
    width: 100% !important;
    height: fit-content;
}

.blog .link_overlay {
    height: min-content;
}

/* In case the 'feature' symbols need adjusting for img centering (but I decided to make the images 100% wide instead)
.blog .symbol {
    left: calc((100% - 690px) / 2);
} */


/* HEADER */
    /* Main header changes */
    header.app_header {
        min-height: 7em;
    }
    
    .nav_primary, .nav_secondary {
        align-self: center;
    }

    header.app_header > nav.nav_main {
        width: 82%;
        max-width: 80em;
        padding: 0.8em 0;
        grid-template-columns: 16.5em auto 1fr auto;
        min-height: 7em;
    }


    /* Logo */
    .logo {
        background: url('https://raw.githubusercontent.com/Bzly/RPS-in-Pieces/main/logo_new_dark.png') no-repeat;
        background-size: contain;
        height: 5.4em;
        margin: auto 0;
    }

    .logo > img {
        visibility: hidden;
    }


    /* Nav */
    .nav_primary a[href="/hardware"], .nav_primary a[href="/videos"], .nav_primary a[href="/guides"], .nav_secondary a[href="/topics/free-games"], .nav_secondary a[href="/deals"], .nav_secondary a[href="/podcasts"], .commercial.button_group {
        display: none;
    }

    .nav_main .commercial.button_group {
        visibility: hidden;
    }


    /* Search and user profile */
    nav.nav_main > .actions {
        grid-template-columns: 1fr auto;
        margin: auto 0;
        grid-column-gap: 2em;
    }

    .nav_main .actions > form.search_box {
        margin: auto;
        width: 15em;
    }

    .nav_main form.logout .button_group {
        display: block;
    }
    
    input.sign_out {float: right;}
    
    .user_profile.signed_in .user_buttons {
        grid-template-columns: 1fr min-content;
        width: min-content;
        margin-left: auto;
    }
    
    .nav_main .signed_in .user_buttons > .button {
        padding: 0.2em 0.5em !important;
        margin: 0 !important;
        justify-content: end;
        border-radius: 0.3em;
        font-size: 0.8em;
    }

    .nav_main form.logout .button {
        padding: 0 0.5em;
        border-radius: 0.3em;
    }

    .nav_main .user_profile.signed_in .label, .supporter_thanks {
        display: none;
    }

    .nav_main .actions .user_profile {
        text-align: right
    }

    .nav_main .actions .username {
        max-width: 14em;
    }

    .nav_main form.search_box input {
        color: var(--color);
    }
    
    .app_header .user_profile {
        background: none;
        border: none;
        color: inherit;
    }


/* ARTICLE */
.article_body {
    max-width: 40rem;
    margin: 0 auto;
}

.article_body_content {
    margin: 2em auto;
}

.article_body_content p {
    margin: 1em auto;
}

.article_header {
    max-width: unset;
    padding: 0 3em;
    margin-top: 1em;
    grid-row-gap: 1em;
    grid-template-columns: 1fr;
    grid-column-gap: 3em;
}
    
article.article {
    border-top: none !important;
}

if not articleAsides {
    .article_body_content > aside.recommendation {
        display: none;
    }
}
    
.article_header .share_list li:not(:last-child) {
    display: none;
}

.details .strapline {
    margin-top: 0.7em;
}

.bb_iawr ~ a.button {
    background: unset;
    padding: unset;
}

.bb_iawr {
    margin: 0 !important;
}

.blog div[data-article-type="news"] .strapline {
    color: inherit;
}

.embed_placeholder, #ot-sdk-btn.ot-sdk-show-settings {
    background: #212121;
}

.embed_placeholder {
    border: 1px solid #161616;
}


    /* Article footer */
    .article_footer {
        display: grid;
        margin: 0.2em auto;
        max-width: 65%;
        grid-template-columns: 100%
    }
    

    #content_below, div.spcv_conversation-footer {
        display: none;
    }

    .smart-slot[data-mode="subscriptions"] {display: none;}
        
    .tagged_with {margin-top: 0}
    
    /* Comments */
    #comments {
        margin: 0 auto;
        margin-bottom: 2em;
    }
    
    
/*     

/* SITE FOOTER */
.app_footer, .nav_wrapper {
    height: unset;
}

.app_footer .nav_wrapper {
    width: 82% !important;
    max-width: 80em !important;
    padding: 1em 1em;
    grid-template-columns: 1fr 1fr 1fr auto !important;
    grid-column-gap:5em !important;
}
.app_footer .nav_wrapper ul > li > a, .app_footer .nav_wrapper ul > li > button {
    padding: 0.1em !important;
}

.app_footer .nav_sites, .app_footer .nav_events, .app_footer .about p {
    display: none;
}

.app_footer .nav_helpful ul {
    grid-template-columns: auto auto;
    grid-column-gap: 2em;
}

.app_footer .about {
    grid-row-gap: 0;
}

.app_footer .about .logo {
    margin-bottom: 0.8em;
}

.social_list {
    transform: unset;
    display: grid;
    grid-template-columns: repeat(7,auto);
}

/* hide 'buy our tee' slot */
.smart-slot[data-mode="merch"] {
    display: none;
}

if darkMode {
/* DARK MODE */

:root {
    --rpsip-font-std: #a9a9a9;
    --rpsip-font-bright: #bbb;
    
    --rpsip-bg-dark: #161616 url('https://raw.githubusercontent.com/Bzly/RPS-in-Pieces/main/noise.png') repeat;
    --rpsip-bg-std: #212121 url('https://raw.githubusercontent.com/Bzly/RPS-in-Pieces/main/noise.png') repeat;
    
    --rpsip-green: #00866b;
    --rpsip-purple: #9976E0;
}

body:not(.docked) {
    color: var(--rpsip-font-std);
    background: var(--rpsip-bg-dark) !important;
}

#content, .app_header, .app_footer {
    background: var(--rpsip-bg-std) !important;
    border-color: var(--rpsip-bg-dark);
    border-bottom: 1px solid #161616;
}

.section_title {
    color: grey;
}

.username a {color: inherit;}
.nav_main .signed_out .button {color: black !important;}
    
.summary .thumbnail:after {
    background: inherit !important;
}

.app_header .username .flair.supporter {
    --color: var(--rpsip-purple);
}

.app_header .nav_secondary a, .app_header .nav_primary a, .app_footer nav:not(.social_follow) a, .app_footer nav:not(.social_follow) button {
    color: var(--rpsip-font-std);
}

.blog li:has(+li):has(.excerpt) .wrapper, .disclaimer+.article-container {
    border: none;
}

.app_header .button, .article_header .supporter_message {
    color: var(--color) !important;
    border-color: var(--color) !important;
}

.article[data-premium=true], .summary[data-premium=true] {
    --color: var(--rpsip-purple);
    --strap-color: var(--rpsip-purple);
}

.article_header .title, .summary .name, .summary .title, .page_title {
    color: var(--rpsip-font-bright);
}

.poll_container, .poll_header, .poll_vote_wrapper, .question, .votes {color: var(--rpsip-font-std) !important; opacity: 0.8;}


#comments {
    background: #ffc0cbaa url('https://raw.githubusercontent.com/Bzly/RPS-in-Pieces/main/noise.png') repeat;
    padding: 0 2em;
    border-radius: 2em;
}

.footer {
    color: var(--rpsip-font-std) !important;
    padding: 2em !important;
}

textarea::placeholder {color: #a9a9a9 !important;}

article:not([data-article-type="features"]):not([data-article-type="reviews"]) .strapline {
    color: var(--rpsip-font-std);
}
    
.article_body_content tr:nth-of-type(odd) {
    background: #272727 !important;
}
    
.article_body_content tr:nth-of-type(even) {
    background: #333333 !important;
}
    
.article[data-paywalled="true"] .article_body_content::after {
    background-image: linear-gradient(180deg,transparent,var(--rpsip-bg-std));
}
    
.article_body_content figure figcaption, .article_header figcaption, .article_header .social_share {
    color: #a9a9a9aa;
    border-color: #555;
}
    
.article_body_content blockquote:not(.twitter-tweet):not(.pullquote) {
    background: #161616 url('https://raw.githubusercontent.com/Bzly/RPS-in-Pieces/main/noise.png') repeat;
}

}
}