Twitter.com: un-trim images on hover

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

当前为 2021-12-17 提交的版本,查看 最新版本

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