DEV Community

loading...
Cover image for [crosspost] my work in progres CSS theme for Reddit (night mode)

[crosspost] my work in progres CSS theme for Reddit (night mode)

Marco Colonna
Anarchist Male Eterosexual Notomofobic
Updated on ・3 min read

many have asked me if I will make a version for the old reddit, the answer is no, I like the new design, the old design is ugly and confusing; I know, this theme is writed bad, is a mess, but is WIP and work, and I like it, so... (here the code).

Edit: desktop browser version only (not support for mobile).

/* start some useless things (my opinion) */
::-webkit-scrollbar,
.redesign-beta-optin,
.avKlJzxZU3brq4nAX0_i1, /* sidebar ADS */
._2oY_N7NWiAv9m_mFIRdwVX,
._2-aCCpAklEV0DkVWrpodjE,
.Ii7DEkcMDxQHElTHeeaci,
.m0n699kowSp8Wfa40lqpF {
    display: none !important }
/* end some useless things (my opinion) */

/* hide the invasive but helpfull weird button*/
._3A5WTC_rfbijxxWBmIP4Yx {
    display: none
}   /* ended the hide */

html, body { font-family: sans-serif !important }

a,
button,
.jEUbSHJJx8vISKpWirlfx,
._2FKpII1jz0h6xCAw1kQAvS,
._1JaK9h42mq2UXvugO7VriI {
    border-radius: 1px !important }

._272M2gvxto_0X0pq5TeO62,
._1oQRGKLqEtbGwWUMbhCDZj,
._3PZhYrOiAsgZIW2cezS6tI {
    border-radius: 30px !important }

._1JaK9h42mq2UXvugO7VriI {
    width: 111px }

a {
    color: #f7ffe9eb !important }

.next-button a,
._1qiHDKK74j6hUNxM0p9ZIp a,
._3fyECztJ8AQeIuhZWW-tNU a {
    color: #fff !important }

blockquote {
    color: #747474 !important }

textarea {
    color: #5dcb7c;
    background: #151515;
    font-size: 1.1em !important;
    width: 99% !important;
    padding: 5px !important }

._1gw9QnHhIreAAaTWBI3fUH input {
    background: #202020 }

/* covering header background
    ._2L5G9B5yaoqW3IegiYN-FL {
    background: #0079D3 !important } */

._34q3PgLsx9zIU5BiSOjFoM {
    background: transparent !important }

._2TuF8LuTZGoynMOwiccrRC {
    background-color: #1a1a1b }

._27zThB3Syksyv8gLdDJqep,
._2ZyL7luKQghNeMnczY3gqW {
    width: 99.5%;
    border: 1px solid #474748;
    border-bottom: 0 }

._2c1ElNxHftd8W_nZtcG9zf {
    border: unset }

.embedded-page #header {
    background: #000 }

.md {
    font-size: unset }

.save,
.cancel {
    border-radius: 2px !important;
    margin-left: 2px !important;
    background: #408251e0 !important;
    border: 1px solid #73ac83c9 !important;
    color: #fff !important
}

.embedded-page #header .tabmenu li a,
.embedded-page #header .tabmenu li.selected a {
    color: #fff;
    letter-spacing: 0px }

.menuarea {
    padding: 10px !important; }

.embedded-page .flat-list a {
    color: #878787 !important;
    text-transform: uppercase;
    letter-spacing: 0px }

._1oQyIsiPHYt6nx7VOmd1sz,
.post-content {
    background: #000;
    color: #c1c1c1 !important }

.embedded-page .content {
    background: #151515 }

._eYtD2XCVieq6emjKBH3m {
    color: #DAE0E6;
    padding: 5px;
    text-shadow: -1px -2px 2px #9c9ed4,
                 1px -1px 0px #000,
                 -2px 2px 2px #900b0b,
                 2px 1px 4px #000;
    font-size: 2em !important;
    /* safe back
    text-shadow: -1px -1px 0px #000587,
                 1px -1px 0px #000587,
                 -1px 1px 0px #000587,
                 1px 1px 4px #000587; */
    font-weight: bold;
    letter-spacing: .1px }

.TmlaIdEplCzZ0F1aRGYQh {
    background: unset }

._1rZYMD_4xY3gRcSS3p8ODO {
    color: #c1c1c1 !important }

._1OVBBWLtHoSPfGCRaPzpTf {
    position: relative;
    padding-right: 320px;
    width: 100% !important }

._10BQ7pjWbeYP63SAPNS8Ts {
    background-color: #3C5E45;
    color: #fff }

._1vyLCp-v-tE5QvZovwrASa {
    background: #202020 }

* { /* temp fix */
    --pseudo-before-background: #202020 !important;
    --background:#202020 !important;
    --canvas:#202020 !important
}

._1BFbVxT49QnrAN3fqGZ1z8 {
    position: absolute;
    right: 13px }

/*  official theme changed
    and broke myCSS in the
    "back to top" button ,
    I just hide the button  */

._1m03hmspTHlre1O1CXbY9Y {
    display: none /* temp fix */
/*  position: fixed !important;
    bottom: 0px;
    right: .5px;
    width: 312px;
    height: 27px;
    border-radius: 3px;
    border: 1px solid #3c5e45;
    background: #3c5e45;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0px -4px 4px -2px rgba(0,0,0,0.68) */}

#TrendingPostsContainer {
    padding: 10px }

.arrow {
    margin: 5px 0 0 0 }

.bottommenu {
    font-size: 11px; }

._25K6Ujp7eqOAHEdYuHm3pY,
.menuarea {
    background: #000 !important}

.embedded-page .menuarea .tabmenu li.selected a,
.embedded-page .menuarea .flat-list li.selected a {
    border-bottom-color: #d8d8d8 }

._1eNkAwmWuXZFmNLfie958 {
    color: #c1c1c1;
    text-transform: uppercase;
    font-weight: bold }

.nextprev,
.next-suggestions {
    color: #151515 }

.nextprev a, .next-suggestions a {
    background: #3c5e45 !important;
    border-color: #50785b !important }

._3eEGmb1TERzQ2jBCUr-XNg {
    padding: 10px;
    margin-right: -100px }

._2mO8vClBdPxiJ30y_C6od2 a {
    border-top: 1px solid #4a4a4a }

._2mO8vClBdPxiJ30y_C6od2 button {
    margin-top: 8px }

._2torGbn_fNOMbGw3UAasPl {
    font-size: 0.9em !important }

/* chat window */
.yU9j1WJPhK5O625xcz254,
._1ScY1cHS-Vgv6eoU-LmjTi,
._3Txi0nOg7zVE4_CBYqUaRq,
._29tNelkz3zQzbXmYFOCncy {
    box-shadow: 0 0 1px 1px #4d8778c4, 0 10px 40px #000;
    border: 1px solid #323232;
    border-radius: 0px;
    bottom: -1px }
.lh9ssPWZKUR3-eXgoIPnX textarea {
    color: #fff !important;
    padding: 11px !important
}

/* fix text "Report Description" */
.atALXaor5Ayh46CWiPfDR label {
   color: transparent !important  
}

/* overview pinned post */
._3Ud8ZDEFc0kXFg6R9KhDPS {
    min-width: 100% !important }

/* shadows fix for Coins/User/... panels */
._2uYY-KeuYHKiwl-9aF0UiL {
    box-shadow: 0 0 0 1px #151515
}

/* growing comunities */
._3J5RkbDcTmj01rM7fNcvO7 {
    position: absolute;
    right: 13px }

.footer,
.footer .col {
    border: 0 }
Enter fullscreen mode Exit fullscreen mode

// check this date for the last update version

updated version: 07/03/2021 temp fix "back to top" button (hided), modded the "chat window" (11/03/2021 added missing class in chat window section)

25/02/2021 expanded pinned post

23/02/2021 removed some mess code, fix shadow on dropping panels

22/02/2021 added fix for Coins panel

21/02/2021 first version

Discussion (0)

Forem Open with the Forem app