diff --git a/src/components/status.css b/src/components/status.css index d25da2a..945a2e1 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -107,24 +107,20 @@ --inset-offset: 16px; inset-block-end: var(--inset-offset); inset-inline-end: var(--inset-offset); - color: var(--link-color); - background-color: var(--bg-faded-blur-color); - backdrop-filter: blur(8px); - border: 1px solid var(--outline-color); + color: var(--text-color); + background-color: var(--bg-faded-color); + border: 1px dashed var(--link-color); + box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color), + 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color); padding: 0.5em 0.75em; border-radius: 10em; font-size: 90%; white-space: nowrap; - box-shadow: inset 0 0 0 1px var(--bg-color); - text-shadow: 0 -1px var(--bg-color); - transition-property: transform, background-color, border-color; - transition-duration: 0.2s; - transition-timing-function: ease-out; + transition: transform 0.2s ease-out; } &:is(:hover, :focus):after { - border-color: var(--link-color); - background-color: var(--bg-color); + color: var(--link-color); transform: translate(2px, 0); } } @@ -1536,26 +1532,52 @@ a.card:is(:hover, :focus):visited { text-overflow: ellipsis; } -#filtered-status-peek .status-link { - border-radius: 16px; - border: var(--hairline-width) dashed var(--text-insignificant-color); - max-height: 33vh; - max-height: 33dvh; - overflow: hidden; -} -#filtered-status-peek .status-link .status { - pointer-events: none; - font-size: 90%; - max-height: 33vh; - max-height: 33dvh; - overflow: hidden; - mask-image: linear-gradient(black 80%, transparent 95%); -} -#filtered-status-peek .status-post-link { - float: right; - position: sticky; - bottom: 8px; - right: 8px; +#filtered-status-peek { + .status-link { + margin: 8px 0 0; + border-radius: 16px; + border: var(--hairline-width) solid var(--divider-color); + position: relative; + max-height: 33vh; + max-height: 33dvh; + overflow: hidden; + + &.truncated { + .status { + mask-image: linear-gradient(to bottom, #000 80px, transparent); + } + + &:after { + content: attr(data-read-more); + line-height: 1; + display: inline-block; + position: absolute; + --inset-offset: 16px; + inset-block-end: var(--inset-offset); + inset-inline-end: var(--inset-offset); + color: var(--text-color); + background-color: var(--bg-faded-color); + border: 1px dashed var(--link-color); + box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color), + 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color); + padding: 0.5em 0.75em; + border-radius: 10em; + font-size: 90%; + white-space: nowrap; + transition: transform 0.2s ease-out; + } + + &:is(:hover, :focus):after { + color: var(--link-color); + transform: translate(2px, 0); + } + } + + .status { + pointer-events: none; + font-size: 90%; + } + } } /* REACTIONS */ diff --git a/src/components/status.jsx b/src/components/status.jsx index 30267ba..036c9d2 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -2089,6 +2089,8 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { }, ); + const statusPeekRef = useTruncated(); + return (
{ setShowPeek(false); }} + data-read-more="Read more →" > -
diff --git a/src/pages/notifications.css b/src/pages/notifications.css index 6b3fe0f..337812b 100644 --- a/src/pages/notifications.css +++ b/src/pages/notifications.css @@ -118,23 +118,20 @@ --inset-offset: 16px; inset-block-end: var(--inset-offset); inset-inline-end: var(--inset-offset); - color: var(--link-color); - background-color: var(--bg-faded-blur-color); - backdrop-filter: blur(8px); - border: 1px solid var(--outline-color); + color: var(--text-color); + background-color: var(--bg-faded-color); + border: 1px dashed var(--link-color); + box-shadow: 0 0 0 1px var(--bg-color), 0 -5px 10px var(--bg-color), + 0 -5px 15px var(--bg-color), 0 -5px 20px var(--bg-color); padding: 0.5em 0.75em; border-radius: 10em; font-size: 90%; white-space: nowrap; - box-shadow: inset 0 0 0 1px var(--bg-color); text-shadow: 0 -1px var(--bg-color); - transition-property: transform, background-color, border-color; - transition-duration: 0.2s; - transition-timing-function: ease-out; + transition: transform 0.2s ease-out; } .notification .status-link:is(:hover, :focus).truncated:after { - border-color: var(--link-color); - background-color: var(--bg-color); + color: var(--link-color); transform: translate(2px, 0); } .notification .status-link.status-type-mention {