Fix some buggy styling around the pin icon on pinned tweets

This commit is contained in:
Alessio 2024-04-13 16:57:51 -07:00
parent 1b3c5d0ed3
commit a7d2b78a18

View File

@ -197,7 +197,7 @@ h3 {
header {
/* Sticky to top of page */
position: fixed;
z-index: 1;
z-index: 2; /* Pin icon in a pinned tweet has z-index=1 */
/* Match layout width of `body` */
left: var(--width-body-margins);
@ -531,6 +531,13 @@ main {
padding-top: 0.6em;
padding-bottom: 0.6em;
}
/**
* Create some extra space for the pin icon at the top of a pinned tweet
*/
.pinned-tweet & {
margin-top: -2em;
padding-top: 1.5em;
}
.timeline > &, .pinned-tweet & {
/* not for nested (i.e., quoted) tweets */
border-bottom: 1px solid var(--color-twitter-off-white-dark);
@ -998,9 +1005,10 @@ main {
* Pinned tweet mini-module
*/
.pinned-tweet__pin-container {
margin: 0.5em 0em -1em 3em;
margin: 0.5em 0em 0em 3em;
z-index: 1; /* Otherwise it disappears behind the tweet background color on mouse-over */
position: relative; /* z-index is ignored if `position` is "static" */
width: fit-content;
.pinned-tweet__pin-icon {
filter: invert(43%) saturate(30%);