zen mode for your reddit experience
clean, plain, simple, zen mode for new.reddit.com by GitEin11
Details
AuthorGitEin11
LicenseNo License
Categorynew.reddit.com
Created
Updated
Size128 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
rewrite of zen reddit for easier update and maintenance:
activate the reddit darkmode first
features:
1. simplified community banner
2. user avatar is replaced with vote count
3. home button "⌂" is added on the top of a post
4. to upvote/downvote hover over the vote count, a line will be shown to indicate your vote
5. to reply to a comment hover below the redditors name.
6. resizable screen
7. added: "Reader mode, good for read aloud extension (CTRL+A the page then right click choose Read aloud selected text)"
and many more.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name zen reddit 2.0 -
@namespace github.com/openstyles/stylus
@version 2.2.9
@description zen mode for your reddit experience
@homepageURL https://github.com/GitEin11
@author ein
@preprocessor stylus
@var checkbox toggleCommentFocusCode "focusing on comment fades background" 1
@var checkbox toggleCommentAsButton "[comment as] in post compressed to a button" 1
@var checkbox toggleReplyComment "Dont show reply button|share|... in comment (useful when it obstruct while selecting/copying the reply text)" 0
@var checkbox toggleContentMaxheight "expand content to full height: feeds shows tall images/ long post" 1
@var checkbox toggleCleanComment "Reader mode, good for read aloud extension (CTRL+A the page then right click choose `Read aloud selected text`)" 0
==/UserStyle== */
/*
tips: to use on mobile install firefox nightly then
apply this:
https://blog.mozilla.org/addons/2020/09/29/expanded-extension-support-in-firefox-for-android-nightly/
so you can install more add-ons
install stylus to use this css style
then install https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/
to force reddit to use desktop mode
install this https://addons.mozilla.org/en-US/firefox/addon/redirector/
then apply:
Redirect:
https://www.reddit.com/(?!media.)(.*)
to:
https://new.reddit.com/$1
to always redirects to new.reddit.com
if you have darkreader extension or Dark Background and Light Text, turn it off in reddit
this style is tested on mozilla firefox
*/
@-moz-document domain("reddit.com") {
/* reddit r/popular message */
._3Tl09Mc2pqGPdIu3beZW4b {
._11KlaBYJq9fbo0p9We9Q-X {
font-size: 0;
color: #aaa;
&:before {
font-size: 18px;
content: "reddit broke this page, browse r/all instead"
}
}
._10BQ7pjWbeYP63SAPNS8Ts {
display: none;
}
}
/* content to full height */
/*copied from https://greasyfork.org/en/scripts/489074-reddit-show-images-with-real-full-height*/
if toggleContentMaxheight {
.STit0dLageRsa2yR4te_b:has(._3hUbl08LBz2mbXjy0iYhOS),
.STit0dLageRsa2yR4te_b:has(._3b8u2OJXaSDdBWoRB7zUoK),
.STit0dLageRsa2yR4te_b:has(mg.media-element),
.KVyBaj7FjzElWsqJDmw7v:has(._3b8u2OJXaSDdBWoRB7zUoK) {
height: max-content !important;
& ._1apobczT0TzIKMWpza0OhL {
display: flex !important;
}
& ._3gBRFDB5C34UWyxEe_U6mD {
display: none !important;
}
& ._3JgI-GOrkmyIeDeyzXdyUD,
& [style*="left:0px"],
& [style*="left: 0px"],
& ._2Ev7WJU0f45KxlmClce9t8 {
position: relative !important;
height: max-content !important;
}
& .media-element,
& .m3aNC6yp8RrNM_-a0rrfa,
& [style*="max-height: 512px"],
&& [style*="max-height:512px"] {
max-height: unset !important;
}
& :is(figure, li, ul),
& ._1ti9kvv_PMZEF2phzAjsGW,
& .KVyBaj7FjzElWsqJDmw7v {
height: max-content !important;
}
}
.rpBJOHq2PR60pnwJlUyP0 > div[style^="height"] {
height: unset !important;
& > .wwHbgRV0ZXGp5CHHlpo5u {
display: unset !important;
}
}
/* small screen */
@media screen and (max-width: 600px) {
._3gBRFDB5C34UWyxEe_U6mD {
padding-bottom: 0 !important;
}
& ._3JgI-GOrkmyIeDeyzXdyUD,
& [style*="left:0px"],
& [style*="left: 0px"],
& ._2Ev7WJU0f45KxlmClce9t8 {
position: relative !important;
height: max-content !important;
}
& :is(figure, li, ul),
& ._1ti9kvv_PMZEF2phzAjsGW,
& .KVyBaj7FjzElWsqJDmw7v {
height: max-content !important;
}
}
/* expands text, so instead of loading the "comment page", you can read the full post on "feed page" */
.Chtkt3BCZQruf0LtmFg2c {
mask-image: unset !important;
}
._3hUbl08LBz2mbXjy0iYhOS,
._3b8u2OJXaSDdBWoRB7zUoK {
display: none;
}
.Chtkt3BCZQruf0LtmFg2c {
max-height: max-content !important;
height: max-content !important;
}
}
* {
/* this are fixes for small screen device example mobile phones */
@media screen and (max-width: 906px) {
._1RYN-7H8gYctjOQeL8p2Q7 {
max-width: 100vw !important;
*:not(._2yB7G9L-6O_6Lp6D0n7EAl):not(._3-miAEojrCvx_4FQ8x3P-s) {
max-width: calc(100vw - 4px) !important;
}
img {
max-width: calc(100vw - 6px) !important;
}
._21pmAV9gWG6F_UKVe7YIE0 {
max-width: 0 !important;
}
}
}
@media screen and (max-width: 512px) {
._2L5G9B5yaoqW3IegiYN-FL ._26j3FxU4jTfjqi8m96HMmI {
max-width: calc(100vw) !important;
}
}
.grecaptcha-badge {
display: none !important;
right: 0 !important;
}
._3MC4c3Q_Y41YKtl1TcvyMt {
max-width: calc(100vw - 6px);
}
@media screen and (max-width: 900px) {
._1VP69d9lk-Wk9zokOaylL::after {
display: none;
}
}
}
/* general web experience */
:root {
--newCommunityTheme-linkTextWithBody: #6f8e9e!important;
}
* {
/* always blue i.e. button links
[just put !important to gray if neccesary] */
._3t5uN8xUmg0TOwRCOGQEcU,
._3t5uN8xUmg0TOwRCOGQEcU:visited,
a:link {
color: #6f8e9e;
font-weight: normal !important;
&:hover {
color: #6f8e9e;
}
}
a:hover .icon-external_link {
color: #6f8e9e;
}
/* need both blue and purple */
._13svhQIUZqD9PVzFcLwOKT {
color: #6f8e9e;
&:visited,
&:visited i,
&:visited:hover,
&:visited:hover i {
color: #917494 !important;
}
}
/* need purple but does not always need to blue */
._19FzInkloQSdrf0rh3Omen a:visited,
._3cjCphgls6DH-irkVaA0GM a:visited,
.SQnoC3ObvgnGjWt90zD9Z:visited * {
color: #917494 !important;
}
/* always gray */
._10wC0aXnrUKfdJ4Ssz-o14._1-PD0_zreH-KVwpFoCLvQF {
.icon-external_link_fill::before {
color: #666;
fill: #666;
}
}
::selection {
background-color: #4a6675!important;
color: #000!important;
}
i,
svg {
color: #666;
fill: #666;
}
::-webkit-scrollbar {
width: 5px!important;
&:active {
background: #252627;
}
}
::-webkit-scrollbar-track {
background: #000 !important
}
::-webkit-scrollbar-thumb {
background: #252627;
border-radius: 0 !important
}
scrollbar-color: #252627 transparent !important;
scrollbar-width: thin !important
}
/* removes giphy watermark START */
* {
._1gg1MfJZaNkaPmqHpGQHni {
border-radius: 4px;
}
.U76N5pdhVpwLUkKv0jpDZ {
visibility: hidden;
height: 0;
padding-top: 0px;
margin-bottom: -10px;
}
._292iotee39Lmt0MkQZ2hPV.RichTextJSON-root {
overflow: hidden;
}
/* giphy END */
}
/*-------------------------------------------------*/
/* CHECK BOX, RADIO-BOX START */
:root {
--newCommunityTheme-button: #343536 !important;
}
* {
input[type='checkbox'],
input[type='radio'] {
appearance: none;
position: relative;
top: 3px;
width: 13px;
height: 13px;
border: 2px solid #444;
border-radius: 50%;
background: transparent;
&:checked {
border: 2px solid #6f8e9e;
}
}
/* vote button */
._2tU8R9NTqhvBrhoNAXWWcP {
color: #666;
border-color: #343536;
&:hover {
color: #6f8e9e;
border-color: #6f8e9e;
}
&:before {
background: #0000;
}
}
._2tU8R9NTqhvBrhoNAXWWcP {
&:disabled,
&[data-disabled],
&[disabled] {
border-color: #333;
color: #444;
}
}
._1IRL40baisCHOgVx5-nRcF > .voteButton {
visibility: visible;
}
.DTBgaoab9JdaywJZPiOUg {
border-bottom-color: #5d7886;
color: #5d7886;
}
.Jz1mV4fpTSzPIgl2ROwml {
background-color: #6f8e9e;
}
/* label */
._1InAvR50xXN8IvYYJXBzeH,
._3P07HZTvGYr8jZJqBNVWlC,
._2i69-XcdWxCweTZ_Q5eQsd {
color: #666 !important;
}
._1D-ia-yMo19N_oSZaVggIv {
fill: #555;
}
/* CHECK BOX, RADIO-BOX END */
}
/*-------------------------------------------------*/
/* New Comment/Post notification START */
* {
:root,
[class^="subredditvars-"] {
--newRedditTheme-active: #202022 !important;
}
._2X4xugrTQ5e3TVxPPEHqGh ._3JKnqeBKw2wp7eHzFXNXSe {
button {
background: #1a1a1b !important;
border: 1px solid #343536 !important;
top: -40px;
padding: 4px 10px !important;
box-shadow: none !important;
._2nAeJnoRM4DyyVYoJhvMc4._2q-ZKRaT1WjKg092R6La5J {
color: #666;
}
&:hover {
border-color: #545e67 !important;
border-width: 2px !important;
padding: 3px 9px !important;
._2nAeJnoRM4DyyVYoJhvMc4._2q-ZKRaT1WjKg092R6La5J {
color: #7d8d9c;
}
}
}
._2nAeJnoRM4DyyVYoJhvMc4,
._1W1pLIfaIb8rYU6YeTdAk6 {
margin: 0;
}
}
/* New Post notification start */
._2w46GjyOK9f8VUpIbu6q1B {
position: fixed !important;
width: 100vw !important;
left: 0 !important;
top: 95px;
}
._3QVmoK4pfXYk-E13BWrpzd {
.cmR5BF4NpBUm3DBMZCmJS,
._1PPMaBuBIFqAY5VrSWww3Y {
background: #1a1a1b !important;
border: 1px solid #343536 !important;
}
.cmR5BF4NpBUm3DBMZCmJS {
border-right: none !important;
color: #666 !important;
padding: 4px 4px 4px 12px !important;
}
._1PPMaBuBIFqAY5VrSWww3Y {
border-left: none !important;
fill: #666 !important;
padding-right: 2px !important;
}
}
._3QVmoK4pfXYk-E13BWrpzd:hover {
padding: 0 !important;
&:before {
content: "";
display: block;
height: calc(100% + 12px);
width: calc(100vw - 2px);
position: fixed;
top: -8px;
left: calc(-50vw + 50% - 1px);
background: #0000009c;
}
.cmR5BF4NpBUm3DBMZCmJS {
border-width: 2px !important;
border-color: #545e67 !important;
padding: 3px 4px 3px 11px !important;
&:hover {
color: #7d8d9c !important;
}
}
._1PPMaBuBIFqAY5V...