Twitlonger Remastered by 5qc

/* ==UserStyle==
@name           Twitlonger Remastered
@namespace      www.twitlonger.com
@version        1.0.0
@description    Remastered TwitLonger
@author         5qc
@preprocessor   stylus

@var checkbox darkMode  "Force Dark Mode" 1
@var checkbox lightMode "Force Light Mode" 0
@var range    radius    "PFP Roundness" [50, 5, 50, 5, "%"]
==/UserStyle== */

@-moz-document domain("www.twitlonger.com") {
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
    
    :root {
        if darkMode == 1 {
            --bg: #222;
            --box-bg: #111;
            --navbar-bg: #333;
            --navbar-bg-hover: #444;
            --color: #f8f8f8;
            --link-color: lighten(blue, 75%);
            --link-color-visited: lighten(blue, 50%);
            --hr-color: #555;
        } else if lightMode == 1 {
            --bg: #fff;
            --box-bg: #f8f8f8;
            --navbar-bg: #f8f8f8;
            --navbar-bg-hover: #f3f3f3;
            --color: #000;
            --link-color: blue;
            --link-color-visited: lighten(blue, 50%);
            --hr-color: #ccc;
        }
        
        --font-sans: "Roboto", sans-serif;
        --font-serif: "Roboto Slab", serif;
        --font-mono: "Roboto Mono", monospace;
        
        --trans-sec: 0.25s;
        --br: 10px;
    }
    
    body {
        background: var(--bg);
        font-family: var(--font-sans);
    }
    h1, h2, h3, h4:not(.media-heading), h5, h6 {
        font-family: var(--font-mono);
        text-align: center;
    }
    a:link:not(.btn) {
        color: var(--link-color);
    }
    a:visited:not(.btn) {
        color: var(--link-color-visited);
    }
    hr {
        background: none;
        border-top: 1px solid var(--hr-color);
    }
    
    .navbar {
        background: var(--navbar-bg);
        box-shadow: none;
        
        .navbar-brand {
            color: var(--color) !important;
        }
        
        li a {
            color: var(--color) !important;
            transition: var(--trans-sec) background;
            
            &:hover {
                background: var(--navbar-bg-hover);
                transition: var(--trans-sec) background;
            }
        }
    }
    
    #postinfo, #postcontent, #footer {
        background: var(--box-bg);
        box-shadow: none;
        border-radius: var(--br);
        color: var(--color);
    }
    #postcontent {
        margin-top: 0px !important;
    }
    
    .col-xs-12 {
        #postinfo {
            padding: 10px;
            
            #timeclient {
                color: var(--color);
            }
            
            img {
                border-radius: radius;
            }
        }
        
        #postcontent {
            margin-top: 10px !important;
            
            .post-title {
                margin-bottom: 10px;
            }
            .post-title ~ hr {
                display: none;
            }
        }
        
        #footer {
            padding: 10px !important;
        }
    }
    
    if darkMode == 0 && lightMode == 0 {
        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #222;
                --box-bg: #111;
                --navbar-bg: #333;
                --navbar-bg-hover: #444;
                --color: #f8f8f8;
                --link-color: lighten(blue, 75%);
                --link-color-visited: lighten(blue, 50%);
                --hr-color: #555;
            }
        }
        @media (prefers-color-scheme: light) {
            :root {
                --bg: #fff;
                --box-bg: #f8f8f8;
                --navbar-bg: #f8f8f8;
                --navbar-bg-hover: #f3f3f3;
                --color: #000;
                --link-color: blue;
                --link-color-visited: lighten(blue, 50%);
                --hr-color: #ccc;
            }
        }
    }
}