Skip to content

Compact Twitter/X by nukumori-org

Screenshot of Compact Twitter/X

Details

Authornukumori-org

LicenseCC-BY-NC-SA-4.0

Categorytwitter.com

Created

Updated

Size23 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Features:

  • Make thumbnails on timeline compact vertically
  • Auto show/hide "What's happening" & "Who to follow"
  • Auto show/hide left navigation on narrow window when the browser is narrow
  • Make "list" headers compact
  • Make effects fast

Changelog:

  • 20240619
    1. fix button width grows 100% on movie
  • 20240520
    1. add support for x.com
    2. mod "More" navigation again
  • 20240515
    1. mod sidebar hide/show again in new way.
  • 20240422
    1. make image on quoted tweet width 100%.
  • 20240116
    1. fix domain text on image link width 100%.
  • 20231229
    1. apply shrink image verticaly again
    2. apply make icon size smaller on narrow screen
    3. fix OGP text background on dim/lights out
    4. fix thread vertical line broken on narrow screen
    5. mod header back button align
  • 20231106
    1. add OGP text on image underline when hovered
  • 20231013
    1. add text on image with link instead of removed OGP information
  • 20230914 as "Compact Twitter" on userstyles.world
    1. 1st release as it

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Compact Twitter/X
@namespace    twitter.com
@namespace    x.com
@author       nukumori.org
@description  make Twitter/X compact, responsive, and fast to look timeline.
@version      20240619
@license      CC-BY-NC-SA-4.0
==/UserStyle== */
@-moz-document domain("twitter.com"), domain("x.com") {
/* Compact Twitter */
/* Ver.20240116 by nukumori.org is licensed under CC BY-NC-SA */
/* Originaly uploaded: https://userstyles.org/styles/179967/ as "Fast Twitter" */
/* Created: February 8, 2020 */
/* Updated: June 19, 2024 */

/* *** font-color bright theme or dark theme *** */
:root {
  --custom-text-color: #000;
  --custom-border-color: rgb(230, 236, 240);
  --custom-footer-background: #fff;
  --custom-profile-icon-size-mini: 27px;
  --custom-header-text-outline-color: #fff;
  --custom-content-image-height: 7.5em;
  --custom-shadow-color-dark: rgba(0,0,0,.4);
  --custom-shadow-color-light: rgba(0,0,0,.2);
  --custom-text-background-dark: rgba(255,255,255,.95);
  --custom-text-background-light: rgba(255,255,255,.85);
}
body:not([style*="background-color: rgb(255, 255, 255);"]):not([style*="background-color: #FFFFFF;"]) {
  --custom-text-color: #fff;
  --custom-border-color: rgb(47, 51, 54);
  --custom-footer-background: #000;
  --custom-header-text-outline-color: #000;
  --custom-shadow-color-dark: rgba(255,255,255,.7);
  --custom-shadow-color-light: rgba(255,255,255,.2);
  --custom-text-background-dark: rgba(0,0,0,.75);
  --custom-text-background-light: rgba(0,0,0,.65);
}
body[style*="background-color: rgb(21, 32, 43);"] {
  --custom-footer-background: rgb(21, 32, 43);
}

/* *** popup shadow should be dark *** */
.r-1uusn97,/* dark pip */
.r-qo02w8,/* dark */
.r-tznlht,/* dim pip */
.r-xnswec/* dim */ {
  box-shadow: rgb(0 0 0 / 60%) 0px 0px 15px, rgb(0 0 0 / 45%) 0px 0px 3px 1px;
}
.r-1uusn97,/* dark pip */
.r-qo02w8/* dark */{
  border: var(--custom-border-color) 1px solid;
}
[data-testid="DMDrawer"] {
  border-bottom-width: 0;
}

/* *** show top tweet on or off *** */
[aria-label^="Top Tweet"]:before {
  content: attr(aria-label);
  display: block;
  font-size: 10px;
  letter-spacing: -.05em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  font-weight: 800;
  text-transform: capitalize;
  color: var(--custom-text-color);
}
[data-testid="tweet"] > div:first-child {
  display: block;
}

/* *** updated message *** */
[role=status] {
  /*opacity: .8;*//* 20220803 */
  transition: 0s;
}
/*[role=status]:hover {*/
  /*opacity: 1;*//* 20220806 */
/*}*/

/* *** selected tweeet *** */
.r-cv4lhi {
  font-size: inherit;
}

/* *** placeholder replacement *** */
[id^="placeholder-"] {
  display: none;
  display: inherit;
  color: transparent;
}
[id^="placeholder-"]:before {
  content: "Aa";
  color: #8B98A5;
}

/* ********** */
/* * Images * */
/* ********** */

/*** OGP link text to image ***/
[data-testid="card.wrapper"] > [data-testid="card.layoutLarge.media"] > a:after{
  display: block;
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px;
  border-radius: 8px;
  content: "🔗 " attr(aria-label);
  color: var(--custom-default-dark, rgb(29,155,240));
  background: var(--custom-text-background-light);
  max-width: calc(100% - 24px - 8px);
  font-size: 12px;
  line-height: 1.25;
  font-family: sans-serif;
  outline: 1px solid var(--custom-default-transparent, rgb(207,217,222,.85));
}
[data-testid="card.wrapper"] > [data-testid="card.layoutLarge.media"]:hover > a:after{
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  background: var(--custom-text-background-dark);
}

/* *** shrink image *** */
[data-testid="tweet"]:not([tabindex="-1"]) .css-175oi2r.r-1adg3ll.r-1udh08x,/* added 20231229 */
/* === carousel 2021/04/16 added === */
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [role="group"][aria-roledescription="carousel"],
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [data-testid="card.layoutLarge.media"],
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [data-testid="card.layoutLarge.media"]>div,
/* === /carousel === */
[data-testid="tweet"] .css-1dbjc4n.r-18u37iz > div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > :not(.r-desppf) > .css-1dbjc4n.r-1adg3ll.r-1udh08x,
[data-testid="tweet"] .css-1dbjc4n.r-18u37iz > div:not(:first-child) .css-1dbjc4n > a > .css-1dbjc4n.r-1adg3ll.r-1udh08x,
[data-testid="tweet"] .css-1dbjc4n.r-18u37iz > div:not(:first-child) [data-testid="card.layoutLarge.media"] > a > .css-1dbjc4n.r-1adg3ll.r-1udh08x {
  max-height: var(--custom-content-image-height);
  height: auto;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 0;
}
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [data-testid="card.layoutLarge.media"] .r-1pi2tsx {
  height: calc(var(--custom-content-image-height) - 1px);/* 1px is for border */
}
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [data-testid="card.layoutLarge.media"] .r-1pi2tsx [style*="margin-top: -"] {
  margin-top: 0 !important;/* remove inline margin-top for moments tweet */
}
[data-testid="tweet"] > div:not(:first-child) .css-1dbjc4n .css-1dbjc4n.r-1adg3ll.r-1udh08x img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  z-index: 1;
  display: block;
  opacity: 1;
  margin: auto;
}
[data-testid="tweetPhoto"][style*="margin-bottom"] {
  margin-bottom: 0 !important;
}
[data-testid="tweetPhoto"][style*="margin-top"] {
  margin-top: 0 !important;
}
[data-testid="tweet"] .r-4gszlv[style*="background-image"],/* single thumbnail */
[data-testid="tweetPhoto"] .r-4gszlv {/* for multi thumbnails */
  background-size: contain;
}

/* make wide by override inline styled width exclude "ALT" and domain text on image link; TBD: exclude mm:ss, link domain   */
[data-testid="tweet"] :not([role="button"]) > .css-175oi2r.r-k200y:not(.r-loe9s5) {
  width: 100%;
}
[data-testid="tweet"] .css-175oi2r.r-k200y .css-175oi2r.r-1adg3ll.r-1udh08x[style*="width"] {
  width: auto !important;
}
  
/* 20240422: make image on quoted tweet wide except for "Rate it" button */
[data-testid="tweet"] .css-175oi2r .r-1awozwy > .css-175oi2r.r-1ny4l3l.r-o7ynqc:not([style*="rgb(207, 217, 222)"]):not([style*="border-color: rgb(83, 100, 113)"]/*dim/dark*/) {
/*  outline: 2px solid red;*/
  width: 100%;
  align-items:center;
}
/* dev20240619: ignore [data-testid="videoComponent"] */
/* dev20240619 hit test
[data-testid="tweet"] [data-testid="videoComponent"] .css-175oi2r .r-1awozwy {
  outline: 2px solid blue;
}
*/
/* dev20240619 overwrite */
[data-testid="tweet"] [data-testid="videoComponent"] .css-175oi2r .r-1awozwy > .css-175oi2r.r-1ny4l3l.r-o7ynqc:not([style*="rgb(207, 217, 222)"]):not([style*="border-color: rgb(83, 100, 113)"]/*dim/dark*/) {
/*  outline: 2px solid green;*/
  width: auto;
}
/* /dev20240619 */
  
/* === carousel each items background === */
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) [data-testid="card.wrapper"].r-1cuuowz {    
  background-color: transparent !important;
}
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) [data-testid="card.wrapper"].r-1cuuowz [data-testid="card.layoutLarge.detail"] {
  background-color: var(--custom-default-transparent, var(--custom-border-color));
}
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [role="group"][aria-roledescription="carousel"] li .r-1pi2tsx{
  background-color: var(--custom-border-color);
}
/* *** need to expand parent width *** */
[data-testid="tweet"] .css-1dbjc4n.r-k200y {
  width: 100%;
/*outline: tomato solid 4px;*/
}
/* ignore twitter space tweet banner */
[data-testid="tweet"] [data-testid="placementTracking"] .css-1dbjc4n.r-k200y {
    width: auto;
}
/* only image in tweet on specific screen width 647px to 1004px */
[role="article"] .css-1dbjc4n.r-k200y.r-rpnbwx{
  width: 100%;
/*outline: 10px solid orange;*/
}
/* image with text in retweet */
[role="link"]:not([href*="analytics"]):not([data-testid="trend"]) .css-1dbjc4n.r-1ny4l3l.r-o7ynqc.r-6416eg:not([role="button"]):not([href*="https://twitter.com/intent/follow?"]):not(.r-4wgw6l) {
  width: 100%;
/*outline: 10px solid red;*/
}
/* exclude 100% */
[data-testid="tweet"] [data-testid="videoPlayer"] .css-1dbjc4n.r-k200y,/* video m:ss n views */
[data-testid="listCell"] .css-1dbjc4n.r-1ny4l3l.r-o7ynqc.r-6416eg:not([role="button"]),/* in list */
.css-1dbjc4n.r-18u37iz.r-1h0z5md .css-1dbjc4n.r-1ny4l3l.r-o7ynqc.r-6416eg,/* own timeline bottom analytics button */
[role="link"] [data-testid="videoPlayer"] .css-1dbjc4n.r-1ny4l3l.r-o7ynqc.r-6416eg.css-1dbjc4n.r-1ny4l3l.r-o7ynqc.r-6416eg:not([role="button"]) {/* video player */
  width: inherit;
/*outline: 10px solid blue;*/
}

/* shrink tall image */
.css-1dbjc4n.r-k200y.r-1s2bzr4 {
  width: 100%;
/*outline: 3px solid black;*/
}
.css-1dbjc4n.r-1adg3ll.r-1udh08x[style*="height"][style*="width"] {
  max-height: var(--custom-content-image-height) !important;
  height: auto;
  width: 100% !important;
/*border: 3px solid tomato;*/
}
/* exclude */
[data-testid="tweet"] .css-1dbjc4n.r-18u37iz > div:not(:first-child) .css-1dbjc4n > a[href^="/i/spaces/"]>.css-1dbjc4n.r-1adg3ll.r-1udh08x{/* icon parent round box */
  max-height: 100% !important;
/*outline: 10px solid yellow;*/
}

/* === help carousel broken by this style === */
[data-testid="tweet"] .css-1dbjc4n.r-18u37iz > div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > :not(.r-desppf) > .css-1dbjc4n.r-1adg3ll.r-1udh08x[data-testid="card.layoutLarge.media"]...

Reviews

No reviews yet.