diff --git a/src/app.css b/src/app.css index 8730242c..4066f341 100644 --- a/src/app.css +++ b/src/app.css @@ -50,7 +50,7 @@ a.mention span { .deck-container, .deck.contained { - scroll-padding-top: 4em; + scroll-padding-top: 3em; } .deck { @@ -71,7 +71,7 @@ a.mention span { } .deck header { - min-height: 4em; + min-height: 3em; padding: 0 8px; position: sticky; top: 0; diff --git a/src/components/compose.jsx b/src/components/compose.jsx index b926a98a..c35d8913 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -89,10 +89,16 @@ function Compose({ spoilerTextRef.current.value = spoilerText; spoilerTextRef.current.focus(); } else { + const mentions = new Set([ + replyToStatus.account.acct, + ...replyToStatus.mentions.map((m) => m.acct), + ]); + textareaRef.current.value = `${[...mentions] + .filter((m) => m !== currentAccountInfo.acct) // Excluding self + .map((m) => `@${m}`) + .join(' ')} `; + textareaRef.current.dispatchEvent(new Event('input')); textareaRef.current.focus(); - if (replyToStatus.account.id !== currentAccount) { - textareaRef.current.value = `@${replyToStatus.account.acct} `; - } } setVisibility(visibility); setSensitive(sensitive); @@ -266,6 +272,7 @@ function Compose({ const isSelf = replyToStatus?.account.id === currentAccount; const hasOnlyAcct = replyToStatus && value.trim() === `@${replyToStatus.account.acct}`; + // TODO: check for mentions, or maybe just generic "@username", including multiple mentions like "@username1@username2" if (!isSelf && hasOnlyAcct) { console.log('canClose', { isSelf, hasOnlyAcct }); return true; @@ -448,6 +455,7 @@ function Compose({
Replying to @ {replyToStatus.account.acct || replyToStatus.account.username} + ’s status
)} diff --git a/src/components/status.css b/src/components/status.css index a7c1f914..1c640b28 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -461,6 +461,7 @@ a.card:hover { } .status .actions > button.plain { color: inherit; + border: 1.5px solid transparent; } .status .actions > button.plain:hover { color: var(--link-color); @@ -471,18 +472,79 @@ a.card:hover { } .status .actions > button.plain.reblog-button.reblogged { color: var(--reblog-color); - border: 1.5px solid var(--reblog-color); + border-color: var(--reblog-color); +} +@keyframes reblogged { + 5% { + transform: translate(-2px, -2px); + } + 10% { + transform: translate(2px, 2px); + } + 15% { + transform: translate(0, 0); + } + 100% { + transform: translate(30px, -30px); + opacity: 0; + } +} +.status .actions > button.plain.reblog-button.reblogged .icon { + animation: reblogged 1s ease-in-out; } .status .actions > button.plain.favourite-button:hover { color: var(--favourite-color); } .status .actions > button.plain.favourite-button.favourited { color: var(--favourite-color); - border: 1.5px solid var(--favourite-color); + border-color: var(--favourite-color); +} +@keyframes hearted { + 20% { + transform: rotate(10deg) scale(1); + } + 40% { + transform: rotate(-10deg) scale(1.25); + } + 60% { + transform: rotate(10deg) scale(1.75); + } + 80% { + transform: rotate(-10deg) scale(2); + } + 100% { + transform: rotate(10deg) scale(2.25); + opacity: 0; + } +} +.status .actions > button.plain.favourite-button.favourited .icon { + transform-origin: bottom center; + animation: hearted 1s ease-in-out; } .status .actions > button.plain.bookmark-button.bookmarked { color: var(--link-color); - border: 1.5px solid var(--link-color); + border-color: var(--link-color); +} +@keyframes bookmarked { + 25% { + transform: translateY(-10px) rotate(10deg); + opacity: 0.5; + } + 50% { + transform: translateY(0); + opacity: 1; + } + 75% { + transform: translateY(-15px) rotate(-10deg); + opacity: 0.5; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +.status .actions > button.plain.bookmark-button.bookmarked .icon { + animation: bookmarked 1s ease-in-out; } /* ENHANCED CONTENT */ diff --git a/src/index.css b/src/index.css index 7788a4f7..72d2b77f 100644 --- a/src/index.css +++ b/src/index.css @@ -194,7 +194,7 @@ code { } @media (prefers-color-scheme: dark) { - img, + /* img, video { filter: brightness(0.7); transition: filter 0.3s ease-out; @@ -202,7 +202,7 @@ code { img:hover, video:hover { filter: brightness(1); - } + } */ :is(button, .button).plain2 { backdrop-filter: blur(12px) brightness(0.5); }