A new version of Fanfiction.net Prism style with the same goal in mind as the original: to modernize Fanfiction and give it user a better overall experience.
Fanfiction.net Prism 2 by ddgroves
Details
Authorddgroves
Licensehttps://creativecommons.org/licenses/by-nc-sa/4.0/
Categoryfanfiction, fanfiction.net
Created
Updated
Size22 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This style is still a work of progress with possible bugs and issues either cause or yet to be address by this style. If you find any issues not yet addressed by the style please submit a issue on the Prism Github.
This style has an optional userscript that is available at: Fanfiction Prism Github
Require the use of the addon: Tampermonkey
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Fanfiction Prism 2
@namespace https://github.com/ddgroves/userstyles
@version 1.0.0
@description If you read this, your the best!
@author ddgroves
@preprocessor stylus
@var checkbox dark-theme 'Click for dark theme' 0
@var checkbox dynamic-color 'Use dynamic background color for reading' 0
==/UserStyle== */
@-moz-document regexp("https:\\/\\/[^m]*.fanfiction.net\\/(?!atom).*") {
:root {
--light-main: lightbg;
--light-text: #555;
--light-links: #777;
--light-links-hover: #2a9aea;
--light-borders: rgba(0,0,0,0.11)!important;
--light-hover: #eee;
--dark-main: #0f0f15;
--dark-text: #999;
--dark-links: #d5d5d5;
--dark-borders: rgba(0,0,0,0.32);
--dark-hover: #202026;
--light-story-main: #121215;
--light-story-text: #777;
--light-story-borders: rgba(0, 0, 0, .36);
--light-story-hover: #17171c;
--dark-story-main: #0c0c11;
--dark-story-text: #777;
--dark-story-borders: rgba(0, 0, 0, .5);
--dark-story-hover: #101018;
}
body #cover {
height: 215px!important;
position: absolute;
width: 100%!important;
overflow: hidden;
top: 70px;
}
body #bg {
background-image: url('https://fangirlish.com/wp-content/uploads/2020/12/fanfiction.jpg') if none!important;
filter: blur(75px) saturate(3)!important;
background-size: cover!important;
background-position: 0 20%;
height: 286px!important;
position: absolute;
width: 100%!important;
opacity:0.15;
z-index: 0;
}
@font-face {
font-family: "fico-v2";
src:url("https://cdn.myfontastic.com/htzmUZ3UfaQ6hZxLK4pJUC/fonts/1536240149.eot");
src:url("https://cdn.myfontastic.com/htzmUZ3UfaQ6hZxLK4pJUC/fonts/1536240149.eot?#iefix") format("embedded-opentype"),
url("https://cdn.myfontastic.com/htzmUZ3UfaQ6hZxLK4pJUC/fonts/1536240149.woff") format("woff"),
url("https://cdn.myfontastic.com/htzmUZ3UfaQ6hZxLK4pJUC/fonts/1536240149.ttf") format("truetype"),
url("https://cdn.myfontastic.com/htzmUZ3UfaQ6hZxLK4pJUC/fonts/1536240149.svg#1536240149") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*Ads Element Hider*/
.zmenu[style="text-align:center;padding-top:5px;background-color: #f6f7ee;"], b.caret,td[style="width:260px;vertical-align:top;padding:0 0 0 5px;"] {
display: none!important;
}
#content_parent p{
mix-blend-mode: difference;
filter: invert(1);
}
.maxwidth {
min-width: 0%;
max-width: 100%;
width: unset;
margin: 0;
nav-index: 1;
}
a {
color: var(--light-links)!important;
border: none!important;
outline: none!important;
text-decoration: none!important;
transition: 0.3s!important;
}
a:hover{
color: var(--light-links-hover)!important;
}
body {
font-family: "Roboto"!important;
background: var(--light-main)!important;
color: var(--light-text)!important;
}
body * {
box-sizing: border-box!important;
}
#top {
background: none!important;
border-bottom: 1px solid var(--light-borders);
color: var(--light-text)!important;
font-size: 0!important;
height: 70px;
line-height: 70px;
padding: 0 45px 0 45px;
}
#top .menulink {
height: 70px;
padding: 0!important;
}
#top .menulink.maxwidth {
width: unset!important;
}
#top .menulink *:not(small) {
font-size: 14px!important;
}
#top .menulink small {
display: none!important;
}
#top .menulink span[class*="icon"] {
color: var(--light-links)!important;
cursor: pointer;
margin: 0 10px 0 0!important;
}
#top .menulink span[class*="icon"]:hover {
color: var(--light-links-hover)!important;
}
#top .menulink > a[href="/"] {
font-size: 0!important;
height: 0!important;
margin-top: 0px!important;
line-height: 33px!important;
transition: 0.35s, 0.01s font-size!important;
width: 0!important;
}
#top .menulink > a[href="/"]:after{
font-family: "fico-v2";
font-size: 43px!important;
content: "\61"!important;
position: relative; top: 16px!important;
}
#top #name_login * {
color: var(--light-links)!important;
}
#top #name_login *:hover{
color: var(--light-links-hover)!important;
}
.zmenu {
background: none!important;
border: none!important;
position: absolute; top: 24px; left: 375px!important;
width: unset!important;
}
.zmenu #zmenu {
padding: 3px 0 0 15px!important;
}
.zmenu #zmenu > table {
width: unset!important;
}
.zmenu #zmenu .zui {
letter-spacing: 0!important;
}
.zmenu #zmenu .zui .dropdown.xmenu_item {
padding: 0 0 15px 0!important
}
.zmenu #zmenu .zui a.dropdown-toggle {
padding: 0 20px 0 0!important;
}
.zmenu .dropdown-menu {
border: 1px solid #ddd!important;
border-radius: 3.5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
display: block!important;
position: absolute!important; top: 30px!important; left: -20px!important;
opacity: 0!important;
visibility: hidden!important;
transition: 0.3s!important;
}
.zmenu .dropdown-menu:after,.zmenu .dropdown-menu:before{
bottom: 100%;
left: 35px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.zmenu .dropdown-menu:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
.zmenu .dropdown-menu:before {
border-color: rgba(221, 221, 221, 0);
border-bottom-color: #d8d8d8;
border-width: 9px;
margin-left: -9px;
}
.zmenu div.dropdown:hover .dropdown-menu,.zmenu .btn-group:hover .dropdown-menu {
opacity: 1!important;
visibility: visible!important;
}
.dropdown-menu *{
color: #000!important;
}
.zmenu #search_form {
position: absolute; top: -4px; left: -200px;
}
.zmenu #search_form #search_keywords {
background: none!important;
border: none;
border-radius: 3px!important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 0 0 1px rgba(0,0,0,0.06);
color: var(--light-text);
height: 32px;
transition: 0.45s;
width: 195px;
}
.zmenu #search_form #search_keywords:focus {
box-shadow: 0 3px 4px 0 rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.08)!important;
}
.zmenu #search_form .btn-group {
display: none;
}
/* Main Content */
#content_parent{
background: var(--light-main);
transition: 0.5s!important;
color: #555;
}
#content_parent[style*="102"]{
background: var(--light-story-main)!important;
color: var(--light-story-text)!important;
}
.xlight:not(a){
color: var(--dark-story-text)!important;
}
#content_parent[style*="102"] .xlight:not(a){
color: var(--light-story-text)!important;
}
a.xlight{
color: var(--dark-links)!important;
}
#content_wrapper {
background: none!important;
margin: 0 auto!important;
width: 1400px!important;
padding: 10px;
transition: 0.5s!important;
}
#content_wrapper_inner {
border: none!important;
padding: 0!important;
transition: 0.5s!important;
}
#content_wrapper_inner .table-bordered {
border:none!important;
}
#content_wrapper_inner .table-bordered .tcat {
background: none!important;
border: 1px solid var(--light-borders)!important;
border-width: 0 0 1px 0!important;
font-size: 18px;
padding: 10px;
}
#content_wrapper_inner .table-bordered .tcat b {
font-weight: 100!important;
}
#content_wrapper_inner .table-bordered .table-striped td , #content_wrapper_inner .table-bordered .table-striped th {
background: none!important;
border: none!important;
border-bottom: 1px solid var(--light-borders)!important;
}
.z-list{
cursor: default;
background: none!important;
border: none!important;
border-bottom: 1px solid var(--light-borders)!important;
display: block!important;
padding: 20px 0 40px 95px!important;
position: relative!important;
height: 100%;
min-height: 90px!important;
margin: 10px 0 0 0!important;
}
.z-list .cimage{
border: 0!important;
border-radius: 5px!important;
height: 80px!important;
width: 60px!important;
margin-left: 15px!important;
padding: 0!important;
position: absolute; top: 50%; left: 0;
transform: translateY(calc(-50% + -5px));
overflow: hidden!important;
z-index: 5;
}
.z-list .icon-chevron-right{
display: none!important;
}
.z-list .z-padtop{
padding: 0!important;
}
#list_output table tbody tr td div{
position: relative!important;
}
#list_output a{
padding: 2px 0 2px 0!important;
display: inline-block!important;
}
#list_output .gray{
font-size: 12px!important;
font-weight: bold!important;
}
/* Dark Theme Stuff */
if dark-theme {
body #bg {
opacity: 0.1;
}
a {
color: var(--dark-links)!important;
}
body {
background: var(--dark-main)!important;
color: var(--dark-text)!important;
}
#top {
border-bottom: 1px solid var(--dark-borders);
color: var(--dark-text)!important;
}
#top .menulink > a[href="/"] {
background-color: d...