Skip to content

Twitter-like Threads by Whey

Screenshot of Twitter-like Threads

Details

AuthorWhey

LicenseMIT

Categorythreads.net

Created

Updated

Size13 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Experimental minimal not finished attempt at making Threads look closer to Twitter.

(userstyle for Threads.net by meta facebook instagram)

Notes

it funny

Experimental minimal not finished attempt at making Threads look closer to Twitter.

(userstyle for Threads.net by meta facebook instagram)

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Twitter-like Threads
@namespace      github.com/openstyles/stylus
@version        0.0.1
@description    Experimental minimal not finished attempt at making Threads look closer to Twitter
@author         Whey!
==/UserStyle== */

@-moz-document domain("threads.net") {
    /* Insert code here... */
    :root{
        --color-brand: rgb(0, 133, 255);
        --color-twitter-grey: rgb(113, 118, 123);
        --color-twitter-white: rgb(231, 233, 234);
        --color-twitter-border: rgb(47, 51, 54);
/*        --color-twitter-comment: #5a9eec ;
        --color-twitter-comment-transparent: #5a9eec21 ;
        --color-twitter-repost: rgb(32, 188, 7);
        --color-twitter-repost-transparent: #48b23c1a ;
        --color-twitter-like: rgb(236, 72, 104);
        --color-twitter-like-transparent:  #ff00001f;*/
        --color-twitter-comment: #1d9bf0 ;
        --color-twitter-comment-transparent: rgba(29, 155, 240, 0.15) ;
        --color-twitter-repost: #00ba7c;
        --color-twitter-repost-transparent: rgba(0, 168, 124, 0.15);
        --color-twitter-like: #f91880;
        --color-twitter-like-transparent:  rgba(249, 24, 128, 0.15);
        --barcelona-desktop-page-horizontal-padding: 16px !important;
    }
    *{
        font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    }
    div[class="x78zum5 xdt5ytf x1iyjqo2 x1gryazu xkrivgy xn9wirt x1i1dspy x15mrz16 xdezb45 xobwaui xxrhqlm x18obnno x1whvj5h x1pdq7kp x1ja2u2z"]{
        --barcelona-large-screen-max-width: 598px !important;
        transform: translatex(-60px) !important;
        box-shadow: 0 0 0 1px var(--color-twitter-border) !important;
    }
    header{ 
        /*margin-right: calc( (312px + 53vw - 10px)) !important;*/
        transform: translatex(calc((-268px)/2 - (548px)/2 - 86px)) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        top: 0 !important;    
        height: 100% !important;
        z-index:  !important;
        width: 268px !important;
        display: flex !important;
        flex-direction: column !important;
        
        > div:nth-of-type(1){
            margin-right: auto !important;
            margin-top: 16px !important;
            margin-left: 12px !important;
        }
        > div:nth-of-type(2) {
            margin-left: 12px !important;
            margin-top: 10px !important;
            width: 270px !important;
            overflow: visible !important;
            /*back button*/
            > div{
                position: absolute !important;
                top: -58px !important;
                left: 264px !important;
                box-shadow: 0 0 0 1px var(--color-twitter-border);
                height: 53px !important;
                width: 598px !important;
                background: rgba(16, 16, 16, .65);
                backdrop-filter: blur(12px);
                z-index: 9999;
                > div{
                    margin-left: 6px !important;
                    margin-right: auto !important;
                    display: flex !important;
                    flex-direction: row !important;
                    align-items: center;
                    &:after{
                        content: "Back";
                        width: auto;
                        height: auto;
                        padding-bottom: 2px;
                        padding-left: 16px;
                        color: var(--color-twitter-white) !important;
                        font-size: 20px !important;
                        font-weight: 700 !important;
                        line-height: 24px !important;
                        transform: translatey(-1px);
                        font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
                    }
                }
            }
            > nav{
                width: 270px !important;
                display: flex !important;
                flex-direction: column !important;
                > div{
                    margin-right: auto !important;
                    padding: 12px 18px 12px 12px !important;
                    margin-top: 2px !important;
                    margin-bottom: 2px !important;
                    border-radius: 9000px !important;
                    svg{
                        color: var(--color-twitter-white) !important;
                        height: 30px !important;
                    }
                    transition: background 0.1s ease-in-out !important;
                    &:hover{
                        transition: background 0.1s ease-in-out !important;
                        background: rgba(231, 233, 234, 0.05) !important;
                    }
                }
                > div{
                    transform: unset !important;
                    *{
                        transform: unset !important;
                    }
                    > div > a{
                        .x1hc1fzr{
                            display: none !important;
                        }
                        display: flex !important;
                        flex-direction: row !important;
                        &:after{
                            margin-left: 16px !important;
                            color: rgb(231, 233, 234)!important;
                            font-size: 20px!important;
                            font-weight: 400!important;
                            letter-spacing: 0.15px!important;
                            line-height: normal!important;
                        }
                    }
                }
                > div:nth-of-type(1){
                    > div > a{
                        &:after{
                            content:"Home";
                        }
                    }
                }
                > div:nth-of-type(2){
                    > div > a{
                        &:after{
                            content:"Search";
                        }
                    }
                }
                > div:nth-of-type(3){
                    > div > div:nth-of-type(1){
                        display: flex !important;
                        flex-direction: row !important;
                        &:after{
                            content:"Publish";
                            margin-left: 16px !important;
                            color: rgb(231, 233, 234)!important;
                            font-size: 20px!important;
                            font-weight: 400!important;
                            letter-spacing: 0.15px!important;
                            line-height: normal!important;
                        }
                    }
                }
                > div:nth-of-type(4){
                    > div > a{
                        &:after{
                            content:"Notifications";
                        }
                    }
                }
                > div:nth-of-type(5){
                    > div > a{
                        &:after{
                            content:"Profile";
                        }
                    }
                }
            }
        }
        > div:nth-of-type(3){
            margin-left: 12px !important;
            width: 270px !important;
            > div{
                margin-right: auto !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                svg{
                    color: rgb(231, 233, 234)!important;        
                }
                &:after{
                    content: "Settings";
                    margin-left: 6px !important;
                    color: rgb(231, 233, 234)!important;
                    font-size: 20px!important;
                    font-weight: 400!important;
                    letter-spacing: 0.15px!important;
                    line-height: normal!important;
                }
            }
        }
        div[class="xe9vn5y"]{
            > * > * {
                padding: 10px !important;
                >*{
                    margin-top: 2px !important;
                    margin-bottom: 2px !important;
                    
                }
            }
        }
        *{
            padding: 0 !important;
            margin: 0 !important;
        }
    }
    
    div[class="x78zum5 xdt5ytf x1n2onr6 xat3117 xxzkxad"]{
        top: 53px !important;/*
        &:before{
            content: "";
            position: absolute !important;
            left: calc(50% - 60px);
            transform: translatex(-50%);
            top: -54px;
            box-shadow: 0 0 0 1px var(--color-twitter-border);
            height: 53px !important;
            width: 598px !important;
            background: rgba(16, 16, 16, .65);
            backdrop-filter: blur(12px);
            z-index: 98;
        }
        &:after{
            content: "hey why isnt the feed switcher working" !important;
            position: absolute !important;
            left: calc(50% - 60px);
            transform: translatex(-50%);
            top: -40px;
            backdrop-filter: blur(12px);
            z-index: 99;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
            font-weight: 500;
            font-size: 20px;
            color: #80808073;
        }*/
    }
    /*feed switcher*/
    div[class="x3h4tne xixxii4 x3f4u1h x1vjfegm x1k6ia2q x1kpd11x x1m665xh xto41tm"]{
        top: -55px !important;
        left: 0 !important;
        position: absolute;
        overflow: visible;
        z-index: 99999999999;
        height: 50px;
        svg{
            transform: translatey(2px);
            path{
                fill: white;
            }
        }
        >div > div{
            width: 548px !impo...

Reviews

No reviews yet.