Compact X/Twitter by nukumori-org

/* ==UserStyle==
@name         Compact Twitter
@namespace    twitter.com
@namespace    x.com
@author       nukumori.org
@description  make Twitter compact and fast to see timeline.
@version      20230914
@license      CC-BY-NC-SA-4.0
==/UserStyle== */
@-moz-document domain("twitter.com") {
/* Compact Twitter */
/* Ver.20230914 by nukumori.org is licensed under CC BY-NC-SA */
/* originaly uploaded: https://userstyles.org/styles/179967/ */
/* Created: February 8, 2020 */
/* Updated: Sep 14, 2023 */

/* *** 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);
}
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);
}
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;
}

/* *** shrink image *** */
/* === 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;
}
/* === 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"] {
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
  /*outline: 10px solid lime !important;*/
}
/* help caroucel goes down a little */
[data-testid="tweet"] div:not(:first-child) .css-1dbjc4n :not([role="presentation"]) > [role="group"][aria-roledescription="carousel"] {
  margin-top: 0;
  /*outline: 10px solid brown !important;*/
}
/* help caroucel card left and right button hidden */
[data-testid="Carousel-NavLeft"],
[data-testid="Carousel-NavRight"] {
  top: 0 !important;
}

/* *** sidebar *** */
/* sidebar/hide & show: set classes for background-color */
[data-testid="sidebarColumn"] :not([role="option"])>.r-g2wdr4:not([role="option"]),/* dark */
[data-testid="sidebarColumn"] :not([role="option"])>.r-g6ijar:not([role="option"]),/* dim */
[data-testid="sidebarColumn"] :not([role="option"])>.r-x572qd:not([role="option"])/* default: updated on 20210712 */ {
  height: calc(1em * 3);
  min-height: 0;
  opacity: .6;
}

[data-testid="sidebarColumn"] :not([role="option"]) .r-g2wdr4:hover,/* dark */
[data-testid="sidebarColumn"] :not([role="option"]) .r-g6ijar:hover,/* dim */
[data-testid="sidebarColumn"] :not([role="option"]) .r-x572qd:hover/* default */ {
  height: auto;
  opacity: 1;
}
[data-testid="sidebarColumn"] :not([role="option"]) .r-g2wdr4 h2,/* dark */
[data-testid="sidebarColumn"] :not([role="option"]) .r-g6ijar h2,/* dim */
[data-testid="sidebarColumn"] :not([role="option"]) .r-x572qd h2/* default */ {
  cursor: default;
}
[data-testid="sidebarColumn"] .r-1ifxtd0:last-child/* all background colors */
/*[data-testid="xxxsidebarColumn"] .r-1867qdf:last-child,*//* dark */
/*[data-testid="xxxsidebarColumn"] .r-1867qdf:last-child,*//* dim */
/*[data-testid="xxxsidebarColumn"] .r-le4sbl:last-child*//* default */ {
  z-index: -1;
}

/* sidebar/about twitter */
[data-testid="sidebarColumn"] nav[aria-label][role="navigation"] {
  position: fixed;
  bottom: 0;
  padding-bottom: 9px;
  width: 350px;
}

/* tweet button */
.r-1waj6vr[href="/compose/tweet"] {
  box-shadow: none;
}

/* sidebar/list link width full */
header[role="banner"] nav[aria-label][role="navigation"] > a > div,
header[role="banner"] nav[aria-label][role="navigation"] > div > div {
  width: 100%;
  margin-left: 0;
}
header[role="banner"] nav[aria-label][role="navigation"] > div > div > div:nth-child(2) {
  margin-right:...