/* ==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"]...