Authorcendov
LicenseCC Zero
Categoryfanfiction.net
Created
Updated
Size3.7 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
A pleasant dark mode style for FanFiction.net, with multiple tweaks to enhance your reading experience. Changes include but are not limited to: Larger line-spacing, serif font & a shorter line width.
Important: If you want the website to look exactly like my screenshot you have to download two free fonts. It is not necessary, but I prefer them over the more standard fallback fonts. Links to the fonts are in the notes.
Links:
/* ==UserStyle==
@name Night Reader - FanFiction
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A pleasant dark mode reading experience.
@author Cendov
==/UserStyle== */
@-moz-document domain("fanfiction.net") {
.storytext {
font-size: 20px;
font-family: "Merriweather", "Georgia", "Times New Roman", "Liberation Serif", "Serif";
line-height: 1.6;
text-align: justify;
max-width: 700px;
position: relative;
top: 10px;
}
body {
font-family: "Inter", "Merriweather Sans", "Noto Sans", "Arial", "Helvetica", "Geneva", "Verdana", "Liberation Sans", "Sans Serif";
font-size: 0.9em;
}
span#name_login.pull-right {
font-size: 15px;
font-style: normal;
position: relative;
top: 10px;
right: 3px;
}
html,
body,
div,
p,
table thead {
max-height: 999999px;
background-color: #1c1b21 !important;
color: #eae9f0 !important;
}
.lc-left {
background-color: #1c1b21 !important;
}
table td {
border-bottom: none;
background-color: rgba(0, 0, 0, 0) !important;
}
table.maxwidth {
background-color: rgba(0, 0, 0, 0) !important;
}
.zmenu {
padding-top: 0px !important;
background-color: #339 !important;
border-bottom: 0px;
box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .35), 1px 1px 3px -1px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .85);
}
div#zmenu.maxwidth {
background-color: rgba(0, 0, 0, 0) !important;
}
.maxwidth {
background-color: #339 !important;
}
.xmenu_item {
padding: 1px;
display: inline;
background-color: #339 !important;
}
div.menulink.maxwidth {
position: relative;
right: 14px;
font-size: 1.5em;
font-family: "Inter", "Merriweather Sans", "Noto Sans", "Arial", "Helvetica", "Geneva", "Verdana", "Liberation Sans", "Sans Serif";
;
font-style: normal;
background-color: #1c1b21 !important;
}
div.menulink.maxwidth a {
font-family: "Inter", "Merriweather Sans", "Noto Sans", "Arial", "Helvetica", "Geneva", "Verdana", "Liberation Sans", "Sans Serif";
;
font-weight: 600;
font-style: normal;
}
div.menulink.maxwidth small {
font-style: normal;
}
div#top {
background-color: #1c1b21 !important;
padding: 15px !important
}
.lc-wrapper {
position: relative;
padding: 0px !important;
margin-top: 10px !important;
z-index: 2;
}
.zui a {
color: #eae9f0 !important;
font-size: 14px;
text-decoration: none;
padding: .4em 1.6em .4em 0;
border-bottom: 0;
}
a:link {
color: #bac3fe;
}
a:active,
a:visited {
color: hsl(232, 80%, 60%);
text-decoration: none;
}
#content_wrapper_inner {
border-left: none;
border-right: none;
outline: none;
}
div.xcontrast_txt.xlight {
margin-bottom: 15px !important;
margin-top: 10px !important;
}
span.xcontrast_txt.xlight div {
height: 10px !important;
}
div#profile_top {
padding-top: 5px !important;
}
span img.cimage {
margin-right: 10px !important;
}
hr {
width: 33%;
margin: .875em auto 1.2525em auto;
border: 1px;
background: #cbcbcb;
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #fff), color-stop(0.1, #cbcbcb), color-stop(0.9, #cbcbcb), color-stop(1, #fff));
background-image: -moz-linear-gradient(left center, #fff 0%, #cbcbcb 10%, #cbcbcb 90%, #fff 100%);
}
.dropdown-menu {
background-color: #242429;
text-align: left;
}
li.disabled a {
font-weight: 700;
font-style: italic;
}
.lc {
margin: 0;
padding: 0 10px;
background: #1c1b21;
display: inline-block;
}
.modal-backdrop {
background-color: hsla(250, 10%, 12%, .7) !important;
}
.xgray,
.gray {
color: #eae9f0;
}
div.xcontrast_txt:nth-child(7) {
margin-top: 10px;
margin-bottom: 10px;
}
}