☰

AO3: [Wrangling] Rainbow Home Page and Bins

adds CSS classes to style table rows as a rainbow, and updates dynamically when filters are applied

Autore
escctrl
Installazioni giornaliere
0
Installazioni totali
41
Valutazione
0 0 0
Versione
5.1
Creato il
31/05/2022
Aggiornato il
05/10/2024
Licenza
MIT
Applica a

Purpose: sets CSS classes to the table rows of the Wrangling Home Page, so that you can apply a rainbow background. If you have one of the filtering scripts (Wrangling home filter, Wrangling Filter Redux, n-in-1 Filters or the Search Wrangling Home), the colors will dynamically update as you filter, so you'll always see the six rainbow colors in order.

Instructions: after enabling the script, have a look at the configuration options at the top.

  • ONHOMEPAGE and ONBINS let you choose on which page(s) you want the table rows to appear in rainbow colors.
  • If you set SOURCE = 'script', the script adds a bit of CSS to make the table appear a bit prettier overall. You can define
    • RAINBOW ... the six colors for the rainbow effect within the script
    • TEXT ... the text color of the fandoms and bin counts
    • BORDER ... the color of the borders inside the table
    • HIGHLIGHT ... the color of the highlighting (of the table rows on mouseover)
  • If you set SOURCE = 'skin', you'll have to add the CSS classes for the six colors .rainbow0 through .rainbow5 to your Archive Skin instead. That can make switching between skins easier or allows you to use different skins/colorschemes for different devices. For example:

    .rainbow0 {
  background: rgba(246, 48, 63, 0.2);
}
.rainbow1 {
  background: rgba(241, 137, 4, 0.2);
}
.rainbow2 {
  background: rgba(253, 221, 0, 0.2);
}
.rainbow3 {
  background: rgba(119, 189, 30, 0.2);
}
.rainbow4 {
  background: rgba(1, 152, 207, 0.2);
}
.rainbow5 {
  background: rgba(114, 32, 130, 0.2);
}

    Tested: So far on Firefox for Windows.

    Known Issues: If you're using the tag snooze script, it may take a moment to run and hide table rows. This script has a delay built in for that purpose when re-applying the rainbow colors, but if you notice that the rainbow colors don't update into the proper order of 6 after snoozing/unsnoozing tags, you can increase the numbers on lines #87 and #89 (tip: increase in steps of 100). Inversely, if the snoozing runs fast and you're noticing a huge lag until the new colors show up, you can try decreasing those numbers, too.