☰

Twitter.com: un-trim images on hover

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

当前为 2021-12-13 提交的版本，查看 最新版本。

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