☰

PoE Trade CSS fixes

Restyles PoE trade website with some colors to make it easier to navigate most common search filters. The code only installs the CSS.

// ==UserScript==
// @name         PoE Trade CSS fixes
// @namespace    danbr-scripts
// @version      0.1.3
// @description  Restyles PoE trade website with some colors to make it easier to navigate most common search filters. The code only installs the CSS.
// @author       danrbr
// @match        https://www.pathofexile.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pathofexile.com
// @run-at       document-start
// @license      MIT
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const panelIndexes = {
        armour: 3,
        sockets: 4,
        attributes: 5,
        map: 6,
        miscellanious: 10,
        tradeFilters: 11,
    };

    const propertiesIndex = {
        strength: 2,
        dexterity: 3,
        intelligence: 4,
        socketscount: 1,
        socketslink: 2,
        armour: 1,
        evasion: 2,
        energyShield: 3,
        quality: 1,
        itemlevel:2,
        arealevel: 5,
        corpsetype: 7,
        crucible: 8,
        synthesised: 10,
        corrupted: 14,
        mirrored: 15,
        foreseeing: 19,
        talismanTier: 20,
        storedExp: 21,
        stackSize: 22,
        altArt: 23,
        foil: 24,
        scourgeTier: 25,
        buyoutPrice: 5,
    };
    const colors = {
        red: '#a04949',
        green: '#49a05c',
        blue: '#4979a0',
        darkRed: '#532525',
        darkGreen: '#24442b',
        darkBlue: '#2c3f4e',
        mirror: '#587670',
        darkGold: '#5f5311',
        disabledGrey: '#4b4b4b',
    };


    const tradeCSSFixes = `
/**** Style inserted by the greasemonkey script 'Poe Trade CSS fixes' ****/

/* Changing background colors of commonly used filters */
div.filter-group:nth-of-type(${panelIndexes.armour}) .filter.filter-property:nth-of-type(${propertiesIndex.armour}) .filter-title  {
    background-color: ${colors.darkRed} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.armour}) .filter.filter-property:nth-of-type(${propertiesIndex.evasion}) .filter-title  {
    background-color: ${colors.darkGreen} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.armour}) .filter.filter-property:nth-of-type(${propertiesIndex.energyShield}) .filter-title  {
    background-color: ${colors.darkBlue} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.attributes}) .filter.filter-property:nth-of-type(${propertiesIndex.strength}) .filter-title  {
    background-color: ${colors.red} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.attributes}) .filter.filter-property:nth-of-type(${propertiesIndex.dexterity}) .filter-title  {
    background-color: ${colors.green} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.attributes}) .filter.filter-property:nth-of-type(${propertiesIndex.intelligence}) .filter-title  {
    background-color: ${colors.blue} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.sockets}) .filter.filter-property:nth-of-type(${propertiesIndex.socketscount}) .filter-title  {
    background-color: ${colors.mirror} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.sockets}) .filter.filter-property:nth-of-type(${propertiesIndex.socketslink}) .filter-title  {
    background-color: ${colors.mirror} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.map}) .filter.filter-property:nth-of-type(${propertiesIndex.arealevel}) .filter-title  {
    background-color: ${colors.darkGold} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.itemlevel}) .filter-title  {
    background-color: ${colors.darkGreen} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.quality}) .filter-title  {
    background-color: ${colors.green} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.synthesised}) .filter-title  {
    background-color: ${colors.darkBlue} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.corrupted}) .filter-title  {
    background-color: ${colors.red} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.mirrored}) .filter-title  {
    background-color: ${colors.mirror} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.tradeFilters}) .filter.filter-property:nth-of-type(${propertiesIndex.buyoutPrice}) .filter-title  {
    background-color: ${colors.darkGold} !IMPORTANT;
}

/* Toning down the text color of the lesser commonly used filters, many of which are only relevant in Standard leagues */
div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.corpsetype}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.crucible}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.foreseeing}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.talismanTier}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.storedExp}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.stackSize}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.altArt}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.foil}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

div.filter-group:nth-of-type(${panelIndexes.miscellanious}) .filter.filter-property:nth-of-type(${propertiesIndex.scourgeTier}) .filter-title  {
    color: ${colors.disabledGrey} !IMPORTANT;
}

/* Changing background of YES, NO options, except for the 'Collapse Listings by Account', since it is No by default, and rarely changed */

div.filter-group:not(:last-child) .multiselect__tags:has(> .multiselect__input[placeholder="Yes"]) {
    background-color: ${colors.darkGreen} !IMPORTANT;
}

div.filter-group:not(:last-child) .multiselect__tags:has(> .multiselect__input[placeholder="No"])  {
    background-color: ${colors.darkRed} !IMPORTANT;
}
    `
    GM_addStyle(tradeCSSFixes)


})();