aboutsummaryrefslogtreecommitdiff
path: root/src/components/status
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/status')
-rw-r--r--src/components/status/status.js118
-rw-r--r--src/components/status/status.scss414
-rw-r--r--src/components/status/status.vue525
3 files changed, 562 insertions, 495 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 9cd9d61c..d263da68 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -9,14 +9,31 @@ import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.vue'
import StatusContent from '../status_content/status_content.vue'
import StatusPopover from '../status_popover/status_popover.vue'
+import UserListPopover from '../user_list_popover/user_list_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
-import { filter, unescape, uniqBy } from 'lodash'
+import { muteWordHits } from '../../services/status_parser/status_parser.js'
+import { unescape, uniqBy } from 'lodash'
import { mapGetters, mapState } from 'vuex'
const Status = {
name: 'Status',
+ components: {
+ FavoriteButton,
+ ReactButton,
+ RetweetButton,
+ ExtraButtons,
+ PostStatusForm,
+ UserCard,
+ UserAvatar,
+ AvatarList,
+ Timeago,
+ StatusPopover,
+ UserListPopover,
+ EmojiReactions,
+ StatusContent
+ },
props: [
'statusoid',
'expandable',
@@ -44,6 +61,12 @@ const Status = {
muteWords () {
return this.mergedConfig.muteWords
},
+ showReasonMutedThread () {
+ return (
+ this.status.thread_muted ||
+ (this.status.reblog && this.status.reblog.thread_muted)
+ ) && !this.inConversation
+ },
repeaterClass () {
const user = this.statusoid.user
return highlightClass(user)
@@ -93,26 +116,48 @@ const Status = {
return !!this.currentUser
},
muteWordHits () {
- const statusText = this.status.text.toLowerCase()
- const statusSummary = this.status.summary.toLowerCase()
- const hits = filter(this.muteWords, (muteWord) => {
- return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase())
- })
-
- return hits
+ return muteWordHits(this.status, this.muteWords)
},
muted () {
- const relationship = this.$store.getters.relationship(this.status.user.id)
- return !this.unmuted && (
- (!(this.inProfile && this.status.user.id === this.profileUserId) && relationship.muting) ||
- (!this.inConversation && this.status.thread_muted) ||
- this.muteWordHits.length > 0)
+ const { status } = this
+ const { reblog } = status
+ const relationship = this.$store.getters.relationship(status.user.id)
+ const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
+ const reasonsToMute = (
+ // Post is muted according to BE
+ status.muted ||
+ // Reprööt of a muted post according to BE
+ (reblog && reblog.muted) ||
+ // Muted user
+ relationship.muting ||
+ // Muted user of a reprööt
+ (relationshipReblog && relationshipReblog.muting) ||
+ // Thread is muted
+ status.thread_muted ||
+ // Wordfiltered
+ this.muteWordHits.length > 0
+ )
+ const excusesNotToMute = (
+ (
+ this.inProfile && (
+ // Don't mute user's posts on user timeline (except reblogs)
+ (!reblog && status.user.id === this.profileUserId) ||
+ // Same as above but also allow self-reblogs
+ (reblog && reblog.user.id === this.profileUserId)
+ )
+ ) ||
+ // Don't mute statuses in muted conversation when said conversation is opened
+ (this.inConversation && status.thread_muted)
+ // No excuses if post has muted words
+ ) && !this.muteWordHits.length > 0
+
+ return !this.unmuted && !excusesNotToMute && reasonsToMute
},
hideFilteredStatuses () {
return this.mergedConfig.hideFilteredStatuses
},
hideStatus () {
- return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
+ return this.deleted || (this.muted && this.hideFilteredStatuses)
},
isFocused () {
// retweet or root of an expanded conversation
@@ -135,37 +180,6 @@ const Status = {
return user && user.screen_name
}
},
- hideReply () {
- if (this.mergedConfig.replyVisibility === 'all') {
- return false
- }
- if (this.inConversation || !this.isReply) {
- return false
- }
- if (this.status.user.id === this.currentUser.id) {
- return false
- }
- if (this.status.type === 'retweet') {
- return false
- }
- const checkFollowing = this.mergedConfig.replyVisibility === 'following'
- for (var i = 0; i < this.status.attentions.length; ++i) {
- if (this.status.user.id === this.status.attentions[i].id) {
- continue
- }
- // There's zero guarantee of this working. If we happen to have that user and their
- // relationship in store then it will work, but there's kinda little chance of having
- // them for people you're not following.
- const relationship = this.$store.state.users.relationships[this.status.attentions[i].id]
- if (checkFollowing && relationship && relationship.following) {
- return false
- }
- if (this.status.attentions[i].id === this.currentUser.id) {
- return false
- }
- }
- return this.status.attentions.length > 0
- },
replySubject () {
if (!this.status.summary) return ''
const decodedSummary = unescape(this.status.summary)
@@ -199,20 +213,6 @@ const Status = {
currentUser: state => state.users.currentUser
})
},
- components: {
- FavoriteButton,
- ReactButton,
- RetweetButton,
- ExtraButtons,
- PostStatusForm,
- UserCard,
- UserAvatar,
- AvatarList,
- Timeago,
- StatusPopover,
- EmojiReactions,
- StatusContent
- },
methods: {
visibilityIcon (visibility) {
switch (visibility) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
new file mode 100644
index 00000000..8d292d3f
--- /dev/null
+++ b/src/components/status/status.scss
@@ -0,0 +1,414 @@
+
+@import '../../_variables.scss';
+
+$status-margin: 0.75em;
+
+.Status {
+ min-width: 0;
+
+ &:hover {
+ --still-image-img: visible;
+ --still-image-canvas: hidden;
+ }
+
+ &.-focused {
+ background-color: $fallback--lightBg;
+ background-color: var(--selectedPost, $fallback--lightBg);
+ color: $fallback--text;
+ color: var(--selectedPostText, $fallback--text);
+
+ --lightText: var(--selectedPostLightText, $fallback--light);
+ --faint: var(--selectedPostFaintText, $fallback--faint);
+ --faintLink: var(--selectedPostFaintLink, $fallback--faint);
+ --postLink: var(--selectedPostPostLink, $fallback--faint);
+ --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
+ --icon: var(--selectedPostIcon, $fallback--icon);
+ }
+
+ .status-container {
+ display: flex;
+ padding: $status-margin;
+
+ &.-repeat {
+ padding-top: 0;
+ }
+ }
+
+ .pin {
+ padding: $status-margin $status-margin 0;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
+ .left-side {
+ margin-right: $status-margin;
+ }
+
+ .right-side {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .usercard {
+ margin-bottom: $status-margin;
+ }
+
+ .status-username {
+ white-space: nowrap;
+ font-size: 14px;
+ overflow: hidden;
+ max-width: 85%;
+ font-weight: bold;
+ flex-shrink: 1;
+ margin-right: 0.4em;
+ text-overflow: ellipsis;
+
+ .emoji {
+ width: 14px;
+ height: 14px;
+ vertical-align: middle;
+ object-fit: contain;
+ }
+ }
+
+ .status-favicon {
+ height: 18px;
+ width: 18px;
+ margin-right: 0.4em;
+ }
+
+ .status-heading {
+ margin-bottom: 0.5em;
+ }
+
+ .heading-name-row {
+ display: flex;
+ justify-content: space-between;
+ line-height: 18px;
+
+ a {
+ display: inline-block;
+ word-break: break-all;
+ }
+ }
+
+ .account-name {
+ min-width: 1.6em;
+ margin-right: 0.4em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1 1 0;
+ }
+
+ .heading-left {
+ display: flex;
+ min-width: 0;
+ }
+
+ .heading-right {
+ display: flex;
+ flex-shrink: 0;
+ }
+
+ .timeago {
+ margin-right: 0.2em;
+ }
+
+ .heading-reply-row {
+ position: relative;
+ align-content: baseline;
+ font-size: 12px;
+ line-height: 18px;
+ max-width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: stretch;
+ }
+
+ .reply-to-and-accountname {
+ display: flex;
+ height: 18px;
+ margin-right: 0.5em;
+ max-width: 100%;
+
+ .reply-to-link {
+ white-space: nowrap;
+ word-break: break-word;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ }
+
+ .icon-reply {
+ // mirror the icon
+ transform: scaleX(-1);
+ }
+ }
+
+ & .reply-to-popover,
+ & .reply-to-no-popover {
+ min-width: 0;
+ margin-right: 0.4em;
+ flex-shrink: 0;
+ }
+
+ .reply-to-popover {
+ .reply-to:hover::before {
+ content: '';
+ display: block;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ border-bottom: 1px solid var(--faint);
+ pointer-events: none;
+ }
+
+ .faint-link:hover {
+ // override default
+ text-decoration: none;
+ }
+
+ &.-strikethrough {
+ .reply-to::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ border-bottom: 1px solid var(--faint);
+ pointer-events: none;
+ }
+ }
+ }
+
+ .reply-to {
+ display: flex;
+ position: relative;
+ }
+
+ .reply-to-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-left: 0.2em;
+ }
+
+ .replies-separator {
+ margin-left: 0.4em;
+ }
+
+ .replies {
+ line-height: 18px;
+ font-size: 12px;
+ display: flex;
+ flex-wrap: wrap;
+
+ & > * {
+ margin-right: 0.4em;
+ }
+ }
+
+ .reply-link {
+ height: 17px;
+ }
+
+ .repeat-info {
+ padding: 0.4em $status-margin;
+ line-height: 22px;
+
+ .right-side {
+ display: flex;
+ align-content: center;
+ flex-wrap: wrap;
+ }
+
+ i {
+ padding: 0 0.2em;
+ }
+ }
+
+ .repeater-avatar {
+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+ margin-left: 28px;
+ width: 20px;
+ height: 20px;
+ }
+
+ .repeater-name {
+ text-overflow: ellipsis;
+ margin-right: 0;
+
+ .emoji {
+ width: 14px;
+ height: 14px;
+ vertical-align: middle;
+ object-fit: contain;
+ }
+ }
+
+ .status-fadein {
+ animation-duration: 0.4s;
+ animation-name: fadein;
+ }
+
+ @keyframes fadein {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ .status-actions {
+ position: relative;
+ width: 100%;
+ display: flex;
+ margin-top: $status-margin;
+
+ > * {
+ max-width: 4em;
+ flex: 1;
+ }
+ }
+
+ .button-reply {
+ &:not(.-disabled) {
+ cursor: pointer;
+ }
+
+ &:not(.-disabled):hover,
+ &.-active {
+ color: $fallback--cBlue;
+ color: var(--cBlue, $fallback--cBlue);
+ }
+ }
+
+ .muted {
+ padding: 0.25em 0.6em;
+ height: 1.2em;
+ line-height: 1.2em;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: flex;
+ flex-wrap: nowrap;
+
+ & .status-username,
+ & .mute-thread,
+ & .mute-words {
+ word-wrap: normal;
+ word-break: normal;
+ white-space: nowrap;
+ }
+
+ & .status-username,
+ & .mute-words {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ .status-username {
+ font-weight: normal;
+ flex: 0 1 auto;
+ margin-right: 0.2em;
+ font-size: smaller;
+ }
+
+ .mute-thread {
+ flex: 0 0 auto;
+ }
+
+ .mute-words {
+ flex: 1 0 5em;
+ margin-left: 0.2em;
+
+ &::before {
+ content: ' ';
+ }
+ }
+
+ .unmute {
+ flex: 0 0 auto;
+ margin-left: auto;
+ display: block;
+ }
+ }
+
+ .reply-form {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .reply-body {
+ flex: 1;
+ }
+
+ .favs-repeated-users {
+ margin-top: $status-margin;
+ }
+
+ .stats {
+ width: 100%;
+ display: flex;
+ line-height: 1em;
+ }
+
+ .avatar-row {
+ flex: 1;
+ overflow: hidden;
+ position: relative;
+ display: flex;
+ align-items: center;
+
+ &::before {
+ content: '';
+ position: absolute;
+ height: 100%;
+ width: 1px;
+ left: 0;
+ background-color: var(--faint, $fallback--faint);
+ }
+ }
+
+ .stat-count {
+ margin-right: $status-margin;
+ user-select: none;
+
+ .stat-title {
+ color: var(--faint, $fallback--faint);
+ font-size: 12px;
+ text-transform: uppercase;
+ position: relative;
+ }
+
+ .stat-number {
+ font-weight: bolder;
+ font-size: 16px;
+ line-height: 1em;
+ }
+
+ &:hover .stat-title {
+ text-decoration: underline;
+ }
+ }
+
+ @media all and (max-width: 800px) {
+ .repeater-avatar {
+ margin-left: 20px;
+ }
+
+ .avatar:not(.repeater-avatar) {
+ width: 40px;
+ height: 40px;
+
+ // TODO define those other way somehow?
+ // stylelint-disable rscss/class-format
+ &.avatar-compact {
+ width: 32px;
+ height: 32px;
+ }
+ }
+ }
+}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e4c7545b..282ad37d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -2,8 +2,8 @@
<!-- eslint-disable vue/no-v-html -->
<div
v-if="!hideStatus"
- class="status-el"
- :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
+ class="Status"
+ :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
>
<div
v-if="error"
@@ -16,13 +16,34 @@
/>
</div>
<template v-if="muted && !isPreview">
- <div class="media status container muted">
- <small>
+ <div class="status-csontainer muted">
+ <small class="status-username">
+ <i
+ v-if="muted && retweet"
+ class="button-icon icon-retweet"
+ />
<router-link :to="userProfileLink">
{{ status.user.screen_name }}
</router-link>
</small>
- <small class="muteWords">{{ muteWordHits.join(', ') }}</small>
+ <small
+ v-if="showReasonMutedThread"
+ class="mute-thread"
+ >
+ {{ $t('status.thread_muted') }}
+ </small>
+ <small
+ v-if="showReasonMutedThread && muteWordHits.length > 0"
+ class="mute-thread"
+ >
+ {{ $t('status.thread_muted_and_words') }}
+ </small>
+ <small
+ class="mute-words"
+ :title="muteWordHits.join(', ')"
+ >
+ {{ muteWordHits.join(', ') }}
+ </small>
<a
href="#"
class="unmute"
@@ -33,7 +54,7 @@
<template v-else>
<div
v-if="showPinned"
- class="status-pin"
+ class="pin"
>
<i class="fa icon-pin faint" />
<span class="faint">{{ $t('status.pinned') }}</span>
@@ -42,16 +63,19 @@
v-if="retweet && !noHeading && !inConversation"
:class="[repeaterClass, { highlighted: repeaterStyle }]"
:style="[repeaterStyle]"
- class="media container retweet-info"
+ class="status-container repeat-info"
>
<UserAvatar
v-if="retweet"
- class="media-left"
+ class="left-side repeater-avatar"
:better-shadow="betterShadow"
:user="statusoid.user"
/>
- <div class="media-body faint">
- <span class="user-name">
+ <div class="right-side faint">
+ <span
+ class="status-username repeater-name"
+ :title="retweeter"
+ >
<router-link
v-if="retweeterHtml"
:to="retweeterProfileLink"
@@ -71,14 +95,14 @@
</div>
<div
- :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
+ :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
:style="[ userStyle ]"
- class="media status"
+ class="status-container"
:data-tags="tags"
>
<div
v-if="!noHeading"
- class="media-left"
+ class="left-side"
>
<router-link
:to="userProfileLink"
@@ -91,37 +115,45 @@
/>
</router-link>
</div>
- <div class="status-body">
+ <div class="right-side">
<UserCard
v-if="userExpanded"
:user-id="status.user.id"
:rounded="true"
:bordered="true"
- class="status-usercard"
+ class="usercard"
/>
<div
v-if="!noHeading"
- class="media-heading"
+ class="status-heading"
>
<div class="heading-name-row">
- <div class="name-and-account-name">
+ <div class="heading-left">
<h4
v-if="status.user.name_html"
- class="user-name"
+ class="status-username"
+ :title="status.user.name"
v-html="status.user.name_html"
/>
<h4
v-else
- class="user-name"
+ class="status-username"
+ :title="status.user.name"
>
{{ status.user.name }}
</h4>
<router-link
class="account-name"
+ :title="status.user.screen_name"
:to="userProfileLink"
>
{{ status.user.screen_name }}
</router-link>
+ <img
+ v-if="!!(status.user && status.user.favicon)"
+ class="status-favicon"
+ :src="status.user.favicon"
+ >
</div>
<span class="heading-right">
@@ -176,9 +208,10 @@
>
<StatusPopover
v-if="!isPreview"
- :status-id="status.in_reply_to_status_id"
+ :status-id="status.parent_visible && status.in_reply_to_status_id"
class="reply-to-popover"
style="min-width: 0"
+ :class="{ '-strikethrough': !status.parent_visible }"
>
<a
class="reply-to"
@@ -186,17 +219,25 @@
:aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
>
- <i class="button-icon icon-reply" />
- <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
+ <i class="button-icon reply-button icon-reply" />
+ <span
+ class="faint-link reply-to-text"
+ >
+ {{ $t('status.reply_to') }}
+ </span>
</a>
</StatusPopover>
<span
v-else
- class="reply-to"
+ class="reply-to-no-popover"
>
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span>
- <router-link :to="replyProfileLink">
+ <router-link
+ class="reply-to-link"
+ :title="replyToName"
+ :to="replyProfileLink"
+ >
{{ replyToName }}
</router-link>
<span
@@ -239,24 +280,30 @@
class="favs-repeated-users"
>
<div class="stats">
- <div
+ <UserListPopover
v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
- class="stat-count"
+ :users="statusFromGlobalRepository.rebloggedBy"
>
- <a class="stat-title">{{ $t('status.repeats') }}</a>
- <div class="stat-number">
- {{ statusFromGlobalRepository.rebloggedBy.length }}
+ <div class="stat-count">
+ <a class="stat-title">{{ $t('status.repeats') }}</a>
+ <div class="stat-number">
+ {{ statusFromGlobalRepository.rebloggedBy.length }}
+ </div>
</div>
- </div>
- <div
+ </UserListPopover>
+ <UserListPopover
v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
- class="stat-count"
+ :users="statusFromGlobalRepository.favoritedBy"
>
- <a class="stat-title">{{ $t('status.favorites') }}</a>
- <div class="stat-number">
- {{ statusFromGlobalRepository.favoritedBy.length }}
+ <div
+ class="stat-count"
+ >
+ <a class="stat-title">{{ $t('status.favorites') }}</a>
+ <div class="stat-number">
+ {{ statusFromGlobalRepository.favoritedBy.length }}
+ </div>
</div>
- </div>
+ </UserListPopover>
<div class="avatar-row">
<AvatarList :users="combinedFavsAndRepeatsUsers" />
</div>
@@ -271,19 +318,19 @@
<div
v-if="!noHeading && !isPreview"
- class="status-actions media-body"
+ class="status-actions"
>
<div>
<i
v-if="loggedIn"
- class="button-icon icon-reply"
+ class="button-icon button-reply icon-reply"
:title="$t('tool_tip.reply')"
- :class="{'button-icon-active': replying}"
+ :class="{'-active': replying}"
@click.prevent="toggleReplying"
/>
<i
v-else
- class="button-icon button-icon-disabled icon-reply"
+ class="button-icon button-reply -disabled icon-reply"
:title="$t('tool_tip.reply')"
/>
<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
@@ -311,7 +358,7 @@
</div>
<div
v-if="replying"
- class="container"
+ class="status-container reply-form"
>
<PostStatusForm
class="reply-body"
@@ -329,398 +376,4 @@
</template>
<script src="./status.js" ></script>
-<style lang="scss">
-@import '../../_variables.scss';
-
-$status-margin: 0.75em;
-
-.status-body {
- flex: 1;
- min-width: 0;
-}
-
-.status-pin {
- padding: $status-margin $status-margin 0;
- display: flex;
- align-items: center;
- justify-content: flex-end;
-}
-
-.media-left {
- margin-right: $status-margin;
-}
-
-.status-el {
- overflow-wrap: break-word;
- word-wrap: break-word;
- word-break: break-word;
- border-left-width: 0px;
- min-width: 0;
- border-color: $fallback--border;
- border-color: var(--border, $fallback--border);
-
- border-left: 4px $fallback--cRed;
- border-left: 4px var(--cRed, $fallback--cRed);
-
- &_focused {
- background-color: $fallback--lightBg;
- background-color: var(--selectedPost, $fallback--lightBg);
- color: $fallback--text;
- color: var(--selectedPostText, $fallback--text);
- --lightText: var(--selectedPostLightText, $fallback--light);
- --faint: var(--selectedPostFaintText, $fallback--faint);
- --faintLink: var(--selectedPostFaintLink, $fallback--faint);
- --postLink: var(--selectedPostPostLink, $fallback--faint);
- --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
- --icon: var(--selectedPostIcon, $fallback--icon);
- }
-
- .timeline & {
- border-bottom-width: 1px;
- border-bottom-style: solid;
- }
-
- .media-body {
- flex: 1;
- padding: 0;
- }
-
- .status-usercard {
- margin-bottom: $status-margin;
- }
-
- .user-name {
- white-space: nowrap;
- font-size: 14px;
- overflow: hidden;
- flex-shrink: 0;
- max-width: 85%;
- font-weight: bold;
-
- img {
- width: 14px;
- height: 14px;
- vertical-align: middle;
- object-fit: contain
- }
- }
-
- .media-heading {
- padding: 0;
- vertical-align: bottom;
- flex-basis: 100%;
- margin-bottom: 0.5em;
-
- small {
- font-weight: lighter;
- }
-
- .heading-name-row {
- padding: 0;
- display: flex;
- justify-content: space-between;
- line-height: 18px;
-
- a {
- display: inline-block;
- word-break: break-all;
- }
-
- .name-and-account-name {
- display: flex;
- min-width: 0;
- }
-
- .user-name {
- flex-shrink: 1;
- margin-right: 0.4em;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .account-name {
- min-width: 1.6em;
- margin-right: 0.4em;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- flex: 1 1 0;
- }
- }
-
- .heading-right {
- display: flex;
- flex-shrink: 0;
- }
-
- .timeago {
- margin-right: 0.2em;
- }
-
- .heading-reply-row {
- position: relative;
- align-content: baseline;
- font-size: 12px;
- line-height: 18px;
- max-width: 100%;
- display: flex;
- flex-wrap: wrap;
- align-items: stretch;
-
- > .reply-to-and-accountname > a {
- overflow: hidden;
- max-width: 100%;
- text-overflow: ellipsis;
- white-space: nowrap;
- word-break: break-all;
- }
- }
-
- .reply-to-and-accountname {
- display: flex;
- height: 18px;
- margin-right: 0.5em;
- max-width: 100%;
- .icon-reply {
- transform: scaleX(-1);
- }
- }
-
- .reply-info {
- display: flex;
- }
-
- .reply-to-popover {
- min-width: 0;
- }
-
- .reply-to {
- display: flex;
- }
-
- .reply-to-text {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin: 0 0.4em 0 0.2em;
- }
-
- .replies-separator {
- margin-left: 0.4em;
- }
-
- .replies {
- line-height: 18px;
- font-size: 12px;
- display: flex;
- flex-wrap: wrap;
- & > * {
- margin-right: 0.4em;
- }
- }
-
- .reply-link {
- height: 17px;
- }
- }
-
- .retweet-info {
- padding: 0.4em $status-margin;
- margin: 0;
-
- .avatar.still-image {
- border-radius: $fallback--avatarAltRadius;
- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
- margin-left: 28px;
- width: 20px;
- height: 20px;
- }
-
- .media-body {
- font-size: 1em;
- line-height: 22px;
-
- display: flex;
- align-content: center;
- flex-wrap: wrap;
-
- .user-name {
- font-weight: bold;
- overflow: hidden;
- text-overflow: ellipsis;
-
- img {
- width: 14px;
- height: 14px;
- vertical-align: middle;
- object-fit: contain
- }
- }
-
- i {
- padding: 0 0.2em;
- }
-
- a {
- max-width: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
-}
-
-.status-fadein {
- animation-duration: 0.4s;
- animation-name: fadein;
-}
-
-@keyframes fadein {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.status-conversation {
- border-left-style: solid;
-}
-
-.status-actions {
- position: relative;
- width: 100%;
- display: flex;
- margin-top: $status-margin;
-
- > * {
- max-width: 4em;
- flex: 1;
- }
-}
-
-.button-icon.icon-reply {
- &:not(.button-icon-disabled):hover,
- &.button-icon-active {
- color: $fallback--cBlue;
- color: var(--cBlue, $fallback--cBlue);
- }
-}
-
-.button-icon.icon-reply {
- &:not(.button-icon-disabled) {
- cursor: pointer;
- }
-}
-
-.status:hover .animated.avatar {
- canvas {
- display: none;
- }
- img {
- visibility: visible;
- }
-}
-
-.status {
- display: flex;
- padding: $status-margin;
- &.is-retweet {
- padding-top: 0;
- }
-}
-
-.status-conversation:last-child {
- border-bottom: none;
-}
-
-.muted {
- padding: 0.25em 0.5em;
- button {
- margin-left: auto;
- }
-
- .muteWords {
- margin-left: 10px;
- }
-}
-
-a.unmute {
- display: block;
- margin-left: auto;
-}
-
-.reply-body {
- flex: 1;
-}
-
-.favs-repeated-users {
- margin-top: $status-margin;
-
- .stats {
- width: 100%;
- display: flex;
- line-height: 1em;
-
- .stat-count {
- margin-right: $status-margin;
-
- .stat-title {
- color: var(--faint, $fallback--faint);
- font-size: 12px;
- text-transform: uppercase;
- position: relative;
- }
-
- .stat-number {
- font-weight: bolder;
- font-size: 16px;
- line-height: 1em;
- }
- }
-
- .avatar-row {
- flex: 1;
- overflow: hidden;
- position: relative;
- display: flex;
- align-items: center;
-
- &::before {
- content: '';
- position: absolute;
- height: 100%;
- width: 1px;
- left: 0;
- background-color: var(--faint, $fallback--faint);
- }
- }
- }
-}
-
-@media all and (max-width: 800px) {
- .status-el {
- .retweet-info {
- .avatar.still-image {
- margin-left: 20px;
- }
- }
- }
- .status {
- max-width: 100%;
- }
-
- .status .avatar.still-image {
- width: 40px;
- height: 40px;
-
- &.avatar-compact {
- width: 32px;
- height: 32px;
- }
- }
-}
-
-</style>
+<style src="./status.scss" lang="scss"></style>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-13 17:14:45 +0000