mirror of
https://github.com/electricalice/Ao3-dyslexia.git
synced 2026-03-11 08:55:26 +00:00
412 lines
6.4 KiB
CSS
412 lines
6.4 KiB
CSS
/*
|
|
======================
|
|
General settings
|
|
======================
|
|
*/
|
|
body,
|
|
#header,
|
|
#outer.wrapper,
|
|
#inner.wrapper,
|
|
.secondary,
|
|
#modal,
|
|
.filters .expander {
|
|
/*
|
|
-----------------TEXT SIZE-----------------
|
|
|
|
This is the size of the body of the font on mobile.
|
|
please increase or decrease by decimals
|
|
like 1.2em 1.1em or 1.5em
|
|
*/
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.userstuff {
|
|
/*
|
|
don't change this if you are looking to change the font.
|
|
That option is a few lines before this one. (It's commented)
|
|
*/
|
|
font-size: 110%;
|
|
}
|
|
|
|
#footer .heading,
|
|
.comment h4.byline,
|
|
.home .header .userstuff,
|
|
.home .header dl.stats,
|
|
.home .header .type,
|
|
.blurb dl.tags dd,
|
|
dl.meta dd, h4.heading {
|
|
/*
|
|
This allows words to break.
|
|
Used in cases of long user names and long words
|
|
that otherwise would break the entire layout
|
|
*/
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Titles
|
|
===========
|
|
*/
|
|
h4 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h2,
|
|
h2.heading {
|
|
font-size: 1.8em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h5.fandoms.heading,
|
|
.news h4.heading,
|
|
#footer h4.heading,
|
|
.comment h4.heading {
|
|
/*
|
|
changes back the other titles
|
|
*/
|
|
margin: 0px !important;
|
|
}
|
|
|
|
.user h2.heading,
|
|
.admin h2.heading, .collection h2.heading {
|
|
/*
|
|
Centers Usernames and titles in admin pages and collections
|
|
*/
|
|
margin: 10px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Header
|
|
===========
|
|
*/
|
|
#header .user .open a:focus {
|
|
/*
|
|
This changes the color of the texts in the menu when it's selected
|
|
For some reason it's changed by Ao3 in the mobile version and not on the desktop skin
|
|
|
|
Change this to the color you are using for your links
|
|
*/
|
|
color: #4675C0;
|
|
}
|
|
|
|
#header .primary {
|
|
/*
|
|
better spacing in the header
|
|
*/
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#header li {
|
|
/*
|
|
Makes the header items nicely ordered
|
|
*/
|
|
display: inline-block;
|
|
}
|
|
|
|
#header .heading {
|
|
/*
|
|
Centers the primary menu
|
|
*/
|
|
margin-left: auto !important;
|
|
margin-right: auto;
|
|
display: block;
|
|
float: none;
|
|
font-size: 0.8em;
|
|
padding: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#login,
|
|
#greeting {
|
|
/*
|
|
Centers the user menu
|
|
*/
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
float: none;
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
#header .menu,
|
|
#small_login,
|
|
#header .dropdown:hover .current + .menu,
|
|
#header .menu,
|
|
#small_login,
|
|
#header .dropdown:hover .current + .menu {
|
|
/*
|
|
makes the menu large to fit the screen
|
|
*/
|
|
width: 100% !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
position: fixed;
|
|
}
|
|
|
|
#header .menu,
|
|
#small_login,
|
|
#header .dropdown:hover .current + .menu,
|
|
#header .menu,
|
|
#small_login,
|
|
#header .dropdown:hover .current + .menu {
|
|
/*
|
|
despite what it looks like, this removes the distance from the dropdown menu
|
|
*/
|
|
width: auto;
|
|
}
|
|
|
|
#header .primary .menu a {
|
|
/*
|
|
The dropdown menu items will have enough space around them
|
|
*/
|
|
padding: 0.429em 0.75em;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Dashboard
|
|
===========
|
|
*/
|
|
#dashboard,
|
|
#dashboard.own {
|
|
/*
|
|
Remove the dashboard border
|
|
*/
|
|
border-bottom: 0px;
|
|
border-top: 0px;
|
|
border: 0px;
|
|
}
|
|
|
|
#dashboard ul {
|
|
/*
|
|
puts everything in the menu in a nice order
|
|
*/
|
|
display: inline-block;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Work Page
|
|
===========
|
|
*/
|
|
#workskin, .collection blockquote.userstuff {
|
|
/*
|
|
This resets the main page width to a decent size for mobile
|
|
*/
|
|
width: 100% !important;
|
|
}
|
|
|
|
p.kudos {
|
|
/*
|
|
Resets the padding for kudos username list and moves the kudos image
|
|
*/
|
|
background: none;
|
|
padding: 0;
|
|
min-height: 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
p.kudos::before {
|
|
content: "Kudos:";
|
|
}
|
|
|
|
div.preface,
|
|
.preface.group blockquote.userstuff {
|
|
/*
|
|
reduces the indent in the blockquotes and the author's note
|
|
*/
|
|
margin: 0;
|
|
}
|
|
|
|
.userstuff ul {
|
|
/*
|
|
reduces the indent in the lists
|
|
*/
|
|
padding: 0;
|
|
}
|
|
|
|
.userstuff li, .userstuff ol ul li {
|
|
/*
|
|
reduces the indent in the lists
|
|
*/
|
|
margin-inline-start: 1em;
|
|
}
|
|
|
|
.home .header .userstuff,
|
|
.home .header dl.stats,
|
|
.home .header .type,
|
|
.blurb dl.tags dd,
|
|
dl.meta dd {
|
|
/*
|
|
tags have less space on the left
|
|
*/
|
|
margin-left: auto;
|
|
}
|
|
|
|
.chapter .secondary, .download .secondary {
|
|
/*
|
|
This moves the download option and the chapter option
|
|
in a better position
|
|
*/
|
|
top: initial;
|
|
right: 0;
|
|
margin: 10px;
|
|
}
|
|
|
|
.chapter .expandable.secondary, .chapter .expandable.secondary select {
|
|
width: 90%;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Blurb
|
|
===========
|
|
*/
|
|
.blurb .datetime {
|
|
/*
|
|
Moves the date of the fic from the top left
|
|
*/
|
|
position: initial;
|
|
}
|
|
|
|
.blurb ul.tags.commas, .blurb h5.fandoms.heading, dd a.tag {
|
|
/* slightly smaller tags */
|
|
font-size: 90%;
|
|
}
|
|
|
|
.blurb h5.fandoms.heading {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
/* the following lines of codes rearrange the required tags icons*/
|
|
.blurb h4.heading {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.blurb ul.required-tags {
|
|
position: initial;
|
|
top: initial;
|
|
display: flex;
|
|
}
|
|
|
|
.blurb ul.required-tags li + li + li, .blurb ul.required-tags li + li + li + li {
|
|
position: initial;
|
|
left: initial;
|
|
}
|
|
|
|
.blurb ul.required-tags li {
|
|
padding-right: 6px;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Icons
|
|
===========
|
|
*/
|
|
.user .primary p.icon,
|
|
.admin .primary .icon, .collection .icon {
|
|
/*
|
|
centers the icons on profile pages, collections and news posts
|
|
*/
|
|
position: initial;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Comments
|
|
===========
|
|
*/
|
|
div#comments_placeholder,
|
|
.blurb .userstuff,
|
|
.news .userstuff,
|
|
.system .userstuff {
|
|
/*
|
|
Makes the comments 100% wide again after reducing the width in the desktop skin
|
|
*/
|
|
width: 100% !important;
|
|
margin: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.comment .posted {
|
|
/*
|
|
Makes the span date go in its own line. Dunno why it's a span inside a h4 tbh.
|
|
*/
|
|
display: block;
|
|
}
|
|
|
|
.comment .userstuff p {
|
|
/*
|
|
Comments do a weird thing on the right
|
|
*/
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
TAG PAGES
|
|
===========
|
|
*/
|
|
ol.pagination {
|
|
max-width: 90%;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
Footer
|
|
===========
|
|
*/
|
|
#footer .module {
|
|
/*
|
|
makes footer module smaller and centers them
|
|
*/
|
|
max-width: 40%;
|
|
margin: auto;
|
|
}
|
|
|
|
/*
|
|
===========
|
|
FIXES
|
|
===========
|
|
|
|
|
|
Resets stuff from Ao3 default skin
|
|
*/
|
|
.user .primary img.icon,
|
|
.admin .primary .icon,
|
|
.user .primary p.icon {
|
|
top: auto;
|
|
}
|
|
|
|
#header .user,
|
|
.comment .posted,
|
|
#header li {
|
|
float: initial;
|
|
}
|
|
|
|
.javascript,
|
|
.filters dt {
|
|
background-color: transparent;
|
|
}
|
|
|
|
li.showme a.actions, dl.stats dd {
|
|
/* button show most recent bookmarks on mobile is too long*/
|
|
white-space: normal;
|
|
height: initial;
|
|
}
|
|
|
|
/*
|
|
Fixing actual errors from default Ao3
|
|
*/
|
|
#ui-datepicker-div {
|
|
top: 522px !important;
|
|
}
|
|
|
|
.assigned.module th[scope=col],
|
|
thead th[scope=col] {
|
|
max-width: 18px;
|
|
overflow: hidden;
|
|
}
|