☰

Twitter.com: un-trim images on hover

Reveal cropped portions of content while post is under mouse pointer.

  1. /* ==UserStyle==
  2. @name        Twitter.com: un-trim images on hover
  3. @description Reveal cropped portions of content while post is under mouse pointer.
  4. @namespace   myfonj
  5. @version     1.0.17
  6. @license     CC0 - Public Domain
  7. ==/UserStyle== */
  8.  
  9. @-moz-document domain("twitter.com") {
  10. /*
  11. Twitter.com: un-trim images on hover
  12.  
  13. https://greasyfork.org/en/scripts/402913/versions/new
  14. RIP https://userstyles.org/styles/175427/edit
  15. 	
  16.  
  17. */
  18. /*
  19.  let the spice flow. over.
  20. */
  21. div[aria-label^="Timeline: "] > div > div:hover {
  22. 	overflow: visible !important;
  23. 	z-index: 10;
  24. }
  25. div[aria-label^="Timeline: "] > div > div:hover * {
  26. 	overflow: visible !important;
  27. }
  28. /*
  29.  directly hovered position something always above its unhovered siblings
  30. */
  31. div[aria-label^="Timeline: "] > div > div:hover *:hover {
  32. 	z-index: 20;
  33. }
  34. /*
  35.  counters covered by box would be inaccessible, move them above and make 'em transparent ...
  36. */
  37. div[aria-label^="Timeline: "] > div > div:hover [role="group"],
  38. div[aria-label^="Timeline: "] > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"] {
  39. 	z-index: 30;
  40. 	opacity: 0;
  41. }
  42. 	
  43.  
  44. /* tweet actions */
  45. div[aria-label^="Timeline: "] > div > div:hover [role="group"] {
  46. 	outline: 20px solid rgba(0, 0, 0, 0.5);
  47. 	background-color: rgba(0, 0, 0, 0.5);
  48. }
  49. /*
  50.  ... until hovered
  51. */
  52. div[aria-label^="Timeline: "] > div > div:hover [role="group"]:hover,
  53. div[aria-label^="Timeline: "] > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"]:hover {
  54. 	opacity: 1 !important;
  55. }
  56.  
  57. /*
  58. 	fix for external link badge text underlayed by illustration producing non-contrasting text
  59. */
  60. div[aria-label^="Timeline: "] > div > div:hover a[href^="https://t.co/"][href$="?amp=1"][target="_blank"][role="link"][data-focusable="true"][rel=" noopener noreferrer"]:hover {
  61. 	background-color: rgba(0, 0, 0, 0.5);
  62. }
  63. /* tweet text */
  64. div[aria-label^="Timeline: "] > div > div [style^="flex-basis"] + div [dir][lang]:hover,
  65. div[aria-label^="Timeline: "] > div > div [style^="flex-basis"]:hover + div [dir][lang] {
  66. 	z-index: 30;
  67. 	background-color: rgba(0, 0, 0, 0.5);
  68. 	border-left: 10px solid transparent;
  69. 	margin-left: -10px;
  70. }
  71. /*
  72.  this is it - this *invisible* image just sits there covering div with very same image as background,
  73.  "squeezed" into wrapper. so let's unleash it while invisible to gain some performace 
  74. */
  75. div[aria-label^="Timeline: "] > div > div [aria-label] > img {
  76. 	width: auto !important;
  77. 	height: auto !important;
  78. 	max-width: calc(100vw - 20em) !important;
  79. 	/* too lazy to measure sidebar for now */
  80. 	min-width: calc(100%) !important;
  81. 	/* sometimes there is small pic that would otherwise downscale */
  82. 	outline: 3px solid black;
  83. 	z-index: 100 !important;
  84. }
  85. /*
  86.  tadaa, real pic an all its glory. most probably bigger
  87. */
  88. div[aria-label^="Timeline: "] > div > div:hover [aria-label] > img {
  89. 	opacity: 1 !important;
  90. }
  91. div[aria-label^="Timeline: "] > div > div:hover [aria-label] > img:hover {
  92. 	box-shadow: rgba(217, 217, 217, 0.2) 0px 0px 10px, rgba(217, 217, 217, 0.25) 0px 3px 6px 3px;
  93. }
  94.  
  95. /* 2020-06 - avatars in timeline started to follow same principle, so became hover "jumpy"
  96. 	since we are zooming them in detail popups anyway, just be dirty and brutal for now
  97.  2021-03-11 switched to super general SRC URL matching logic 
  98. */
  99. div[aria-label^="Timeline: "]:not(#\0) [style*="pbs.twimg.com/profile_images"] + img[src*="pbs.twimg.com/profile_images"],
  100. div[aria-label^="Timeline: "]:not(#\0) [style*="/default_profile_images/"] + img[src*="/default_profile_images/"] {
  101. 	display: none !important;
  102. 	outline: 1px solid red !important;
  103. }
  104.  
  105. /*
  106. 	Increase size of avatar pictures in hover popup
  107. 	this is hell to debug, so please dont't judge
  108.   the popup has bottom/top according relative placement in viewport
  109.  2021-04-06 they removed [tabindex="-1"]
  110.  2021-12-13 they switched to [style*='clip-path: url("#circle-hw-shapeclip-clipconfig")'] mangledness here as well. But OTOH seems we can use way more simple selector for it
  111. */
  112. [style^="left: "][style*="px; top: "][style$="px;"] [style^="height: "][style*="px; width: "][style$="px;"] {
  113.  width: 192px !important;
  114.  height: 192px !important;
  115.  image-rendering: crisp-edges;
  116. }
  117. /*
  118. follow / following cell (button)
  119. squeeze a bit
  120. */
  121. [style^="left: "][style*="px; top: "][style$="px;"] [style^="height: "][style*="px; width: "][style$="px;"] + div > * {
  122.  padding: 0 .2em !important;
  123.  
  124. }
  125.  
  126. /*
  127. fix video player controls
  128. since it is serious mess, lets adore the emphemeral structure I had to sieve trough:
  129. */
  130. /*
  131. // for ilustration, where it begins. from here it is just classes copied from devtools
  132. (unreliable I assume) and some hand copied attributes
  133. html
  134. > body> 
  135.   > div#react-root
  136.     > div.css-1dbjc4n.r-13awgt0.r-12vffkv
  137.       > div.css-1dbjc4n.r-13awgt0.r-12vffkv
  138.         > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010
  139.           > main.css-1dbjc4n.r-1habvwh.r-16xksha.r-1wbh5a2
  140.             > div.css-1dbjc4n.r-150rngu.r-16y2uox.r-1wbh5a2.r-33ulu8
  141.               > div.css-1dbjc4n.r-aqfbo4.r-16y2uox
  142.                 > div.css-1dbjc4n.r-1oszu61.r-1niwhzg.r-18u37iz.r-16y2uox.r-1wtj0ep.r-2llsf.r-13qz1uu
  143.                   > div.css-1dbjc4n.r-yfoy6g.r-18bvks7.r-1ljd8xs.r-13l2t4g.r-1phboty.r-1jgb5lz.r-11wrixw.r-61z16t.r-1ye8kvj.r-13qz1uu.r-184en5c
  144.                     > div.css-1dbjc4n
  145.                       > div.css-1dbjc4n
  146.                         > div.css-1dbjc4n.r-16y2uox
  147.                           > div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-13qz1uu
  148.                             > div.css-1dbjc4n
  149.                               > section.css-1dbjc4n
  150.                                 > div.css-1dbjc4n[aria-label^="Timeline: "]:not([REM="yup, this is the timeline"])
  151.                                   > div[style^="position: relative; min-height: "][style$="px;"]
  152.                                     > div[style^="position: absolute; width: 100%; transform: translateY("][style$="px); transition: opacity 0.3s ease-out 0s;"]:not([REM="THIS IS ACTUAL POST WRAPPER"])
  153.                                       > div.css-1dbjc4n.r-1ila09b.r-qklmqi.r-1adg3ll.r-1ny4l3l
  154.                                         > div.css-1dbjc4n
  155.                                           > article.css-1dbjc4n.r-1loqt21.r-18u37iz.r-1ny4l3l.r-o7ynqc.r-6416eg
  156.                                             > div.css-1dbjc4n.r-eqz5dr.r-16y2uox.r-1wbh5a2
  157.                                               > div.css-1dbjc4n.r-16y2uox.r-1wbh5a2.r-1ny4l3l.r-1udh08x.r-1yt7n81.r-ry3cjt
  158.                                                 > div.css-1dbjc4n
  159.                                                   > div.css-1dbjc4n.r-18u37iz
  160.                                                     > div.css-1dbjc4n.r-1iusvr4.r-16y2uox.r-1777fci.r-1mi0q7o
  161.                                                       > div.css-1dbjc4n
  162.                                                         > div.css-1dbjc4n
  163.                                                           > div[class]:only-child
  164.                                                             > div[class]:only-child
  165.                                                               > div[class]:only-child
  166.                                                                 > div[class]:only-child
  167.                                                                 |
  168. _______________________________________________________________/
  169. / from here on just "reliable" attributes and pseudo-structure
  170. |
  171. > div[style="padding-bottom: 56.25%;"]:first-child
  172. + div:last-child
  173.   > div[data-testid="placementTracking"]
  174.     > div[data-testid="videoPlayer"]
  175.       > div
  176.         > div[style="padding-bottom: 56.25%;"]:first-child
  177.         + div:last-child
  178.           > div[style="height: 100%; position: relative; transform: translateZ(0px); width: 100%;"]
  179.             > div[style="height: 100%; position: absolute; width: 100%;"]:not([class]):first-child
  180.               > div[style="position: relative; width: 100%; height: 100%; background-color: transparent; overflow: hidden;"]
  181.                 > video:not([REM="OMG, here is the video"])
  182.             + div:not([style]):last-child
  183.               > div:not([class]):only-child
  184.                 > div:first-child:not([REM="this is the bugger I couldn't push under the video controls"])
  185.                 + div:not([class])
  186.                 + div:not([class])
  187.                 + div:not([class])
  188.                   > div[style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;"]
  189.                     > div[class]
  190.                       > div[style="background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.77));"]
  191.                         > div:first-child:not([REM="this is progress / seeker wrapper"])
  192.                         + div:last-child:not([REM="this is video controls wrapper"])
  193. */
  194.  
  195. div[style^="padding-bottom: "][style$="%;"]:first-child
  196. + div:last-child
  197.   > div[data-testid="placementTracking"]
  198.     > div[data-testid="videoPlayer"]
  199.       > div
  200.         > div[style^="padding-bottom: "][style$="%;"]:first-child
  201.         + div:last-child
  202.           > div[style="height: 100%; position: relative; transform: translateZ(0px); width: 100%;"]
  203.             > div[style="height: 100%; position: absolute; width: 100%;"]:not([class]):first-child
  204.             + div:not([style]):last-child
  205.               > div:not([class]):only-child
  206.                 > div:first-child:not([REM="this is the bugger I couldn't push under the video controls"])
  207. {
  208.   z-index: 0;
  209. }
  210. /*
  211. [:shivers:]
  212. */
  213. 	
  214.  
  215.  
  216. /*
  217. § dim sidebar until hovered
  218. */
  219.  [data-testid="sidebarColumn"]:not(:hover) {
  220.    opacity: .7
  221.  }
  222.  
  223. /*
  224. § old school "inacessible" follow buttons - use primary "white on blue" instead of black on white
  225. */
  226. div[role="button"][tabindex="0"][aria-label^="Follow @"] {
  227.  background-color: rgb(29, 161, 242) !important;
  228. }
  229. div[role="button"][tabindex="0"][aria-label^="Follow @"]:focus,
  230. div[role="button"][tabindex="0"][aria-label^="Follow @"]:hover {
  231.  background-color: rgb(19, 141, 212) !important;
  232. }
  233. div[role="button"][tabindex="0"][aria-label^="Follow @"] * {
  234.  color: #fff !important;
  235. }
  236.  
  237. div[role="button"][tabindex="0"][aria-label^="Following @"] {
  238.  background-color: darkgreen !important;
  239. }
  240. div[role="button"][tabindex="0"][aria-label^="Following @"]:hover ,
  241. div[role="button"][tabindex="0"][aria-label^="Following @"]:focus {
  242.  background-color: darkred !important;
  243. }
  244. div[role="button"][tabindex="0"][aria-label^="Following @"] * {
  245.  color: #fff !important;
  246. }
  247.  
  248. }