Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share custom stylesheets to use here! #4

Open
ZachSaucier opened this issue Jun 24, 2016 · 51 comments
Open

Share custom stylesheets to use here! #4

ZachSaucier opened this issue Jun 24, 2016 · 51 comments

Comments

@ZachSaucier
Copy link
Owner

ZachSaucier commented Jun 24, 2016

Share any stylesheets that you use and really like here!

Note: You add the stylesheets below to your copy of Just Read by right clicking the Just Read icon and clicking "Options". The options page requires creating a free account on the Just Read website. After you've created an account, paste in the CSS from your selected theme into the input field on the options page.

@ZachSaucier ZachSaucier changed the title Custom stylesheets to use Share custom stylesheets to use here! Jun 24, 2016
@aseeon
Copy link

aseeon commented Jun 24, 2016

Here is my very simple stylesheet. It's off-black text on off-white background with Calibri as default font and size that is comfortable for reading on standard 1080p and 720p resolutions. Tested on thousands of pages of web novels. It's inspired by a theme that was available in Clearly extension called Newsprint.

fullhd.css

Preview:
Web Novel Chapter Screen

@dflock
Copy link

dflock commented Jun 30, 2016

This is a complete dark theme - it's a copy of the default theme, with only colors changed (including the print & close icons):

dark-theme.css

screenshot - 16-06-29 - 07 29 00 pm

@Zyst
Copy link
Contributor

Zyst commented Dec 4, 2016

Edit: A modified version of this theme now comes with Just Read!

Here's mine! Removed a lot of the elements from the extension that I didn't quite love.

screen shot 2016-12-03 at 9 29 05 pm

You read game novels and the author uses tables? I got you!

screen shot 2016-12-03 at 9 27 35 pm

Elements removed are all the three buttons top right, the author and date fields, the edit SVG button for the title, and the footer.

Go download it now! dark-just-read.css

PS: Font used there is called San Francisco, it's a OS X system font you can access with a tiny CSS hack, it uses Roboto otherwise, which is fairly similar to San Francisco.

EDIT: Screenshots are zoomed to 175%, the big monitor doesn't play nice with the small-ish font.

@kimu
Copy link

kimu commented Dec 26, 2016

Based on dark-theme.css, I have made a version inspired on Safari reader theme.

dark-gray-theme.css

dark-gray-theme

@iYahiaa
Copy link

iYahiaa commented Feb 7, 2017

Hi Guys,

Thank you for the amazing 👍

Please find my white theme which I love to read, Hope you too like.

The style is :

  1. dark background for the body.
  2. white background for content only.
  3. link mouse hover is red.
  4. image is centered with light border.

Enjoy!

screen shot 2017-02-07 at 10 53 08 am

@import url("https://fonts.googleapis.com/css?family=Merriweather|Source+Sans+Pro:400,700");
body { font-family: Merriweather, serif; background-color: #000; line-height: 1.6; font-size: 15px; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; }
h1, h2 { font-family: "Source Sans Pro", sans-serif; font-weight: 700; }
h1 { font-size: 1.875em; line-height: 1.125; }
h2 { font-size: 1.45em; line-height: 1.2625em; }
h3 { font-family: Merriweather, serif; font-size: 1.25em; line-height: 1.5; }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(39, 170, 225); }
a[href]:hover { color: rgb(78, 202, 255); }
.youtubeContainer { position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
img { max-width: 100%; }
li { line-height: 1.5em; }
td { border: 1px solid black; padding: 3px 7px; }
pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; }
blockquote { border-left: 4px solid; padding: 15px 10% 15px 8%; margin: 1em 0px; font-size: 1.2em; line-height: 1.4; }
blockquote > :first-child { margin-top: 0px; }
blockquote > :last-child { margin-bottom: 0px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 0.9em; opacity: 0.7; border: 1px solid rgb(238, 238, 238); padding: 17px 17px 12px; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: "Source Sans Pro", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Source Sans Pro", sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
.simple-container { max-width: 1040px; }
[class*="emoji"], [class*="icon"] { width: 1em; }
.simple-container{padding: 30px; background-color: #fff;border-radius: 10px;}

@ghost
Copy link

ghost commented Feb 13, 2017

Just use these quick settings on the menu when Just Read is active:

fontSize 20px
maxWidth 52%
textColor #282828
backgroundColor #fffcf2
linkColor #bb2121
linkHoverColor #ff7878

image

Or full CSS:

@font-face { font-family: "Source Sans Pro Semibold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf"); }
@font-face { font-family: "Source Sans Pro Bold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf"); }
@font-face { font-family: "Source Sans Pro Light"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf"); }
@font-face { font-family: Merriweather; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/Merriweather-Light.ttf"); }
* { box-sizing: border-box; }
body { font-family: Merriweather, serif; line-height: 1.75em; font-size: 20px; color: rgb(40, 40, 40); background-color: rgb(255, 252, 242); }
h1, h2 { font-family: "Source Sans Pro Bold", sans-serif; }
h1 { font-size: 1.875em; line-height: 2.125em; }
h2 { font-size: 1.25em; line-height: 1.5625em; }
h3 { font-family: Merriweather, serif; font-size: 1em; line-height: 1.7em; padding-top: 0.9375em; padding-bottom: 0.9375em; border-bottom: 1px solid rgb(216, 216, 216); border-top: 1px solid rgb(216, 216, 216); }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(187, 33, 33); }
a[href]:hover { color: rgb(255, 120, 120); }
img { max-width: 100%; }
li { line-height: 1.5em; }
pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: "Source Sans Pro Light", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.simple-author { display: inline-block; font-family: "Source Sans Pro Semibold", sans-serif; font-size: 18px; color: rgb(187, 33, 33); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.simple-container { max-width: 1000px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
@media (max-width: 750px) { 
  .simple-container { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 450px) { 
  .simple-container { padding-top: 30px; padding-left: 20px; padding-right: 20px; }
}
.emoji, svg.icon { width: 1em; }
[class="ad"], [class*="ads"], [class^="ad-"], [class^="ad_"], [class*="-ad-"], [class$="-ad"], [class$="_ad"], [class~="ad"] { display: none; }
[class*="navigation"], [class*="nav"], nav, [class*="search"], [class*="menu"], [class*="print"]:not(.simple-print) { display: none; }
[class*="nocontent"], [class*="hidden"] { display: none; }
[class*="popup"] { display: none; }
[class*="share"], [class*="sharing"], [class*="social"], [class*="follow"], [class*="newsletter"] { display: none; }
form, [class*="form"] { display: none; }
[class*="related"], [class*="recommended"], [class*="see-also"], [class*="popular"], [class*="trail"] { display: none; }
[class*="comment"], [class*="disqus"], [id*="disqus"] { display: none; }
[class^="tag"], [class*="-tag-"], [class$="-tag"], [class$="_tag"], [class~="tag"], [class*="-tags-"], [class$="-tags"], [class$="_tags"], [class~="tags"], [id*="-tags-"], [id$="-tags"], [id$="_tags"], [id~="tags"] { display: none; }
[class*="subscribe"], [id*="subscribe"], [class*="subscription"], [id*="subscription"] { display: none; }
[class^="fav"], [class*="-fav-"], [class$="-fav"], [class$="_fav"], [class~="fav"], [id^="fav"], [id*="-fav-"], [id$="-fav"], [id$="_fav"], [id~="fav"], [class*="favorites"], [id*="favorites"] { display: none; }
[class*="signup"], [id*="signup"], [class*="signin"], [id*="signin"], [class*="signIn"], [id*="signIn"] { display: none; }
footer, [class*="footer"], [id*="footer"] { display: none; }
svg[class*="pinterest"], [class*="pinterest"] svg, svg[id*="pinterest"], [id*="pinterest"] svg, svg[class*="pinit"], [class*="pinit"] svg, svg[id*="pinit"], [id*="pinit"] svg, svg[class*="facebook"], [class*="facebook"] svg, svg[id*="facebook"], [id*="facebook"] svg, svg[class*="github"], [class*="github"] svg, svg[id*="github"], [id*="github"] svg, svg[class*="twitter"], [class*="twitter"] svg, svg[id*="twitter"], [id*="twitter"] svg, svg[class*="instagram"], [class*="instagram"] svg, svg[id*="instagram"], [id*="instagram"] svg, svg[class*="tumblr"], [class*="tumblr"] svg, svg[id*="tumblr"], [id*="tumblr"] svg, svg[class*="youtube"], [class*="youtube"] svg, svg[id*="youtube"], [id*="youtube"] svg, svg[class*="codepen"], [class*="codepen"] svg, svg[id*="codepen"], [id*="codepen"] svg, svg[class*="dribble"], [class*="dribble"] svg, svg[id*="dribble"], [id*="dribble"] svg, svg[class*="soundcloud"], [class*="soundcloud"] svg, svg[id*="soundcloud"], [id*="soundcloud"] svg, svg[class*="rss"], [class*="rss"] svg, svg[id*="rss"], [id*="rss"] svg, svg[class*="linkedin"], [class*="linkedin"] svg, svg[id*="linkedin"], [id*="linkedin"] svg, svg[class*="vimeo"], [class*="vimeo"] svg, svg[id*="vimeo"], [id*="vimeo"] svg, svg[class*="email"], [class*="email"] svg, svg[id*="email"], [id*="email"] svg { display: none; }
/* No Wikipedia 'Edit section': */
[class*="editsection"], [class*="toctoggle"] { display: none; }

@Lithene
Copy link

Lithene commented Mar 22, 2017

Hello,
Just to share mine,
I changed the font to Verdana, since its ranked as one the easiest font to read. I have it locally installed so I sourced it from there. And changed the highlighted background to yellow. Classic.

capture

CSS below.

@font-face { font-family: "Source Sans Pro Semibold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf"); }
@font-face { font-family: "Source Sans Pro Bold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf"); }
@font-face { font-family: "Source Sans Pro Light"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf"); }
@font-face { font-family: Verdana; src: local(C:\Windows\Fonts\verdana.ttf); }
@media screen {
  * { box-sizing: border-box; }
}
body { font-family: Verdana, serif; line-height: 1.75em; font-size: 16px; color: rgb(40, 40, 40); background-color: rgb(255, 255, 255); }
h1, h2 { font-family: "Source Sans Pro Bold", sans-serif; }
h1 { font-size: 1.875em; line-height: 2.125em; }
h2 { font-size: 1.25em; line-height: 1.5625em; }
h3 { font-family: Verdana, serif; font-size: 1em; line-height: 1.7em; padding-top: 0.9375em; padding-bottom: 0.9375em; border-bottom: 1px solid rgb(216, 216, 216); border-top: 1px solid rgb(216, 216, 216); }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(39, 170, 225); }
a[href]:hover { color: rgb(78, 202, 255); }
img { max-width: 100%; }
li { line-height: 1.5em; }
pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: "Source Sans Pro Light", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Source Sans Pro Semibold", sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
.simple-container { max-width: 1000px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
@media (max-width: 750px) {
  .simple-container { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 450px) {
  .simple-container { padding-top: 30px; padding-left: 20px; padding-right: 20px; }
}
::selection { background: yellow; }
.emoji, svg.icon { width: 1em; }

@allanmviana
Copy link

allanmviana commented Jun 11, 2017

Hello,
Clean style, just like boxes in Material Design.
Based on white-style.css

material design

@font-face { font-family: "Source Sans Pro Bold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf"); }
@font-face { font-family: "Source Sans Pro Light"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf"); }
@font-face { font-family: Merriweather; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/Merriweather-Light.ttf"); }
* { box-sizing: border-box; }
#simple-article#simple-article { background-color: rgb(255, 0, 0); }
.simple-control { color: rgb(0, 0, 0); fill: black; opacity: 0.2; }
body { margin: 0px; font-family: Merriweather, serif;text-align: justify; line-height: 1.5em; font-size: 19px; color: rgb(42, 42, 42); background-color: rgb(250, 250, 250); }
h1, h2 { font-family: Merriweather, serif; }
h1 { font-size: 1.875em; line-height: 2.125em;text-align: justify;font-weight: bold; }
h2 { font-size: 1.25em; line-height: 1.5625em;text-align: justify;font-weight: bold; }
h3 { font-family: Merriweather, serif; font-size: 1em; line-height: 1.5em; padding-top: 0.9375em; padding-bottom: 0.9375em; border-bottom: 1px solid rgb(216, 216, 216); border-top: 1px solid rgb(216, 216, 216); }
hr { height: 1px; background-color: rgb(255, 255, 255); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(0, 0, 0); }
a[href]:hover { color: rgb(0, 0, 0); }
img { max-width: 50%; margin: 10px 25%; border: 1px solid rgb(221, 221, 221); padding: 2px; }
li { line-height: 1.5em; }
pre { background-color: rgb(255, 0, 0); padding: 10px; overflow: auto; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: "Source Sans Pro Light", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.simple-author { display: inline-block; font-family: "Source Sans Pro Semibold", sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.simple-container { max-width: 600px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
@media (max-width: 750px) {
  .simple-container { padding-left: 50px; padding-right: 50px; box-shadow: rgb(136, 136, 136) 0px 0px 10px; }
}
@media (max-width: 450px) {
  .simple-container { padding-top: 30px; padding-left: 20px; padding-right: 20px; }
}
.emoji, svg.icon { width: 1em; }

@lucashmsilva
Copy link

Based on the dark-theme by @ZachSaucier. With lighter bg color and justified text.

captura_de_tela_28-08-2017_200340

@import 'https://fonts.googleapis.com/css?family=Open+Sans';
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5em;
	font-size: 18px;
	background-color: #343A3A;
	text-align: justify;
    text-justify: inter-word;
    color: #ffffff
	
}
.simple-container {
	max-width: 725px;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 20px;
}
.simple-print {
	fill: white;
	stroke: white;
}
.simple-print svg {
	height: 100%;
}
.simple-close {
	color: white;
	border-color: white;
}
.simple-ext-info {
	border-top: 1px solid #aaa;
}
p {
	font-size: 18px;
}
h1 {
	font-size: 30px;
	line-height: 34px;
}
h2 {
	font-size: 20px;
	line-height: 25px;
}
h3 {
	font-size: 16px;
	line-height: 27px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #D8D8D8;
	border-top: 1px solid #D8D8D8;
}
hr {
	height: 1px;
	background-color: #d8d8d8;
	border: none;
	width: 100%;
	margin: 0px;
}
a[href] {
	color: #1e8ad6;
}
a[href]:hover {
	color: #3ba0e6;
}
img {
	max-width: 100%;
}
li {
	line-height: 1.5em;
}
aside,
[class *= "sidebar"],
[id *= "sidebar"] {
	max-width: 90%;
	margin: 0 auto;
	border: 1px solid lightgrey;
	padding: 5px 15px;
}
@media (min-width: 1921px) {
	body {
		font-size: 18px;
	}
}

@axelpaco
Copy link

axelpaco commented Sep 8, 2017

image
This is mine, trying to do something like old readability (because I miss it).

  • Justify text.
  • I hide images and youtube (because I don't have access to youtube in my office).
  • Change the link colors.

This is my css:

@font-face { font-family: "Source Sans Pro Semibold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf"); }
@font-face { font-family: "Source Sans Pro Bold"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf"); }
@font-face { font-family: "Source Sans Pro Light"; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf"); }
@font-face { font-family: Merriweather; src: url("chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/Merriweather-Light.ttf"); }
@font-face { font-family: Verdana; src: local(C:\Windows\Fonts\verdana.ttf); }
@media screen {
  * { box-sizing: border-box; }
}
body { font-family: Merriweather, serif; line-height: 1.75em; font-size: 24px; color: rgb(0, 0, 0); background-color: #F3F2EE; text-align: justify; text-justify: inter-word;}
h1, h2 { font-family: "Source Sans Pro Bold", sans-serif; }
h1 { font-size: 1.875em; line-height: 2.125em; }
h2 { font-size: 1.25em; line-height: 1.5625em; }
h3 { font-family: Merriweather, serif; font-size: 1em; line-height: 1.7em; padding-top: 0.9375em; padding-bottom: 0.9375em; border-bottom: 1px solid rgb(216, 216, 216); border-top: 1px solid rgb(216, 216, 216); }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(122, 122, 122); text-decoration: none; font-weight: bold; }
a[href]:hover { color: rgb(0, 0, 0); text-decoration: none; font-weight: bold; }
.youtubeContainer {display:none; position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] {display:none; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
img { max-width: 100%; display:none; }
li { line-height: 1.5em; }
pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: "Source Sans Pro Light", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Source Sans Pro Semibold", sans-serif; font-size: 18px; color: rgb(122, 122, 122); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
.simple-container { max-width: 1000px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
@media (max-width: 750px) {
  .simple-container { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 450px) {
  .simple-container { padding-top: 30px; padding-left: 20px; padding-right: 20px; }
}
[class*="emoji"], [class*="icon"] { width: 1em; }

@haimingzhao
Copy link

haimingzhao commented Sep 26, 2017

An dark theme for easy reading.

image

file: https://gist.github.com/haimingzhao/902550273ecd91dde25ef11d8fe41c74

@multlurk
Copy link

multlurk commented Oct 15, 2017

Modified @ghost style. Yellow highlighted background (by @Lithene). Open Sans font.

screenshot 2017-10-15 15 18 05

@font-face{font-family:"Source Sans Pro Semibold";src:url(chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf)}
@font-face{font-family:"Source Sans Pro Bold";src:url(chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf)}
@font-face{font-family:"Source Sans Pro Light";src:url(chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf)}
@font-face{font-family:"Open Sans";src:url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i)}
@font-face{font-family:"Inconsolata";src:url(https://fonts.googleapis.com/css?family=Inconsolata)}
@media screen {
*{box-sizing:border-box}
}
body{background-color:#fffcf2;color:#282828;font-family:"Open Sans",sans-serif;font-size:16px;line-height:1.75em}
h1,h2{font-family:"Source Sans Pro Bold",sans-serif}
h1{font-size:1.875em;line-height:2.125em}
h2{font-size:1.25em;line-height:1.5625em}
h3{border-bottom:1px solid #d8d8d8;border-top:1px solid #d8d8d8;font-family:"Source Sans Pro Bold",sans-serif;font-size:1em;line-height:1.7em;padding-bottom:.9375em;padding-top:.9375em}
hr{background-color:#d8d8d8;border:none;height:1px;margin:0;width:100%}
a[href]{color:#bb2121}
a[href]:hover{color:#ff7878}
img{max-width:100%}
li{line-height:1.5em}
code{background-color:#e0e0e0;font-family:"Inconsolata",monospace;overflow:auto;padding:10px}
pre{background-color:#e0e0e0;font-family:"Inconsolata",monospace;font-size:90%;overflow:auto;padding:10px}
aside,[class*="sidebar"],[id*="sidebar"]{border:1px solid #d3d3d3;margin:0 auto;max-width:90%;padding:5px 15px}
.simple-date{border-right:1px solid #d8d8d8;display:inline-block;font-family:"Source Sans Pro Light",sans-serif;font-size:18px;padding-bottom:10px;padding-right:15px;padding-top:10px}
.rtl .simple-date{border-left:1px solid #d8d8d8;border-right:none;padding-left:15px;padding-right:0}
.simple-author{color:#bb2121;display:inline-block;font-family:"Source Sans Pro Semibold",sans-serif;font-size:18px;line-height:22px;padding-bottom:10px;padding-left:10px;padding-top:10px}
.rtl .simple-author{padding-left:0;padding-right:10px}
.simple-container{margin:0 auto;max-width:800px;padding-bottom:20px;padding-top:70px}
@media (max-width: 750px) {
.simple-container{padding-left:50px;padding-right:50px}
}
@media (max-width: 450px) {
.simple-container{padding-left:20px;padding-right:20px;padding-top:30px}
}
::selection{background:#ff0}
.emoji,svg.icon{width:1em}

@d-srd
Copy link

d-srd commented Jan 15, 2018

Modified @multlurk style to use Solarized Light color scheme.

screen shot 2018-01-15 at 19 41 15

@font-face{font-family:"Source Sans Pro Semibold";src:url(chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf)}
@font-face{font-family:"Source Sans Pro Bold";src:url(chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf)}
@font-face{font-family:"Source Sans Pro Light";src:url(chrome-extension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf)}
@font-face{font-family:"Open Sans";src:url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i)}
@font-face{font-family:"Inconsolata";src:url(https://fonts.googleapis.com/css?family=Inconsolata)}
@media screen {
*{box-sizing:border-box}
}
body{background-color:#fdf6e3;color:#657b83;font-family:"Open Sans",sans-serif;font-size:16px;line-height:1.75em}
h1,h2{font-family:"Source Sans Pro Bold",sans-serif}
h1{font-size:1.875em;line-height:2.125em}
h2{font-size:1.25em;line-height:1.5625em}
h3{border-bottom:1px solid #93a1a1;border-top:1px solid #93a1a1;font-family:"Source Sans Pro Bold",sans-serif;font-size:1em;line-height:1.7em;padding-bottom:.9375em;padding-top:.9375em}
hr{background-color:#93a1a1;border:none;height:1px;margin:0;width:100%}
a[href]{color:#dc322f}
a[href]:hover{color:#cb4b16}
img{max-width:100%}
li{line-height:1.5em}
code{background-color:#eee8d5;font-family:"Inconsolata",monospace;overflow:auto;padding:10px}
pre{background-color:#eee8d5;font-family:"Inconsolata",monospace;font-size:90%;overflow:auto;padding:10px}
aside,[class*="sidebar"],[id*="sidebar"]{border:1px solid #eee8d5;margin:0 auto;max-width:90%;padding:5px 15px}
.simple-date{border-right:1px solid #93a1a1;display:inline-block;font-family:"Source Sans Pro Light",sans-serif;font-size:18px;padding-bottom:10px;padding-right:15px;padding-top:10px}
.rtl .simple-date{border-left:1px solid #93a1a1;border-right:none;padding-left:15px;padding-right:0}
.simple-author{color:#dc322f;display:inline-block;font-family:"Source Sans Pro Semibold",sans-serif;font-size:18px;line-height:22px;padding-bottom:10px;padding-left:10px;padding-top:10px}
.rtl .simple-author{padding-left:0;padding-right:10px}
.simple-container{margin:0 auto;max-width:800px;padding-bottom:20px;padding-top:70px}
@media (max-width: 750px) {
.simple-container{padding-left:50px;padding-right:50px}
}
@media (max-width: 450px) {
.simple-container{padding-left:20px;padding-right:20px;padding-top:30px}
}
::selection{background:#eee8d5}
.emoji,svg.icon{width:1em}

@volcbs
Copy link

volcbs commented May 28, 2018

2018-05-29_00-22-05
comfy.css

Here's my custom CSS, modified from @aseeon's.
Using "Meera Inimai" as the font, and following this guide for better readability. I built this for the sole of reading Web Novels, so maybe it looks kinda meh for other than that.

@tuanchauict
Copy link

Here is mine dark-and-big-text-size-theme.css which is optimised for print

screen shot 2018-07-13 at 9 16 15 am

@ycgambo
Copy link

ycgambo commented Jul 17, 2018

Here's mine ycgambo.css

pic

body {font-family:"Courier New",Courier,monospace;line-height:1.75em;font-size:16px;color:#282828;background-color:#fff;}h1,h2,h3{font-family:"Comic Sans MS",cursive,sans-serif;}h1 {font-size:1.875em;line-height:2.125em;}h2 {font-size:1.25em;line-height:1.5625em;}h3 {font-size:1.14em;line-height:1.7em;padding-top:0.9375em;padding-bottom:0.9375em;border-bottom:1px solid #D8D8D8;}hr {height:1px;background-color:#D8D8D8;border:none;width:100%;margin:0px;}a[href] {color:#27AAE1;text-decoration:none;}a[href]:hover {color:#4ECAFF;}.youtubeContainer {position:relative;width:100%;height:0;padding-bottom:56.25%;padding-top:25px;}iframe[src *= "youtube.com/embed/"] {width:100%;height:100%;position:absolute;top:0;left:0;}img {max-width:100%;}li {line-height:1.5em;}td {padding:3px 7px;}table {border-collapse:collapse}tbody {border-top:1px solid black;border-bottom:1px solid black;}code,pre{font-family:"Courier New",Courier,monospace;background-color:#e2e2e2;border-radius:3px;}pre {font-size:14px;padding:10px;overflow:auto;}aside,[class *= "sidebar"],[id *= "sidebar"] {max-width:90%;margin:0 auto;border:1px solid lightgrey;padding:5px 15px;}.simple-date {display:inline-block;font-family:'Source Sans Pro Light',sans-serif;font-size:18px;padding-right:15px;padding-top:10px;padding-bottom:10px;border-right:1px solid #d8d8d8;}.rtl .simple-date {border-left:1px solid #d8d8d8;border-right:none;padding-right:0;padding-left:15px;}.simple-author {display:inline-block;font-family:'Source Sans Pro Semibold',sans-serif;font-size:18px;color:#27AAE1;line-height:22px;padding-left:10px;padding-top:10px;padding-bottom:10px;}.rtl .simple-author {padding-left:0;padding-right:10px;}.simple-container {max-width:800px;margin:0 auto;padding-top:70px;padding-bottom:20px;}@media (max-width:750px) {.simple-container {padding-left:50px;padding-right:50px;}}@media (max-width:450px) {.simple-container {padding-top:30px;padding-left:20px;padding-right:20px;}}[class *= "emoji"],[class *= "icon"] { width:1em; }script {display:none;}[class = "ad"],[class *= "ads"],[class ^= "ad-"],[class ^= "ad_"],[class *= "-ad-"],[class $= "-ad"],[class $= "_ad"],[class ~= "ad"] {display:none;}[class *= "navigation"],[class *= "nav"],nav,[class *= "search"],[class *= "menu"],[class *= "print"]:not(.simple-print) {display:none;}[class *= "nocontent"],.hidden {display:none;}[class *= "popup"] {display:none;}[class *= "share"],[class *= "sharing"],[class *= "social"],[class *= "follow"],[class *= "newsletter"] {display:none;}[class *= "meta"]:not(.simple-meta),[class *= "author"]:not(".simple-author"),[id *= "author"] {display:none;}form:not(.usertext),[class ^= "form-"],[class ^= "form"],[class *= "-form-"],[class $= "-form"],[class $= "form"],[class ~= "form"]{display:none;}[class *= "related"],[class *= "recommended"],[class *= "see-also"],[class *= "popular"],[class *= "trail"] {display:none;}[class *= "comment"],[class *= "disqus"],[id *= "disqus"] {display:none;}[class ^= "tag"],[class *= "-tag-"],[class $= "-tag"],[class $= "_tag"],[class ~= "tag"],[class *= "-tags-"],[class $= "-tags"],[class $= "_tags"],[class ~= "tags"],[id *= "-tags-"],[id $= "-tags"],[id $= "_tags"],[id ~= "tags"] {display:none;}[class *= "subscribe"],[id *= "subscribe"],[class *= "subscription"],[id *= "subscription"] {display:none;}[class ^= "fav"],[class *= "-fav-"],[class $= "-fav"],[class $= "_fav"],[class ~= "fav"],[id ^= "fav"],[id *= "-fav-"],[id $= "-fav"],[id $= "_fav"],[id ~= "fav"],[class *= "favorites"],[id *= "favorites"] {display:none;}[class *= "signup"],[id *= "signup"],[class *= "signin"],[id *= "signin"],[class *= "signIn"],[id *= "signIn"] {display:none;}footer,[class *= "footer"],[id *= "footer"] {display:none;}svg[class *= "pinterest"],[class *= "pinterest"] svg,svg[id *= "pinterest"],[id *= "pinterest"] svg,svg[class *= "pinit"],[class *= "pinit"] svg,svg[id *= "pinit"],[id *= "pinit"] svg,svg[class *= "facebook"],[class *= "facebook"] svg,svg[id *= "facebook"],[id *= "facebook"] svg,svg[class *= "github"],[class *= "github"] svg,svg[id *= "github"],[id *= "github"] svg,svg[class *= "twitter"],[class *= "twitter"] svg,svg[id *= "twitter"],[id *= "twitter"] svg,svg[class *= "instagram"],[class *= "instagram"] svg,svg[id *= "instagram"],[id *= "instagram"] svg,svg[class *= "tumblr"],[class *= "tumblr"] svg,svg[id *= "tumblr"],[id *= "tumblr"] svg,svg[class *= "youtube"],[class *= "youtube"] svg,svg[id *= "youtube"],[id *= "youtube"] svg,svg[class *= "codepen"],[class *= "codepen"] svg,svg[id *= "codepen"],[id *= "codepen"] svg,svg[class *= "dribble"],[class *= "dribble"] svg,svg[id *= "dribble"],[id *= "dribble"] svg,svg[class *= "soundcloud"],[class *= "soundcloud"] svg,svg[id *= "soundcloud"],[id *= "soundcloud"] svg,svg[class *= "rss"],[class *= "rss"] svg,svg[id *= "rss"],[id *= "rss"] svg,svg[class *= "linkedin"],[class *= "linkedin"] svg,svg[id *= "linkedin"],[id *= "linkedin"] svg,svg[class *= "vimeo"],[class *= "vimeo"] svg,svg[id *= "vimeo"],[id *= "vimeo"] svg,svg[class *= "email"],[class *= "email"] svg,svg[id *= "email"],[id *= "email"] svg {display:none;}button.simple-control.simple-close,button.simple-control.simple-print,button.simple-control.simple-edit-theme,.simple-ext-info,.simple-date,.simple-author,svg#Layer_1 {display:none;}

@vijaydaultani
Copy link

@d-srd and Others, Can anyone share the theme for Solarized Dark.

@ZachSaucier
Copy link
Owner Author

Please keep in mind that there is now a premium version of Just Read which has a slightly different setup, so all themes you see here may not work perfectly on your setup and require some changes. See this post for more information on styling changes.

@puzzlemoondev
Copy link

puzzlemoondev commented Sep 12, 2018

@d-srd and Others, Can anyone share the theme for Solarized Dark.

Here's one with minimum effort.


* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    font-family: 'Merriweather', serif;
    background-color: #002b36;
    line-height: 1.6;
    font-size: 17px;
    color: #657b83;
    text-rendering: optimizeLegibility;
}

.simple-container {
	max-width: 675px;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 20px;
}

.simple-print {
	fill: white;
	stroke: white;
}
.simple-print svg {
	height: 100%;
}

.simple-close {
	color: white;
	border-color: white;
}

.simple-ext-info {
	border-top: 1px solid #aaa;
}

p {
	font-size: 16px;
}

h1,
h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    color: #859900
}

h1 {
    font-size: 1.875em;
    line-height: 1.125;
}

h2 {
    font-size: 1.45em;
    line-height: 1.2625em;
}

h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.25em;
    line-height: 1.5;
    color: #b58900
}

hr {
    height: 1px;
    background-color: #586e75;
    border: none;
    width: 100%;
    margin: 0px;
}

a[href] {
    color: #268bd2;
}

a[href]:hover {
    color: #b58900;
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-top: 25px;
}
iframe[src *= "youtube.com/embed/"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

img {
    max-width: 100%;
}

li {
    line-height: 1.5em;
}

td {
    border: 1px solid black;
    padding: 3px 7px;
}

pre {
    background-color: #073642;
    padding: 10px;
    overflow: auto;
}

blockquote {
    border-left: 4px solid;
    margin-left: 0;
    padding: 15px 10% 15px 8%;
    margin: 1em 0;
    font-size: 1.2em;
    line-height: 1.4;
}
blockquote > *:first-child {
    margin-top: 0;
}
blockquote > *:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 0 10px;
}
 figcaption {
    font-size: 0.9em;
    opacity: 0.7;
    border: 1px solid #eee;
    padding: 17px 17px 12px;
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #d8d8d8;
}
.rtl .simple-date {
    border-left: 1px solid #d8d8d8;
    border-right: none;
    padding-right: 0;
    padding-left: 15px;
}

.simple-author {
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #268bd2;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .simple-author {
    padding-left: 0;
    padding-right: 10px;
}

.simple-container {
    max-width: 600px;
}


/* Make emojis and icons a reasonable size */
[class *= "emoji"],
[class *= "icon"] { width: 1em; }

@KonradBartu
Copy link

KonradBartu commented Sep 13, 2018

MacOSX Safari Reader's theme. With exact font-family, size and margins:

2019-10-26 12 43 34

.simple-container { max-width: 750px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
img { max-width: 100%; }
body { font-family: Georgia, serif; background-color: rgb(255, 255, 255); line-height: 1.6; font-size: 20px; color: rgb(51, 51, 51); text-rendering: optimizelegibility; }
h1, h2 { font-family: Georgia, sans-serif; font-weight: 700; }
h1 { font-size: 1.875em; line-height: 1.125; }
h2 { font-size: 1.45em; line-height: 1.2625em; }
h3 { font-family: Georgia, serif; font-size: 1.25em; line-height: 1.5; }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(39, 170, 225); }
a[href]:hover { color: rgb(78, 202, 255); }
.youtubeContainer { position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
img { max-width: 100%; }
li { line-height: 1.5em; }
td { border: 1px solid black; padding: 3px 7px; }
pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; }
blockquote { border-left: 4px solid; padding: 15px 10% 15px 8%; margin: 1em 0px; font-size: 1.2em; line-height: 1.4; }
blockquote > :first-child { margin-top: 0px; }
blockquote > :last-child { margin-bottom: 0px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 0.9em; opacity: 0.7; border: 1px solid rgb(238, 238, 238); padding: 17px 17px 12px; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: Georgia, sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: Georgia, sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
[class*="emoji"], [class*="icon"] { width: 1em; }

@ZachSaucier
Copy link
Owner Author

@ayahia70 Do you have a backup of the white theme you created on file? Your link is a 404 currently.

@iYahiaa
Copy link

iYahiaa commented Oct 3, 2018

@ZachSaucier No I don't have any backup, also I didn't remove it from GitHub 😢

@Steiner29
Copy link

@ayahia70 @ZachSaucier Would it be very hard to make again? That was my absolute favorite theme!

@ZachSaucier
Copy link
Owner Author

ZachSaucier commented Apr 29, 2019

“Dark-Mode with Purple” by Chuck Colsch

image

@import url('https://fonts.googleapis.com/css?family=DejaVu Sans Condensed|Source+Sans+Pro:400,700');

body {
font-family: 'DejaVu Sans Condensed', sans-serif;
background-color: #270F2E;
line-height: 1.8;
font-size: 17px;
color: #E9B6AF;
text-rendering: optimizeLegibility;
}

h1,
h2 {
font-family: 'DejaVu Sans Condensed', sans-serif;
font-weight: 700;
}

h1 {
font-size: 1.89em;
line-height: 1.32;
}

h2 {
font-size: 1.45em;
line-height: 1.32em;
}

h3 {
font-family: 'DejaVu Sans Condensed', sans-serif;
font-size: 1.25em;
line-height: 1.6;
}

hr {
height: 1px;
background-color: #D8D8D8;
border: none;
width: 100%;
margin: 0px;
}

a[href] {
color: #27AAE1;
}

a[href]:hover {
color: #4ECAFF;
}

.simple-container {
-webkit-print-color-adjust: exact;
}

.youtubeContainer {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
padding-top: 25px;
}
iframe[src *= "youtube.com/embed/"] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

img {
max-width: 100%;
}

li {
line-height: 1.6em;
}

td {
border: 1px solid black;
padding: 3px 7px;
}

pre {
background-color: #E0E0E0;
padding: 10px;
overflow: auto;
}

blockquote {
border-left: 4px solid;
margin-left: 0;
padding: 15px 10% 15px 8%;
margin: 1em 0;
font-size: 1.4em;
line-height: 1.6;
}
blockquote > *:first-child {
margin-top: 0;
}
blockquote > *:last-child {
margin-bottom: 0;
}

figure {
margin: 0 0 10px;
}
figcaption {
font-size: 1.1em;
opacity: 0.7;
border: 1px solid #eee;
padding: 17px 17px 12px;
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
max-width: 90%;
margin: 0 auto;
border: 1px solid lightgrey;
padding: 5px 15px;
}

.simple-date {
display: inline-block;
font-family: 'DejaVu Sans Condensed', sans-serif;
font-size: 18px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
border-right: 1px solid #d8d8d8;
}
.rtl .simple-date {
border-left: 1px solid #d8d8d8;
border-right: none;
padding-right: 0;
padding-left: 15px;
}

.simple-author {
display: inline-block;
font-family: 'DejaVu Sans Condensed', sans-serif;
font-size: 18px;
color: #E9B6AF;
line-height: 22px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.rtl .simple-author {
padding-left: 0;
padding-right: 10px;
}

.simple-article-container {
max-width: 600px;
}

/* Make emojis and icons a reasonable size */
[class *= "emoji"],
[class *= "icon"] { width: 1em; }

@nord-
Copy link

nord- commented May 24, 2019

Just-Read-Verdana.css
Just-Read-Verdana

Sepia-like background with box around it and Verdana as main font. Centered image with shadow effect.

@Vondelphia
Copy link

Vondelphia commented Aug 9, 2019

inspired by nook ebook reader
not sure if it supports premium. i would not spend $$$ on ebook reader

iridium_mBCoHdoGod

@import url("https://fonts.googleapis.com/css?family=Merriweather|Source+Sans+Pro:400,700");
body {
	font-family: Georgia, Merriweather, serif;
	background-color: #bcbec0;
	line-height: 1.6;
	font-size: 18px;
	color: #000;
	text-rendering: optimizelegibility;
}
h1, h2 {
	font-family: Georgia, "Source Sans Pro", sans-serif;
	font-weight: 700;
}
h1 {
	font-size: 1.875em;
	line-height: 1.125;
}
h2 {
	font-size: 1.45em;
	line-height: 1.2625em;
}
h3 {
	font-family: Merriweather, serif;
	font-size: 1.25em;
	line-height: 1.5;
}
hr {
	height: 1px;
	background-color: rgb(216, 216, 216);
	border: none;
	width: 100%;
	margin: 0px;
}
a[href] {
	color: #8b0000;
}
a[href]:hover {
	color: #CC3333;
}
.simple-container {
	max-width: 600px;
}
.youtubeContainer {
	position: relative;
	width: 100%;
	height: 0px;
	padding-bottom: 56.25%;
	padding-top: 25px;
}
iframe[src*="youtube.com/embed/"] {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
img {
	max-width: 100%;
}
li {
	line-height: 1.5em;
}
td {
	border: 1px solid black;
	padding: 3px 7px;
}
pre {
	background-color: rgb(224, 224, 224);
	padding: 10px;
	overflow: auto;
}
blockquote {
	border-left: 4px solid;
	padding: 15px 10% 15px 8%;
	margin: 1em 0px;
	font-size: 1.2em;
	line-height: 1.4;
}
blockquote> :first-child {
	margin-top: 0px;
}
blockquote> :last-child {
	margin-bottom: 0px;
}
figure {
	margin: 0px 0px 10px;
}
figcaption {
	font-size: 0.9em;
	opacity: 0.7;
	border: 1px solid rgb(238, 238, 238);
	padding: 17px 17px 12px;
}
aside, [class*="sidebar"], [id*="sidebar"] {
	/* max-width: 90%; */
	margin: 0px auto;
	border: 1px solid #666;
	padding: 10px 20px 15px;
}
.simple-date {
	display: inline-block;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 18px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-right: 1px solid rgb(216, 216, 216);
}
.rtl .simple-date {
	border-left: 1px solid rgb(216, 216, 216);
	border-right: none;
	padding-right: 0px;
	padding-left: 15px;
}
.simple-author {
	display: inline-block;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 18px;
	color: rgb(92, 174, 70);
	line-height: 22px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.rtl .simple-author {
	padding-left: 0px;
	padding-right: 10px;
}
[class*="emoji"], [class*="icon"] {
	width: 1em;
}
/* hide popup premium ad */
.jr-tooltip.jr-notifier, .simple-viewed-using {
    display: none;
}

@ryancsf
Copy link

ryancsf commented Sep 14, 2019

Hey Zach, thanks for the awesome extension.

Here's my take on this. Hope someone finds it useful. Cheers! :)

cobalt-dark.css

image

@Amanita19
Copy link

Changed the highlight color, added nice looking block quotes, and tinkered with a bunch of other settings.

Ideally, I'd also add an option for a table of contents and find a way to insert a background photo, but this is what I have so far.

image

@import url("https://fonts.googleapis.com/css?family=Times+New+Roman");
h1 { font-family: "Times New Roman"; font-size: 24pt; line-height: 1.5; top: 0px; width: 100%; }
h2 { font-family: "Times New Roman"; font-size: 20pt; line-height: 1.5; }
h3 { font-family: "Times New Roman"; font-size: 16pt; line-height: 1.5; }
body { font-family: "Times New Roman"; background-color: rgb(18, 18, 18); line-height: 1.5; font-size: 14.5pt; font-weight: 400; color: rgb(176, 176, 176); text-rendering: optimizelegibility; }
a[href] { color: rgb(88, 128, 172); }
a[href]:hover { color: rgb(88, 128, 172); }
blockquote { font-family: "Times New Roman"; background-color: rgb(18, 18, 18); line-height: 1.5; font-size: 14.5pt; color: rgb(176, 176, 176); padding-left: 15px; border-left: 3px solid rgb(176, 176, 176); width: auto; margin: 25px auto; font-style: italic; position: relative; }
.simple-container { max-width: 850px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
.youtubeContainer { position: relative; width: 100%; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; }
img { max-width: 100%; }
li { line-height: 1.5; }
td { border: 5px rgb(176, 176, 176); padding: 3px 7px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 1.45pt; font-style: italic; opacity: 0.7; border: 2px solid rgb(176, 176, 176); padding: 12px; }
.simple-date { display: inline-block; font-family: "Times New Roman"; font-size: 14.5pt; padding-right: 15px; padding-top: 3px; padding-bottom: 3px; border-right: 2px solid rgb(88, 128, 172); }
.rtl .simple-date { border-left: 2px solid rgb(88, 128, 172); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Times New Roman"; font-size: 14.5pt; color: rgb(88, 128, 172); line-height: 22px; padding-left: 10px; padding-top: 3px; padding-bottom: 3px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
img { max-width: 100%; }
::selection { background: rgb(88, 128, 172); }

@Amanita19
Copy link

Now to see if there's a way to insert a table of contents...

Credit for the photo goes to Barry J. Brady. You can replace the link in url("") with the image address of whatever photo you'd like; be warned, however, that not all of them will translate well.

image

@import url("https://fonts.googleapis.com/css?family=Times+New+Roman");
h1 { font-family: "Times New Roman"; font-size: 24pt; line-height: 1.5; top: 0px; width: 100%; }
h2 { font-family: "Times New Roman"; font-size: 20pt; line-height: 1.5; }
h3 { font-family: "Times New Roman"; font-size: 16pt; line-height: 1.5; }
body { font-family: "Times New Roman"; 
    background-image: url("https://kbdevstorage1.blob.core.windows.net/asset-blobs/19469_en_1"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
    line-height: 1.5; 
    font-size: 14.5pt; 
    font-weight: 400; color: 
    rgb(176, 176, 176); 
    text-rendering: optimizelegibility; }
a[href] { color: rgb(88, 128, 172); }
a[href]:hover { color: rgb(88, 128, 172); }
blockquote { font-family: "Times New Roman"; background-color: rgb(18, 18, 18); line-height: 1.5; font-size: 14.5pt; color: rgb(176, 176, 176); padding-left: 15px; border-left: 3px solid rgb(176, 176, 176); width: auto; margin: 25px auto; font-style: italic; position: relative; }
.simple-container {
	margin: 50px auto;
	background-color: rgb(18, 18, 18); 
	opacity: 0.95;
	-webkit-print-color-adjust: exact;
	max-width: 800px;
	border: 1px solid rgb(68, 68, 68);
	border-radius: 20px;
	padding: 50px;}
.youtubeContainer { position: relative; width: 100%; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; }
img { max-width: 100%; }
li { line-height: 1.5; }
td { border: 5px rgb(176, 176, 176); padding: 3px 7px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 1.45pt; font-style: italic; opacity: 0.7; border: 2px solid rgb(176, 176, 176); padding: 12px; }
.simple-date { display: inline-block; font-family: "Times New Roman"; font-size: 14.5pt; padding-right: 15px; padding-top: 3px; padding-bottom: 3px; border-right: 2px solid rgb(88, 128, 172); }
.rtl .simple-date { border-left: 2px solid rgb(88, 128, 172); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Times New Roman"; font-size: 14.5pt; color: rgb(88, 128, 172); line-height: 22px; padding-left: 10px; padding-top: 3px; padding-bottom: 3px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
img { max-width: 100%; }
::selection { background: rgb(88, 128, 172); }

@Amanita19
Copy link

This is also one of my favorites. The photo is credited to Mike Mackinven, and the url is as follows:

https://kbdevstorage1.blob.core.windows.net/asset-blobs/19566_en_1

To make things clear, this was all done using the free version of Just Read. Use responsibly, and make sure to credit the photographers if you take the stylesheet into any sort of commercial field.

image

@KonradBartu
Copy link

KonradBartu commented Oct 25, 2019

Safari Reader Dark Theme

2019-10-26 00 09 00

.simple-container { max-width: 750px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; }
img { max-width: 100%; }
body { font-family: Georgia, serif; background-color: rgb(34, 34, 51); line-height: 1.6; font-size: 20px; color: rgb(209, 209, 209); text-rendering: optimizelegibility; }
h1, h2 { font-family: Georgia, sans-serif; font-weight: 700; }
h1 { font-size: 1.875em; line-height: 1.125; }
h2 { font-size: 1.45em; line-height: 1.2625em; }
h3 { font-family: Georgia, serif; font-size: 1.25em; line-height: 1.5; }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgb(39, 170, 225); }
a[href]:hover { color: rgb(78, 202, 255); }
.youtubeContainer { position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
img { max-width: 100%; }
li { line-height: 1.5em; }
td { border: 1px solid black; padding: 3px 7px; }
pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; }
blockquote { border-left: 4px solid; padding: 15px 10% 15px 8%; margin: 1em 0px; font-size: 1.2em; line-height: 1.4; }
blockquote > :first-child { margin-top: 0px; }
blockquote > :last-child { margin-bottom: 0px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 0.9em; opacity: 0.7; border: 1px solid rgb(238, 238, 238); padding: 17px 17px 12px; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: Georgia, sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: Georgia, sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
[class*="emoji"], [class*="icon"] { width: 1em; }

@KonradBartu
Copy link

Safari Reader Light Grey Theme

2019-10-26 12 31 21

.simple-container { max-width: 750px; margin: 0px auto; padding-top: 70px; padding-bottom: 20px; } img { max-width: 100%; } body { font-family: Georgia, serif; background-color: rgb(245, 245, 245); line-height: 1.6; font-size: 20px; color: rgb(42, 42, 42); text-rendering: optimizelegibility; } h1, h2 { font-family: Georgia, sans-serif; font-weight: 700; } h1 { font-size: 1.875em; line-height: 1.125; } h2 { font-size: 1.45em; line-height: 1.2625em; } h3 { font-family: Georgia, serif; font-size: 1.25em; line-height: 1.5; } hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; } a[href] { color: rgb(39, 170, 225); } a[href]:hover { color: rgb(78, 202, 255); } .youtubeContainer { position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; } iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } img { max-width: 100%; } li { line-height: 1.5em; } td { border: 1px solid black; padding: 3px 7px; } pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; } blockquote { border-left: 4px solid; padding: 15px 10% 15px 8%; margin: 1em 0px; font-size: 1.2em; line-height: 1.4; } blockquote > :first-child { margin-top: 0px; } blockquote > :last-child { margin-bottom: 0px; } figure { margin: 0px 0px 10px; } figcaption { font-size: 0.9em; opacity: 0.7; border: 1px solid rgb(238, 238, 238); padding: 17px 17px 12px; } aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; } .simple-date { display: inline-block; font-family: Georgia, sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); } .rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; } .simple-author { display: inline-block; font-family: Georgia, sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .rtl .simple-author { padding-left: 0px; padding-right: 10px; } [class*="emoji"], [class*="icon"] { width: 1em; }

@StTronn
Copy link

StTronn commented Nov 10, 2019

Oceanic Theme + Fira Code

Inspired by voronianski Oceanic Theme
just_read


body {
    font-family: 'Fira Code', serif;
    background-color: #1B2B34;
    line-height: 1.6;
    font-size: 17px;
    color:#6699CC;
    text-rendering: optimizeLegibility;
}

h1,
h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    color:#EC5f67;
}

h1 {
    font-size: 1.875em;
    line-height: 1.125;
    color:#EC5f67;

}

h2 {
    font-size: 1.45em;
    line-height: 1.2625em;
    color:#EC5f67;
}

h3 {
    font-family: 'Fira Code', serif;
    font-size: 1.25em;
    line-height: 1.5;
    color:#EC5f67;
}

hr {
    height: 1px;
    background-color: #D8D8D8;
    border: none;
    width: 100%;
    margin: 0px;
}

a[href] {
    color: #27AAE1;
}

a[href]:hover {
    color: #4ECAFF;
}

.simple-container {
    max-width: 800px;
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-top: 25px;
}
iframe[src *= "youtube.com/embed/"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

img {
    max-width: 100%;
}

li {
    line-height: 1.5em;
}

td {
    border: 1px solid black;
    padding: 3px 7px;
}

pre {
    background-color: #E0E0E0;
    padding: 10px;
    overflow: auto;
}

blockquote {
    border-left: 4px solid;
    margin-left: 0;
    padding: 15px 10% 15px 8%;
    margin: 1em 0;
    font-size: 1.2em;
    line-height: 1.4;
}
blockquote > *:first-child {
    margin-top: 0;
}
blockquote > *:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 0 10px;
}
 figcaption {
    font-size: 0.9em;
    opacity: 0.7;
    border: 1px solid #eee;
    padding: 17px 17px 12px;
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #d8d8d8;
}
.rtl .simple-date {
    border-left: 1px solid #d8d8d8;
    border-right: none;
    padding-right: 0;
    padding-left: 15px;
}

.simple-author {
    display: inline-block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #27AAE1;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .simple-author {
    padding-left: 0;
    padding-right: 10px;
}


/* Make emojis and icons a reasonable size */
[class *= "emoji"],
[class *= "icon"] { width: 1em; }

@Amanita19
Copy link

image

Add this snippet of code to make your gui icons appear only on hover.

[class~=simple-control] {
  opacity: 0;
}
[class~=simple-control]:hover {
  opacity: 0.5;
}

Alternatively, this second snippet also works. The only difference is that all the icons will appear at the same time rather than individually.

.simple-ui-container {
    opacity: 0;
}
.simple-ui-container:hover {
    opacity: 0.5;
}

@utopiaemse
Copy link

utopiaemse commented Feb 6, 2020

for farsi/persian theme include right to left/RTL
css:
@import url("https://fonts.googleapis.com/css?family=Merriweather|Source+Sans+Pro:400,700"); body { font-family: Nazanin ,Merriweather, serif; background-color: rgb(255, 255, 255); line-height: 1.6; font-size: 25px; direction:rtl; text-align: justify; color: rgb(51, 51, 51); text-rendering: optimizelegibility; } h1, h2 { font-family: Nazanin ," Source Sans Pro", sans-serif; font-weight: 700; } h1 { font-size: 1.875em; line-height: 1.125; } h2 { font-size: 1.45em; line-height: 1.2625em; } h3 { font-family: Nazanin, Merriweather, serif; font-size: 1.25em; line-height: 1.5; } hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; } a[href] { color: rgb(39, 170, 225); } a[href]:hover { color: rgb(78, 202, 255); } .simple-container { max-width: 600px; } .youtubeContainer { position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; } iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } img { max-width: 100%; } li { line-height: 1.5em; } td { border: 1px solid black; padding: 3px 7px; } pre { background-color: rgb(224, 224, 224); padding: 10px; overflow: auto; } blockquote { border-left: 4px solid; padding: 15px 10% 15px 8%; margin: 1em 0px; font-size: 1.2em; line-height: 1.4; } blockquote > :first-child { margin-top: 0px; } blockquote > :last-child { margin-bottom: 0px; } figure { margin: 0px 0px 10px; } figcaption { font-size: 0.9em; opacity: 0.7; border: 1px solid rgb(238, 238, 238); padding: 17px 17px 12px; } aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; } .simple-date { display: inline-block; font-family: "Source Sans Pro", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); } .rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; } .simple-author { display: inline-block; font-family: "Source Sans Pro", sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .rtl .simple-author { padding-left: 0px; padding-right: 10px; } [class*="emoji"], [class*="icon"] { width: 1em; }

@abhishek-nandgaonkar
Copy link

I absolutely love reading the articles on Vox, the text font, font weight and especially the satisfying font selection. Here is my attempt at replicating the same inspired from a bunch of comment above. Please do share suggestions and improvements, CSS is not my best trait.

@font-face { font-family: "Source Sans Pro Semibold"; src: url("chromeextension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Semibold.ttf"); } @font-face { font-family: "Source Sans Pro Bold"; src: url("chromeextension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Bold.ttf"); } @font-face { font-family: "Source Sans Pro Light"; src: url("chromeextension://dgmanlpmmkibanfdgjocnabmcaclkmod/fonts/SourceSansPro-Light.ttf"); } @font-face { font-family: "Open Sans"; src: url("https://fonts.googleapis.com/cssfamily=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"); } @font-face { font-family: Inconsolata; src: url("https://fonts.googleapis.com/css?family=Inconsolata"); } @media screen {* { box-sizing: border-box; }} body { background-color: rgb(255, 255, 255); color: rgb(76, 77, 78); font-family: "Helvetica", sans-serif; font-size: 18px; line-height: 1.5em; font-weight: 400; } h1, h2 { font-family: "Helvetica", sans-serif; } h1 { font-size: 1.875em; line-height: 2.125em; } h2 { font-size: 1.25em; line-height: 1.5625em; } h3 { border-bottom: 1px solid rgb(216, 216, 216); border-top: 1px solid rgb(216, 216, 216); font-family: "Source Sans Pro Bold", sans-serif; font-size: 1em; line-height: 1.7em; padding-bottom: 0.9375em; padding-top: 0.9375em; } hr { background-color: rgb(216, 216, 216); border: none; height: 1px; margin: 0px; width: 100%; } a[href] { color: rgb(79, 113, 119); font-weight: 600; } a[href]:hover { color: rgb(255, 120, 120); font-weight: 600; } img { max-width: 100%; } li { line-height: 1.5em; } code { background-color: rgb(224, 224, 224); font-family: Inconsolata, monospace; overflow: auto; padding: 10px; } pre { background-color: rgb(224, 224, 224); font-family: Inconsolata, monospace; font-size: 90%; overflow: auto; padding: 10px; } aside, [class*="sidebar"], [id*="sidebar"] { border: 1px solid rgb(211, 211, 211); margin: 0px auto; max-width: 90%; padding: 5px 15px; } .simple-date { border-right: 1px solid rgb(216, 216, 216); display: inline-block; font-family: "Source Sans Pro Light", sans-serif; font-size: 18px; padding-bottom: 10px; padding-right: 15px; padding-top: 10px; } .rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-left: 15px; padding-right: 0px; } .simple-author { color: rgb(187, 33, 33); display: inline-block; font-family: "Source Sans Pro Semibold", sans-serif; font-size: 18px; line-height: 22px; padding-bottom: 10px; padding-left: 10px; padding-top: 10px; } .rtl .simple-author { padding-left: 0px; padding-right: 10px; } .simple-container { margin: 0px auto; max-width: 1000px; padding-bottom: 20px; padding-top: 70px; } @media (max-width: 750px) { .simple-container { padding-left: 50px; padding-right: 50px; } } @media (max-width: 450px) { .simple-container { padding-left: 20px; padding-right: 20px; padding-top: 30px; } } ::selection { background: rgb(255, 242, 0); } .emoji, svg.icon { width: 1em; }

This is a screenshot from the Vox website
vox website

And a screenshot of Just Read
just read

Repository owner deleted a comment from yeimsick1 Oct 5, 2020
@abg88
Copy link

abg88 commented Nov 29, 2020

I tweaked the default dark style of Just Read 5.0 and it's looking great.

image

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");

body {
    font-family: "Noto Serif", serif;
    background-color: #000000;
    line-height: 1.6;
    font-size: 17px;
    color: #000000;
    text-rendering: optimizeLegibility;
}

.premium-feature { display: none !important; }

@media print {
    body { color: #333; }
}

h1,
h2 {
    font-weight: 700;
}

h1 {
    font-size: 1.875em;
    line-height: 1.125;
}

h2 {
    font-size: 1.45em;
    line-height: 1.2625em;
}

h3 {
    font-size: 1.25em;
    line-height: 1.5;
}

hr {
    height: 1px;
    background-color: inherit;
    border: none;
    width: 100%;
    margin: 0px;
}

a[href] {
    color: #64BEFA;
}

a[href]:hover {
    color: #2089d0;
}

.simple-container {
    max-width: 700px; margin: 30px auto; 
    background-color: rgb(255, 255, 255); 
    padding: 0px 40px 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 6px 12px 3px; 
}

.simple-control,
.simple-control *,
.simple-edit * {
    fill: #D1D1D1;
    color: #D1D1D1;
    border-color: #D1D1D1;
}
.simple-share-dropdown {
    background-color: transparent;
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-top: 25px;
}
iframe {
    width: 100%;
    height: 300px;
}
iframe[src *= "youtube.com/embed/"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

video,
img {
    max-width: 100%;
}

li {
    line-height: 1.5em;
    margin-bottom: 5px;
}

td {
    border: 1px solid black;
    padding: 3px 7px;
}

pre {
    color: #1f1f1f;
    padding: 10px;
    overflow: auto;
}
pre,
code {
    color: #1f1f1f;
    background-color: #E0E0E0;
}

blockquote {
    border-left: 4px solid;
    margin-left: 0;
    padding: 15px 10% 15px 8%;
    margin: 1em 0;
    font-size: 1.2em;
    line-height: 1.4;
}
blockquote > *:first-child {
    margin-top: 0;
}
blockquote > *:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 0 10px;
}
 figcaption {
    font-size: 0.9em;
    opacity: 0.7;
    border: 1px solid #eee;
    padding: 17px 17px 12px;
}

table {
    background: #004b7a;
    margin: 10px auto;
    border: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
    border-spacing: 0;
    font: inherit;
    text-align: center;
}
table tr td,
table tr th,
table thead th {
    margin: 3px;
    padding: 5px;
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .1);
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-size: 18px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #d8d8d8;
}
.rtl .simple-date {
    border-left: 1px solid #d8d8d8;
    border-right: none;
    padding-right: 0;
    padding-left: 15px;
}

.simple-author {
    display: inline-block;
    font-size: 18px;
    color: #27AAE1;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .simple-author {
    padding-left: 0;
    padding-right: 10px;
}

.simple-article-container {
    max-width: 600px;
}

.simple-ext-info {
    border-top-color: #767676;
}
.simple-bug-reporter a[href] {
    color: #e9e9e9;
}
.simple-bug-reporter a[href]:hover {
    color: #fff;
}

.pause-scroll {
    color: #D1D1D1;
}

.simple-progress::-webkit-progress-value {
    background-color: #767676;
}

.simple-found,
.jr-highlight-yellow,
.jr-highlight-green,
.jr-highlight-blue,
.jr-highlight-orange {
    color: #1d1d1d;
}


/* Make emojis and icons a reasonable size */
[class *= "emoji"],
[class *= "icon"]:not([class *= "no-icon"]) { width: 1em; }
[class *= "inline"] { display: inline-block; min-width: 2rem; }

@AceChakra
Copy link

AceChakra commented Dec 5, 2020

Screen Shot 2020-12-05 at 12 48 06 PM

My main purpose for looking for this extension was to re create the multiple column Reader view that the old Microsoft Edge browser used to have since reading longer articles on a single page seems much better than having to vertically scroll. This stylesheet borrows from others with some tweaks, but seems to work OK on Washington Post and New York Times. I would assume that someone who actually knew what they are doing (not me) could make this look really great.

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* { box-sizing: border-box; }
body { columns: auto 4; font-family: "Open Sans", sans-serif; line-height: 1em; font-size: 8px; background-color: rgb(9, 9, 9); color: rgba(0, 0, 0, 0.7); }
.simple-container { max-width: 800px; margin: 30px auto; background-color: rgb(224, 224, 224); padding: 30px 40px 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 6px 12px 3px; }
.simple-print { fill: white; stroke: white; }
.simple-print svg { height: 100%; }
.simple-close { color: white; border-color: white; }
.simple-ext-info { border-top: 1px solid rgb(170, 170, 170); }
p { font-size: 18px; }
h1 { font-size: 28px; line-height: 36px; }
h2 { font-size: 18px; line-height: 28px; }
h3 { font-size: 18px; line-height: 25px; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid rgb(216, 216, 216); border-top: 1px solid rgb(216, 216, 216); }
hr { height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href] { color: rgba(84, 190, 255, 0.95); text-decoration: none; }
a[href]:hover { color: rgba(133, 208, 255, 0.95); }
img { max-width: 0%; }
li { line-height: 1.5em; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
@media (min-width: 1px) {
  body { font-size: 22px; }
}
@media print {
  .simple-container { box-shadow: none; }
}

@ghost
Copy link

ghost commented Jan 11, 2021

Old-Style Typography
For those of you who like the typographic style of the late 19th and early 20th century. It has a sepia background and a greenish font color. It includes common ligatures and old-style figures. TeX Gyre Adventor and TeX Gyre Schola from GUST e-foundry required.

image

 body {
    font-family: 'TeX Gyre Schola', serif;
    background-color: #FBF0D9;
    line-height: 1.6;
    font-size: 17px;
    font-feature-settings: "liga" 1, "onum" 1;
    margin: 0 auto;
    color: #5F4B32;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    font-family: 'TeX Gyre Adventor', sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 1.75em;
    line-height: 1.125;
}

h2 {
    font-size: 1.5em;
    line-height: 1.2625em;
}

h3 {
    font-size: 1.25em;
    line-height: 1.5;
}

hr {
    height: 1px;
    background-color: #D8D8D8;
    border: none;
    width: 100%;
    margin: 0px;
}

a[href] {
    color: #27AAE1;
}

a[href]:hover {
    color: #4ECAFF;
}

.content-container {
    text-align: justify;
}

.simple-container {
    -webkit-print-color-adjust: exact;
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-top: 25px;
}
iframe {
    width: 100%;
    height: 300px;
}
iframe[src *= "youtube.com/embed/"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

video,
img {
    max-width: 100%;
}

li {
    line-height: 1.5em;
    margin-bottom: 5px;
}

td {
    border: 1px solid black;
    padding: 3px 7px;
}

pre {
    padding: 10px;
    overflow: auto;
}
pre,
code {
    background-color: #E0E0E0;
}

blockquote {
    border-left: 4px solid;
    margin-left: 0;
    padding: 15px 10% 15px 8%;
    margin: 1em 0;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.4;
}

blockquote > *:first-child {
    margin-top: 0;
}
blockquote > *:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 0 10px;
}
 figcaption {
    font-size: 0.9em;
    opacity: 0.7;
    border: 1px solid #eee;
    padding: 17px 17px 12px;
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-family: 'TeX Gyre Adventor', sans-serif;
    font-size: 18px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #d8d8d8;
}
.rtl .simple-date {
    border-left: 1px solid #d8d8d8;
    border-right: none;
    padding-right: 0;
    padding-left: 15px;
}

.simple-author {
    display: inline-block;
    font-family: 'TeX Gyre Adventor', sans-serif;
    font-size: 18px;
    color: #27AAE1;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .simple-author {
    padding-left: 0;
    padding-right: 10px;
}

.simple-article-container {
    max-width: 600px;
    text-align: justify;
}


/* Make emojis and icons a reasonable size */
[class *= "emoji"],
[class *= "icon"]:not([class *= "no-icon"]) { width: 1em; }
[class *= "inline"] { display: inline-block; min-width: 2rem; }

@ma-xlo
Copy link

ma-xlo commented May 3, 2021

"Outline" based style.

Screenshot from 2021-05-03 14-11-19

@import url("https://fonts.googleapis.com/css?family=Merriweather|Source+Sans+Pro:400,700");
body { font-family: Merriweather, serif; background-color: white; text-align: justify; line-height: 2; font-size: 18px; color: #303030; }
h1, h2 { font-family: "Source Sans Pro", sans-serif; font-weight: 700; }
h1 { font-size: 1.875em; line-height: 1.125; }
h2 { font-size: 1.45em; line-height: 1.2625em; }
h3 { font-family: Merriweather, serif; font-size: 1.25em; line-height: 1.5; }
hr { text-align: justify; height: 1px; background-color: rgb(216, 216, 216); border: none; width: 100%; margin: 0px; }
a[href]{color:#dc322f}
a[href]:hover{color:#cb4b16}
.simple-container { -webkit-print-color-adjust: exact; }
.youtubeContainer { position: relative; width: 100%; height: 0px; padding-bottom: 56.25%; padding-top: 25px; }
iframe { width: 100%; height: 300px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
video, img { max-width: 100%; }
li { line-height: 1.5em; margin-bottom: 5px; }
td { border: 1px solid black; padding: 3px 7px; }
pre { padding: 10px; overflow: auto; }
pre, code { background-color: rgb(224, 224, 224); }
blockquote { border-left: 4px solid; padding: 15px 10% 15px 8%; margin: 1em 0px; font-size: 1.2em; line-height: 1.4; }
blockquote > :first-child { margin-top: 0px; }
blockquote > :last-child { margin-bottom: 0px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 0.9em; opacity: 0.7; border: 1px solid rgb(238, 238, 238); padding: 17px 17px 12px; }
aside, [class*="sidebar"], [id*="sidebar"] { max-width: 90%; margin: 0px auto; border: 1px solid lightgrey; padding: 5px 15px; }
.simple-date { display: inline-block; font-family: "Source Sans Pro", sans-serif; font-size: 18px; padding-right: 15px; padding-top: 10px; padding-bottom: 10px; border-right: 1px solid rgb(216, 216, 216); }
.rtl .simple-date { border-left: 1px solid rgb(216, 216, 216); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Source Sans Pro", sans-serif; font-size: 18px; color: rgb(39, 170, 225); line-height: 22px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
.simple-article-container { max-width: 700px; }
[class*="emoji"], [class*="icon"]:not([class*="no-icon"]) { width: 1em; }
[class*="inline"] { display: inline-block; min-width: 2rem; }

::-webkit-scrollbar {
    display: none;
}

@ghost
Copy link

ghost commented May 4, 2021

Here's a stylesheet I created using fonts I like: TeX Gyre Pagella (body) and TeX Gyre Adventor (headings). You can download it from GUST e-foundry for free. Alternatively, you can substitute the fonts using Palatino Linotype (body) and Century Gothic (headings).

Sample

body {
    font-family: 'TeX Gyre Pagella', serif;
    background-color: #f8e9d9;
    line-height: 1.6;
    font-size: 19px;
    color: #704214;
    font-feature-settings: "liga", "onum";
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
    font-family: 'TeX Gyre Adventor', sans-serif;
    font-weight: 700;
    font-feature-settings: "liga", "onum";
}

h1 {
    font-size: 1.875em;
    line-height: 1.125;
}

h2 {
    font-size: 1.45em;
    line-height: 1.2625em;
}

h3 {
    font-size: 1.25em;
    line-height: 1.5;
}

hr {
    height: 1px;
    background-color: #D8D8D8;
    border: none;
    width: 100%;
    margin: 0px;
}

.content-container {
    text-align: justify;
}

a[href] {
    color: #27AAE1;
}

a[href]:hover {
    color: #4ECAFF;
}

.simple-container {
    -webkit-print-color-adjust: exact;
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-top: 25px;
}
iframe {
    width: 100%;
    height: 300px;
}
iframe[src *= "youtube.com/embed/"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

video,
img {
    max-width: 100%;
}

li {
    line-height: 1.5em;
    margin-bottom: 5px;
}

td {
    border: 1px solid black;
    padding: 3px 7px;
}

pre {
    padding: 10px;
    overflow: auto;
}
pre,
code {
    background-color: #E0E0E0;
}

blockquote {
    border-left: 4px solid;
    margin-left: 0;
    padding: 15px 10% 15px 8%;
    margin: 1em 0;
    font-size: 1.2em;
    line-height: 1.4;
}
blockquote > *:first-child {
    margin-top: 0;
}
blockquote > *:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 0 10px;
}
 figcaption {
    font-size: 0.9em;
    opacity: 0.7;
    border: 1px solid #eee;
    padding: 17px 17px 12px;
}

aside,
[class *= "sidebar"],
[id *= "sidebar"] {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-family: 'TeX Gyre Adventor', sans-serif;
    font-size: 18px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #d8d8d8;
}
.rtl .simple-date {
    border-left: 1px solid #d8d8d8;
    border-right: none;
    padding-right: 0;
    padding-left: 15px;
}

.simple-author {
    display: inline-block;
    font-family: 'TeX Gyre Pagella', serif;
    font-size: 18px;
    color: #27AAE1;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .simple-author {
    padding-left: 0;
    padding-right: 10px;
}

.simple-article-container {
    max-width: 600px;
}

@ghost
Copy link

ghost commented Sep 5, 2022

Here's a simple stylesheet I created by using parts from LaTeX CSS, someones awesome CSS for Just Read and adding a little bit myself.

Screenshot 2022-09-05 at 23 48
Screenshot 2022-09-06 at 00 12

@font-face {
    font-family: "CMU Roman";
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Serif/cmunrm.woff') format("woff");
}

@font-face {
    font-family: "CMU Roman";
    font-weight: bold;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Serif/cmunbx.woff') format("woff");
}

@font-face {
    font-family: "CMU Roman";
    font-weight: normal;
    font-style: italic;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Serif/cmunti.woff') format("woff");
}

@font-face {
    font-family: "CMU Roman";
    font-weight: bold;
    font-style: italic;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Serif/cmunbi.woff') format("woff");
}

@font-face {
    font-family: "CMU Mono";
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Typewriter/cmuntt.woff') format("woff");
}

@font-face {
    font-family: "CMU Mono";
    font-weight: bold;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Typewriter/cmuntb.woff') format("woff");
}

@font-face {
    font-family: "CMU Mono";
    font-weight: normal;
    font-style: italic;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Typewriter/cmunit.woff') format("woff");
}

@font-face {
    font-family: "CMU Mono";
    font-weight: bold;
    font-style: italic;
    src: url('https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/font/Typewriter/cmuntx.woff') format("woff");
}

* {
    box-sizing: border-box;
}

body {
    font-family: "CMU Roman", serif;
    line-height: 1.75em;
    font-size: 20px;
    color: rgb(40, 40, 40);
    background-color: rgb(255, 252, 242);
}

input,
button,
textarea,
select {
    font: inherit;
}

textarea {
    width: 100%;
}

article>*+* {
    margin-top: 1em;
}

h1 {
    font-size: 1.875em;
    line-height: 2.125em;
}

h2 {
    font-size: 1.25em;
    line-height: 1.5625em;
}

h3 {
    font-family: "CMU Roman", serif;
    font-size: 1em;
    line-height: 1.7em;
    padding-top: 0.9375em;
    padding-bottom: 0.9375em;
    border-bottom: 1px solid rgb(216, 216, 216);
    border-top: 1px solid rgb(216, 216, 216);
}

hr {
    height: 1px;
    background-color: rgb(216, 216, 216);
    border: none;
    width: 100%;
    margin: 0px;
}

p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    margin-top: 1rem;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

a,
a:visited {
    text-decoration: none;
    color: #a00;
}

code, pre, kbd {
    font-family: 'CMU Mono', monospace;
    font-weight: 600;
    display: inline-block;
    padding: 5pt;
    margin:auto;
    background: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
    max-width: 100%;
    border-top: 2.27px solid black;
    border-bottom: 2.27px solid black;
    overflow-x: auto;
    counter-increment: caption;
}

table tr>th[scope='col'] {
    border-bottom: 1.36px solid black;
}

table tr>th[scope='row'] {
    border-right: 1.36px solid black;
}

table>tbody>tr:first-child>td,
table>tbody>tr:first-child>th {
    border-top: 1.36px solid black;
}

table>tbody>tr:last-child>td,
table>tbody>tr:last-child>th {
    border-bottom: 1.36px solid black;
}

th,
td {
    text-align: left;
    padding: 0.5rem;
    line-height: 1.1;
}

/* Table caption */
caption {
    text-align: left;
    font-size: 0.923em;
    /* border-bottom: 2pt solid #000; */
    padding: 0 0.25em 0.25em;
    width: 100%;
    margin-left: 0;
}

caption::before {
    content: 'Table 'counter(caption) '. ';
    font-weight: bold;
}

/* allow scroll on the x-axis */
.scroll-wrapper {
    overflow-x: auto;
}

.scroll-wrapper>table td {
    white-space: nowrap;
}

h1:first-child {
    text-align: center;
}

nav ol {
    counter-reset: item;
    padding-left: 2rem;
}

nav li {
    display: block;
}

nav li:before {
    content: counters(item, '.') ' ';
    counter-increment: item;
    padding-right: 0.85rem;
}

dl dd {
    text-align: center;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
li {
    line-height: 1.5em;
}

pre {
    background-color: rgb(224, 224, 224);
    padding: 10px;
    overflow: auto;
}

aside, [class*="sidebar"], [id*="sidebar"] {
    max-width: 90%;
    margin: 0px auto;
    border: 1px solid lightgrey;
    padding: 5px 15px;
}

.simple-date {
    display: inline-block;
    font-size: 18px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid rgb(216, 216, 216);
}

.simple-author {
    display: inline-block;
    font-size: 18px;
    color: black;
    line-height: 22px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.simple-container {
    max-width: 1000px;
    margin: 0px auto;
    padding-top: 70px;
    padding-bottom: 20px;
}

@media (max-width: 750px) {
    .simple-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 450px) {
    .simple-container {
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.emoji, svg.icon {
    width: 1em;
}

[class*="editsection"], [class*="toctoggle"] {
    display: none;
}

@0x0000x0
Copy link

image
@import url("https://fonts.googleapis.com/css?family=Times+New+Roman");
h1 { font-family: "Times New Roman"; font-size: 24pt; line-height: 1.5; top: 0px; width: 100%; }
h2 { font-family: "Times New Roman"; font-size: 20pt; line-height: 1.5; }
h3 { font-family: "Times New Roman"; font-size: 16pt; line-height: 1.5; }
body { font-family: "Times New Roman";
background-image: url("https://img.wallscloud.net/uploads/thumb/2687039946/horsehead-nebula-purple-deep-space-MvQ-1024x576-MM-80.webp");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
line-height: 1.5;
font-size: 14.5pt;
font-weight: 400; color:
rgb(176, 176, 176);
text-rendering: optimizelegibility; }
a[href] { color: rgb(88, 128, 172); }
a[href]:hover { color: rgb(88, 128, 172); }
blockquote { font-family: "Times New Roman"; background-color: rgb(18, 18, 18); line-height: 1.5; font-size: 14.5pt; color: rgb(176, 176, 176); padding-left: 15px; border-left: 3px solid rgb(176, 176, 176); width: auto; margin: 25px auto; font-style: italic; position: relative; }
.simple-container {
margin: 50px auto;
background-color: rgb(18, 18, 18);
opacity: 0.95;
-webkit-print-color-adjust: exact;
max-width: 800px;
border: 1px solid rgb(68, 68, 68);
border-radius: 20px;
padding: 50px;}
.youtubeContainer { position: relative; width: 100%; padding-bottom: 56.25%; padding-top: 25px; }
iframe[src*="youtube.com/embed/"] { width: 100%; height: 100%; position: absolute; }
img { max-width: 100%; }
li { line-height: 1.5; }
td { border: 5px rgb(176, 176, 176); padding: 3px 7px; }
figure { margin: 0px 0px 10px; }
figcaption { font-size: 1.45pt; font-style: italic; opacity: 0.7; border: 2px solid rgb(176, 176, 176); padding: 12px; }
.simple-date { display: inline-block; font-family: "Times New Roman"; font-size: 14.5pt; padding-right: 15px; padding-top: 3px; padding-bottom: 3px; border-right: 2px solid rgb(88, 128, 172); }
.rtl .simple-date { border-left: 2px solid rgb(88, 128, 172); border-right: none; padding-right: 0px; padding-left: 15px; }
.simple-author { display: inline-block; font-family: "Times New Roman"; font-size: 14.5pt; color: rgb(88, 128, 172); line-height: 22px; padding-left: 10px; padding-top: 3px; padding-bottom: 3px; }
.rtl .simple-author { padding-left: 0px; padding-right: 10px; }
img { max-width: 100%; }
::selection { background: rgb(88, 128, 172); }

Repository owner deleted a comment from 0x0000x0 Nov 27, 2022
Repository owner deleted a comment from 0x0000x0 Nov 27, 2022
Repository owner deleted a comment from 0x0000x0 Nov 27, 2022
Repository owner deleted a comment from SkyBlack1225 Jan 27, 2023
@ZachSaucier ZachSaucier unpinned this issue Jul 16, 2023
@ZachSaucier ZachSaucier pinned this issue Jul 16, 2023
@cysergtlo
Copy link

cysergtlo commented Oct 24, 2023

Comic Dark Mode ( Title And Content Only )

@import url("https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap");
body {
  font-family: "Comic Neue", sans-serif;
  background-color: rgb(34, 34, 51);
  line-height: 1.6;
  font-size: 35px;
  color: rgb(209, 209, 209);
  text-rendering: optimizelegibility;
}
@media print {
  body {
    color: rgb(51, 51, 51);
  }
}
h1 {
  font-weight: 700;
  font-size: 1.875em;
  line-height: 1.125;
}
h2 {
  font-weight: 700;
  font-size: 1.45em;
  line-height: 1.2625em;
}
h3 {
  font-size: 1.25em;
  line-height: 1.5;
}
hr {
  height: 1px;
  background-color: inherit;
  border: none;
  width: 100%;
  margin: 0px;
}
a[href] {
  color: rgb(100, 190, 250);
}
a[href]:hover {
  color: rgb(32, 137, 208);
}
.simple-container {
  -webkit-print-color-adjust: exact;
}
.simple-control,
.simple-edit {
  color: rgb(209, 209, 209);
  border-color: currentcolor;
}
.simple-share-dropdown {
  background-color: transparent;
}
.youtubeContainer {
  position: relative;
  width: 100%;
  height: 0px;
  padding-bottom: 56.25%;
  padding-top: 25px;
}
iframe {
  width: 100%;
  height: 300px;
}
iframe[src*="youtube.com/embed/"] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
video,
img {
  max-width: 100%;
}
li {
  line-height: 1.5em;
  margin-bottom: 5px;
}
td {
  border: 1px solid black;
  padding: 3px 7px;
}
pre {
  color: rgb(31, 31, 31);
  padding: 10px;
  overflow: auto;
}
pre,
code {
  color: rgb(31, 31, 31);
  background-color: rgb(224, 224, 224);
}
blockquote {
  border-left: 4px solid;
  padding: 1px 7%;
  margin: 0em 0px;
  font-size: 1em;
  line-height: 1.4;
}
blockquote > :first-child {
  margin-top: 0px;
}
blockquote > :last-child {
  margin-bottom: 0px;
}
figure {
  margin: 0px;
}
figcaption {
  font-size: 0.9em;
  opacity: 0.7;
  border: 1px solid rgb(238, 238, 238);
  padding: 0px;
}
table {
  background: rgb(0, 75, 122);
  margin: 0px auto;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.75) 1px 1px 1px;
  border-spacing: 0px;
  font: inherit;
}
table tr td,
table tr th,
table thead th {
  margin: 3px;
  padding: 0px;
  color: rgb(204, 204, 204);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.1);
}
aside,
[class*="sidebar"],
[id*="sidebar"] {
  max-width: 90%;
  margin: 0px auto;
  border: 1px solid lightgrey;
  padding: 5px 15px;
}
.simple-date {
  display: inline-block;
  font-size: 8px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 10px;
  border-right: 1px solid rgb(216, 216, 216);
}
.rtl .simple-date {
  border-left: 1px solid rgb(216, 216, 216);
  border-right: none;
  padding-right: 0px;
  padding-left: 0px;
}
.simple-author {
  display: none;
  font-size: 18px;
  color: rgb(39, 170, 225);
}
.guild .shop {
  display: none;
}
.rtl .simple-author {
  display: none;
  padding-left: 0px;
  padding-right: 10px;
}
.simple-article-container {
  max-width: 800px;
}
.simple-ext-info {
  border-top-color: rgb(118, 118, 118);
}
.simple-bug-reporter a[href] {
  color: rgb(233, 233, 233);
}
.simple-bug-reporter a[href]:hover {
  color: rgb(255, 255, 255);
}
.pause-scroll {
  color: rgb(209, 209, 209);
}
.simple-progress::-webkit-progress-value {
  background-color: rgb(118, 118, 118);
}
.simple-found,
.jr-highlight-yellow,
.jr-highlight-green,
.jr-highlight-blue,
.jr-highlight-orange {
  color: rgb(29, 29, 29);
}
.content-container svg,
[class*="emoji"],
[class*="icon"]:not([class*="no-icon"]) {
  width: 1em;
}
[class*="inline"] {
  display: inline-block;
  min-width: 2rem;
}
[class="ad"],
[class^="ad-"],
[class^="ad_"],
[class*="-ad-"],
[class$="-ad"],
[class$="_ad"],
[class~="ad"],
[class="toplink"],
[class="simple-date"],
[id="toplink"],
[class*="bottomlink"],
[id="feit2"],
[id="ad"],
[id^="ad-"],
[id^="ad_"],
[id*="-ad-"],
[id$="-ad"],
[id$="_ad"],
[id~="ad"] {
  display: none;
}
[class*="share"],
[class*="sharing"],
[class*="social"],
[id*="share"],
[id*="sharing"],
[id*="social"] {
  display: none;
}
[class*="meta"]:not(.simple-meta),
[id*="meta"] {
  display: none;
}
[class*="related"],
[id*="related"] {
  display: none;
}
[class*="comment"],
[id*="comment"] {
  display: none;
}
[class^="tag"],
[class*="-tag-"],
[class$="-tag"],
[class$="_tag"],
[class~="tag"],
[id^="tag"],
[id*="-tag-"],
[id$="-tag"],
[id$="_tag"],
[id~="tag"],
[class*="-tags-"],
[class$="-tags"],
[class$="_tags"],
[class~="tags"],
[id*="-tags-"],
[id$="-tags"],
[id$="_tags"],
[id~="tags"] {
  display: none;
}
[class^="fav"],
[class*="-fav-"],
[class$="-fav"],
[class$="_fav"],
[class~="fav"],
[id^="fav"],
[id*="-fav-"],
[id$="-fav"],
[id$="_fav"],
[id~="fav"],
[class*="favorites"],
[id*="favorites"] {
  display: none;
}
[class*="signup"],
[class*="guild"],
[class*="shop"],
[id*="signup"],
[class*="signin"],
[id*="signin"],
[class*="signIn"],
[id*="signIn"],
[id*="guild"],
[id*="shop"] {
  display: none;
}
footer,
[class*="footer"],
[id*="footer"] {
  display: none;
}
svg[class*="pinterest"],
[class*="pinterest"] svg,
svg[id*="pinterest"],
[id*="pinterest"] svg,
svg[class*="facebook"],
[class*="facebook"] svg,
svg[id*="facebook"],
[id*="facebook"] svg,
svg[class*="github"],
[class*="github"] svg,
svg[id*="github"],
[id*="github"] svg,
svg[class*="twitter"],
[class*="twitter"] svg,
svg[id*="twitter"],
[id*="twitter"] svg,
svg[class*="instagram"],
[class*="instagram"] svg,
svg[id*="instagram"],
[id*="instagram"] svg,
svg[class*="tumblr"],
[class*="tumblr"] svg,
svg[id*="tumblr"],
[id*="tumblr"] svg,
svg[class*="youtube"],
[class*="youtube"] svg,
svg[id*="youtube"],
[id*="youtube"] svg,
svg[class*="codepen"],
[class*="codepen"] svg,
svg[id*="codepen"],
[id*="codepen"] svg,
svg[class*="dribble"],
[class*="dribble"] svg,
svg[id*="dribble"],
[id*="dribble"] svg,
svg[class*="soundcloud"],
[class*="soundcloud"] svg,
svg[id*="soundcloud"],
[id*="soundcloud"] svg,
svg[class*="rss"],
[class*="rss"] svg,
svg[id*="rss"],
[id*="rss"] svg,
svg[class*="linkedin"],
[class*="linkedin"] svg,
svg[id*="linkedin"],
[id*="linkedin"] svg,
svg[class*="vimeo"],
[class*="vimeo"] svg,
svg[id*="vimeo"],
[id*="vimeo"] svg,
svg[class*="email"],
[class*="email"] svg,
svg[id*="email"],
[id*="email"] svg {
  display: none;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests