Skip to content

Nitter but it looks more like twitter by Whey

Screenshot of Nitter but it looks more like twitter

Details

AuthorWhey

LicenseMIT

Categorynitter

Created

Updated

Size15 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A new userstyle

Notes

it looks like twitter wow
Best used with the Twitter Dark appearance setting in nitter

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Nitter but it looks more like twitter
@namespace      github.com/openstyles/stylus
@version        1.2.4
@description    Please enable the "Twitter Dark" theme in nitter settings
@author         Whey!
==/UserStyle== */

@-moz-document domain("nitter.net") {
    /* Insert code here... */
    
    /* Insert code here... */
    :root{
        --bg: #161E27;
        --bg-light: #1E2936;
        --fg: #ECEEF0;
        --fg-light: #93A5B7;
        --border: #2E4152;
        --icon: #788EA5;
        --accent: #208BFE;
        
        --img: url("data:image/png;base64,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");
    }

    /*
    :root {
        --color-brand: var(--tweak-accent, var(--themeColor, var(--accent-bg, rgb(0, 133, 255))));

        --numpad: 2px;
        --elipsisfix: 530px;
        --elipsisfix2: 107px;
        --color-twitter-comment: #1d9bf0;
        --color-twitter-repost: #00ba7c;
        --color-twitter-like: #f91880;
        --placeholderbg: rgb(38, 39, 45);
        --placeholdercolor: hsl(0, 0%, 17%);
        --placeholdericoncolor: hsl(231, 8%, 29%);
        --feedoutline: var(--color-twitter-border);
        --feedtext: var(--color-twitter-white);
        --lightbg: rgb(22, 24, 28);
        --darkerlightbg: #26272d;
        --darkdimheader: #000000ba;
        --hoverlight: rgba(255, 255, 255, 0.1);
        --hoverdim: rgba(231, 233, 234, 0.1);
        --overlaydim: rgba(91, 112, 131, 0.4);
        --black: black;
        --white: white;
        --blackish: #0f1419;
        --whiteish: #eff3f4;
        --black065: rgba(0, 0, 0, 0.65);
        --blackelipsis: #00000080;
        --threadlines: #333639;
        --color-twitter-grey: rgb(113, 118, 123);
        --color-twitter-white: rgb(231, 233, 234);
        --color-twitter-border-alt: rgb(83, 100, 113);
        --color-twitter-border: rgb(47, 51, 54);
        --color-twitter-comment-transparent: rgba(29, 155, 240, 0.15);
        --color-twitter-repost-transparent: rgba(0, 168, 124, 0.15);
        --color-twitter-like-transparent: rgba(249, 24, 128, 0.15);
        --searchbg: #202327;
        --color-twitter-grey-shadow: rgba(113, 118, 123, 0.7);
    }*/
    
    /*
    body, .timeline{
        --bg_color: var(--black) !important;
        --bg_panel: var(--black) !important;
    }*/
    
    @media (min-width: 1200px) {
        .photo-rail-card{
            position: absolute !important;
            z-index: 999;
            right: calc(-312px - 12px) !important;
            width: 300px !important;
            top: 0 !important;
            
        }
        nav{
            width: calc(300px - 20px) !important;
            left: calc(50dvw - 308px - 312px + 20px);
            height: 100dvh;
            background: transparent;
            &>.inner-nav{
                height: 100%;
            border-color: transparent !important;
                align-items: start;
                flex-direction: column !important;
                &>div:nth-child(1){
                    order: 99;
                    display: block;
                    line-height: unset !important;
                    height: unset !important;
                    flex: unset !important;
                    margin-bottom: 12px;
                }
                &>a:nth-child(2){
                    padding-top: 16px;
                }
                &>div:nth-child(3){
                    margin-top: 32px;
                    justify-content: start;
                    width: 100%;
                    gap: 8px;
                    align-items: start;
                    display: flex !important;
                    flex-direction: column !important;
                    &>div>a::before,
                    &>a>svg{
                        color: var(--fg-light);
                        fill: var(--fg-light);
                        height: 26px !important;
                        width: 26px !important;
                        font-size: 26px;
                    }
                    &>div:nth-child(1)>a::after{
                        content: "Search";
                        color: var(--fg-light)!important;
                        margin-left: 12px;
                        font-size: 20px;
                    }
                    &>div:nth-child(2)>a::after{
                        content: "Open in Twitter";
                        color: var(--fg-light)!important;
                        margin-left: 12px;
                        font-size: 20px;
                    }
                    &>a:nth-child(3)::after{
                        content: "Support";
                        color: var(--fg-light)!important;
                        margin-left: 8px;
                        font-size: 20px;
                    }
                    &>div:nth-child(4)>a::after{
                        content: "About";
                        color: var(--fg-light)!important;
                        margin-left: 20px;
                        font-size: 20px;
                    }
                    &>div:nth-child(5)>a::after{
                        content: "Settings";
                        color: var(--fg-light)!important;
                        margin-left: 12px;
                        font-size: 20px;
                    }
                }
            }
            
            /**/
            & a:has(>.site-logo){
                width: 38px; /* Adjust size as needed */
                height: 38px;
                background: var(--accent) !important; /* Change to any color */
                
                -webkit-mask-image: var(--img);
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                
                mask-image: var(--img);
                mask-position: 0px 16px;
                mask-repeat: no-repeat;
                mask-size: contain;
                & img{
                    display: none !important;
                }
            }
        }
    }
    
    
    :root, body{
        --fg_faded: var(--fg-light) !important;
    }
    .timeline-header{
        color: var(--fg-light);
        font-weight: normal;
    }
    .timeline-container, .conversation{
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        /*border-top: 1px solid var(--border);*/
    }
    .timeline-item {
        padding: 12px 16px;
        border-top-color: var(--border) !important;
    }
    .tweet-body{
        margin-left: 52px;
    }
    .retweet-header,
    .pinned{
        translate: -17px 0px;
    }
    .tweet-avatar img{
        margin-top: 0px;
        margin-left: -52px;
        width: 40px;
        height: 40px;
    }
    .tweet-link:hover{
        background-color: unset;
    }
    .profile-tabs{
        display: flex;
        flex-direction: column;
        max-width: 602px;
        & > div{
            max-width: 602px;
        }
    }
    .profile-tabs .timeline-container{
          width: 100% !important;
    }
    .profile-tab{
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        .profile-card-avatar{
            position: absolute;
            width: 133px;
            height: 133px;
            translate: 0px -133px;
            img{
                border-radius: 100%;...

Reviews

No reviews yet.