GuildWars2 (GW2) News | Dark by michaelokgb

/* ==UserStyle==
@name           GW2 News
@namespace      userstyles.world/user/michaelokgb
@version        20240314.18.35
@description    Simple dark version for GuildWars 2 news website.
@author         michaelokgb
@license        CC BY-SA
==/UserStyle== */
@-moz-document domain("www.guildwars2.com") {
    /* somebody forgot to disable debug CSS for box-sizing for new player guide page, this disables it */
    html *:hover {
        outline: none !important;
    }

    html {
        background: #1f1f1f !important;
        color: rgb(227, 227, 227);
    }

    body {
        background-image: url(https://content.invisioncic.com/a311129/set_resources_3/6d538d11ecfced46f459ee300b5e80ec_header.jpg);
        background-repeat: no-repeat;
        background-position: 50% 0;
    }

    body:before {
        background-color: #4f0101;
    }

    /* New player guide override */
    @media screen and (min-width: 1024px) {
        html:not(.fill) body:before {
            background-color: #4f0101;
            content: "";
            display: block;
            height: 246px;
            left: 0;
            position: absolute;
            width: 50%;
            z-index: -1;
        }
    }


    /*.main-hd .page-width {
        z-index: 2147483647;
    } */
    /**
     * Content
     */
    a {
        color: #ff0000;
    }

    h3 a {
        color: #ffffff;
    }

    /* 
    h3:hover a {
        color: rgb(213, 2, 9);
    } 
    */
    #content:after {
        display: none;
    }


    /* News carousel */
    .yui3-charrousel {
        background-image: none;
        position: relative
    }

    .yui3-charrousel:after {
        content: "";
        background: url(https://guildwars2.staticwars.com/wp-content/themes/guildwars2.com-live/img/featured-ft.c2e7567e.jpg) no-repeat 50% 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        /*
        height: 100%;
        filter: invert(88%) hue-rotate(180deg);
        z-index: -1;
         */
        height: 83px;
        z-index: 0;
        background-blend-mode: multiply;
        background-color: #1f1f1f;
    }

    .yui3-charrousel-item {
        /*filter: invert(88%) hue-rotate(180deg);*/
        background-blend-mode: multiply;
        background-color: #1f1f1f;
    }
    .yui3-charrousel-item:hover {
        background-blend-mode: overlay;
    }

    .yui3-charrousel-page button:hover {
        color: #fff;
    }

    .breadcrumbs a {
        color: #aaa;
    }

    /* Article header */
    .article > .page-hd {
        background-blend-mode: multiply;
        background-color: #1f1f1f;
        /*filter: invert(88%) hue-rotate(180deg);*/
    }
    .article > .page-hd:hover {
        background-blend-mode: overlay;
    }
    /*.article > .page-hd:before,
    .article > .page-hd > * {
        filter: invert(100%) hue-rotate(180deg);
    }*/
    /* News header */
    .article .page-bd .page-hd,
    .article .page-hd .page-padding {
        background-image: none!important;
    }

    /*.page-template-template-blog-php .page-hd:before,
    .page-template-template-community-php .page-hd:before {
        filter: invert(12%) hue-rotate(180deg);
    }*/
    .page-template-template-blog-php .page-hd:after,
    .page-template-template-community-php .page-hd:after {
        content: "";
        background-image: url(https://d3b4yo2b5lbfy.cloudfront.net/wp-content/uploads/2011/07/community-11.jpg);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        /*filter: invert(88%) hue-rotate(180deg);*/
        background-color: #1f1f1f;
        background-blend-mode: multiply;
    }

    .page-template-template-blog-php .page-hd:hover:after,
    .page-template-template-community-php .page-hd:hover:after {
        background-blend-mode: overlay;
    }


    /* News posts */
    .home .posts .yui3-tab-label {
        color: #fff;
    }

    .news .mod {
        background-image: none;
        position: relative;
    }

    .news .mod:before {
        content: "";
        background: url(https://guildwars2.staticwars.com/wp-content/themes/guildwars2.com-live/img/home/news-bg.d8d9e0f6.jpg) no-repeat 0 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        filter: invert(88%) hue-rotate(180deg);
    }

    .news .meta,
    .news .text {
        color: #aaa;
    }

    .news .meta {
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 30%, #282c2d);
        border-image: linear-gradient(#3e4446, transparent) 1;
    }


    /* News content */
    .article .gw2-c {
        background-image: none;
    }

    .widget .bd {
        border-color: #404040;
    }

    .widget-container .bd .more {
        color: #ff0000;
    }

    .wp-pagenavi a:hover {
        color: #fff;
    }
    @media screen and (max-width: 1023px) {
        .article .page-hd p {
            color: #7d7d7d;
        }
    }

    .standard-table tbody th,
    .standard-table thead td {
        background-color: #2f2f2f;
    }

    .standard-table tbody tr:nth-child(2n) td {
        background-color: #1a1a1a;
    }

    /*  */
    #commerce-items > ul > li,
    #commerce-items > ul > li:last-child {
        background-image: none;
    }

    #commerce-items > ul > li:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent url(https://guildwars2.staticwars.com/wp-content/themes/guildwars2.com-live/img/line-wide.b5112394.jpg) no-repeat scroll 50% 100%;
        z-index: -1;
        filter: invert(88%) hue-rotate(180deg);
    }

    #commerce-items > ul > li:last-child:before {
        background-image: url(https://guildwars2.staticwars.com/wp-content/themes/guildwars2.com-live/img/commerce/outro-bg.9975b7b1.jpg);
        background-position: 50% 0;
    }

    /* Shop */
    .shop-itemlist li:before,
    .shop-itemlist li:after {
        content: "";
        background: #434343;
    }

    .shop-itemlist li:before {
        height: 1px;
        width: 100%;
    }

    .shop-itemlist li:after {
        width: 1px;
        height: 100%;
    }

    .shop-itemlist li:nth-child(-n+4):before,
    .shop-itemlist li:nth-child(4n+1):after {
        background: transparent;
    }

    .shop-itemlist li:hover {
        background: #181818;
    }

    .shop-itemlist .shop-item .item-title {
        color: #d1cdc7;
    }
    .single-shop_item .featured-img {
        z-index: 1;
        /*background-blend-mode: multiply;
        background-color: #1f1f1f;*/
    }
    .single-shop_item .featured-img:hover {
        background-blend-mode: overlay;
    }


    .more-2.learn a:after,
    .more-2.learn a:before {
        filter: invert(88%) hue-rotate(180deg);
    }

    .home .yui3-u-s > ul > li {
        background: none;
    }


    /**
     * The game page
     */
    .page-the-game .page-hd,
    .page-the-game .blurbs .blurb,
    .page-the-game .video-link,
    .page-the-game .divider {
        background-color: #1f1f1f;
        background-blend-mode: multiply;
    }

    .page-the-game .blurbs .blurb:hover {
        background-blend-mode: overlay;
    }
    .page-the-game .blurb:hover .video-link {
        /* this is sadly the best i can do without replacing original images */
        background-color: #3e3e3e;
    }

    /* this is here only for the border/divider between sections, since it's done as a background of section iside of a blurb (which contains main background with an image, which preents use of background-blend-mode) */
    .page-the-game .blurbs .page-width,
    .page-the-game .blurbs .page-width > * {
        filter: invert(1);
    }

    .page-the-game .sections .section .bd a {
        color: #fff;
    }

    .more.learn,
    .more.learn a {
        filter: invert(100%);
    }

    .featured-video {
        padding-bottom: 1px;
    }

    .featured-video,
    .featured-video .title {
        background-color: #1f1f1f;
        background-blend-mode: multiply;
    }
    .page-the-game .tour-link .video:before,
    .featured-video .frame:before {
        filter: invert(88%);
    }


    /**
     * Races pages
     */
    .page-races .selector,
    .page-races .races .race,
    .gw2_race .gw2-c-l > .main-text,
    .gw2_race .article .gw2-c,
    .widget-gw2-raceImages {
        background-color: #1f1f1f;
        background-blend-mode: multiply;
    }

    .page-races .selector ul {
        background: none;
    }

    /* disabling blend mode completely looks bad, either leave multiply or use overlay */
    .races .race:hover {
        background-blend-mode: overlay;
    }


    /**
     * Professions pages
     */
    .page-professions .selector .page-width,
    .page-professions .selector ul {
        background-color: #1f1f1f;
        background-blend-mode: multiply;
    }

    .profession .item-text {
        color: #fff;
    }

    .article .sidebar-video .frame span {
        color: #fff;
    }

    .professions .profession img,
    .gw2_profession .page-bd img.aside,
    .gw2_profession .page-bd .icons img {
        mix-blend-mode: multiply;
    }

    .professions .profession:hover img,
    .gw2_profession .page-bd img.aside:hover,
    .gw2_profession .page-bd .icons li:hover img {
        /* sadly transition's do not work fir MBM */
        mix-blend-mode: normal;
    }


    /**
     * New players page
     * - this one is quite borked, will need more updates after they fix the issues
     */
    .index-modu...