diff --git a/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss b/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss index a6a04a47d822c1..f79d8f98871199 100644 --- a/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss +++ b/app/javascript/flavours/glitch/styles/neuromatchstodon/bigger_collapsed_statuses.scss @@ -1,28 +1,48 @@ -.status { +$status-collapsed-height: 10em; +$notification-collapsed-height: 6em; + +.status__wrapper { &.collapsed { - .status__content { - height: unset; - max-height: 6em; - padding-top: unset; + .status { + &__content { + height: unset; + max-height: $status-collapsed-height; + padding-top: unset; + mask-image: linear-gradient(#000 80%, transparent); + + &::after { + top: unset; + height: 40%; + } + + // "See more" button + &__spoiler-link { + background: $action-button-color; - &::after { - top: unset; - height: 40%; + &:hover, + &:focus { + background: lighten($action-button-color, 7%); + text-decoration: none; + } + } } - } - } - &--in-thread { - &.collapsed { - & > button { + &--in-thread > button { margin-inline-start: 46px + 10px; } } } } -// Fix background color after upstream moved how the -// normal button is placed in the DOM -.status.collapsed .status__content__spoiler-link { - background: $action-button-color; +// set a smaller height for previews of longposts in notifications +// The component structure is different depending on whether +// grouped notifications is enabled or not, and whether +// something is an interaction or not - there isn't a +// class given for "notifications" so we have to improvise +.notification-ungrouped .status__wrapper.collapsed .status__content, +.notification__filter-bar + + .scrollable + .status__wrapper.collapsed + .status__content { + max-height: $notification-collapsed-height; }