diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml
index 2246c89c90..b2be8d6b82 100644
--- a/scripts/userstyles.yml
+++ b/scripts/userstyles.yml
@@ -74,6 +74,7 @@ collaborators:
- &ImenaOphelia ImenaOphelia
- &koibtw koibtw
- &TheAnonymousCrusher TheAnonymousCrusher
+ - &ninetailedtori NineTailedTori
userstyles:
advent-of-code:
@@ -128,6 +129,13 @@ userstyles:
note: "Make sure to use the default **Light** theme."
current-maintainers: []
past-maintainers: [*GenShibe]
+ archiveofourown:
+ name: Archive of Our Own
+ link: https://archiveofourown.org
+ categories: [discussion_forum]
+ icon: archiveofourown
+ color: red
+ current-maintainers: [*ninetailedtori]
boringproxy:
name: boringproxy
link: https://boringproxy.io
diff --git a/styles/archiveofourown/catppuccin.user.less b/styles/archiveofourown/catppuccin.user.less
new file mode 100644
index 0000000000..5404ab1b20
--- /dev/null
+++ b/styles/archiveofourown/catppuccin.user.less
@@ -0,0 +1,673 @@
+/* ==UserStyle==
+@name Archive of Our Own Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/archiveofourown
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/archiveofourown
+@version 2000.01.01
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/archiveofourown/catppuccin.user.less
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aarchiveofourown
+@description Soothing pastel theme for Archive of Our Own
+@author Catppuccin
+@license MIT
+
+@preprocessor less
+@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
+@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
+@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
+==/UserStyle== */
+
+@import "https://userstyles.catppuccin.com/lib/lib.less";
+
+@-moz-document domain("archiveofourown.org"),
+ domain("transformativeworks.org") {
+ :root {
+ @media (prefers-color-scheme: light) {
+ #catppuccin(@lightFlavor);
+ }
+ @media (prefers-color-scheme: dark) {
+ #catppuccin(@darkFlavor);
+ }
+ }
+
+ #a() {
+ color: @subtext0;
+
+ &:hover {
+ color: @text;
+ }
+
+ &:active, &:focus {
+ color: @accent;
+ }
+ }
+
+ #catppuccin(@flavor) {
+ #lib.palette();
+ #lib.defaults();
+
+ header, #header {
+ background-color: @mantle;
+
+ h1 {
+ color: @accent;
+
+ a, a span, sup {
+ color: @accent;
+ }
+ }
+
+ #login.dropdown {
+ color: @text;
+ background-color: @mantle;
+
+ p.user.actions {
+ &:not(.open) #login-dropdown.dropdown-toggle {
+ color: @text;
+ background-color: @mantle;
+ }
+
+ &.open #login-dropdown.dropdown-toggle {
+ color: @text;
+ background-color: @surface0;
+ }
+ }
+ }
+
+ #small_login {
+ color: @text;
+ background-color: @surface0;
+ background-image: unset;
+ border-color: @overlay0;
+
+ ul.footnote.actions li a {
+ #a();
+ }
+ }
+
+ .primary {
+ background-image: linear-gradient(
+ @accent 2%,
+ darken(@accent, 5%) 95%,
+ darken(@accent, 10%) 100%
+ );
+
+ a {
+ color: @base;
+ }
+ }
+
+ .menu {
+ background-color: @surface0;
+ background-image: unset;
+ box-shadow: 1px 1px 3px -1px @base;
+
+ li {
+ border-color: @overlay0;
+ }
+ }
+
+ .navigation.actions {
+ &.primary a {
+ color: @base;
+ background-color: inherit;
+
+ &:hover, &:active, &:focus {
+ color: @text;
+ background-color: @surface0;
+ }
+ }
+
+ &.user a {
+ color: @text;
+ background-color: inherit;
+
+ &:hover, &:active, &:focus {
+ background-color: @surface0;
+ }
+ }
+ }
+
+ .dropdown .menu.dropdown-menu a {
+ color: @text;
+
+ &:hover, &:active, &:focus {
+ background-color: fade(@overlay2, 30%);
+ }
+ }
+
+ #search input {
+ color: @subtext1;
+
+ &:focus {
+ color: @text;
+ }
+ }
+ }
+
+ a {
+ #a();
+ }
+
+ .actions a,
+ .actions a:link,
+ .action,
+ .action:link,
+ .actions button,
+ .actions input,
+ input[type="submit"],
+ button,
+ .current,
+ .actions label {
+ color: @subtext1;
+ background-color: @surface0;
+ background-image: unset;
+ border-color: @overlay0;
+ box-shadow: inset 0 1px 2px @base;
+
+ &:hover {
+ background-color: @surface1;
+ }
+
+ &:active, &:focus {
+ color: @text;
+ background-color: @surface2;
+ box-shadow: inset 2px 2px 2px @base;
+ }
+ }
+
+ input, select, textarea {
+ color: @subtext1;
+ background-color: @surface0;
+ border-color: @overlay0;
+ box-shadow: inset 0 1px 2px @base;
+
+ &:hover {
+ background-color: @surface1;
+ }
+
+ &:active, &:focus {
+ color: @text;
+ background-color: @surface2;
+ box-shadow: inset 2px 2px 2px @base;
+ }
+ }
+
+ fieldset {
+ color: @text;
+ background-color: @mantle;
+ border-color: @overlay0;
+ box-shadow: inset 1px 0 5px @base;
+
+ dl, &.actions, dl fieldset dl, &.comments {
+ background-color: transparent;
+ box-shadow: none;
+ }
+ }
+
+ form dt {
+ border-color: @overlay1;
+ }
+
+ span.symbol {
+ color: @base;
+ }
+
+ .question a:hover {
+ color: @base;
+ background: darken(@accent, 5%);
+ border-color: @overlay0;
+ }
+
+ span.question {
+ background: @accent;
+ border-color: darken(@accent, 5%);
+ box-shadow: -1px -1px 2px fade(@accent, 25%);
+ }
+
+ // .loading would target the loading spinner, but we can't. It uses dark and light colours, and our filter wouldn't work. And too bad - it's a gif, so no neat svg edits!
+
+ #modal {
+ background-color: @mantle;
+ border-color: @surface0;
+
+ .content {
+ border-color: @overlay0;
+ }
+ }
+
+ .thread .even, .splash .module div.account {
+ background-color: @surface0;
+ border-color: @overlay0;
+ }
+
+ div.comment, li.comment {
+ border-color: @overlay0;
+ }
+
+ .comment h4.byline {
+ background-color: @mantle;
+ }
+
+ span.unread, .replied, span.claimed, .actions span.defaulted {
+ color: @subtext0;
+ background-color: @surface0;
+ border-color: @overlay0;
+ }
+
+ span.offered, .replied, .nominations .approved {
+ color: @green;
+ }
+
+ .userstuff hr,
+ .preface h3,
+ .splash .news li {
+ border-color: @overlay1;
+ }
+
+ .filters {
+ .expander {
+ color: @text;
+ background-size: 10px 10px;
+ box-shadow: unset;
+ }
+
+ // I custom-made some simple polygon arrows that are identical to the gif-format arrows used upstream!
+ :not(.expanded) .expander {
+ @svg: escape(
+ ''
+ );
+ background-image: url("data:image/svg+xml, @{svg}") !important;
+ }
+
+ .expanded .expander {
+ @svg: escape(
+ ''
+ );
+ background-image: url("data:image/svg+xml, @{svg}") !important;
+ }
+
+ [type="checkbox"] {
+ &:not(checked) + .indicator::before {
+ color: @text;
+ background-color: @surface0;
+ background-image: linear-gradient(
+ @surface0 2%,
+ @surface1 95%,
+ @surface2 100%
+ );
+ }
+
+ &:checked + .indicator::before {
+ color: @base;
+ background-color: @accent;
+ background-image: linear-gradient(
+ fade(@accent, 10%) 2%,
+ fade(@accent, 20%) 95%,
+ fade(@accent, 30%) 100%
+ );
+ }
+ }
+
+ [type="radio"] {
+ &:not(:checked) + .indicator::before {
+ color: @text;
+ background-color: @surface0;
+ background-image: linear-gradient(
+ @surface0 2%,
+ @surface1 95%,
+ @surface2 100%
+ );
+ }
+
+ &:checked + .indicator::before {
+ color: @base;
+ background-color: @accent;
+ background-image: linear-gradient(
+ fade(@accent, 10%) 2%,
+ fade(@accent, 20%) 95%,
+ fade(@accent, 30%) 100%
+ );
+ }
+ }
+ }
+
+ .qtip-content, ul.notes {
+ color: @text;
+ background-color: @surface0;
+ border-color: @overlay0;
+ box-shadow: inset 1px 1px 2px @base;
+ }
+
+ .notice a {
+ color: @blue;
+
+ &:hover {
+ color: @sky;
+ }
+
+ &:active, &:focus {
+ color: @sapphire;
+ }
+
+ &:visited {
+ color: @lavender;
+ }
+ }
+
+ form .notice, form ul.notes {
+ box-shadow: @base 0 0 3px;
+ }
+
+ .notice, .comment_notice, .kudos_notice {
+ color: @teal;
+ background-color: fade(@teal, 15%);
+ border-color: @teal;
+ box-shadow: inset 1px 1px 2px @base;
+ }
+
+ .caution {
+ color: @peach;
+ background-color: fade(@peach, 15%);
+ border-color: @peach;
+ box-shadow: inset 1px 1px 2px @base;
+ }
+
+ .error, .comment_error, .kudos_error, .required, .alert.flash {
+ color: @red;
+ background-color: fade(@red, 15%);
+ border-color: @red;
+ box-shadow: inset 1px 1px 2px @base;
+ }
+
+ .userstuff {
+ h2 {
+ color: @text;
+ }
+
+ h3 {
+ border-color: @overlay1;
+ }
+ }
+
+ .userstuff blockquote {
+ border-color: @accent;
+ }
+
+ /* @svg: escape(
+ ''
+ ); */
+
+ #header .logo {
+ filter: @accent-filter;
+ }
+
+ img[src="/images/skins/iconsets/default/icon_user.png"]::before {
+ @svg: escape(
+ ''
+ );
+ content: url("data:image/svg+xml,@{svg}") !important;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .wrapper {
+ box-shadow: 1px 1px 5px @overlay0;
+ }
+
+ #symbols-key dl, dl.meta {
+ border-color: @overlay0;
+ }
+
+ .chart.statistics {
+ rect[fill="#ffffff"] {
+ fill: @surface0;
+ }
+
+ rect[fill="#cccccc"] {
+ fill: @subtext0;
+ }
+
+ rect[fill="#ebebeb"] {
+ fill: @overlay1;
+ }
+
+ rect[fill="#333333"] {
+ fill: @subtext1;
+ }
+
+ rect[fill="#993333"] {
+ fill: @accent;
+ }
+
+ text:is([fill="#444444"], [fill="#222222"]) {
+ fill: @subtext1;
+ }
+
+ text[fill="#000000"] {
+ fill: @text;
+ }
+ }
+
+ .google-visualization-tooltip {
+ background-color: @surface1;
+ border-color: @overlay0;
+
+ path {
+ fill: @surface1;
+ stroke: @overlay0;
+ }
+ }
+
+ #footer {
+ color: @subtext0;
+ background-color: @mantle;
+ background-image: unset;
+ border-color: @overlay0;
+
+ .heading {
+ color: @text;
+ }
+
+ a, button {
+ #a();
+ }
+ }
+
+ #dashboard {
+ &.own {
+ border-color: @accent;
+ }
+
+ ul {
+ border-color: @overlay0;
+ }
+
+ .current {
+ color: @base;
+ background-color: @accent;
+ }
+
+ a {
+ color: @text;
+
+ &:hover {
+ color: @base;
+ background-color: darken(@accent, 5%);
+ }
+
+ &:active, &:focus {
+ color: @base;
+ background-color: darken(@accent, 10%);
+ }
+ }
+ }
+
+ .search [role="tooltip"] {
+ color: @text;
+ background-color: @surface1;
+ border-color: @overlay0;
+ }
+
+ .dropdown {
+ background-color: transparent;
+ }
+
+ .autocomplete div.dropdown ul {
+ color: @text;
+ background-color: @surface0;
+ border-color: @overlay0;
+
+ li:hover {
+ color: @base;
+ background-color: @accent;
+ background-image: unset;
+ }
+ }
+
+ body, #main, .toggled form, .dynamic form, .secondary {
+ color: @text;
+ background-color: @base;
+ }
+
+ .splash .module h3,
+ .splash .browse li a::before,
+ .home .header h2,
+ .picture .header {
+ color: @accent;
+ border-color: @overlay1;
+ }
+
+ .listbox, fieldset fieldset.listbox {
+ background-color: @mantle;
+ border-color: @overlay0;
+ box-shadow: 0 0 0 1px @base;
+
+ > .heading {
+ color: @text;
+
+ a {
+ color: @text;
+
+ &:visited {
+ color: @lavender;
+ }
+ }
+ }
+
+ .index {
+ background-color: @surface0;
+ box-shadow: 0 0 0 1px @base;
+ }
+ }
+
+ .blurb h4 a:link, .blurb h4 img {
+ color: @accent;
+
+ &:hover {
+ color: darken(@accent, 5%);
+ }
+
+ &:active, &:focus {
+ color: darken(@accent, 10%);
+ }
+
+ &:visited {
+ color: darken(@accent, 15%);
+ }
+ }
+
+ li.blurb {
+ border-color: @overlay0;
+ }
+
+ li.relationships a {
+ background-color: fade(@overlay2, 30%);
+ }
+
+ a.tag {
+ color: @text;
+
+ &:hover {
+ color: @base;
+ background-color: @accent;
+ }
+
+ &:active, &:focus {
+ color: @base;
+ background-color: darken(@accent, 5%);
+ }
+
+ &:visited {
+ color: @base;
+ background-color: darken(@accent, 10%);
+ }
+ }
+
+ a.resp-sharing-button__link,
+ a.resp-sharing-button__link:hover {
+ color: @base;
+ }
+
+ .resp-sharing-button__icon:not(.resp-sharing-button__icon--solid) {
+ stroke: @base;
+ }
+
+ .resp-sharing-button__icon--solid {
+ fill: @base;
+ }
+
+ .resp-sharing-button--tumblr {
+ color: @text;
+ background-color: @surface0;
+ border-color: @surface0;
+
+ .resp-sharing-button__icon:not(.resp-sharing-button__icon--solid) {
+ stroke: @text;
+ }
+
+ .resp-sharing-button__icon--solid {
+ fill: @text;
+ }
+
+ &:hover, &:active {
+ background-color: @surface1;
+ border-color: @surface1;
+ }
+ }
+
+ .resp-sharing-button--twitter {
+ background-color: @sky;
+ border-color: @sky;
+
+ &:hover, &:active {
+ background-color: @sapphire;
+ border-color: @sapphire;
+ }
+ }
+
+ .resp-sharing-button--bluesky {
+ background-color: @blue;
+ border-color: @blue;
+
+ &:hover, &:active {
+ background-color: @lavender;
+ border-color: @lavender;
+ }
+ }
+
+ a:focus .resp-sharing-button--twitter {
+ background-color: @sapphire;
+ border-color: @sapphire;
+ }
+
+ a:focus .resp-sharing-button--bluesky {
+ background-color: @lavender;
+ border-color: @lavender;
+ }
+
+ a:focus .resp-sharing-button--tumblr {
+ background-color: @surface1;
+ border-color: @surface1;
+ }
+ }
+}