diff --git a/internal/webserver/static/icons/like_filled.svg b/internal/webserver/static/icons/like_filled.svg new file mode 100644 index 0000000..34018a5 --- /dev/null +++ b/internal/webserver/static/icons/like_filled.svg @@ -0,0 +1 @@ + diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css index ecc0d30..f92296c 100644 --- a/internal/webserver/static/styles.css +++ b/internal/webserver/static/styles.css @@ -120,6 +120,7 @@ ul.inline-dotted-list li:last-child:after { .display-name { font-weight: bold; + white-space: nowrap; } .handle { color: var(--color-twitter-text-gray); @@ -551,11 +552,11 @@ ul.dropdown-items { background-color: var(--color-twitter-off-white); outline: 1px solid var(--color-outline-gray); border-radius: 0.3em; - visibility: hidden; + display: none; z-index: 1; /* otherwise in quote-tweets, the dropdown button from quoting-tweet is on top of it */ } .dropdown-button:focus + .dropdown-items, .dropdown-items:hover { - visibility: visible; + display: block; } .tombstone { outline: 1px solid var(--color-outline-gray); @@ -573,3 +574,6 @@ ul.dropdown-items { .tweet video { max-height: 25em; } +.like-icon.liked, .like-icon:hover { + filter: invert(20%) sepia(97%) saturate(4383%) hue-rotate(321deg) brightness(101%) contrast(95%); +} diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl index 059b9f4..1ab7907 100644 --- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl +++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl @@ -117,7 +117,11 @@ {{$main_tweet.NumRetweets}}