// ==UserScript==
// @name AO3 Dark Mode Reskin
// @name:de AO3 Dunkelmodus
// @name:fr Mode Sombre pour AO3
// @name:es Modo Oscuro para AO3
// @name:ja AO3ダークモード
// @name:zh-CN AO3暗黑模式
// @name:it Modalità Scura per AO3
// @name:ru Тёмный режим для AO3
// @name:pt-BR Modo Escuro para AO3
// @name:pt-PT Modo Escuro para AO3
// @name:ko AO3 다크 모드
// @namespace ko-fi.com/awesome97076
// @version 1
// @license MIT
// @description A modern, accessible dark theme for Ao3
// @description:de Ein modernes, zugängliches dunkles Theme für Ao3
// @description:fr Un thème sombre moderne et accessible pour Ao3
// @description:es Un tema oscuro moderno y accesible para Ao3
// @description:ja Ao3のためのモダンでアクセシブルなダークテーマ
// @description:zh-CN 为Ao3设计的现代化、易访问的暗黑主题
// @description:it Un tema scuro moderno e accessibile per Ao3
// @description:ru Современная, доступная тёмная тема для Ao3
// @description:pt-BR Um tema escuro moderno e acessível para Ao3
// @description:pt-PT Um tema escuro moderno e acessível para Ao3
// @description:ko Ao3를 위한 현대적이고 접근성 있는 다크 테마
// @author Awesome
// @match https://archiveofourown.org/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=archiveofourown.org
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
const style = document.createElement('style');
style.innerHTML = `
:root {
--background-color: #121212;
--primary-bg-color: #1c1c1c;
--secondary-bg-color: #2a2a2a;
--tertiary-bg-color: #444;
--quaternary-bg-color: #555;
--highlight-bg-color: #111111;
--hover-bg-color: #444444;
--background-primary: #121212;
--background-secondary: #1e1e1e;
--background-tertiary: #2a2a2a;
--background-highlight: #333333;
--text-color: #e0e0e0;
--text-secondary: #bbbbbb;
--text-tertiary: #999999;
--text-muted: #777777;
--link-color: rgb(21, 184, 190);
--link-visited: #c87cffcc;
--accent-primary: #e05b5b;
--accent-secondary: #b74040;
--accent-tertiary: #973535;
--ao3-red-dark: #8c1c1c;
--ao3-red-medium: #a82828;
--ao3-red-light: #c43535;
--alert-error: #cf6679;
--alert-warning: #ffe066;
--alert-success: #81c784;
--alert-info: #64b5f6;
--border-primary: #424242;
--border-secondary: #333333;
--shadow-color: rgba(0, 0, 0, 0.4);
--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
--hover-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
--transition: all 0.2s ease;
--header-background: #202020;
--footer-background: #1a1a1a;
--font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
--font-size-small: 0.9rem;
--font-size-base: 1rem;
--font-size-large: 1.3em;
--font-size-larger: 1.8rem;
--font-size-xlarge: 2.2rem;
--border-radius: 8px;
--border-radius-large: 12px
}
#header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus {
color: var(--text-color)
}
#dashboard, #dashboard.own, .error, .comment_error, .kudos_error, #header ul.primary, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, #header .primary a, #header .primary input, #header .search input {
border-color: var(--border-primary) !important
}
#header ul.primary, #footer, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover {
background:var(--background-color)
}
.actions a:visited, .action:visited, .action a:link, .action a:visited {
color: var(--text-tertiary)
}
form.verbose legend, .verbose form legend {
background: var(--background-color);
color: var(--text-color);
border: 1px solid var(--border-primary);
box-shadow: 1px 2px 3px #999
}
#outer, .javascript, .statistics .index li:nth-of-type(2n), #tos_prompt, .announcement input[type="submit"], .nomination dt {
background: var(--background-color)
}
body, html {
background: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
margin: 0;
padding: 0;
line-height: 1.5;
scroll-behavior: smooth
}
#outer {
background: var(--background-color)
}
#main {
font-size: 1.1em;
padding: 0;
margin: 0 auto;
max-width: 95%;
width: 95%;
background: var(--background-color)
}
#main.dashboard {
max-width: 85%;
width: 100%;
margin-left: 14em;
padding-left: 1em
}
h1, h2, h3, h4, h5, h6, .heading {
color: var(--text-color);
font-family: Georgia, serif;
font-weight: 400;
line-height: 1.2;
margin-bottom: 0.6em
}
p {
margin-bottom: 1em;
text-align: justify;
letter-spacing: 0.02em
}
a, a:link {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--accent-secondary);
transition: color var(--transition), border-color var(--transition)
}
a:visited {
color: var(--link-visited);
border-bottom: 1px dashed var(--accent-tertiary)
}
a:hover, a:focus {
color: var(--text-secondary);
border-color: var(--accent-tertiary);
text-decoration: none
}
a:focus, button:focus, input:focus, textarea:focus, select:focus {
outline: 2px solid var(--link-color);
outline-offset: 2px
}
#header {
background: var(--header-background);
margin: 0 0 1em;
border-bottom: 1px solid var(--border-primary);
font-size: 0.875em;
position: relative;
z-index: 100
}
#header .primary {
background: var(--ao3-red-dark);
box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.35), 1px 1px 3px -1px rgba(0, 0, 0, 0.25);
position: relative
}
#header .primary a {
color: var(--text-color);
padding: 0.429em 0.75em;
border-bottom: none;
display: inline-block
}
#header .heading a {
color: var(--ao3-red-light);
font-size: 1.714em;
line-height: 1.75em;
border-bottom: none
}
#header .dropdown .menu,#small_login {
background: var(--background-secondary);
border: 1px solid var(--border-primary);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
z-index: 101
}
#header .dropdown .menu a {
color: var(--text-color);
border-bottom: none;
display: block
}
#header .dropdown .menu a:hover,#header .dropdown .menu a:focus {
background: var(--background-highlight);
color: var(--accent-primary)
}
.header.module {
position: relative;
padding-bottom: 1em;
margin-bottom: 1em
}
.header.module ul.required-tags {
position: absolute;
left: 0;
top: 0;
width: 40px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
gap: 0.25em
}
.header.module p.datetime {
position: absolute;
right: 0;
top: 0;
margin: 0;
text-align: right;
white-space: nowrap
}
.header.module h4.heading {
margin: 0 100px 0.5em 50px;
line-height: 1.3;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto
}
.header.module h5.fandoms {
clear: both;
margin: 0.5em 0 0 0;
padding: 0;
width: 100%
}
@media (max-width: 480px) {
.header.module ul.required-tags {
position: static;
display: flex;
width: 100%;
margin-bottom: 0.5em
}
.header.module ul.required-tags li {
margin-right: 0.5em
}
.header.module h4.heading {
margin: 0.5em 0;
width: 100%
}
.header.module p.datetime {
position: static;
text-align: left;
margin: 0.5em 0;
width: 100%
}
}
.header.module ul.required-tags li span {
display: block;
width: 25px;
height: 25px
}
#footer {
background: var(--footer-background);
border-top: 2px solid var(--ao3-red-dark);
padding: 1em 0;
color: var(--text-color)
}
#footer a {
color: var(--text-color);
border-bottom: 1px solid var(--text-tertiary)
}
#footer a:hover, #footer a:focus {
color: var(--accent-primary);
background: transparent;
border-color: var(--accent-primary)
}
input, textarea, select, button {
font-family: var(--font-family)
}
input, textarea {
width: 98%;
background: var(--tertiary-bg-color);
color: var(--text-color);
border: 1px solid var(--border-primary);
border-radius: var(--border-radius);
padding: 0.5em;
transition: var(--transition)
}
input:focus, textarea:focus, select:focus {
background: var(--quaternary-bg-color) !important;
border-color: var(--link-color) !important;
color: var(--text-color) !important;
box-shadow: 0 0 0 2px rgba(21, 184, 190, 0.25) !important;
outline: none
}
select {
vertical-align: text-top;
width: 100%;
min-width: 10.5em;
appearance: none;
background: var(--tertiary-bg-color);
color: var(--text-color);
border: 1px solid var(--border-primary);
border-radius: var(--border-radius);
padding: 5px 7px;
font-size: var(--font-size-base);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding-right: 12px
}
select:hover {
background-color: var(--quaternary-bg-color);
border-color: var(--border-primary);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: scale(1.02);
z-index: 999
}
option {
background: var(--tertiary-bg-color);
color: var(--text-color);
padding: 5px
}
fieldset, form dl {
background: var(--primary-bg-color);
border: 1px solid var(--border-primary);
border-radius: var(--border-radius);
margin: 0.643em;
padding: 0.643em
}
.action, .action:link, .actions a, .actions a:link,.actions button, .actions input, .actions label,button, input[type=submit] {
background: var(--background-tertiary);
color: var(--text-color);
border: 1px solid var(--border-primary);
font-size: var(--font-size-base);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: 4px;
padding: 0.5em 1em;
box-shadow: none;
text-shadow: none
}
.action:hover, .actions a:hover, .actions button:hover,.actions input:hover, button:hover, input[type=submit]:hover {
background: var(--background-highlight);
border-color: var(--accent-primary);
color: var(--accent-primary);
transform: translateY(-1px)
}
.group-group, #main li.blurb {
display: flex;
gap: 12px;
padding: 10px;
margin: 8px 0;
border-radius: var(--border-radius-large);
background: var(--primary-bg-color);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
position: relative;
transition: all 0.2s ease;
flex-wrap: wrap;
flex-direction: column;
align-items: stretch
}
#main li.blurb:hover {
transform: scale(1.02);
box-shadow: var(--hover-box-shadow);
background: var(--secondary-bg-color)
}
.blurb .header {
display: inline-flex;
margin-bottom: 8px;
flex-direction: row;
flex-wrap: wrap;
min-height: auto
}
.blurb h4.heading a {
font-size: 1.4rem !important;
color: var(--link-color);
text-decoration: none;
transition: color var(--transition);
font-size: var(--font-size-larger);
line-height: 1.3;
max-width: 60%;
white-space: break-spaces;
border-bottom: none;
margin: 0 20px
}
.blurb h4.heading a:hover {
color: var(--text-secondary)
}
h5:nth-child(2) > a{
font-size: 1.2rem !important
}
#outer .group .heading {
font-size: 1.2rem;
margin: 0 auto;
line-height: 1.3;
order: 2;
display: inline-flex;
flex-wrap: wrap;
white-space: nowrap;
position: relative;
justify-content: center;
flex-grow: 1
}
.blurb .datetime {
font-size: 1rem;
order: 3;
position: static;
margin: 0
}
h5.heading {
order: 4 !important
}
.category-group, .relationships-group, .characters-group, .meta dd {
position: relative;
padding: 5px;
margin: 0;
border: none;
border-radius: var(--border-radius);
background: var(--secondary-bg-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
gap: 8px;
max-height: 10em;
overflow-y: auto;
font-size: 1.2rem;
overflow-x: hidden;
scrollbar-width: thin;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
max-width: 100%;
justify-content: flex-start
}
.blurb ul li, .blurb dd ul li {
border: 3px solid #000;
border-radius: var(--border-radius);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}
.blurb ul li a, .blurb dd ul li a {
border: none;
text-decoration: none;
padding: 0.2em 0.6em
}
li.relationships a {
background: none
}
a.tag {
display: inline-block;
background: var(--background-tertiary);
color: var(--text-color);
padding: 0.2em 0.6em;
margin: 0.2em;
border-radius: 3px;
border-bottom: none;
transition: background-color 0.2s ease, color 0.2s ease;
font-weight: 500;
font-size: 1.2rem;
line-height: 1.4;
white-space: nowrap;
max-height: none;
overflow: visible
}
a.tag:hover {
background: var(--accent-primary);
color: var(--text-color);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-decoration: none
}
.commas li {
display: inline-block;
margin-right: 0px;
margin-bottom: 0px
}
.commas li:after {
font-size: 6px;
content: ""
}
.tags li {
padding-left: 0;
padding-right: 0
}
dl.stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 3px;
padding: 0;
line-height: 1.4;
float: none;
clear: both;
text-align: left
}
dl.stats > div {
align-items: flex-start;
margin-right: 0.3em;
margin-bottom: 0.15em;
display: flex !important;
flex-direction: column !important
}
.words-group,.chapters-group,.comments-group,.kudos-group,.bookmarks-group,.hits-group,.collections-group,.language-group {
width: auto;
min-width: 100px;
flex-grow: 0;
flex-shrink: 0
}
.stats dt, .stats dd {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent;
width: auto;
min-width: 0;
display: inline;
clear: none;
float: none;
margin: auto
}
.blurb ul.required-tags {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
gap: 3px;
list-style: none;
padding: 0;
margin: 0;
position: relative;
opacity: 0.9;
width: auto
}
.blurb ul.required-tags li:nth-child(1) {
grid-column: 1;
grid-row: 1
}
.blurb ul.required-tags li:nth-child(2) {
grid-column: 1;
grid-row: 2
}
.blurb ul.required-tags li:nth-child(3) {
grid-column: 2;
grid-row: 1
}
.blurb ul.required-tags li:nth-child(4) {
grid-column: 2;
grid-row: 2
}
.blurb ul.required-tags li+li+li,.blurb ul.required-tags li+li+li+li {
position: relative;
left: 0
}
.blurb ul.required-tags li+li+li+li {
top: 0
}
.blurb ul.required-tags li, .blurb ul.required-tags li a, .blurb ul.required-tags li span {
border: none;
box-shadow: none
}
#workskin {
margin: 0 auto !important;
background: var(--background-primary) !important;
color: var(--text-color) !important;
padding: 1em !important;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
font-size: var(--font-size-large);
line-height: 1.6;
max-width: 72em;
overflow-x: auto;
overflow-y: hidden
}
.preface {
background: var(--background-secondary);
border-radius: 4px;
border-top: none;
padding: 1em;
margin: 1em 0;
float: none
}
.userstuff {
line-height: 1.6;
word-wrap: break-word
}
.userstuff p, .userstuff details {
margin: 1.5em 0;
padding: 0;
text-rendering: optimizelegibility
}
.userstuff a {
color: var(--accent-primary)
}
.userstuff blockquote {
background: var(--background-tertiary);
border-left: 3px solid var(--accent-primary);
padding: 1em;
margin: 1em 0;
border-radius: 0 var(--border-radius) var(--border-radius) 0
}
.userstuff h3 {
font-weight: 500;
padding: .125em;
border-bottom: .25em double var(--border-primary)
}
.userstuff code, .userstuff pre {
background: var(--background-tertiary);
color: var(---text-color);
font-family: "Monaco", "Consolas", Courier, monospace;
padding: 0.2em 0.4em;
border-radius: 3px;
border: 1px solid var(--border-primary)
}
.userstuff pre {
padding: 1em;
overflow-x: auto
}
.userstuff p:only-child:empty,.userstuff p:only-child:blank,.userstuff details:only-child:empty,.userstuff details:only-child:blank {
margin: 0;
padding: 0;
height: 0.5em;
min-height: 0.5em;
line-height: 0.5
}
ol.thread {
list-style: none;
padding: 0;
margin: 0
}
li.comment {
position: relative;
background: var(--background-secondary);
border-radius: 4px;
margin-bottom: 16px;
padding: 12px 16px;
box-shadow: 0 1px 3px var(--shadow-color);
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid var(--border-primary);
overflow: visible
}
li.comment:hover {
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2)
}
li.odd.comment {
background: var(--background-secondary)
}
li.even.comment {
background: var(--background-highlight)
}
.comment h4.byline {
background: var(--background-tertiary);
padding: 0.5em 1em;
margin: 0;
border-radius: var(--border-radius) var(--border-radius) 0 0
}
.comment .heading.byline a {
color: var(--accent-primary);
font-weight: 600;
text-decoration: none;
border-bottom: none
}
.comment .heading.byline a:hover {
text-decoration: underline
}
.comment .posted.datetime {
font-size: 0.85rem;
color: var(--text-tertiary);
margin-left: auto
}
.comment blockquote.userstuff {
clear: both;
background: var(--background-tertiary);
border-radius: var(--border-radius);
border-left: 3px solid var(--accent-primary);
padding: 12px;
margin: 10px 0;
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-color)
}
.comment blockquote.userstuff p {
margin-bottom: 0.75em
}
.comment blockquote.userstuff p:last-child {
margin-bottom: 0
}
.thread .thread {
margin-left: 2em;
border-left: 2px solid var(--border-primary)
}
ol.thread ol.thread {
margin-left: 20px;
position: relative
}
ol.thread ol.thread::before {
content: '';
position: absolute;
left: -20px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-primary);
border-radius: 1px
}
ol.thread ol.thread li.comment::before {
content: '';
position: absolute;
left: -20px;
top: 20px;
width: 18px;
height: 2px;
background: var(--border-primary);
border-radius: 1px
}
form.filters {
width: 24%;
border-radius: var(--border-radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
float: right
}
.filters .expander {
background: var(--tertiary-bg-color);
border: none;
border-radius: var(--border-radius);
color: var(--text-color)
}
.filters .expander::before {
content: "⮞";
color: var(--text-color);
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
font-size: 1em
}
.filters .expanded .expander::before {
content: "⮟";
color: var(--text-color);
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
font-size: 1em
}
.filters .expander:hover {
transform: scale(1.05);
z-index: 999
}
.filters .indicator:before {
background: var(--tertiary-bg-color);
color: var(--text-tertiary);
display: inline-block;
border: 1px solid var(--border-primary);
margin-right: .25em;
text-align: center
}
.filters .exclude .indicator:before {
content: " ✕";
padding: 2px 5px;
border-radius: 3px
}
.filters .include .indicator:before {
content: " ✓";
padding: 2px 5px;
border-radius: 3px
}
.filters .exclude .indicator:hover::before {
content: " ✕";
background-color: rgba(203, 144, 144, 0.3);
color: rgb(204, 110, 110);
padding: 2px 5px;
border-radius: 3px
}
.filters .include .indicator:hover::before {
content: " ✓";
background-color: rgba(156, 203, 144, 0.3);
color: rgb(112, 204, 110);
padding: 2px 5px;
border-radius: 3px
}
.filters .indicator span {
font-size: var(--font-size-base);
white-space: normal;
display: inline-block;
margin-left: 14px;
line-height: 1.4
}
#dashboard {
background: var(--background-secondary);
width: 11.25em;
float: left;
padding: 1em;
border-right: 1px solid var(--border-primary)
}
#dashboard a, #dashboard span {
color: var(--text-color);
display: block;
white-space: normal;
height: auto;
line-height: 2;
padding: 0.5em;
margin: 0;
border: 0;
border-radius: 3px;
background: transparent;
vertical-align: middle;
word-wrap: break-word;
box-shadow: none
}
#dashboard a:hover {
background: var(--background-highlight);
color: var(--accent-primary)
}
#dashboard .current {
background: var(--background-highlight);
color: var(--accent-primary);
border-left: 3px solid var(--accent-primary)
}
.notice, .comment_notice, .kudos_notice {
background: var(--background-secondary);
border: 1px solid var(--border-primary);
border-left: 3px solid var(--alert-info);
color: var(--text-color);
padding: 1em;
margin: 1em 0;
border-radius: 3px
}
.alert.flash, .error, .comment_error, .kudos_error {
background: var(--background-secondary);
border: 1px solid var(--border-primary);
border-left: 3px solid var(--alert-error);
color: var(--alert-error);
padding: 1em;
margin: 1em 0;
border-radius: 3px
}
.caution {
background: var(--background-secondary);
border: 1px solid var(--border-primary);
border-left: 3px solid var(--alert-warning);
color: var(--alert-warning);
padding: 1em;
margin: 1em 0;
border-radius: 3px
}
.pagination {
margin: 1em 0;
text-align: center
}
.pagination a, .pagination span {
display: inline-block;
padding: 0.3em 0.7em;
margin: 0 0.2em;
border-radius: var(--border-radius)
}
.pagination a {
background: var(--tertiary-bg-color);
color: var(--text-color);
border: 1px solid var(--border-primary)
}
.pagination a:hover {
background: var(--quaternary-bg-color);
color: var(--link-color)
}
.pagination .current {
background: var(--link-color);
color: var(--text-color);
border: 1px solid var(--border-primary)
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
background: var(--background-primary)
}
::-webkit-scrollbar-track {
background: var(--background-primary)
}
::-webkit-scrollbar-thumb {
background: var(--background-tertiary);
border-radius: 6px;
border: 3px solid var(--background-primary)
}
::-webkit-scrollbar-thumb:hover {
background: var(--background-highlight)
}
.category-group::-webkit-scrollbar,.relationships-group::-webkit-scrollbar,.characters-group::-webkit-scrollbar {
width: 6px;
height: 6px
}
.category-group::-webkit-scrollbar-thumb,.relationships-group::-webkit-scrollbar-thumb,.characters-group::-webkit-scrollbar-thumb {
border-width: 1px
}
.work.meta.group {
display: flex;
gap: 12px;
float: none;
padding: 10px;
margin: 8px 0;
border-radius: 10px;
background: var(--primary-bg-color);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
position: relative;
transition: all 0.2s ease;
flex-wrap: wrap;
align-items: baseline;
flex-direction: row
}
.work.meta.group:hover {
background: var(--secondary-bg-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-2px)
}
.meta dt {
min-width: 0;
width: 8%;
text-align: end
}
.meta dd {
width: 90%
}
.draft, .draft .wrapper, .unread, .child, .unreviewed, .unwrangled {
background: var(--tertiary-bg-color);
border: 1px dashed var(--border-primary);
border-radius: var(--border-radius);
opacity: 0.95
}
span.claimed, span.unread {
color: var(--link-color)
}
.replied, span.claimed, span.unread {
background: var(--tertiary-bg-color);
border: 1px solid var(--border-primary)
}
table {
background: var(--primary-bg-color);
border-collapse: collapse;
margin: auto;
width: 100%;
border-radius: var(--border-radius);
overflow: hidden
}
th {
background: var(--secondary-bg-color);
color: var(--text-color);
padding: 0.5em;
text-align: left;
border-bottom: 1px solid var(--border-primary)
}
td {
padding: 0.5em;
background: var(--primary-bg-color);
border-bottom: 1px solid var(--border-secondary)
}
tr:hover {
background: var(--tertiary-bg-color)
}
.group-group .userstuff {
padding: 6px;
border-radius: var(--border-radius);
background: var(--secondary-bg-color);
max-height: 13em;
overflow-y: auto;
font-size: 1.3rem;
line-height: 1.6;
min-width: 99.5%
}
.group-group::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--quaternary-bg-color), var(--secondary-bg-color), var(--highlight-bg-color));
border-radius: 10px 10px 0 0;
opacity: 0.7
}
.group-group > div:not(:last-child) {
margin-bottom: 8px
}
.announcement .userstuff a, .announcement .userstuff a:link, .announcement {
color: var(--accent-secondary)
}
.userstuff a:visited:hover {
color: var(--accent-primary)
}
@media (max-width: 768px) {
#main {
width: 92%;
padding: 0 8px
}
form.filters {
width: 100%;
float: none;
margin-left: 0;
margin-bottom: 16px
}
#dashboard {
width: 100%;
float: none;
border-right: none;
border-bottom: 1px solid var(--border-primary);
margin-bottom: 1em
}
#main.dashboard {
margin-left: 0;
padding-left: 1em
}
.meta dt {
width: 20%
}
.meta dd {
width: 75%
}
dl.stats {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
}
ol.thread ol.thread {
margin-left: 10px
}
ol.thread ol.thread::before {
left: -10px
}
ol.thread ol.thread li.comment::before {
left: -10px;
width: 8px
}
}
@media (prefers-color-scheme: dark) {
#workskin img {
box-shadow: 0 0 0 1px var(--border-primary);
border-radius: var(--border-radius)
}
}
h4.landmark, h5.landmark, .landmark, .landmark a, .index .heading.landmark {
font-size: 0;
line-height: 0;
height: 0;
margin: 0;
clear: both;
color: transparent;
opacity: 0
}
.blurb .header .heading, .blurb .header ul {
margin: .375em 5.25em 0 65px
}
.blurb .header img {
position: relative;
margin: 0
}
.delete a, span.delete {
border: 0;
color: var(--alert-error);
font-weight: 700;
margin-right: .375em;
padding: 0 .1em .15em;
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
border-radius: .875em
}
blockquote {
font-family: var(--font-family);
margin: .643em
}
blockquote p:first-child {
margin-top: 0
}
blockquote p:last-child {
margin-bottom: 0
}
*:focus {
outline: none
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 2px solid var(--link-color);
outline-offset: 2px
}
.icon, .comment .icon {
background-color: var(--primary-bg-color);
border-radius: 50%;
overflow: hidden
}
body, .toggled form, .dynamic form, .secondary, .dropdown {
background: var(--background-primary);
color: var(--text-color)
}
#header, #footer, #main, #dashboard {
background: var(--background-primary)
}
a, a:link, a:visited:hover {
color: var(--accent-primary);
border-bottom-color: var(--accent-secondary)
}
a:visited {
color: var(--link-visited);
border-bottom-color: var(--accent-tertiary)
}
a:hover, a:focus {
color: var(--accent-tertiary)
}
a:active, a:focus, button:focus {
outline: 1px dotted var(--accent-primary)
}
fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {
background: var(--background-secondary);
border-color: var(--border-secondary);
box-shadow: inset 1px 0 5px var(--shadow-color)
}
fieldset fieldset, fieldset dl dl, form blockquote.userstuff {
background: var(--background-tertiary)
}
form dt {
border-bottom-color: var(--border-secondary)
}
input, textarea, select {
background: var(--background-tertiary);
color: var(--text-color);
border-color: var(--border-primary)
}
input:focus, textarea:focus, select:focus {
background: var(--background-highlight) !important;
border-color: var(--accent-primary) !important;
box-shadow: 0 0 0 1px var(--accent-secondary)
}
.LV_invalid {
background: #efd1d1;
border-color: var(--alert-error);
color: var(--alert-error);
box-shadow: 1px 1px 2px var(--shadow-color)
}
.autocomplete div.dropdown ul {
background: var(--background-primary);
border-color: var(--border-secondary);
box-shadow: 1px 3px 5px var(--shadow-color);
color: var(--text-color)
}
.autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected {
background: var(--accent-primary);
color: var(--text-color)
}
.ui-sortable li {
background: var(--background-tertiary);
border-color: var(--border-primary)
}
.ui-sortable li:hover {
background: var(--background-highlight);
border-color: var(--border-primary);
box-shadow: 1px 1px 3px var(--shadow-color)
}
#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a {
background: var(--background-highlight)
}
#header .menu, #small_login {
background: var(--background-secondary);
box-shadow: 1px 1px 3px -1px var(--shadow-color)
}
#header .menu li {
border-bottom-color: var(--border-primary)
}
#header h2 {
border-top-color: var(--border-primary);
color: var(--text-color)
}
#dashboard ul {
border-top-color: var(--border-primary)
}
#dashboard.own {
background: transparent;
border-top-color: var(--ao3-red-dark);
border-bottom-color: var(--ao3-red-dark)
}
#main.errors {
background-position: top right;
background-repeat: no-repeat
}
#main.errors p, #main.errors .heading {
color: var(--text-color)
}
thead, tfoot {
border-bottom-color: var(--border-primary)
}
tfoot td {
border-top-color: var(--border-primary)
}
tbody tr {
border-bottom-color: var(--background-highlight)
}
thead td {
background: var(--background-tertiary);
border-bottom-color: var(--background-highlight)
}
th, tr:hover, col.name {
background: var(--background-secondary);
border-color: var(--border-primary)
}
.actions a, .actions a:link, .action, .action:link, .actions button, .actions input, input[type="submit"], button, .current, .actions label {
background: var(--background-tertiary);
color: var(--text-color);
border: 1px solid var(--border-primary);
border-bottom: 1px solid var(--border-secondary);
background-image: none;
box-shadow: none
}
.actions a:hover, .actions button:hover, .actions input:hover, .actions a:focus, .actions button:focus, .actions input:focus, label.action:hover, .action:hover, .action:focus {
color: var(--accent-primary);
border-top-color: var(--border-primary);
border-left-color: var(--border-primary);
box-shadow: inset 2px 2px 2px var(--shadow-color)
}
.actions a:active, .current, a.current, a:link.current, .current a:visited {
color: var(--text-color);
background: var(--background-highlight);
border-color: var(--text-secondary);
box-shadow: inset 1px 1px 3px var(--shadow-color)
}
.actions label.disabled {
background: var(--background-tertiary);
color: var(--text-muted)
}
li.blurb, .blurb .blurb {
border-color: var(--border-primary);
background: var(--background-secondary);
box-shadow: 0 1px 3px var(--shadow-color)
}
.blurb h4 a:link, .blurb h4 img {
color: var(--accent-primary)
}
.own, .draft, .draft .wrapper, .unread, .child, .unwrangled, .unreviewed {
background: var(--background-tertiary);
opacity: 0.95
}
span.unread, .replied, span.claimed, .actions span.defaulted {
background: var(--background-secondary);
color: var(--accent-primary);
border-color: var(--border-primary)
}
.canonical, li.requested {
font-weight: 700;
color: var(--accent-primary)
}
.draggable, .droppable, span.requested, .nominations .rejected {
color: var(--alert-error)
}
span.offered, .replied, .nominations .approved {
color: var(--alert-success)
}
.nominations .approved {
background: rgba(129, 199, 132, 0.2)
}
.nominations .rejected {
background: rgba(207, 102, 121, 0.2)
}
div.comment, li.comment {
border-color: var(--border-primary);
background: var(--background-secondary)
}
.thread .even {
background: var(--background-highlight)
}
.comment .userstuff {
color: var(--text-color)
}
.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash {
background: var(--background-secondary);
border-color: var(--alert-info);
box-shadow: inset 1px 1px 2px var(--shadow-color);
color: var(--text-color)
}
.error, .comment_error, .kudos_error, .alert.flash {
background: var(--background-secondary);
border-color: var(--alert-error);
color: var(--alert-error)
}
.caution {
border-color: var(--alert-warning);
color: var(--alert-warning)
}
.announcement .userstuff {
background: var(--background-tertiary);
border-color: var(--border-primary);
color: var(--text-color)
}
.event .userstuff {
background: var(--ao3-red-dark);
border-color: var(--ao3-red-medium);
color: var(--text-color)
}
.event .userstuff a {
color: var(--text-secondary)
}
.alert .userstuff {
background: var(--alert-warning);
border-color: var(--alert-warning);
color: #333
}
.userstuff {
color: var(--text-color)
}
.userstuff h2 {
color: var(--text-color)
}
.userstuff hr {
border-color: var(--border-primary)
}
.userstuff blockquote {
border-color: var(--border-primary)
}
dl.meta {
border-color: var(--border-primary);
background: var(--background-secondary)
}
#modal-bg {
background: rgba(0, 0, 0, 0.7)
}
#modal {
background: var(--background-secondary);
border-color: var(--background-tertiary);
color: var(--text-color);
box-shadow: 0 0 8px 0 var(--shadow-color)
}
#modal .content {
border-bottom-color: var(--border-primary)
}
a.tag:hover, .listbox .heading a.tag:visited:hover {
background: var(--accent-primary);
color: var(--text-color)
}
span.symbol {
color: var(--accent-primary);
border-color: var(--accent-primary)
}
.question a:hover {
background: var(--accent-primary);
border-color: var(--accent-secondary);
color: var(--text-color)
}
span.question {
background: var(--background-tertiary);
border-color: var(--accent-primary)
}
`;
document.head.appendChild(style);
// Function to wrap elements with a specific selector inside a div with class
function wrapElements(parent, selectors, className) {
selectors.forEach(selector => {
const elements = parent.querySelectorAll(selector);
if (elements.length > 0) {
const wrapper = document.createElement('div');
wrapper.className = className;
elements[0].parentNode.insertBefore(wrapper, elements[0]);
elements.forEach(el => wrapper.appendChild(el));
}
});
}
window.onload = function() {
// For dl.stats elements
const statsList = document.querySelectorAll('dl.stats');
statsList.forEach(dl => {
wrapElements(dl, ['.language'], 'language-group');
wrapElements(dl, ['.words'], 'words-group');
wrapElements(dl, ['.chapters'], 'chapters-group');
wrapElements(dl, ['.comments'], 'comments-group');
wrapElements(dl, ['.kudos'], 'kudos-group');
wrapElements(dl, ['.bookmarks'], 'bookmarks-group');
wrapElements(dl, ['.hits'], 'hits-group');
wrapElements(dl, ['.collections'], 'collections-group');
});
const listItems = document.querySelectorAll('li');
listItems.forEach(li => {
wrapElements(li, ['.freeforms', 'li.warnings'], 'category-group');
wrapElements(li, ['.relationships'], 'relationships-group');
wrapElements(li, ['.characters'], 'characters-group');
wrapElements(li, ['.userstuff, .characters-group, .relationships-group, .category-group'], 'group-group');
});
};
})();
