|
Here's mine which is a lot more spaced out, has larger text and moves the post controls to the same row as the post's author and score, with Reply floated off to the right on its own. It works with a user script that allows selecting a comment with the mouse and being able to use the keyboard to navigate up and down and vote or reply similarly to what RES provides. @import url("https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700");
html,
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
letter-spacing: normal;
word-spacing: normal;
}
body {
font-size: 13pt;
line-height: 1.5em;
}
.pagetop,
.title {
font: 15pt/1.5em 'Merriweather Sans', Arial, sans-serif;
}
.default,
.comhead,
.subtext,
.reply,
.comment,
.autopagerize_page_info {
font: 13pt/1.5em 'Merriweather Sans', Arial, sans-serif;
}
.profileform td {
font: 13pt/1.5em 'Merriweather Sans', Arial, sans-serif;
padding: 0.2em 0.5em;
}
.profileform input,
.profileform select,
.profileform textarea {
font: 12pt/1.5em 'Merriweather Sans', Arial, sans-serif;
padding: 0.1em 0.25em;
}
.profileform a {
color: #37f !important;
text-decoration: none !important;
opacity: 0.7;
transition: opacity 0.2s ease-in-out;
}
.profileform a:hover {
opacity: 1;
}
.comment {
max-width: 100%;
}
.itemlist .votelinks {
vertical-align: middle !important;
}
.itemlist .title {
padding: 0 0.25em 0.25em;
}
.itemlist .spacer {
height: 0.5em !important;
}
.ind img[width = "40"] {
width: 20px !important;
}
.ind img[width = "80"] {
width: 40px !important;
}
.ind img[width = "120"] {
width: 60px !important;
}
.ind img[width = "160"] {
width: 80px !important;
}
.ind img[width = "200"] {
width: 100px !important;
}
.ind img[width = "240"] {
width: 120px !important;
}
.ind img[width = "280"] {
width: 140px !important;
}
.ind img[width = "320"] {
width: 160px !important;
}
.ind img[width = "360"] {
width: 180px !important;
}
.ind img[width = "400"] {
width: 200px !important;
}
.ind img[width = "440"] {
width: 220px !important;
}
.ind img[width = "480"] {
width: 240px !important;
}
.ind img[width = "520"] {
width: 260px !important;
}
.ind img[width = "560"] {
width: 280px !important;
}
.ind img[width = "600"] {
width: 300px !important;
}
.ind img[width = "640"] {
width: 320px !important;
}
.ind img[width = "680"] {
width: 340px !important;
}
.ind img[width = "720"] {
width: 360px !important;
}
.ind img[width = "760"] {
width: 380px !important;
}
.ind img[width = "800"] {
width: 400px !important;
}
a.hnuser {
color: #37f !important;
text-decoration: none !important;
font-weight: bold;
opacity: 0.7;
transition: opacity 0.2s ease-in-out;
}
a.hnuser:hover {
opacity: 1;
}
a.hnuser[title]::after {
position: relative;
top: -2px;
content: attr(title);
margin: 0 0.25em 0 0.5em;
padding: 1px 3px;
border-radius: 4px;
color: #fff;
background-color: #444;
font-weight: normal;
font-size: 0.8em;
}
a.hnuser.friends {
padding: 0.1em 0.5em;
border-radius: 0.2em;
color: #fff !important;
background-color: rgba(0,68,204,0.75);
}
.comhead .age a:hover {
text-decoration: none;
}
.comhead a.togg {
letter-spacing: 0.1em;
color: #000;
}
.comhead a.togg:hover {
text-decoration: none;
font-weight: bold;
}
.default {
position: relative;
width: 100%;
}
.default > :first-child {
margin-top: 0 !important;
margin-bottom: 0 !important;
border-bottom: solid 1px #888;
padding: 0 0 0.25em;
}
.default > br {
display: none;
}
.default .reply {
height: 0px;
}
.default .reply a {
display: block;
position: absolute;
top: 0;
right: 0;
text-decoration: none !important;
text-transform: uppercase;
color: #37f !important;
font-weight: bold;
font-size: 0.9rem;
}
.title > a {
color: #121314;
text-decoration: none;
}
.title > a:visited {
color: #8e4700;
}
.title > a:hover {
text-decoration: underline;
}
.subtext > a:last-child {
color: #5a5aa0;
text-decoration: none;
font-weight: bold;
}
.subtext > a:last-child:visited {
color: #c60;
}
.subtext > a:last-child:hover {
text-decoration: underline;
}
.comment {
padding: 0.25rem 0;
}
.comment .c00 {
color: #121314 !important;
}
.comment .cce,
.comment .c73,
.comment .cdd {
color: inherit !important;
opacity: 0.8;
}
.comment > span > a,
.comment > span > p a {
padding-bottom: 1px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: rgba(51,119,255,0.5);
}
.comment > span > a,
.comment > span > p a,
.comment > span > a:link,
.comment > span > p a:link {
color: inherit;
}
.comment > span > a:visited,
.comment > span > p a:visited {
border-bottom-color: rgba(204,102,0,0.5);
}
.comment > span > a,
.comment > span > p a,
.comment > span > a:hover,
.comment > span > p a:hover,
.comment > span > a:link,
.comment > span > p a:link,
.comment > span > a:visited,
.comment > span > p a:visited {
text-decoration: none;
}
.comment > span > a:hover,
.comment > span > p a:hover {
color: #37f;
transition: all ease-in 0.25s;
}
.comment > span > a:hover:visited,
.comment > span > p a:hover:visited {
color: #c60;
}
.svg-arrow {
fill: #00f;
}
tr.spacer {
height: 10px !important;
}
[op=threads] td.votelinks font,
[op=threads] td.votelinks br,
[op=threads] td.votelinks img {
display: none;
}
[op=threads] .comtr .comhead .score {
color: #9400d3;
font-weight: bold;
}
[op=threads] .comtr .comhead .par a,
[op=threads] .comtr .comhead a[href ^= edit],
[op=threads] .comtr .comhead a[href ^= delete] {
color: #37f;
}
.autopagerize_page_info {
color: #828282 !important;
display: inline-block;
position: absolute;
left: 2em;
margin-top: 0.5em;
}
.autopagerize_link {
color: currentColor !important;
cursor: pointer;
}
|
Now to try and get it to run on iPadOS