☰

Twitter.com: un-trim images on hover

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

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