ao3-dyslexia/dyslexia-dark.css
2022-04-01 15:37:46 +02:00

1839 lines
34 KiB
CSS

@charset "UTF-8";
/*
===========================
General font and text stuff
===========================
*/
h1,
h2,
h3,
h4,
h5,
h6,
.heading {
/*
-----------------TITLE FONT-----------------
This is the font for the titles, not for the body of text.
If you want to change it remember to provide fallback fonts
(something like 'serif' or 'sans-serif', separated by a comma)
*/
font-family: Verdana, "Trebuchet MS", Calibri, sans-serif;
border-bottom: none;
font-weight: bolder;
}
body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button,
blockquote,
.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander,
.bookmark .user .meta,
.datetime,
a.work,
span.symbol, .splash .news .meta, select {
/*
-----------------MAIN FONT-----------------
This is the font for the entire body of text. If you need to change it please do it here
Please also remember to provide fallback fonts
(something like 'serif' or 'sans-serif', separated by a comma)
*/
font-family: Verdana, "Trebuchet MS", Calibri, sans-serif;
}
#footer li,
.comment .userstuff, .blurb dl.stats,
.actions li a,
.actions li input,
.actions li input[type=submit],
input[type=submit],
.actions li .current,
.actions li label,
#header .primary .menu a,
#header .primary .menu .current,
form.search input[type=text],
dd.autocomplete li.input,
input[type=radio],
input[type=checkbox],
input[type=file],
input.number,
p input,
p select,
.heading select,
li select,
input:focus,
select:focus,
textarea:focus,
textarea,
p.type,
.meta dd, #workskin,
.blurb .userstuff,
.news .userstuff,
.system .userstuff,
.collection blockquote.userstuff, #header h1,
#header,
#outer.wrapper,
#inner.wrapper,
#modal,
.filters .expander, .qtip-content, h5,
h6,
h4.viewed, p.note, blockquote, body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button, #main, select {
/*
-----------------TEXT SIZE-----------------
This sets the default text size
if you need to increase or decrease, please keep in mind that "em"
as a measurement changes A LOT between numbers, so you might want to try
decimals like 1.1em, 1.2em, 1.15em before going a number up (or down)
*/
font-size: 1.05em;
}
.home .header h2,
.preface h3,
.faq .categories h3,
.userstuff h3,
#footer a {
/*
Removes all the underlines from titles
*/
border-bottom: none;
}
#chapters,
#chapters p,
textarea,
#footer li,
.preface.group blockquote.userstuff,
.preface.group blockquote.userstuff p,
.comment .userstuff, #workskin,
.blurb .userstuff,
.news .userstuff,
.system .userstuff,
.collection blockquote.userstuff,
#inner.wrapper,
#modal, h3, .filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander, .userstuff li, .userstuff ul, .userstuff p, .userstuff h2, .userstuff h1, .userstuff h3, .userstuff h4, p.note, blockquote, body,
input,
.toggled form,
.dynamic form,
.secondary,
.dropdown,
button, #main, select {
/*
-----------------LINE HEIGHT-----------------
This is the line height of the text.
if you need to increase or decrease, please keep in mind that "em"
as a measurement changes A LOT between numbers, so you might want to try
decimals like 1.7em, 1.5em, 1.65em before going a number up (or down)
*/
line-height: 1.8em;
}
.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander {
/*
a smaller text for the filters
just remove the font-size line if you want it bigger
*/
font-size: 0.84em;
}
h4.heading {
/*ALLTHETITLESSSS*/
font-size: 1.640625em;
font-weight: bolder;
}
h4 {
/* should this be here if I reset it later? */
font-size: 1.3125em;
}
h4.heading .datetime {
/* slightly bigger date on blurbs*/
padding: 5px;
font-size: 0.5376em;
}
.preface a:hover {
text-decoration: none;
}
#header {
/*
font size of the stuff in the header menu
*/
font-size: 1.05em;
}
.news h4.heading {
margin: 0;
}
code, pre {
font-family: "Courier New", Courier, Monospace;
font-size: 1.05em;
padding: 1em 0.5em;
}
html,
body,
div,
span,
applet,
object,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
.filters dt,
.filters dd,
.filters input[type=submit],
.filters .expander {
/*
for some weird reason this is needed
or fonts just won't behave
*/
font-size: 100%;
}
h1,
h2 {
/*
thicc titley titles
*/
font-size: 2.05078125em;
font-weight: 600;
}
h3 {
/*
other titley titles, not as thicc
*/
font-size: 1.640625em;
}
.blurb dl.stats,
.actions li a,
.actions li input,
.actions li input[type=submit],
input[type=submit],
.actions li .current,
.actions li label,
#header .primary .menu a,
#header .primary .menu .current,
form.search input[type=text],
dd.autocomplete li.input,
input[type=radio],
select,
input[type=checkbox],
input[type=file],
input.number,
p input,
p select,
.heading select,
li select,
input:focus,
select:focus,
textarea:focus,
input,
p.type,
.meta dd, #chapters,
#chapters p,
textarea,
#footer li,
.preface.group blockquote.userstuff,
.preface.group blockquote.userstuff p,
.userstuff p,
.comment .userstuff, #workskin,
.blurb .userstuff,
.news .userstuff,
.system .userstuff,
.collection blockquote.userstuff, body,
#header,
#outer.wrapper,
#inner.wrapper,
.secondary,
#modal,
.filters .expander {
/*
-----------------WORD SPACING-----------------
This sets the spacing between words
if you need to increase or decrease, please keep in mind that "em"
as a measurement changes A LOT between numbers, so you might want to try
decimals like 0.22em, 0.25em, 0.3em before going a number up (or down)
*/
word-spacing: 0.15em;
}
.blurb dl.stats,
.actions li a,
.actions li input,
.actions li input[type=submit],
input[type=submit],
.actions li .current,
.actions li label,
#header .primary .menu a,
#header .primary .menu .current,
form.search input[type=text],
dd.autocomplete li.input,
input[type=radio],
select,
input[type=checkbox],
input[type=file],
input.number,
p input,
p select,
.heading select,
li select,
input:focus,
select:focus,
textarea:focus,
input,
textarea,
p.type,
.meta dd, body,
#header,
#outer.wrapper,
#inner.wrapper,
.secondary,
#modal,
.filters .expander {
/*
-----------------LETTER SPACING-----------------
This sets the spacing between letters
if you need to increase or decrease, please keep in mind that "em"
as a measurement changes A LOT between numbers, so you might want to try
decimals like 0.025em, 0.03em, 0.035em before going a number up (or down)
*/
letter-spacing: 0.04em;
}
#chapters,
#chapters p,
textarea,
#footer li,
.preface.group blockquote.userstuff,
.preface.group blockquote.userstuff p,
.userstuff p,
.comment .userstuff, div#comments_placeholder, .blurb dl.stats, #workskin,
.blurb .userstuff,
.news .userstuff,
.system .userstuff,
.collection blockquote.userstuff {
/*
-----------------TEXT ALIGNS TO LEFT-----------------
This sets the text alignment.
you can change it to justify, right or center.
*/
text-align: left;
}
#workskin {
/*
Trying to override potential workskins so that the text is never justified
*/
text-align: left !important;
}
div#comments_placeholder, #workskin,
.blurb .userstuff,
.news .userstuff,
.system .userstuff,
.collection blockquote.userstuff {
/*
-----------------PARAGRAPH WIDTH-----------------
This sets the width of the reading paragraphs.
It sets a percentage according to the width of the screen
(reduce or increase the percentage of width: 70%; to change this. remember the semicolon.)
but it doesn't allow it to go over a certain amount of width, so that even HUGE screens
will have a maximum width for the text.
(reduce or increase this by changing the number on the max-width: 45em; remember the semicolon.)
It is reset on the mobile skin to 100%
*/
width: 70%;
max-width: 45em;
}
.comment .userstuff {
/*
resets the width of the paragraph comments after being reduced as a part of .userstuff
*/
width: 95%;
}
.blurb .userstuff {
/*
It gives a bit of space on top and at the bottom of the summary in the blurb
*/
padding: 20px 0;
}
.userstuff p {
/*
Sets how far paragraphs should be from each other in text
if you need to increase or decrease, please keep in mind that "em"
as a measurement changes A LOT between numbers, so you might want to try
decimals like 2.5em, 2.3em, 2.8em before going a number up (or down)
remember to leave " auto;" or wonky stuff will happen to the width of your paragraphs
*/
margin: 2em auto;
}
/*
Basic fic formatting
(bold,
italics
and underline)
*/
u,
acronym[title], abbr[title] {
/*
--------UNDERLINE---------
To remove the colored underline from the skin just remove
the following 2 lines (border-bottom etc etc and padding-bottom etc etc)
This will leave a nice, readable bold text
*/
/* start deleting here -> */
border-bottom: 2px solid #3aacff;
padding-bottom: 4px;
/* <- stop deleting here for the underline thingy! Leave the rest*/
text-decoration: none;
font-weight: 700;
}
b,
strong {
font-weight: 700;
}
/*
--------ITALICS---------
The following code remove all the italics and changes
them into bold instead for easier dyslexia reading.
This will override what the fic author's decided to use.
If you prefer you can delete it and all will return to normal
*/
/* start deleting here -> */
i,
em,
cite {
font-style: normal;
font-weight: 700;
}
/* <- Stop deleting here for the italics thingy*/
.userstuff blockquote {
/*
blockquotes in fics/newsposts/FAQs have a colored border on the left
*/
border-inline-start: 2px solid #3aacff;
}
/*
========
Buttons!
========
*/
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.event .userstuff, .notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
.dynamic form,
.ui-draggable form, #header .primary,
.group.listbox,
fieldset fieldset.listbox,
#main li.blurb,
.wrapper,
#dashboard .secondary,
.secondary,
form blockquote.userstuff,
.thread .comment,
.toggled form,
.listbox .index,
form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
span.question,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
.delete a,
span.delete,
#header ul.primary, .ui-sortable li, input, .actions input,
input[type=submit],
textarea, .actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
/*
This resets the shadows in several places
*/
box-shadow: none;
}
.announcement blockquote.userstuff, #footer,
.autocomplete .dropdown ul li:hover,
li.selected,
.autocomplete a:hover, form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend, input, .actions input,
input[type=submit],
textarea, .actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
/*
This resets the background image from default skin in several places
*/
background-image: none;
}
.actions input,
input[type=submit],
textarea, .actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
/*
Further 3d elements to reset in webkit browsers
*/
-webkit-appearance: none;
}
form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
.actions a,
.actions a:link,
.action,
.action:link,
input[type=submit],
button,
.current,
.actions label, .notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
.toggled form,
.dynamic form,
.ui-draggable form {
/* Sets the style for border buttons */
border: none;
}
.actions a,
.actions a:link,
.action,
.action:link,
button,
.current,
.actions label {
border: none;
}
input {
width: 96%;
border: 1px solid;
}
.actions a:hover,
a:hover,
.actions input:hover,
#dashboard a:hover,
.actions a:focus,
.actions input:focus,
#dashboard a:focus,
.actions a:active,
.current,
a.current,
.current a:visited,
#dashboard .current,
#outer .current,
#header .current,
span.unread,
.replied,
span.claimed,
dl.index dd,
.own,
.draft,
.draft .unread,
.child,
.unwrangled,
.unreviewed,
.ui-sortable li:hover,
#header .primary .menu .current {
/* resets the border color */
border-color: initial;
/* extra aggressive shadow removing */
box-shadow: none !important;
}
form .notice,
form ul.notes,
form.verbose legend,
.verbose form legend,
.actions a,
.actions a:link,
.action,
.action:link,
input[type=submit],
button,
.current,
.actions label {
border-bottom: none;
}
.listbox .index,
.dashboard .listbox .index,
.splash .news li,
form dt,
.picture .header {
/*
some stuff needs some aggressive non-bordering
*/
border: none;
border-bottom: none;
border-top: none;
border-left: none;
border-right: none;
}
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.event .userstuff {
/*
removes some more effects of default skin
*/
filter: none;
}
.autocomplete input,
.autocomplete .dropdown ul li {
min-width: 10px;
}
fieldset.work.meta .fandom.required ul.autocomplete {
background: transparent;
}
/*
===============================
Borders and boxes in the layout
===============================
*/
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.listbox,
.listbox .index,
fieldset fieldset.listbox,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
form.verbose legend,
.verbose form legend,
li.blurb,
li.comment,
.comment h4.byline,
dl.index dd,
form blockquote.userstuff,
table,
tr,
th,
td,
thead,
tfoot,
.reading h4.viewed,
li.relationships a,
#bookmark_form_placement form,
#collection-form form, .nomination dt {
/*
it removes the color background
where it's set in Ao3's default skin
*/
background: transparent;
}
.secondary,
dl.meta,
li.post.group,
.faq .example,
.guideline .example,
tr:hover,
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.listbox,
fieldset fieldset.listbox,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
form.verbose legend,
.verbose form legend,
li.blurb,
li.comment, #bookmark_form_placement form,
#collection-form form {
/*
sets the border shapes
*/
border: none;
border-radius: 5px;
}
th,
thead,
tbody tr {
/*
sets the border shapes
*/
border: none;
}
li.post.group {
/*
posts social distancing
*/
padding: 10px;
}
.splash .news li:last-of-type {
/*
last news post in the home page has inexplicabbly a border-bottom
this removes it
*/
border-bottom: none;
border-radius: 5px;
}
tr,
th,
td,
thead,
tfoot {
/*
this is for tables
*/
vertical-align: middle;
}
col.name {
background: transparent;
}
.bookmark .user,
.filters dl,
.filters dt,
dl.index dd,
div.comment,
#modal,
#dashboard.own,
#dashboard ul,
.autocomplete div.dropdown ul,
.event .userstuff,
#dashboard.own,
#dashboard ul,
.splash .module h3,
.comment div.icon,
a,
a:link,
a:visited:hover, .alert .userstuff {
/* remove borders */
border: none;
}
#dashboard.own,
#dashboard ul,
.splash .module h3,
.comment div.icon,
a,
a:link,
a:visited:hover {
/*
further removes borders to those classes where there's a top and bottom border
set in ao3's default skin
*/
border-top: none;
border-bottom: none;
}
span.symbol {
/*
what the hell does this change I can't remember
*/
color: initial;
border: 1px solid;
vertical-align: middle;
}
.blurb .header img, #workskin h2.heading img {
/*
Aligns vertically the little lock next to the title in the blurb
it also gives a bit of a space enough to have a background if needed in dark mode, later
*/
vertical-align: baseline;
padding: 3px;
border-radius: 3px;
}
/*
I make the icons smaller,
and as such a few things need to be
properly positioned
*/
.icon {
height: 80px;
width: 80px;
}
.tag .primary .icon,
.tagset .primary .icon {
background: url(/images/imageset.png) -10px -285px;
}
.skins .primary .icon {
background: url(/images/imageset.png) -10px -185px;
}
.comment h4.byline {
padding: 0.25em;
}
.abbreviated h4.byline {
padding-left: 0.25em;
}
.comment div.icon {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.comment .icon .visitor {
background: url(/images/imageset.png) no-repeat -10px -85px;
display: block;
}
/*end of stuff regarding the icon resizing*/
.comment .posted {
/*
positions the date of a comment
*/
display: block;
float: none;
}
.group.listbox {
border: 1px solid transparent;
}
#bookmark_form_placement form,
#collection-form form {
border: none;
}
.fandom .group.listbox {
width: 100%;
}
form.inbox {
overflow-x: initial;
}
#dashboard {
/*this deals with the border on ipad*/
border-color: transparent;
}
.LV_invalid, .qtip-content {
/*tooltips in tagsets and error messages in forms*/
background: #f64e5b;
border: none #f64e5b;
color: #1c232d;
border-radius: 5px;
box-shadow: none;
z-index: 1;
}
.qtip-content {
/*tooltips in tagsets*/
border-radius: 0 5px 5px;
}
.LV_invalid:before {
border-color: #f64e5b transparent;
border-width: 0 0.643em 0.643em;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
border-color: #f64e5b;
}
#bookmark-form,
#collection-form {
margin-top: 20px;
}
/*
======================
General settings
======================
*/
div#comments_placeholder, #main.system h2.heading,
#main.system h3.heading,
.userstuff img, #workskin,
.blurb .userstuff,
.news .userstuff,
.system .userstuff,
.collection blockquote.userstuff {
/*
This centers elements that need to be centered
*/
margin: auto;
}
/*
==========
Header
==========
*/
#outer.wrapper,
#header {
/*
Resets line height for the header
so it all aligns properly
*/
line-height: normal;
}
#header .logo,
#header .heading sup,
#greeting p.icon {
/*
hides Ao3 Logo in the header,
the user's avatar in the header
and the 'beta' bit too.
so that everything is a little more clear.
*/
display: none;
}
#header .heading {
/*
gives a decent space on the left to Ao3's logo in the header
*/
margin-left: 2em;
}
#header h1 {
/*
Ao3 Logo is boldy
*/
font-weight: 700;
}
#login,
#greeting {
/*
gives a decent space on top to the user's menu in the header
*/
margin-top: 10px;
}
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu {
/*
Makes the dropdown menu bigger,
since the font used in this theme is huge
*/
width: 25em;
}
/*
=============
News Posts
Collections
FAQs
=============
*/
.news .wrapper,
#main.system h2.heading,
#main.system h3.heading,
#header h2.collections,
#header h2 {
/*
centers a few kind of titles (collections, news posts, FAQs...)
*/
text-align: center;
}
.userstuff img {
/*
Regarding icons in news posts
*/
max-width: 90%;
}
#main.system h2.heading,
#main.system h3.heading,
.userstuff img {
/*
needs this as blocks or will never center
*/
display: block;
}
#header h2.collections,
#header h2 {
/*
resetting ao3 default skin's border on top of collection's header
*/
border-top: none;
}
.home .header .userstuff,
.home .header dl.stats,
.home .header .type {
/*
Collection pages have a weird margin left??? why??
*/
margin-left: initial;
}
/*
========
Blurb
========
*/
/*
-----------------TAGS-----------------
This is what makes the tag having a border!
If you want to remove the border please delete all these lines
*/
/* start deleting here -> */
a.tag,
a.tag:visited,
a.tag:link {
display: inline-block;
padding: 3px 7px;
margin: 4px 0px;
border: 2px solid #3aacff;
border-radius: 5px;
}
.commas li:after {
content: "";
}
h5.fandoms.heading {
/*this removes the commas in the fandom tags (yeah, it's weird)*/
color: transparent;
}
.favorite a.tag {
border: none;
}
/* <- stop deleting here for the tag thingy */
.blurb dl.stats {
/*
puts stats on the left of the blurb
*/
float: initial;
}
.meta ul li {
padding-left: 0;
}
#header .primary a {
/*colors of the primary menu links*/
color: #edf1f9;
}
.blurb ul li,
.blurb dd ul li,
.meta dd ul li {
/*
paginates better the tags, so that they tend to not break lines mid-tag.
it's a readibility thing related to the border for the tags
*/
display: inline;
margin: 0;
}
.notice a,
.notice a:link,
.notice a:visited,
.announcement a,
.announcement a:link,
.announcement a:visited {
text-decoration: underline;
}
/*
============
Filters!
============
*/
.filters fieldset {
padding: 0px;
}
.filters .expander,
.filters .expanded .expander {
/*
sets the spacing and font of the filter expander text
*/
padding: 0px;
font-size: 1.05em;
background: none;
}
.filters .expander::before {
/*
This is the arrow for the filters
*/
content: "➙";
}
.filters .expanded .expander::before {
/*
This is the arrow for the filters when expanded
*/
content: "➘";
}
.filters input:checked + .indicator + span {
/*
resets the weight from the Ao3 default skin
*/
font-weight: inherit;
}
/*
=================
Forms
=================
*/
/*
This is the very complicated code for the checkboxes and the radio
yes I hate it too.
*/
.filters [type=radio] + .indicator:before,
.filters [type=radio]:checked + .indicator:before,
.filters [type=checkbox] + .indicator:before,
.filters .exclude [type=checkbox] + .indicator:before,
.filters [type=checkbox]:checked + .indicator:before,
.filters .exclude [type=checkbox]:checked + .indicator:before,
input[type=checkbox],
input[type=radio],
input[type=checkbox]:checked,
input[type=radio]:checked,
.actions input[type=checkbox]:checked,
label.action input[type=checkbox]:checked,
input[type=checkbox]:hover,
.actions input[type=checkbox]:hover {
/*
sets the size of the checkboxes and radio boxes around the website
including filters
*/
width: 0.9em;
height: 0.9em;
}
input[type=radio] {
border-radius: 50%;
}
.filters [type=radio] + .indicator:before {
content: "";
vertical-align: -0.125em;
background: none;
background-color: #43566b;
border: none;
}
.filters [type=radio]:checked + .indicator:before {
content: "";
vertical-align: -0.125em;
background: none;
background-color: #3aacff;
border: none;
}
.filters [type=checkbox] + .indicator:before,
.filters .exclude [type=checkbox] + .indicator:before {
content: "";
padding: 0px;
border-radius: 0px;
vertical-align: -0.125em;
background: none;
background-color: #43566b;
border: none;
}
.filters [type=checkbox]:checked + .indicator:before,
.filters .exclude [type=checkbox]:checked + .indicator:before {
content: "";
padding: 0px;
border-radius: 0px;
vertical-align: -0.125em;
background: none;
background-color: #3aacff;
border: none;
}
.filters .exclude [type=checkbox]:checked + .indicator:before {
/*
the exclude filters have a different color when checked
*/
background-color: #f64e5b;
}
input[type=checkbox],
input[type=radio],
.actions input[type=checkbox],
label.action input[type=checkbox] {
background-color: #43566b;
border: none #a8b5c4;
}
input[type=checkbox],
input[type=radio],
input[type=checkbox]:checked,
input[type=radio]:checked,
.actions input[type=checkbox]:checked,
label.action input[type=checkbox]:checked,
input[type=checkbox]:hover,
.actions input[type=checkbox]:hover {
/*
removes browser-specific appearance of checkboxes and radio
*/
display: inline-block;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type=checkbox]:checked,
input[type=radio]:checked,
.actions input[type=checkbox]:checked,
label.action input[type=checkbox]:checked {
background-color: #3aacff;
border: none;
}
input[type=checkbox]:hover,
.actions input[type=checkbox]:hover, .filters [type=checkbox]:hover + .indicator:before,
.filters [type=radio]:hover + .indicator:before,
.filters .exclude [type=checkbox]:hover + .indicator:before {
background-color: #3e8ac4;
border: none;
}
.filters dt {
min-width: auto;
}
.filters {
font-size: 90%;
}
form.search input[type=text],
dd.autocomplete li.input,
input[type=radio],
select,
input[type=file],
input.number,
p select,
.heading select,
li select,
input:focus,
select:focus,
textarea:focus,
input,
textarea {
/*
sets the color of most forms
*/
border-top-color: #43566b;
border-color: #43566b;
background-color: #43566b;
border-radius: 5px;
}
p input, input[type=checkbox] {
border-top-color: #43566b;
border-color: #43566b;
background-color: #43566b;
}
.filters [type=radio] + .indicator:before,
.filters [type=checkbox] + .indicator:before,
.filters .exclude [type=checkbox] + .indicator:before {
/*
filter related checkboxes and radio
*/
background-color: #43566b;
}
.filters .exclude [type=checkbox]:checked + .indicator:before {
/*
Exclude filters when checked have the same color of alerts
*/
background-color: #f64e5b;
}
.javascript {
/*
Sets the background color in the filters on mobile
*/
background-color: #334151 !important;
}
.announcement input[type=submit],
.announcement .action {
/*
no idea what this is but it does something I guess
it was probabbly related to some announcement bar it appeared at some point
*/
border: 1px solid #a8b5c4;
}
.ui-draggable form {
/*
This sets a shadow in the comment reply form that is floaty in some pages
*/
box-shadow: 0 0 3px #43566b;
}
.filters .expander,
.filters .expanded .expander {
/*
these are the buttons to open the filters
*/
border: none #3aacff;
border-radius: 5px;
margin-top: 10px;
}
/*
===========
Colors
===========
*/
#header a,
#header a:visited,
#header .current,
#header .primary .open a,
#header .primary .dropdown:hover a,
#header .primary .dropdown a:focus, .notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.required .autocomplete,
.autocomplete .notice,
#header h2.collections,
#header h2, .alert .userstuff, body,
#header,
#outer.wrapper,
#inner.wrapper,
.secondary,
#modal,
.filters .expander, .userstuff h1, .userstuff h2, .userstuff h3, .userstuff h4, .userstuff h5, .userstuff h6, span.unreviewed.symbol, ul.notes li::marker, a.tag,
a.tag:visited,
a.tag:link, .actions a,
.actions a:link,
.actions a:visited,
.action,
.action:link,
.actions input,
input[type=submit],
button,
.current,
.actions label,
.listbox > .heading,
.listbox .heading a:visited,
form dd.required,
.filters dt,
.filters dd,
.filters input[type=submit],
#header .primary .menu a,
#header .primary .menu .current, #outer .current, label, .autocomplete li.added, .post .meta dd ul li.added,
.dropdown,
.splash .favorite li:nth-of-type(odd) a, .statistics .index li:nth-of-type(even),
input#site_search:focus,
#header #search input:focus,
.autocomplete div.dropdown ul,
.toggled form,
.dynamic form, .ui-sortable li:hover, .ui-sortable li, form.search input[type=text],
dd.autocomplete li.input,
input[type=radio],
select,
input[type=file],
input.number,
p select,
.heading select,
li select,
input:focus,
select:focus,
textarea:focus,
input,
textarea, p input, input[type=checkbox], .announcement input[type=submit],
.announcement .action {
/*
-----------------TEXT COLOR-----------------
This is the main text color for all the body of text
Use a hex color picker to change this!
*/
color: #edf1f9;
}
body,
#header,
#outer.wrapper,
#inner.wrapper,
.secondary,
#modal,
.filters .expander, .announcement input[type=submit],
.announcement .action {
/*
-----------------BACKGROUND COLOR-----------------
This sets the main background color
Use a hex color picker to change this!
*/
background-color: #1c232d;
background: #1c232d;
}
.actions a,
.actions a:link,
.actions a:visited,
.action,
.action:link,
.actions input,
input[type=submit],
button,
.current,
.actions label,
.dropdown,
.splash .favorite li:nth-of-type(odd) a, .statistics .index li:nth-of-type(even),
input#site_search:focus,
#header #search input:focus,
.autocomplete div.dropdown ul,
.toggled form,
.dynamic form,
.secondary, .ui-sortable li:hover, .ui-sortable li, #dashboard .current,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header #search input,
tr:hover,
#outer .current {
/*
This sets the secondary background color
Use a hex color picker to change this!
*/
background-color: #2f4258;
background: #2f4258;
}
a,
a:link,
a:visited,
a.tag,
a.tag:visited,
a.tag:link,
.listbox .index a:link,
.listbox .index a:visited,
.listbox .index a,
#header .heading a,
.splash .module h3,
.blurb h4 a:link,
.blurb h4 a,
.blurb h4 a:visited,
#dashboard a,
#dashboard span,
#header .user a:hover,
#header .user a:focus,
#header .user .current,
li::marker,
.draggable,
.droppable {
/*
-----------------ACCENT COLOR-----------------
This is the accent text color for all the links and titles and other stuff that
is colored differently from the body of text
Use a hex color picker to change this!
*/
color: #3aacff;
}
#footer,
a:hover,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
#dashboard a:hover,
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
.blurb h4 a:hover,
a:visited:hover,
input[type=submit]:hover,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.event .userstuff,
.event .userstuff a,
.event .userstuff a:link,
.event .userstuff a:visited,
.listbox .index a:hover,
.autocomplete .dropdown ul li:hover,
li.selected, .filters [type=radio]:checked + .indicator:before,
.filters [type=checkbox]:checked + .indicator:before,
.filters .exclude [type=checkbox]:checked + .indicator:before, .filters .expander,
.filters .expanded .expander {
/*
This sets the accent color to the backgrounds.
like buttons, footer and stuff like that.
Use a hex color picker to change this!
*/
background-color: #3aacff;
}
#header .primary {
background: #212d3b;
}
#footer,
a:hover,
a.tag:hover,
.listbox .heading a.tag:visited:hover,
#dashboard a:hover,
.actions a:hover,
.actions input:hover,
.actions a:focus,
.actions input:focus,
label.action:hover,
.action:hover,
.action:focus,
.splash .favorite li:nth-of-type(odd) a:hover,
.splash .favorite li:nth-of-type(odd) a:focus,
.blurb h4 a:hover,
a:visited:hover,
input[type=submit]:hover,
#header .dropdown .menu a:hover,
#header .dropdown .menu a:focus,
.event .userstuff,
.event .userstuff a,
.event .userstuff a:link,
.event .userstuff a:visited,
.listbox .index a:hover,
.autocomplete .dropdown ul li:hover,
li.selected, li.dropdown, .notice a,
.notice a:link,
.notice a:visited,
.announcement a,
.announcement a:link,
.announcement a:visited, .filters .expander,
.filters .expanded .expander {
/*
Related to the previous classes, this colors the text in a way that it can
be read on the accent color background
Use a hex color picker to change this!
*/
color: #1c232d;
}
::-moz-selection,
::selection,
::-webkit-selection {
background-color: #3aacff;
color: #1c232d;
}
.notice,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.required .autocomplete,
.autocomplete .notice,
#header h2.collections,
#header h2, .alert .userstuff {
/*
This is the background color of the notices, alert, comment errors and stuff like that
*/
background-color: #bbe1fe;
background: #bbe1fe;
}
.required,
.error,
.alert.flash,
.nominations .rejected, .alert .userstuff {
/*
This sets the warning text color for alerts, error, and stuff like that
*/
color: #f64e5b;
}
a.modal.help:hover {
background-color: transparent;
}
fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff,
.listbox,
fieldset fieldset.listbox,
.own,
.draft,
.draft .wrapper,
.unread,
.child,
.unwrangled,
.unreviewed,
form.verbose legend,
.verbose form legend,
.secondary,
th,
thead,
tbody tr,
.wrapper,
li.blurb,
fieldset,
form dl,
dl.meta,
li.post.group,
.splash .news li:last-of-type,
li.comment,
.faq .example,
.guideline .example,
#bookmark_form_placement form,
#collection-form form {
/*
this sets the borders color
Use a hex color picker to change this!
*/
border-color: #a8b5c4;
}
/*
These next 3 are related to exchanges.
They modify the colors in the sign-up list
*/
span.offered.requested {
color: #faad14;
}
span.offered,
.replied,
.nominations .approved {
color: #00ad97;
}
span.requested,
.nominations .rejected {
color: #f64e5b;
}
fieldset,
li.blurb,
.wrapper,
li.comment,
#main li.blurb,
div#user-fandoms,
.draft, li.post.group,
.fandom .group.listbox,
#bookmark_form_placement form,
#collection-form form {
background-color: #212d3b;
border-radius: 5px;
}
form.verbose legend {
background-color: #43566b;
}
.notice, .announcement,
.comment_notice,
ul.notes,
.caution,
.error,
.comment_error,
.alert.flash,
.required .autocomplete,
.autocomplete .notice,
#header h2.collections,
#header h2 {
color: #1c232d;
}
.thread .even {
/*comments alternate*/
background-color: #43566b;
}
#outer .pagination .current {
color: #3aacff;
background: #263343;
}
#footer .heading, #footer a, #footer {
/*changes the color of the footer text. Necessary for squidgeworld*/
color: #1c232d;
}
.blurb .header img {
background-color: #edf1f9;
}