Skip to content

Zen old.reddit.com, read notes for tips by GitEin11

Screenshot of Zen old.reddit.com, read notes for tips
Write a review Install Get Stylus

Details

AuthorGitEin11

LicenseNo License

Categoryold.reddit.com

Created

Updated

Size97 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Zen old.reddit.com

Notes

to avoid css conflict disable custom community theme on your reddit settings

highly recommend to install auto expand
https://update.greasyfork.org/scripts/525564/Old%20Reddit%20Auto%20Expand%20Images%20and%20Post%20Text%2C%20Images%20in%20comments.user.js

when auto expand was installed turn-off auto play on your settings since every reddit embedded after expanding will auto play
about:config > media.autoplay.blocking_policy = 2

adapts to smaller screen,
works on mobile: but you need to use:
https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/
to apply web version
and use 1.5.51 version of stylus (latest version is broken)
refer solution here: https://github.com/openstyles/stylus/issues/1912
and lastly apply viewport adjustment using this userscript:

(function() {
'use strict';
var head = document.getElementsByTagName("head")[0];
var meta = document.createElement("meta");
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1");
head.appendChild(meta);
})();

a must have extension hehe:
https://addons.mozilla.org/en-US/firefox/addon/oneko/

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 old.reddit.com
@namespace      Zen old.reddit.com
@version        1.3.51
@description    zen mode for your old.reddit experience
@author         ein
@preprocessor   stylus

@var checkbox	toggleCleanComment "Reader mode, good for read aloud extension" 0


notes:
highly recommend to install auto expand
https://update.greasyfork.org/scripts/525564/Old%20Reddit%20Auto%20Expand%20Images%20and%20Post%20Text%2C%20Images%20in%20comments.user.js

using reader mode toggle it on
CTRL+A the page then right click choose `Read aloud selected text`
open in new tab >> moz-extension://661d7ba1-0198-4cf2-84f6-09e0b3af21bc/popup.html

optional: install this
https://addons.mozilla.org/en-US/firefox/addon/emoji-to-english/

==/UserStyle== */
@-moz-document domain("old.reddit.com"),
url-prefix("file:///C") {
    /* file:///C is just for testing, you can remove it */
    @font-face {
        font-family: redesignFont2020;
        src: url(https://www.redditstatic.com/desktop2x/fonts/redesignIcon2020/redesignFont2020.1c41464abd017c31d315129988cd13b8.eot), url(https://www.redditstatic.com/desktop2x/fonts/redesignIcon2020/redesignFont2020.1c41464abd017c31d315129988cd13b8.woff), url(https://www.redditstatic.com/desktop2x/fonts/redesignIcon2020/redesignFont2020.1c41464abd017c31d315129988cd13b8.ttf), url(https://www.redditstatic.com/desktop2x/fonts/redesignIcon2020/redesignFont2020.1c41464abd017c31d315129988cd13b8.svg)
    }

    * {
        scrollbar-color: #252627 transparent !important;
        scrollbar-width: thin !important;
        ::-webkit-scrollbar {
            width: 5px !important;
            &:active {
                background: #252627;
            }
        }

        ::-webkit-scrollbar-track {
            background: #000 !important
        }

        ::-webkit-scrollbar-thumb {
            background: #252627;
            border-radius: 0 !important
        }

        :not(input):not(textarea)::selection {
            background: #4a6675!important;
            color: #000!important;
        }

        .md .emoji-to-english-translatable {
            padding-left: 4px;
        }

        :not(.emoji-to-english-translation) > .emoji-to-english-translation {
            display: none !important;
        }

        .md {
            :not(.emoji-to-english-translation) > .emoji-to-english-translation {
                display: inline-block !important;
                padding: 0 2px !important;
                width: unset !important;
                height: unset !important;
                border: 0px !important;
                font-size: clamp(10px, 1.2em, 14px) !important;
                font-style: italic !important;
                background: #15151533 !important;
                Color: #666 !important;
            }
        }
    }

    /*///gallery START*/
    * {
        .media-preview .media-preview-content:not(.video-player) {
            float: none;
        }

        .media-preview {
            max-width: 100% !important;
            background: #151515;
        }

        .media-preview:has(.media-gallery) {
            background: #1a1a1b;
        }

        .media-embed + .usertext,
        .media-preview + .usertext,
        .media-gallery .usertext.usertext-body {
            padding-top: 20px;
        }

        .media-preview-content,
        .gallery-tiles {
            background: #151515;
        }

        .media-preview img,
        video.preview {
            margin: 0 auto;
            display: flex;
            width: auto;
            max-width: 880px;
            max-height: fit-content;
            padding: 0px;
        }

        .media-gallery > div[class^="gallery-preview"] {
            max-width: 100% !important;
        }

        .media-gallery .gallery-item-caption,
        .media-gallery .gallery-item-link {
            color: #777;
            font-size: 13px;
            padding: 5px;
        }

        .reddit-video-player-root {
            background: #151515;
        }

        .crosspost-preview {
            background: #0000;
            max-width: 100%;
            border: 1px solid #343536;
            a,
            span,
            .title,
            .crosspost-preview-tagline {
                color: #666 !important;
            }
        }

        .crosspost-preview-content {
            background: #1a1a1b;
            .self-divider {
                border-top: 1px solid #343536 !important;
                margin: 10px 5px !important;
            }

            .md {
                padding-left: 5px !important;
                padding-right: 5px !important;
            }
        }

        .gallery-nav-prev,
        .gallery-nav-next,
        .gallery-nav-back {
            font-size: 14px;
            &:hover {
                color: #6f8e9e;
            }
        }

        .gallery-nav-prev {
            padding: 4px 0;
        }

        .gallery-nav-next {
            padding: 4px 20px;
        }

        .gallery-nav-disabled,
        .gallery-nav-disabled:hover {
            color: #333 !important;
            cursor: context-menu;
        }

        .gallery-tiles {
            display: grid;
            width: fit-content;
        }

        .gallery-tiles .gallery-tiles:has(div[id^="media-tile"]:nth-child(6)) {
            --var-n: 6;
        }

        .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(6))) {
            --var-n: 5;
        }

        .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(5))) {
            --var-n: 4;
        }

        .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(4))) {
            --var-n: 3;
        }

        .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(3))) {
            --var-n: 2;
        }

        .gallery-tiles div[id^="media-tile"],
        .gallery-tiles div[id^="media-tile"] img {
            max-width: calc(880px / var(--var-n) - 8px) !important;
            width: calc((100vw - 20px) / var(--var-n) - 8px) !important;
            min-width: 138px !important;
            height: auto !important;
        }

        .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(3))) div[id^="media-tile"] img {
            max-width: 227px !important;
        }

        .gallery-tiles {
            margin-left: 0px;
            max-width: 880px;
            width: calc(100vw - 20px);
            box-sizing: border-box;
            div[id^="media-tile"] {
                padding: 4px !important;
            }
        }

        @media screen and (min-width: 901px) {
            .gallery-tiles div[id^="media-tile"]:nth-child(-n+6) {
                grid-row: 1;
            }
        }

        .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(7))) div[id^="media-tile"] {
            &:nth-child(-n+6) {
                grid-row: 1;
            }
        }

        @media screen and (max-width: 900px) {
            .gallery-tiles:has(div[id^="media-tile"]:nth-child(n+7)) {
                grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
                grid-auto-flow: dense;
            }

            .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(7))) div[id^="media-tile"] {
                &:nth-child(n+6) {
                    grid-row: 2;
                }
            }
        }

        @media screen and (max-width: 750px) {
            .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(7))) div[id^="media-tile"] {
                &:nth-child(n+5) {
                    grid-row: 2;
                }
            }
        }

        @media screen and (max-width: 604px) {
            .gallery-tiles:not(.gallery-tiles:has(div[id^="media-tile"]:nth-child(7))) div[id^="media-tile"] {
                &:nth-child(n+4) {
                    grid-row: 2;
                }
            }
        }
    }

    /*///gallery END*/
    * {
        input[type='checkbox'],
        input[type='radio'] {
            appearance: none;
            width: 13px;
            height: 13px;
            border: 2px solid #444;
            border-radius: 50%;
            margin: 0 5px 0 0 !important;
            position: relative;
            top: 2px;
            &:checked {
                border: 2px solid #6f8e9e;
                border-radius: 50%;
                
                & + label {
                    color: #6f8e9e;;
                }
            }

            & + label {
                font-size: 13px;
            }
        }
    }

    .no-constraints-when-pinned {
        margin: 0 auto;
        max-width: 880px !important;
        width: calc(100vw - 20px) !important;
        max-height: fit-content !important;
    }

    .reddit-video-controller-root.ended-controls,
    .reddit-video-controller-root.pinned-controls,
    .reddit-video-controller-root.buffering-controls,
    .reddit-video-controller-root.interstitial-controls {
        background: #0000;
    }

    .censored-preview {
        display: block;
        visibility: hidden;
    }

    /* uncensored */
    .video-player:has(video+img) + div .expando-gate {
        visibility: visible
    }

    .video-player + div .expando-gate {
        visibility: hidden;
    }

    .media-preview img:not(video+img) {
        position: relative;
        z-index: 69;
    }

    .expando-gate .expando-gate__controls {
        z-index: 68;
    }

    .expando-gate--spoiler {
        min-height: 140px;
    }

    .expando-gate.expando-gate--overlay,
    .expando-gate.expando-gate--interstitial {
        background: #151515;
    }

  ...

Reviews

No reviews yet.