Experimental minimal not finished attempt at making Threads look closer to Twitter.
(userstyle for Threads.net by meta facebook instagram)
Twitter-like Threads by Whey
Details
AuthorWhey
LicenseMIT
Categorythreads.net
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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...