Forum: Bug Report and Feature Requests

Let me first say that I absolutely love SOL! The features it offers are, in my view, a clear advantage over basically every other story site I've come across so far.

That said, however, there are a few things that make it hard for me to use the site. I don't know whether others have the same problems or if this only affects me, but if there are others, maybe this'll help them too.

My main problem is that every container is crammed full of information, with barely any discernable features to add structure, so everything just... grows hazy. I need bigger line-heights, clearer separation between elements, a stronger contrast between text and the background it appears on, and less noise.

So... I installed a Firefox AddOn that lets me change some of the CSS and make the site a little easier to take in. It looks something like this:

Screenshot on Reddit because I'm too lazy to make an account with one of those image-hosting sites.

Again, these are merely a few CSS tweaks to increase readability on a screen. If anyone has the same troubles as I do, here's the lines I added:

body {font-family:'Open Sans', Helvetica, Arial, sans-serif;background:#eceaea;color:#000;font-size:12pt;}

h1 {color:#014b4b;}

#swnote {background:#008080;color:#fff;padding:0.4em 0;margin:0 0 0.6em 0;font-weight:normal;border:none !important;}

#swnote a {color:#fff;}

#story {background:#fff;color:#000;font-size:1.2em;line-height:1.8em;max-width:1000px;font-family:'Open Sans', Helvetica, Arial, sans-serif; padding:1.2em;}

#story p {font-family:'Open Sans', Helvetica, Arial, sans-serif;}

.wrap { background:#fff; }

.fic {max-width:none;float:left;}

a, a:visited {color:#0c0c0c;}

a:hover { color:#ccc; }

.notice, #det-link{background-color:#f0eded;color:#000;}

#det-link a {display:block;background-color:#008080;color:#fff;text-decoration:none;}

#det-link a:hover {font-weight:bold;}

.notice p, .end-note p {color:#000;}

#s-details .notice {border:1px solid #008080;}

#top-header {border-top:1px solid #008080;padding:0.6em 0;}

.vform {box-shadow:0em 0em .3em #008080;}

.fo-thead {background:#008080;box-shadow:0 0 .2em #008080;color:#fff;text-align:center;}

a#cAuth, a.fr {background:#fff;box-shadow:0 0 .3em #efefef;color:#008080;}

a.fr {float:right;border-radius:.4em;padding:5px;line-height:1em;text-decoration:none;}

a.dnldbu:hover {color:#fff;}

.sdesc {padding:0.6em 0;width:80%;line-height:1.6em;}

.sdesc a {display:inline-block;margin:0.6em 0;}

.sdesc .help {background:#fff;}

.sdesc .help::before {content:"2945";padding-right:0.3em;}

.entry .misc {line-height:2em;}

.premier .b.i.s {margin:0.6em 0;font-size:1.2em;color:#008080;}

.hc {background:#fff; color:#008080;margin-bottom:1.2em !important;}

.hc a {color:#008080;}

.hc polyline.a, .hc rect.a {stroke:#fff;}

fieldset.hc {background:#fefefe; color:#000;margin-bottom:1.2em !important;}

fieldset div {margin-bottom:1.2em;}

td {padding-top:0.6em;}

body div #left-pane, body div .pane {padding-top:1.2em;}

#tlink {background-color:#eceaea;color:#eceaea;}

#nav {padding:0;}

nav td {display:block;background:transparent;}

nav #nav {background:#eceaea;}

nav img {display:none;}

nav td:nth-child(1) {display:none;}

nav a, nav a:visited {font-weight:bold;color:#008080;text-decoration:none;}

nav td div#ac-links {display:block;}

nav a#active-main, nav a.inactive-main {font-weight:bold;color:#008080;text-decoration:none;}

nav a#active-main::before {content:"1BE";font-size:2em;}

nav a.inactive-main::before {content:"270D";font-size:2em;}

#ac-links {text-align:center;background:#fff;padding:0.6em 0;border-top: 4px solid #008080;border-bottom:1px solid #ccc;margin-bottom:-2px;}

#ac-links a, #ac-links a:visited {font-weight:normal;text-decoration:none;color:#000;padding:0 0.2em;}

.pane .pane-head {margin-top:0;height:44px;}

.pane-body.pane-head {height:44px;background:#fff;margin-top:0;}

.pane-body.pane-body {margin:0;border:0;}

.pane div.pane-head span {background:#008080;color:#fff;display:inline-block;height:45px;text-align:center;line-height:44px;padding:0 0.6em;}

.pane div.pane-head span:has(> a) {padding:0;}

.pane div.pane-head span a {border-radius:0;display:block;height:44px;width:100%;line-height:44px;background:#fff;color:#000;padding:0 0.6em;}

.pane div.pane-head span a:hover {text-decoration:none;}

.pane div:nth-child(3) {margin-top:0;}

#wrap{clear:both;}

#left-pane .pane-body {box-shadow:none;border-radius:0px;}

#left-pane .pane-body.c {background:#008080;color:#fff;min-height:44px;margin-bottom:0.6em;}

#left-pane .pane-body.c a, #left-pane .pane-body.c a:visited {color:#fff;text-decoration:none;font-size:0.8em;font-weight:normal;line-height:44px;}

#left-pane .pane-body.c {background:#008080;color:#fff;}

#left-pane > div:nth-child(1) {padding-top:5px;}

#left-pane > div:nth-child(3) {margin-bottom:10px;}

#left-pane > div:nth-child(even of .c) a::before{content:"270E";}

#left-pane > div:nth-child(odd of .c) a::before{content:"2690";}

#left-pane a:before {padding-right:0.6em;}

#left-pane div{padding:0 0.6em;background:#fff;}

#left-pane .pane-head {border-bottom:1px solid #008080;}

#left-pane span.pane-head-text {background:#fff;display:inline-block;width:100%;text-align:center;line-height:44px;}

#left-pane div.quick {padding-bottom:0.6em;}

#left-pane .pane-body .section {padding:0.6em 0;}

div.pane-body ul {margin:0;}

h5.nlabel {background-color:#fff;height:44px;line-height:44px;border-top: 4px solid #008080;border-bottom:1px solid #ccc;}

h5.nlabel::before{content:"0B6";padding-right:0.6em;font-size:1.6em;line-height:1em;}

h5.blabel {background-color:#fff;height:44px;line-height:44px;border-top: 4px solid #008080;border-bottom:1px solid #ccc;}

h5.blabel::before{content:"275E";padding-right:0.6em;font-size:1.6em;line-height:1em;}

h5.ulabel {background-color:#fff;height:44px;line-height:44px;border-top: 4px solid #008080;border-bottom:1px solid #ccc;}

h5.ulabel::before{content:"26AF";padding-right:0.6em;font-size:1.6em;line-height:1em;}

h5.aslabel {background-color:#fff;height:44px;line-height:44px;border-top: 4px solid #008080;border-bottom:1px solid #ccc;clear:both;}

h5.aslabel::before{content:"2618";padding-right:0.6em;font-size:1.6em;line-height:1em;}

.entry.premier .wrap h3::before{content:"2655";padding-right:0.2em;color:#000;font-size:2em;}

span.prog {display:inline-block;margin-top:0.4em;color:#fff;background:#008080;padding:0.6em;}

span.prog.fr::before {content:"26A0";padding-right:0.6em;}

.notice {line-height:1.6em;}

.notice span.ab::before {content:"26A0";padding-right:0.6em;font-size:2em;color:#800000;}

.notice .prog::before {content:"26A0";padding-right:0.6em;font-size:2em;color:#000;}

.notice b {display:inline-block;padding-top:0.6em;}

.res-item {padding:0.6em 0;}

.bw, .list, #alphabar .c4, .t1, .t2, .t4, .cwb, table#search, .mail, .reviews-body, .review-table, .ser-table, .list-item, #b-man-div2, .wb, #result-body, div.pane-body, #ref-link, #headdiv, .light {background:#fff;}

button[value="yesadult"]{background:#008080 !important;}

button[value="noadult"]{background:#800000 !important;}

.nlabel, .ulabel, .blabel, .nilabel, .aslabel, h1, h2, h3, span.pane-head-text, .misc:hover {color:#171717;}

.help {border:none;}

.help a, .help a:visited {color:#008080;}

.help a:hover {color:#fff;}

.abar a, .abar a:visited {background:#008080;color:#fff;}

.abar a:hover, .abar a.alac {background:#fff;color:#008080;}

.squ {background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////9/f3nW2m7gAAADdJREFUeNrs1iEKAAAIBEH9/6ftgsEozlZhwiUjWtna3gEAwF3AaAAAYMomAID/wGgAwHugBBgAFA8IASbRJb4AAAAASUVORK5CYII=);}

tr.squ th::before {content:"2655";padding-right:0.2em;color:#000;font-size:1.2em;}

td.by {background:#008080;color:#fff;}

.pyg {background-color:#d9d9d9;}

a.nbl {background:#fff;color:#000;}

.fo-div .formDiv.c {border-bottom:1px solid #008080;}

.fo-div .formDiv.c a {text-decoration:none;}

.fo-div .formDiv.c a::before {content:"270E";padding-right:0.2em;font-size:2em;}

ul#home {display:block;height:44px;line-height:44px;margin:-10px 0 0 0;border-bottom:4px solid #008080;background:#eaeaea;text-align:center;width:100%;font-family:'Open Sans', Helvetica, Arial, sans-serif;}

ul#home li {display:inline-block;padding:0 0.6em;}

ul#home a, #home a:visited {color:#008080;font-weight:bold;font-size:1em;text-decoration:none;}

#tab-bar {background:#eaeaea;}

#a-nav {background:#fff;padding-top:50px;text-align:center;border-bottom:1px solid #ccc;}

#a-nav h1 {color:#008080;text-align:center;}

#a-nav #folcount {margin:0 auto;background:#008080 !important;color:#fff !important;}

#a-nav #nav-links {margin:0;padding:1.2em 0 0.6em 0;}

#a-nav #nav-links a, #a-nav #nav-links a:visited {color:#000;font-size:1em;text-decoration:none;padding:0 0.6em;}

#home > li:nth-child(1) a::before {content:"1BE";font-size:1.2em;padding-right:0.3em;}

#home > li:nth-child(2) a::before {content:"270D";font-size:1.2em;padding-right:0.3em;}

#home > li:nth-child(3) a::before {content:"2699";font-size:1.2em;padding-right:0.3em;}

#home > li:nth-child(4) a::before {content:"2636";font-size:1.2em;padding-right:0.3em;}

span.tab {background:#fff;padding:0.3em 0.6em;border-color:#ccc;}

#sm-a-head {text-align:center;color:#000;}

#notes {background:#fff;color:#000;border:1px solid #008080;}

#notes b {color:#008080;}

#notes a, #notes a:visited {display:block;color:#fff;background:#333;padding:0.6em;text-align:center;text-decoration:none;}

a#bottom::before{content:"";}