me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some buggy styling around the pin icon on pinned tweets

Browse Source
This commit is contained in:
Alessio 2024-04-13 16:57:51 -07:00
parent 1b3c5d0ed3
commit a7d2b78a18
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
internal/webserver/static/styles.css
View File

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