☰

Greasy Fork 还支持 简体中文。

Twitter.com: un-trim images on hover

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

目前為 2020-05-18 提交的版本，檢視 最新版本。

  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.1
  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. div[aria-label^="Timeline: "] > div > div > div
  14. = "post item"
  15. */
  16. /*
  17.  let the spice flow. over.
  18. */
  19. div[aria-label^="Timeline: "] > div > div:hover,
  20. div[aria-label^="Timeline: "] > div > div > div:hover * {
  21. 	overflow: visible !important;
  22. 	z-index: 10;
  23. }
  24. /*
  25.  directly hovered position something always above its unhovered siblings
  26. */
  27. div[aria-label^="Timeline: "] > div > div:hover *:hover {
  28. 	z-index: 20;
  29. }
  30. /*
  31.  counters covered by box would be inaccessible, move them above and make 'em transparent ...
  32. */
  33. div[aria-label^="Timeline: "] > div > div:hover [role="group"],
  34. div[aria-label^="Timeline: "] > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"] {
  35. 	z-index: 30;
  36. 	opacity: 0;
  37. }
  38. div[aria-label^="Timeline: "] > div > div > div:hover [role="group"] {
  39. 	outline: 20px solid rgba(0, 0, 0, 0.5);
  40. 	background-color: rgba(0, 0, 0, 0.5);
  41. }
  42. /*
  43.  ... until hovered
  44. */
  45. div[aria-label^="Timeline: "] > div > div:hover [role="group"]:hover,
  46. div[aria-label^="Timeline: "] > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"]:hover {
  47. 	opacity: 1 !important;
  48. }
  49.  
  50.  
  51. div[aria-label^="Timeline: "] > div > div [style^="flex-basis"] + div [dir][lang]:hover,
  52. div[aria-label^="Timeline: "] > div > div [style^="flex-basis"]:hover + div [dir][lang] {
  53. 	z-index: 30;
  54. 	background-color: rgba(0, 0, 0, 0.5);
  55. 	border-left: 10px solid transparent;
  56. 	margin-left: -10px;
  57. }
  58. /*
  59.  this is it - this *invisible* image just sits there covering div with very same image as background,
  60.  "squeezed" into wrapper. so let's unleash it while invisible to gain some performace 
  61. */
  62. div[aria-label^="Timeline: "] > div > div [aria-label] > img {
  63. 	width: auto !important;
  64. 	height: auto !important;
  65. 	max-width: calc(100vw - 20em) !important;
  66. 	/* too lazy to measure sidebar for now */
  67. 	min-width: calc(100%) !important;
  68. 	/* sometimes there is small pic that would otherwise downscale */
  69. 	outline: 3px solid black;
  70. 	z-index: 100 !important;
  71. }
  72. /*
  73.  tadaa, real pic an all its glory. most probably bigger
  74. */
  75. div[aria-label^="Timeline: "] > div > div:hover [aria-label] > img {
  76. 	opacity: 1 !important;
  77. }
  78. div[aria-label^="Timeline: "] > div > div:hover [aria-label] > img:hover {
  79. 	box-shadow: rgba(217, 217, 217, 0.2) 0px 0px 10px, rgba(217, 217, 217, 0.25) 0px 3px 6px 3px;
  80. }
  81.  
  82.  
  83.  
  84. /*
  85. video player controls
  86. */
  87. div[aria-label^="Timeline: "] > div > div:hover [style^="style=\"transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity:"],
  88. div[aria-label^="Timeline: "] > div > div:hover [style*="position: absolute;"]
  89. {
  90.     z-index: 30;
  91. }
  92.  
  93.  
  94. /*
  95. style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;"
  96. */
  97.  
  98. /*
  99. 	Increase size of avatar pictures in hover popup
  100. 	this is hell to debug, so please dont't judge
  101.   the popup has bottom/top according relative placement in viewport
  102. */
  103.  
  104.  
  105. [style*="left: "] a[role="link"][tabindex="-1"][aria-hidden="true"],
  106. [style*="left: "] a[role="link"][tabindex="-1"][aria-hidden="true"] * {
  107. 	min-height: 12em !important;
  108. 	min-width: 12em !important;
  109. 	margin: 0 !important;
  110. 	padding: 0 !important;
  111. 	background-size: contain;
  112. }
  113.  
  114. /* WIP show alt */
  115. /*
  116. [aria-haspopup="false"][href*="/status/"] [aria-label]:not(img):not([aria-label="Image"]) {
  117. 	outline: 10px solid red !important;
  118. 	xtransform: scale(1);
  119. }
  120. *[aria-haspopup="false"][href*="/status/"] [aria-label]:not(img):not([aria-label="Image"])::after {
  121.   content: attr(aria-label) !important;
  122. 	position: absolute;
  123. 	bottom: 0;
  124. 	left: 0;
  125. 	right: 0;
  126. 	z-index: 1000;
  127. }
  128. */
  129. }