☰

Twitter.com: un-trim images on hover

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

当前为 2020-06-30 提交的版本，查看 最新版本。

  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.6
  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 > div
  17. = "post item"
  18. */
  19. /*
  20.  let the spice flow. over.
  21. */
  22. div[aria-label^="Timeline: "] > div > div > div:hover,
  23. div[aria-label^="Timeline: "] > div > div > div:hover * {
  24. 	overflow: visible !important;
  25. 	z-index: 10;
  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 > div:hover [role="group"],
  37. div[aria-label^="Timeline: "] > div > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"] {
  38. 	z-index: 30;
  39. 	opacity: 0;
  40. }
  41. 	
  42.  
  43. /* tweet actions */
  44. div[aria-label^="Timeline: "] > div > div > div:hover [role="group"] {
  45. 	outline: 20px solid rgba(0, 0, 0, 0.5);
  46. 	background-color: rgba(0, 0, 0, 0.5);
  47. }
  48. /*
  49.  ... until hovered
  50. */
  51. div[aria-label^="Timeline: "] > div > div > div:hover [role="group"]:hover,
  52. div[aria-label^="Timeline: "] > div > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"]:hover {
  53. 	opacity: 1 !important;
  54. }
  55.  
  56. /*
  57. 	fix for external link badge text underlayed by illustration producing non-contrasting text
  58. */
  59. div[aria-label^="Timeline: "] > div > div > div:hover a[href^="https://t.co/"][href$="?amp=1"][target="_blank"][role="link"][data-focusable="true"][rel=" noopener noreferrer"]:hover {
  60. 	background-color: rgba(0, 0, 0, 0.5);
  61. }
  62. /* tweet text */
  63. div[aria-label^="Timeline: "] > div > div > div [style^="flex-basis"] + div [dir][lang]:hover,
  64. div[aria-label^="Timeline: "] > div > div > div [style^="flex-basis"]:hover + div [dir][lang] {
  65. 	z-index: 30;
  66. 	background-color: rgba(0, 0, 0, 0.5);
  67. 	border-left: 10px solid transparent;
  68. 	margin-left: -10px;
  69. }
  70. /*
  71.  this is it - this *invisible* image just sits there covering div with very same image as background,
  72.  "squeezed" into wrapper. so let's unleash it while invisible to gain some performace 
  73. */
  74. div[aria-label^="Timeline: "] > div > div > div [aria-label] > img {
  75. 	width: auto !important;
  76. 	height: auto !important;
  77. 	max-width: calc(100vw - 20em) !important;
  78. 	/* too lazy to measure sidebar for now */
  79. 	min-width: calc(100%) !important;
  80. 	/* sometimes there is small pic that would otherwise downscale */
  81. 	outline: 3px solid black;
  82. 	z-index: 100 !important;
  83. }
  84. /*
  85.  tadaa, real pic an all its glory. most probably bigger
  86. */
  87. div[aria-label^="Timeline: "] > div > div > div:hover [aria-label] > img {
  88. 	opacity: 1 !important;
  89. }
  90. div[aria-label^="Timeline: "] > div > div > div:hover [aria-label] > img:hover {
  91. 	box-shadow: rgba(217, 217, 217, 0.2) 0px 0px 10px, rgba(217, 217, 217, 0.25) 0px 3px 6px 3px;
  92. }
  93.  
  94. /* 2020-06 - avatars in timeline started to follow same principle, so became hover "jumpy"
  95. 	since we are zooming them in detail popups anyway, just be dirty and brutal for now
  96. 	N.B. beautiful selector for picking avatar "cell" is sometimes [style="flex-basis: 49px;"]
  97.   but pixel value changes across devices (or what)
  98. */
  99. [href^="/"][role="link"][aria-hidden="true"][tabindex="-1"] img, /* in notifications */
  100. div[aria-label^="Timeline: "]:not(#\0) [style^="flex-basis: "][style$="px;"] img {
  101. 	display: none !important;
  102. 	outline: 1px solid red !important;
  103. }
  104.  
  105. /*
  106. video player controls
  107. */
  108. div[aria-label^="Timeline: "] > div > div > div:hover [style^="style=\"transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity:"],
  109. div[aria-label^="Timeline: "] > div > div > div:hover [style*="position: absolute;"]
  110. {
  111.     z-index: 30;
  112. }
  113.  
  114.  
  115.  
  116. /*
  117. style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;"
  118. */
  119.  
  120. /*
  121. 	Increase size of avatar pictures in hover popup
  122. 	this is hell to debug, so please dont't judge
  123.   the popup has bottom/top according relative placement in viewport
  124. */
  125.  
  126.  
  127. [style*="left: "] a[role="link"][tabindex="-1"][aria-hidden="true"],
  128. [style*="left: "] a[role="link"][tabindex="-1"][aria-hidden="true"] * {
  129. 	min-height: 12em !important;
  130. 	min-width: 12em !important;
  131. 	margin: 0 !important;
  132. 	padding: 0 !important;
  133. 	background-size: contain;
  134. }
  135.  
  136. /* WIP show alt */
  137. /*
  138. [aria-haspopup="false"][href*="/status/"] [aria-label]:not(img):not([aria-label="Image"]) {
  139. 	outline: 10px solid red !important;
  140. 	xtransform: scale(1);
  141. }
  142. *[aria-haspopup="false"][href*="/status/"] [aria-label]:not(img):not([aria-label="Image"])::after {
  143.   content: attr(aria-label) !important;
  144. 	position: absolute;
  145. 	bottom: 0;
  146. 	left: 0;
  147. 	right: 0;
  148. 	z-index: 1000;
  149. }
  150. */
  151. }