ao3 - color tags by mosspunk

/* ==UserStyle==
@name         ao3 - color tags
@version      20240916.18.19
@namespace    https://userstyles.world/user/mosspunk
@description  make the tags on browsing works different colors by categories
@author       mosspunk
@license      CC0
==/UserStyle== */

@-moz-document url-prefix("https://archiveofourown.org/"), url-prefix("https://squidgeworld.org/"), url-prefix("https://adastrafanfic.com/"), url-prefix("https://cfaarchive.org/") {
/*THIS ASSUMES A DARK BACKGROUND (in this caser reversi). I'm using the name of colors instead of hex names so you can easily spot where to change to your own preferred colors :D */

/*This only affects work blurbs when you're browsing fics, not the tags on the actual fic's page.*/

/*If you would like a more modern feel, add the following code in before the last } on the :hover lines. This will make the background color when you're hovering over a tag softer and rounded, in line with more modern themes. */

/* padding: .1rem; border-radius: .25rem; border-bottom: none !important (don't include these (* /) bits */

/*relationships tags*/
.relationships a {background: none !important; color: pink;}
.relationships a:hover {color: black; background: pink !important;} 
/*don't remove the !important parts; ao3 comes with a background color for relationship tags out of the box, and we need the !important to override this*/

/*character tags*/
.characters a {color: lightgreen}
.characters a:hover {color: black; background: lightgreen;}

/*freeform tags*/
.freeforms a {color: lightblue}
.freeforms a:hover {color: black; background: lightblue;}

/*warning tags*/
.warnings a {color: yellow}
.warnings a:hover {color: black; background: yellow;}
}