Skip to content

Instantly share code, notes, and snippets.

@jishanshaikh4
Created May 6, 2022 12:13
Show Gist options
  • Save jishanshaikh4/ceea23fc2088c2d47bb672567c9a5b7f to your computer and use it in GitHub Desktop.
Save jishanshaikh4/ceea23fc2088c2d47bb672567c9a5b7f to your computer and use it in GitHub Desktop.
Stylus script for Twitter user page customization
/* Update 1.3.18
- Added new notes at the bottom of the style's options.
Below was included in the last update, but since I forgot to change the version number, nobody received it. OOPS.
- Added options to remove Explore, Community buttons in the navbar, and footer in the sidebar. Now you can make Twitter more minimal than before!
*/
/* ==UserStyle==
@name Twitter Tweaks by @FreeplayG
@version 1.3.18
@description Uncrop images, hide trends, Avatar roundness, move header aside, and more!!
@updateURL https://codeberg.org/Freeplay/UserStyles/raw/branch/main/twitter/twitter-tweaks.user.css
@preprocessor stylus
-- AUTHOR STUFF --
@namespace Freeplay
@author Freeplay (https://freeplay.codeberg.page/)
@homepageURL https://codeberg.org/Freeplay/UserStyles
@supportURL https://codeberg.org/Freeplay/UserStyles/issues
@var text notice 'Make sure you are using the "Stylus" browser extension, not "Stylish"! — Style created by @FreeplayG' "'https://add0n.com/stylus.html'"
@var checkbox moveHeader "↔ Timeline: Move header to sidebar" 1
@var select fullWidthMedia "🖼 Timeline: Media Size" ["Default", "Larger*", "Full-Width"]
@var range avatarRadius "⚫ Timeline: Avatar Roundness" [30, 5, 50, 5, '%']
@var range TLWidth "↔ Timeline: Timeline Width" [600, 600, 1000, 20, "px"]
@var checkbox hideTweetBoxTL "⛔ Timeline: Show Compose Box" 1
@var checkbox hideTLFollow "⛔ Timeline: Show Who to follow, Topics to follow, & Ads" 0
@var checkbox resizeSidebar "↔ Image Preview: Enable Dynamic Sidebar Width" 1
@var checkbox removeImageBar "⛔ Image Preview: Show Interaction Bar" 0
@var checkbox noExplore "⛔ Left Sidebar: Show Explore" 1
@var checkbox noCommunities "⛔ Left Sidebar: Show Communities" 1
@var checkbox noTrends "⛔ Right Sidebar: Show What's Happening " 1
@var checkbox noFollowBox "⛔ Right Sidebar: Show Who to follow " 1
@var checkbox noMessagesBox "⛔ Right Sidebar: Show Messages" 1
@var checkbox noFooter "⛔ Right Sidebar: Footer" 0
@var color themeColor "🌈 Custom Theme Color" #1da1f2
@var select noBorder "⛔ Border Style" ["Default*", "Hide", "keep:Only Timeline Separators"]
@var checkbox columnBG "💡 Add Contrast between background and feed" 0
@var checkbox bgBanner "🖼 Use profile banners as background" 0
@var text customBG "🖼 Custom Background (Link in quotes, image MUST be uploaded to Twitter due to Content Security Policy)" '""'
@var range customBGOpacity"  ↳ Opacity" [1, 0.05, 1, .05]
@var range customBGBlur "  ↳ Blur" [0, 0, 30, 5, 'px']
@var checkbox moreAnim "🎞️ More Animations" 1
@var checkbox revertFont "🇦 Revert Font" 0
@var checkbox followersCount "🖤 Wellbeing: Show Follower Count" 1
@var checkbox likesCount "🖤 Wellbeing: Show Likes Count" 1
@var checkbox retweetsCount "🖤 Wellbeing: Show Retweets Count" 1
@var checkbox commentsCount "🖤 Wellbeing: Show Comments Count" 1
@var checkbox analyticsButton"🖤 Wellbeing: Show Analytics Button" 1
@var text hehe "💸 Donate!" '"https://www.patreon.com/freeplayg"'
@var text Weeeeeeeeeeee "Want EVEN MORE control? Try out this Twitter Tweaks browser extension alongside this style created by an unaffiliated individual!" '"https://github.com/insin/tweak-new-twitter"'
@var text hehe2 "Tired of Twitter?" '"https://twitter.com/FreeplayG/status/1489407495244333071"'
==/UserStyle== */
@-moz-document domain("twitter.com") {
html {
scrollbar-color: rgba(155,155,155,0.5) transparent;
}
// Make 'replying to' appear as an actually clickable button!
[class="css-1dbjc4n r-18u37iz r-16y2uox r-1wbh5a2"] {
& > [class="css-1dbjc4n r-1iusvr4 r-16y2uox"]:last-child > [role="button"] {
font-size: 0 !important;
padding-bottom: 0;
margin-bottom: 0px;
width: max-content !important;
max-width: 100%;
&:hover span::after {
opacity: .1 !important;
}
& > span {
font-size: 15px;
background-color: rgba(100,100,100,0.2);
padding: 6px 12px;
border-radius: 100px;
display: inline-flex;
align-items: center;
position: relative;
&::before {
content: "✏ ";
font-size: 1.6em;
}
&::after {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
border-radius: 100px;
z-index: -1;
opacity: 0;
transition: opacity .1s;
}
}
}
}
// Column Width
@media not screen and (max-width: 1278px) and (min-width: 987px) {
if TLWidth == 1000px {
TLWidth = 9999px
}
main > .r-rthrr5, main > .r-33ulu8 {
// min-width: 390px;
width: 390px + TLWidth;
&.r-rthrr5 {
max-width: calc(100vw - 330px);
[data-testid="primaryColumn"] {
max-width: calc(100% - 390px);
}
}
&.r-33ulu8 {
max-width: calc(100vw - 90px);
width: TLWidth;
[data-testid="primaryColumn"] {
max-width: 100%;
}
}
flex-shrink: 100;
[data-testid="primaryColumn"] .r-1ye8kvj {
max-width: 100%;
}
// Messages & Settings
& > div > div > [aria-labelledby="root-header"] {
max-width: 390px;
& + section {
max-width: unset;
width: 0;
flex-grow: 1;
.r-1ye8kvj {
max-width: 100% !important;
}
}
}
// Fix Images
.r-k200y, .r-1s2bzr4 {
align-self: unset;
[role="link"] > div > div > .r-1awozwy {
align-items: unset !important;
}
a[href*="/photo/"] > div {
min-width: 100% !important;
div[style^="background-image: url("] {
filter: blur(10px);
transform: scale(1.1);
opacity: .8;
}
img {
object-fit: contain !important;
opacity: 1;
}
}
}
}
}
if customBG != "" {
body::before {
content: "";
background-image: url(customBG);
background-size: cover;
background-position: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: customBGOpacity;
filter: blur(customBGBlur);
z-index: -100;
}
nav:not(.r-rull8r), [data-testid="SideNav_AccountSwitcher_Button"], [data-testid="primaryColumn"] {
opacity = customBGOpacity * 1.5 - .7; // No, I cannot math.
opacityTL = customBGOpacity * 1.5 - .2;
if (opacity > 0) {
div[style*="position: absolute; width: 100%; transform: "] > div {
border-radius: 0 !important;
}
&:not([data-testid="primaryColumn"]) {
border-radius: 16px;
}
&:not([data-testid="SideNav_AccountSwitcher_Button"]):not([data-testid="primaryColumn"]) {
padding: 8px 12px;
}
header &:not([data-testid="primaryColumn"]) {
padding: 6px !important;
max-width: 225px;
transition: padding .2s !important;
@media only screen and (max-width: 1278px) {
padding: 0 !important;
border-radius: 100px !important;
transition: padding .2s, border-radius .2s !important;
}
}
}
body[style*="background-color: rgb(21"] & {
background-color: alpha(rgb(21, 32, 43), opacity);
&[data-testid="primaryColumn"] {
background-color: alpha(rgb(21, 32, 43), opacityTL);
}
}
body[style*="background-color: rgb(255"] & {
background-color: alpha(white, opacity);
&[data-testid="primaryColumn"] {
background-color: alpha(white, opacityTL);
}
}
body[style*="background-color: rgb(0"] & {
background-color: alpha(black, opacity );
&[data-testid="primaryColumn"] {
background-color: alpha(black, opacityTL);
}
}
&[data-testid="primaryColumn"] {
.r-yfoy6g, .r-kemksi, .r-14lw9ot {
&:not(.r-1h3ijdo) {
background: none !important;
}
}
}
}
}
// Hide "Don't Miss What's Happening" SignUp banner.
// Not making it an option, there is already an non-intrusive card that asks you sign-up anyways.
#layers:first-child > [class="css-1dbjc4n r-aqfbo4 r-1p0dtai r-1d2f490 r-12vffkv r-1xcajam r-zchlnj"]:first-child {
display: none;
}
if not themeColor == #1da1f2 {
// Alternates by the color, then when hovered over
.r-l5o3uw, // Blue
.r-1vtznih,
[href="/compose/tweet"][style^="background-color: rgb(29"],
.r-1to6hqq, // Yellow
.r-m5n1nr,
[href="/compose/tweet"][style^="background-color: rgb(255"],
.r-4nw3r4, // Violet
.r-1r4f3zc,
[href="/compose/tweet"][style^="background-color: rgb(249"],
.r-168457u, // Purple
.r-8g4rmw,
[href="/compose/tweet"][style^="background-color: rgb(120"],
.r-2r9icm, // Orange
.r-oo8a77,
.r-s224ru, // Green
.r-1iwjfv5,
[href="/compose/tweet"][style^="background-color: rgb(0"],
{
background-color: themeColor !important;
if luminosity(themeColor) < .3 {
color: white !important;
* {
color: white !important;
}
} else {
color: black !important;
* {
color: black !important;
}
}
&:hover, &:focus {
background-color: darken(themeColor, 10) !important;
}
}
.r-o6sn0f, // GReen
.r-vkub15, // Violet
.r-1gfgf0w, // Yellow
.r-1cvl2hr, .r-kpws4y // Blue
.r-5c1b6u, // Orage
[style^="color: rgb(0"], // I guess this works? Comma's somehow break the stylus preprocessor.
[style^="color: rgb(255"],
[style^="color: rgb(120"],
{
if luminosity(themeColor) < .2 {
// color: lighten(themeColor, 30) !important;
newColor = lighten(themeColor, 30)
} else {
newColor = themeColor;
}
color: newColor !important;
&:hover, &:focus {
color: darken(newColor, 10) !important;
}
}
}
// hehe
[href="/settings/deactivate"][role="tab"] {
div:last-child > span::after {
content: " And use Misskey or Mastodon instead :)";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
// margin-left: 64px;
color: inherit;
opacity: .4;
}
}
if revertFont {
.r-37j5jr {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;;
}
header nav .r-16dba41 { // I don't think I can change it back to the theme color, this is the best I can do for now.
font-weight: 600;
}
}
if fullWidthMedia != "Default" {
article [class*="css-1dbjc4n r-1iusvr4 r-16y2uox r-1777fci"] > div:last-child > div {
&:first-child { // Set a min-height to the text so the images don't cover PFP's
min-height: 1em;
}
&:nth-last-child(2) { // Media
& > div > div > .r-1ny4l3l.r-1867qdf.r-1udh08x:not([data-testid="card.wrapper"]) {
// margin-top: .5em;
if fullWidthMedia == "Larger" {
margin-left: -60px;
}
if fullWidthMedia == "Full-Width" {
margin-left: -78px;
margin-right: -18px;
if columnBG {
border-radius: 0;
img {
border-radius: 0;
}
}
}
}
}
}
}
if moveHeader {
@media only screen and (min-width: 1001px) {
[data-testid="primaryColumn"] > div > div:first-child {
border: 0 !important;
border-radius: 0 0 16px 16px !important;
}
main > div > div > div.r-1wtj0ep .css-1dbjc4n [class="css-1dbjc4n r-1h3ijdo r-136ojw6"] {
width: 352px;
margin-left: auto;
margin-right: -382px;
margin-bottom: -54px;
background: none !important;
border-radius: 0 0 16px 16px !important;
overflow: hidden;
}
.css-1dbjc4n [class="css-1dbjc4n r-1h3ijdo r-136ojw6"] > div > [class*="r-1h3ijdo r-ymttw5"] {
background: none !important;
}
// Fix tweet padding from top of page
[style*="position: absolute; width: 100%; transform: translateY(0px);"] article {
// padding-top: 15px;
}
// Sidebar padding
[data-testid="sidebarColumn"] [class="css-1dbjc4n r-vacyoi r-ttdzmv"] {
padding-top: 60px !important;
}
// Search Bar
[data-testid="sidebarColumn"] > .css-1dbjc4n > .css-1dbjc4n [class*="r-15ysp7h r-1xcajam r-ipm5af"]::before {
content: "";
background-color: inherit;
width: 100%;
height: 100px;
position: absolute;
bottom: -23px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
// Add spacing above content
:not(.r-1p6iasa) + div > div > [role="region"] > [role="heading"] + div > div[style*="position: relative; min-height:"] > div[style*="position: absolute; width: 100%; transform: translateY(0px"] {
margin-top: 12px;
}
}
[data-testid="sidebarColumn"] [class*="r-15ysp7h r-1xcajam r-ipm5af"] {
top: 52px !important;
height: 20px;
min-height: unset !important;
align-items: flex-start !important;
overflow: visible;
z-index: 2;
}
@media only screen and (max-width: 1090px) and (min-width: 991px) {
.css-1dbjc4n [class="css-1dbjc4n r-1h3ijdo r-136ojw6"] {
width: 290px !important;
margin-right: -311px !important;
}
}
}
if resizeSidebar {
[class="css-1dbjc4n r-18u37iz r-1pi2tsx r-11yh6sk r-buy8e9 r-bnwqim r-13qz1uu"] {
[aria-roledescription="carousel"] {
width: 100vw;
max-width: 100%;
}
& > div:last-of-type:not(:first-child) {
flex-grow: 1;
max-width: 600px;
}
}
}
if not removeImageBar {
.css-1dbjc4n.r-1pi2tsx.r-11yh6sk.r-buy8e9.r-bnwqim.r-13qz1uu > .css-1dbjc4n.r-13awgt0.r-184en5c + .css-1dbjc4n.r-1kihuf0.r-13qz1uu {
display: none;
}
}
if not noExplore {
nav > [href="/explore"] {
display: none;
}
}
if not noCommunities {
nav > [href$="/communities"] {
display: none;
}
}
if not noTrends {
[data-testid="sidebarColumn"] section.css-1dbjc4n > .css-4rbku5.css-901oao.r-4iw3lz.r-1xk2f4g.r-109y4c4.r-1udh08x.r-wwvuq4.r-u8s1d.r-92ng3h + .css-1dbjc4n {
display: none;
}
[data-testid="sidebarColumn"] [class*="r-1bro5k0 r-1udh08x"] ~ .r-1uaug3w {
border-top: 0;
border-bottom: 0;
}
}
if not noFollowBox {
[data-testid="sidebarColumn"] [class*="r-1bro5k0 r-1udh08x"] {
display: none !important;
& ~ .r-1uaug3w {
border-top: 0;
border-bottom: 0;
}
}
}
if not noMessagesBox {
[class*="css-1dbjc4n r-173mn98"][class*="r-c67a83 r-1qk6wnv"][class*="r-1mf7evn r-hvns9x"] {
display: none;
}
}
if not noFooter {
[data-testid="sidebarColumn"] nav {
display: none;
}
}
if not hideTweetBoxTL {
[data-testid="primaryColumn"] > div > div {
&.r-184en5c, &.r-5njf8e {
&:nth-child(2) {
display: none;
+ div {
background: none !important;
border: none !important;
}
}
}
}
}
if not hideTLFollow {
main [data-testid="primaryColumn"] {
[data-testid="placementTracking"] > div > article, // Adverts
.r-1wtj0ep.r-1f1sjgu:not(.r-s1qlax.r-1f1sjgu), // Headings
[data-testid="UserCell"], // Users
section[aria-labelledby*="accessible-list-"] > h1, // Topics to follow
section[aria-labelledby*="accessible-list-"] > h1 + div nav,
[href*="/i/c"], [href*="/i/topics/picker"], // Show More
.r-1p6iasa.r-109y4c4, .r-tbmifm, // Spacers
{
display: none !important;
// opacity: .2 !important; // Testing
}
}
}
// Annoying huge "Promote" button on your own tweets when professional account is enabled. You can already do it from the analytics button.
[data-testid="primaryColumn"] a[href$="/quick_promote_web/intro"] {
display: none;
}
if noBorder == "keep" || noBorder == "Hide" {
*:not(.r-1xl5njo):not(.css-1dbjc4n[aria-label] > div > div > div):not(.r-6t5ypu) {
border-color: transparent !important;
}
a.css-4rbku5 > .r-1adg3ll .css-9pa8cd {
border-radius: 16px !important;
}
}
if noBorder == "Hide" {
*:not(.r-1xl5njo):not(.r-6t5ypu) {
border-color: transparent !important;
border-bottom: 0 !important;
}
}
if columnBG {
main > div::before,
main > div::after {
content: "";
position: absolute;
top: 0;
right: 100%;
width: 9999px;
bottom: 0;
--color: rgba(0,0,0,0.2);
background-color: var(--color);
}
main > div::after {
right: 390px;
background: none;
box-shadow: 9999px 0 0 var(--color);
pointer-events: none;
z-index: -1;
@media only screen and (max-width: 1090px) {
right: 320px;
}
@media only screen and (max-width: 1000px) {
right: 0;
}
}
}
if bgBanner {
[class="css-1dbjc4n r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010"] > .css-1dbjc4n.r-1niwhzg.r-vvn4in.r-u6sd8q.r-4gszlv.r-1p0dtai.r-1pi2tsx.r-1d2f490.r-u8s1d.r-zchlnj.r-ipm5af.r-13qz1uu.r-1wyyakw[style*="https://pbs.twimg.com/profile_banners"] {
position: fixed !important;
height: 100vh !important;
width: 100vw !important;
top: 0;
left: 0;
opacity: .1 !important;
z-index: -99999;
pointer-events: none;
filter: blur(10px);
object-fit: cover;
background-size: cover !important;
}
a.css-4rbku5 > .r-1adg3ll .css-9pa8cd {
opacity: 1;
object-fit: cover;
}
}
if not followersCount {
[href$="/followers"] {
display: none !important;
}
}
if not likesCount {
[data-testid="like"] span, [data-testid="unlike"] span,
[href$="/likes"] {
display: none !important;
}
}
if not retweetsCount {
[data-testid="retweet"] span, [data-testid="unretweet"] span,
[href$="/retweets"], [href$="retweets/with_comments"] {
display: none !important;
}
}
if not commentsCount {
[data-testid="reply"] span {
display: none !important;
}
}
if not analyticsButton {
[href$="/analytics"] {
display: none;
}
}
[class="css-1dbjc4n r-1wbh5a2 r-dnmrzs"] .r-sdzlij, [class="css-1dbjc4n r-1wbh5a2 r-dnmrzs"] .r-sdzlij img,
[class*="r-f6ebdl r-sdzlij r-1phboty r-14f9gny r-1loqt21 r-1gzrgec r-cnkkqs r-zjg7tu r-mtrfb5 r-1ny4l3l r-1udh08x r-o7ynqc r-6416eg r-1xce0ei"],
[class="css-1dbjc4n r-sdzlij r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010"] {
border-radius: avatarRadius !important;
transition: border-radius .5s, transform .5s;
}
[style*="clip-path:"] {
& > a {
background: none !important;
&::after {
content: "BLOCK\aME";
padding-top: 4px;
position: absolute;
white-space: pre;
inset: 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
text-align: center;
line-height: 12px;
font-weight: 700;
font-family: "Segoe UI";
z-index: 2;
}
&::before {
content: "💩"
position: absolute;
inset: 0;
bottom: 4px;
display: flex;
z-index: 1;
justify-content: center;
align-items: center;
font-size: 40px;
filter: contrast(0) brightness(.5) sepia(1);
// background-color: white;
}
}
}
if moreAnim {
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
@keyframes slideUp {
from { transform: translateY(10px); opacity: 0 }
to { transform: translateY(0px); opacity: 1 }
}
@keyframes bounceIn {
0% { transform: scale(1.1); opacity: 0 }
30% { transform: scale(.99); opacity: 1 }
60% { transform: scale(1.005); opacity: 1 }
100% { transform: scale(1); opacity: 1 }
}
@keyframes scaleIn {
from { transform: scale(.98); opacity: 0; }
to { transform: none; opacity: 1; }
}
article > * {
animation: fadeIn .7s;
}
[data-testid="primaryColumn"] > div > div > div:not([data-testid="titleContainer"]),
{
animation: slideUp .7s;
if moveHeader {
&.r-136ojw6.r-1loqt21 {
animation: none !important;
}
}
}
.r-xnswec, .r-qo02w8, .r-1upvrn0 {
animation: scaleIn .3s;
}
.r-g6jmlv,
[class="css-1dbjc4n r-1p0dtai r-1mlwlqe r-1d2f490 r-1udh08x r-u8s1d r-zchlnj r-ipm5af r-417010"] > .css-1dbjc4n.r-1niwhzg.r-vvn4in.r-u6sd8q.r-4gszlv.r-1p0dtai.r-1pi2tsx.r-1d2f490.r-u8s1d.r-zchlnj.r-ipm5af.r-13qz1uu.r-1wyyakw[style*="https://pbs.twimg.com/profile_banners"],
{
animation: bounceIn .5s;
}
*:not(.r-1xl5njo):not(.r-1pi2tsx) {
transition: border .5s, transform .2s;
}
body,
.css-1dbjc4n [class="css-1dbjc4n r-1h3ijdo r-136ojw6"], .css-1dbjc4n [class="css-1dbjc4n r-1h3ijdo r-136ojw6"] > div > .r-yfoy6g,
[data-testid="sidebarColumn"] > .css-1dbjc4n > [class*="css-1dbjc4n r-1xcajam r-ipm5af"]::before,
[data-testid="sidebarColumn"] [class*="r-1xcajam r-ipm5af r-1hycxz r-136ojw6"],
[class="css-1dbjc4n r-173mn98 r-18rd0c5 r-1ff5aok"],
[class="css-1dbjc4n r-yfoy6g r-18u37iz r-drjvcx r-ripixn r-13qz1uu"],
[class="css-1dbjc4n r-12vffkv"] nav > a:nth-child(2),
[class*="r-o4zss7 r-rull8r r-qklmqi r-1d2f490 r-1xcajam r-zchlnj r-1gn8etr"],
article, button, a {
transition: background .3s, margin .3s, padding .5s, width .5s, top .3s, left .3s, bottom, .3s, right .3s, height .5s, transform .5s !important;
}
img:active, [style*="background-image: url"]:active, {
transform: scale(.99) !important;
transition: transform .2s !important;
border-radius: 16px;
}
[role="button"]:active {
transform: scale(.95) !important;
}
}
if noBorder == "Hide" && ! columnBG {
div[style*="position: absolute; width: 100%;"] > div {
border-radius: 16px !important;
overflow: hidden;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment