// ==UserScript==
// @name AO3: [Wrangling] Rainbow Home Page
// @namespace https://greasyfork.org/en/users/906106-escctrl
// @description adds CSS classes to style table rows as a rainbow, and updates dynamically when filters are applied
// @author escctrl
// @version 4.2
// @match *://*.archiveofourown.org/tag_wranglers/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js
// @license MIT
// ==/UserScript==
// CONFIGURATION
// choose if you want to use your AO3 skin to define the colors (skin), or if you'll add the css in this script (script)
// if you use a skin, note that the classes are added to the table rows (tr) and named .rainbow0 through .rainbow5
const SOURCE = 'script';
// set the six different background colors here, for example "rgba(255, 21, 164, 0.86)" or "#ff15a4"
// tip: rgba let's you define the color in order red-green-blue. the fourth number (alpha) is transparency between 0 (transparent) and 1 (opaque)
const RAINBOW = ["rgba(246, 48, 63, .2)",
"rgba(241, 137, 4, .2)",
"rgba(253, 221, 0, .2)",
"rgba(119, 189, 30, .2)",
"rgba( 1, 152, 207, .2)",
"rgba(114, 32, 130, .2)" ];
const TEXT = "#000000"; // color of the link text in the table
const BORDER = "#FFFFFF"; // color of the borders in the table
const HIGHLIGHT = "#FFFFFF"; // background color of the highlighted row (on mouseover)
(function($) {
'use strict';
if (SOURCE == 'script') {
var fullCSS = RAINBOW.map((e, i) => ".rainbow"+i+" { background-color: "+e+"; color: inherit !important }" );
$('head').append(`<style type="text/css">
.assigned thead th { text-align: center; vertical-align: bottom; }
.assigned thead { border-bottom: 0px; }
.assigned tbody th { background: transparent !important; border: 1px solid ${BORDER}; vertical-align: middle; padding: 0.2em 0.5em; }
.assigned tbody td { vertical-align: middle; border: 1px solid ${BORDER}; padding: 0.2em 0.5em; text-align: right; }
.assigned tbody tr:hover { background-color: ${HIGHLIGHT}; }
.assigned tbody a,
.assigned tbody a:hover,
.assigned tbody a:visited,
.assigned tbody a:active {
color: ${TEXT}; border-bottom: 0; }
${fullCSS.join(' ')}
</style>`);
}
function resetRainbow() {
$('.assigned tbody tr').removeClass('rainbow0 rainbow1 rainbow2 rainbow3 rainbow4 rainbow5');
$('.assigned tbody tr:visible').each( (it, row) => $(row).addClass('rainbow'+it%6) );
}
$(document).ready(function() {
// executes on page load for initial coloring
resetRainbow();
// add events for dynamic updates of the CSS classes when filters are applied
$('.assigned p:contains(Show only fandoms with) a') // Standard (doesn't specify a p#id so we have to go by text content)
.add('#filter-fandoms *') // Redux
.add('#media-filter a, #source-filter a, #fandom-filter a, #setup-filter a, #reset-filter a') // N-in-1
.add('#sortunwrangled, #sortname, #sortchars, #sortrels, #sortff') // Sorting by Total Unwrangled
.on("click", resetRainbow);
// Search
$('#fandom_search').on('keyup', resetRainbow);
});
})(jQuery);