Twitter.com: un-trim images on hover by myfonj

/* ==UserStyle==
@name        Twitter.com: un-trim images on hover
@description Reveal cropped portions of content while post is under mouse pointer.
@namespace   myfonj
@version     1.1.8
@license     CC0 - Public Domain
==/UserStyle== */

@-moz-document domain("twitter.com"), domain("x.com") {
/*
Twitter.com: un-trim images on hover
https://userstyles.world/style/8272/twitter-com-un-trim-images-on-hover
https://greasyfork.org/en/scripts/402913/versions/new
RIP https://userstyles.org/styles/175427/edit

Changelog
1.1.8 (2024-11-18) light backdrop for light theme
1.1.7 (2024-08-06) do not enlarge promoted things
1.1.6 (2024-05-30) fix hovercard picture enlarging again
1.4.5 (2024-05-17) x.com "Terror from the deep"
1.1.4 (2023-11-23) fix hovercard picture enlarging
1.1.3 (2023-07-03) (hot)fix tweet item scoping
1.1.2 hover bg
1.1.1 (2023-01-26) Compact(er) header extracetd to https://userstyles.world/style/8302/twitter-com-compact-er-header
1.1.0 (2023-01-24) Compact(er) header (probably will extract elsewhere)


*/
/*
[aria-label="Home timeline"][tabindex="0"] > *:first-child:not(:hover) {
 outline: #0FF6 solid; outline-offset: -2px;
 xwidth: 1px;
 position: fixed;
 right: 0
}
*/
}
 
@-moz-document domain("twitter.com"), domain("x.com") {

body {
 --backdrop1: rgba(0, 0, 0, 0.5);
}
body:is(
 [style*="background-color: rgb(255, 255, 255);"],
 [style*="background-color: #FFFFFF;"]
){
 --backdrop1: rgba(255, 255, 255, 0.5);
}


/* */

/*
 let the spice flow. over.
*/
[data-testid="cellInnerDiv"]:hover {
	overflow: visible !important;
	z-index: 10;
}
[data-testid="cellInnerDiv"]:not(
/* promoted things: */
:has(article[tabindex="0"] 
:is([data-testid="User-Names"],[data-testid="User-Name"]) > div:last-child:nth-child(2) > :only-child > :only-child a
)):hover * {
	overflow: visible !important;
}
/*
 directly hovered position something always above its unhovered siblings
*/
[data-testid="cellInnerDiv"]:hover *:hover {
	z-index: 20;
}
/*
 counters covered by box would be inaccessible, move them above and make 'em transparent ...
*/
[data-testid="cellInnerDiv"]:hover [role="group"],
[data-testid="cellInnerDiv"]:hover [role="link"][data-focusable="true"][href$="/media_tags"] {
	z-index: 30;
	opacity: 0;
}
	

/* tweet actions */
[data-testid="cellInnerDiv"]:hover [role="group"] {
	outline: 20px solid var(--backdrop1);
	background-color: var(--backdrop1);
}
/*
 ... until hovered
*/
[data-testid="cellInnerDiv"]:hover [role="group"]:hover,
[data-testid="cellInnerDiv"]:hover [role="link"][data-focusable="true"][href$="/media_tags"]:hover {
	opacity: 1 !important;
}

article[data-testid="tweet"] [data-testid]:hover:not(:has([data-testid]:hover )) {
 XXoutline: #0FF6 solid; outline-offset: -2px;
 background-color: var(--backdrop1) !important
}



/*
	fix for external link badge text underlayed by illustration producing non-contrasting text
*/
[data-testid="cellInnerDiv"]:hover a[href^="https://t.co/"][href$="?amp=1"][target="_blank"][role="link"][data-focusable="true"][rel=" noopener noreferrer"]:hover {
	background-color: var(--backdrop1);
}
/* tweet text */
[data-testid="cellInnerDiv"] [style^="flex-basis"] + div [dir][lang]:hover,
[data-testid="cellInnerDiv"] [style^="flex-basis"]:hover + div [dir][lang] {
	z-index: 30;
	background-color: var(--backdrop1);
	border-left: 10px solid transparent;
	margin-left: -10px;
}
/*
 this is it - this *invisible* image just sits there covering div with very same image as background,
 "squeezed" into wrapper. so let's unleash it while invisible to gain some performace 
*/
[data-testid="cellInnerDiv"] [aria-label] > img {
	width: auto !important;
	height: auto !important;
	max-width: calc(100vw - 20em) !important;
	/* too lazy to measure sidebar for now */
	min-width: calc(100%) !important;
	/* sometimes there is small pic that would otherwise downscale */
	outline: 3px solid black;
	z-index: 100 !important;
}
/*
 tadaa, real pic an all its glory. most probably bigger
*/
[data-testid="cellInnerDiv"]:hover [aria-label] > img {
	opacity: 1 !important;
}
[data-testid="cellInnerDiv"]:hover [aria-label] > img:hover {
	box-shadow: rgba(217, 217, 217, 0.2) 0px 0px 10px, rgba(217, 217, 217, 0.25) 0px 3px 6px 3px;
}


/*
	Increase size of avatar pictures in hover popup
	this is hell to debug, so please dont't judge
  the popup has bottom/top according relative placement in viewport
 2021-04-06 they removed [tabindex="-1"]
 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
 2024-05-30 avatars in hovercard no longer images. Gosh.
*/
[data-testid="HoverCard"] > * {
 min-width: 45ch !important
}
[data-testid="HoverCard"] > * > * > * > [data-testid^="UserAvatar-Container-"] {
 width: 26ch !important;
 height: 26ch !important;
 image-rendering: crisp-edges;
}

/*
fix video player controls
since it is serious mess, lets adore the emphemeral structure I had to sieve trough:
*/
/*
// for ilustration, where it begins. from here it is just classes copied from devtools
(unreliable I assume) and some hand copied attributes
html
> body> 
  > div#react-root
    > div.css-1dbjc4n.r-13awgt0.r-12vffkv
      > div.css-1dbjc4n.r-13awgt0.r-12vffkv
        > div.css-1dbjc4n.r-18u37iz.r-13qz1uu.r-417010
          > main.css-1dbjc4n.r-1habvwh.r-16xksha.r-1wbh5a2
            > div.css-1dbjc4n.r-150rngu.r-16y2uox.r-1wbh5a2.r-33ulu8
              > div.css-1dbjc4n.r-aqfbo4.r-16y2uox
                > div.css-1dbjc4n.r-1oszu61.r-1niwhzg.r-18u37iz.r-16y2uox.r-1wtj0ep.r-2llsf.r-13qz1uu
                  > 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
                    > div.css-1dbjc4n
                      > div.css-1dbjc4n
                        > div.css-1dbjc4n.r-16y2uox
                          > div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-13qz1uu
                            > div.css-1dbjc4n
                              > section.css-1dbjc4n
                                > div.css-1dbjc4n[aria-label^="Timeline: "]:not([REM="yup, this is the timeline"])
                                  > div[style^="position: relative; min-height: "][style$="px;"]
                                    > div[style^="position: absolute; width: 100%; transform: translateY("][style$="px); transition: opacity 0.3s ease-out 0s;"]:not([REM="THIS IS ACTUAL POST WRAPPER"])
                                      > div.css-1dbjc4n.r-1ila09b.r-qklmqi.r-1adg3ll.r-1ny4l3l
                                        > div.css-1dbjc4n
                                          > article.css-1dbjc4n.r-1loqt21.r-18u37iz.r-1ny4l3l.r-o7ynqc.r-6416eg
                                            > div.css-1dbjc4n.r-eqz5dr.r-16y2uox.r-1wbh5a2
                                              > div.css-1dbjc4n.r-16y2uox.r-1wbh5a2.r-1ny4l3l.r-1udh08x.r-1yt7n81.r-ry3cjt
                                                > div.css-1dbjc4n
                                                  > div.css-1dbjc4n.r-18u37iz
                                                    > div.css-1dbjc4n.r-1iusvr4.r-16y2uox.r-1777fci.r-1mi0q7o
                                                      > div.css-1dbjc4n
                                                        > div.css-1dbjc4n
                                                          > div[class]:only-child
                                                            > div[class]:only-child
                                                              > div[class]:only-child
                                                                > div[class]:only-child
                                                                |
_______________________________________________________________/
/ from here on just "reliable" attributes and pseudo-structure
|
> div[style="padding-bottom: 56.25%;"]:first-child
+ div:last-child
  > div[data-testid="placementTracking"]
    > div[data-testid="videoPlayer"]
      > div
        > div[style="padding-bottom: 56.25%;"]:first-child
        + div:last-child
          > div[style="height: 100%; position: relative; transform: translateZ(0px); width: 100%;"]
            > div[style="height: 100%; position: absolute; width: 100%;"]:not([class]):first-child
              > div[style="position: relative; width: 100%; height: 100%; background-color: transparent; overflow: hidden;"]
                > video:not([REM="OMG, here is the video"])
            + div:not([style]):last-child
              > div:not([class]):only-child
                > div:first-child:not([REM="this is the bugger I couldn't push under the video controls"])
                + div:not([class])
                + div:not([class])
                + div:not([class])
                  > div[style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;"]
                    > div[class]
                      > div[style="background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.77));"]
                        > div:first-child:not([REM="this is progress / seeker wrapper"])
                        + div:last-child:not([REM="this is video controls wrapper"])
*/

div[style^="padding-bottom: "][style$="%;"]:first-child
+ div:last-child
  > div[data-testid="placementTracking"]
    > div[data-testid="videoPlayer"]
      > div
        > div[style^="padding-bottom: "][style$="%;"]:first-child
        + div:last-child
          > div[style="height: 100%; position: relative; transform: translateZ(0px); width: 100%;"]
            > div[style="height: 100%; position: absolute; width: 100%;"]:not([class]):first-child
            + div:not([style]):last-child
              > div:not([class]):only-child
                > div:first-child:not([REM="this is the bugger I couldn't push under the video controls"])
{
  z-index: 0;
}
/*
[:shivers:]
*/

}