yandere_fe/src/components/status/status.vue

989 lines
23 KiB
Vue
Raw Normal View History

2018-04-09 09:43:31 -07:00
<template>
2019-07-06 14:54:17 -07:00
<!-- eslint-disable vue/no-v-html -->
2019-07-05 00:17:44 -07:00
<div
v-if="!hideStatus"
class="status-el"
:class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
>
<div
v-if="error"
class="alert error"
>
{{ error }}
<i
class="button-icon icon-cancel"
@click="clearError"
/>
2019-04-27 06:36:10 -07:00
</div>
<template v-if="muted && !isPreview">
2018-04-09 09:43:31 -07:00
<div class="media status container muted">
<small>
<router-link :to="userProfileLink">
2019-07-05 00:17:44 -07:00
{{ status.user.screen_name }}
</router-link>
</small>
2019-07-05 00:17:44 -07:00
<small class="muteWords">{{ muteWordHits.join(', ') }}</small>
<a
href="#"
class="unmute"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
2018-04-09 09:43:31 -07:00
</div>
</template>
<template v-else>
2019-07-05 00:17:44 -07:00
<div
2019-08-15 10:07:07 -07:00
v-if="showPinned"
2019-07-05 00:17:44 -07:00
class="status-pin"
>
<i class="fa icon-pin faint" />
<span class="faint">{{ $t('status.pinned') }}</span>
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="retweet && !noHeading && !inConversation"
:class="[repeaterClass, { highlighted: repeaterStyle }]"
:style="[repeaterStyle]"
class="media container retweet-info"
>
<UserAvatar
v-if="retweet"
class="media-left"
:better-shadow="betterShadow"
:user="statusoid.user"
/>
<div class="media-body faint">
<span class="user-name">
2019-07-05 00:17:44 -07:00
<router-link
v-if="retweeterHtml"
:to="retweeterProfileLink"
v-html="retweeterHtml"
/>
<router-link
v-else
:to="retweeterProfileLink"
>{{ retweeter }}</router-link>
</span>
2019-07-05 00:17:44 -07:00
<i
class="fa icon-retweet retweeted"
:title="$t('tool_tip.repeat')"
/>
{{ $t('timeline.repeated') }}
2018-04-09 09:43:31 -07:00
</div>
</div>
2019-07-05 00:17:44 -07:00
<div
:class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
:style="[ userStyle ]"
class="media status"
:data-tags="tags"
>
<div
v-if="!noHeading"
class="media-left"
>
<router-link
:to="userProfileLink"
@click.stop.prevent.capture.native="toggleUserExpanded"
>
<UserAvatar
:compact="compact"
:better-shadow="betterShadow"
:user="status.user"
/>
</router-link>
2018-04-09 09:43:31 -07:00
</div>
<div class="status-body">
2019-07-05 00:17:44 -07:00
<UserCard
v-if="userExpanded"
:user="status.user"
:rounded="true"
:bordered="true"
class="status-usercard"
/>
<div
v-if="!noHeading"
class="media-heading"
>
<div class="heading-name-row">
<div class="name-and-account-name">
2019-07-05 00:17:44 -07:00
<h4
v-if="status.user.name_html"
class="user-name"
v-html="status.user.name_html"
/>
<h4
v-else
class="user-name"
>
{{ status.user.name }}
</h4>
<router-link
class="account-name"
:to="userProfileLink"
>
{{ status.user.screen_name }}
</router-link>
</div>
<span class="heading-right">
2019-07-05 00:17:44 -07:00
<router-link
class="timeago faint-link"
:to="{ name: 'conversation', params: { id: status.id } }"
>
<Timeago
:time="status.created_at"
:auto-update="60"
/>
</router-link>
2019-07-05 00:17:44 -07:00
<div
v-if="status.visibility"
class="button-icon visibility-icon"
>
<i
:class="visibilityIcon(status.visibility)"
:title="status.visibility | capitalize"
/>
</div>
2019-07-05 00:17:44 -07:00
<a
v-if="!status.is_local && !isPreview"
:href="status.external_url"
target="_blank"
class="source_url"
title="Source"
>
<i class="button-icon icon-link-ext-alt" />
</a>
2019-04-26 13:22:03 -07:00
<template v-if="expandable && !isPreview">
2019-07-05 00:17:44 -07:00
<a
href="#"
title="Expand"
@click.prevent="toggleExpanded"
>
<i class="button-icon icon-plus-squared" />
2019-04-26 13:22:03 -07:00
</a>
</template>
2019-07-05 00:17:44 -07:00
<a
v-if="unmuted"
href="#"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
</span>
</div>
<div class="heading-reply-row">
2019-07-07 19:42:08 -07:00
<div
v-if="isReply"
class="reply-to-and-accountname"
>
2019-07-17 09:50:49 -07:00
<v-popover
v-if="!isPreview"
2019-07-07 19:42:08 -07:00
ref="statusPreviewPopper"
2019-07-17 09:50:49 -07:00
popoverClass="status-popover"
placement="top-start"
trigger="hover"
:offset="5"
:container="false"
2019-07-17 10:00:44 -07:00
:popperOptions="{
modifiers: {
preventOverflow: { padding: 50, boundariesElement: 'viewport' },
}
}"
2019-07-07 19:42:08 -07:00
@show="replyEnter(status.in_reply_to_status_id)"
>
2019-07-17 09:50:49 -07:00
<div slot="popover">
<status
v-if="preview"
:is-preview="true"
:statusoid="preview"
:compact="true"
/>
2019-07-07 19:42:08 -07:00
<div
2019-07-17 09:50:49 -07:00
v-else
class="status-preview-loading"
2019-07-07 19:42:08 -07:00
>
2019-07-17 09:50:49 -07:00
<i class="icon-spin4 animate-spin" />
2019-07-01 10:46:09 -07:00
</div>
</div>
<a
class="reply-to"
2019-07-07 19:42:08 -07:00
href="#"
2019-07-01 10:46:09 -07:00
:aria-label="$t('tool_tip.reply')"
2019-07-07 19:42:08 -07:00
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
2019-07-01 10:46:09 -07:00
>
2019-07-17 09:50:49 -07:00
<i class="button-icon icon-reply" />
2019-07-07 19:42:08 -07:00
<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
2019-07-01 10:46:09 -07:00
</a>
2019-07-17 09:50:49 -07:00
</v-popover>
<span
v-else
class="reply-to"
>
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
</span>
<router-link :to="replyProfileLink">
2019-07-05 00:17:44 -07:00
{{ replyToName }}
</router-link>
2019-07-05 00:17:44 -07:00
<span
v-if="replies && replies.length"
class="faint replies-separator"
>
-
2018-04-09 09:43:31 -07:00
</span>
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="inConversation && !isPreview"
class="replies"
>
<span
v-if="replies && replies.length"
class="faint"
>{{ $t('status.replies_list') }}</span>
2019-07-06 14:54:17 -07:00
<template v-if="replies">
<span
v-for="reply in replies"
:key="reply.id"
class="reply-link faint"
>
<a
href="#"
@click.prevent="gotoOriginal(reply.id)"
@mouseenter="replyEnter(reply.id, $event)"
@mouseout="replyLeave()"
>{{ reply.name }}</a>
</span>
</template>
</div>
2018-04-09 09:43:31 -07:00
</div>
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="longSubject"
class="status-content-wrapper"
:class="{ 'tall-status': !showingLongSubject }"
>
<a
v-if="!showingLongSubject"
class="tall-status-hider"
:class="{ 'tall-status-hider_focused': isFocused }"
href="#"
@click.prevent="showingLongSubject=true"
>{{ $t("general.show_more") }}</a>
<div
class="status-content media-body"
@click.prevent="linkClicked"
v-html="contentHtml"
/>
<a
v-if="showingLongSubject"
href="#"
class="status-unhider"
@click.prevent="showingLongSubject=false"
>{{ $t("general.show_less") }}</a>
</div>
2019-07-05 00:17:44 -07:00
<div
v-else
:class="{'tall-status': hideTallStatus}"
class="status-content-wrapper"
>
<a
v-if="hideTallStatus"
class="tall-status-hider"
:class="{ 'tall-status-hider_focused': isFocused }"
href="#"
@click.prevent="toggleShowMore"
>{{ $t("general.show_more") }}</a>
<div
v-if="!hideSubjectStatus"
class="status-content media-body"
@click.prevent="linkClicked"
v-html="contentHtml"
/>
<div
v-else
class="status-content media-body"
@click.prevent="linkClicked"
v-html="status.summary_html"
/>
<a
v-if="hideSubjectStatus"
href="#"
class="cw-status-hider"
@click.prevent="toggleShowMore"
>{{ $t("general.show_more") }}</a>
<a
v-if="showingMore"
href="#"
class="status-unhider"
@click.prevent="toggleShowMore"
>{{ $t("general.show_less") }}</a>
2018-04-09 09:43:31 -07:00
</div>
2019-06-18 13:28:31 -07:00
<div v-if="status.poll && status.poll.options">
2019-06-22 07:01:36 -07:00
<poll :base-poll="status.poll" />
2019-06-18 13:28:31 -07:00
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)"
class="attachments media-body"
>
<attachment
2019-01-26 07:45:03 -08:00
v-for="attachment in nonGalleryAttachments"
2019-07-05 00:17:44 -07:00
:key="attachment.id"
class="non-gallery"
:size="attachmentSize"
:nsfw="nsfwClickthrough"
:attachment="attachment"
2019-07-05 00:17:44 -07:00
:allow-play="true"
:set-media="setMedia()"
2019-01-26 07:45:03 -08:00
/>
<gallery
v-if="galleryAttachments.length > 0"
:nsfw="nsfwClickthrough"
:attachments="galleryAttachments"
2019-07-05 00:17:44 -07:00
:set-media="setMedia()"
2019-01-26 07:45:03 -08:00
/>
2018-04-09 09:43:31 -07:00
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="status.card && !hideSubjectStatus && !noHeading"
class="link-preview media-body"
>
<link-preview
:card="status.card"
:size="attachmentSize"
:nsfw="nsfwClickthrough"
/>
2019-01-27 05:47:30 -08:00
</div>
2019-04-06 11:54:23 -07:00
<transition name="fade">
2019-07-05 00:17:44 -07:00
<div
v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
2019-07-05 00:17:44 -07:00
class="favs-repeated-users"
>
<div class="stats">
2019-07-05 00:17:44 -07:00
<div
v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
class="stat-count"
>
2019-04-22 11:37:27 -07:00
<a class="stat-title">{{ $t('status.repeats') }}</a>
2019-07-05 00:17:44 -07:00
<div class="stat-number">
{{ statusFromGlobalRepository.rebloggedBy.length }}
</div>
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
class="stat-count"
>
2019-04-22 11:37:27 -07:00
<a class="stat-title">{{ $t('status.favorites') }}</a>
2019-07-05 00:17:44 -07:00
<div class="stat-number">
{{ statusFromGlobalRepository.favoritedBy.length }}
</div>
</div>
<div class="avatar-row">
2019-07-05 00:17:44 -07:00
<AvatarList :users="combinedFavsAndRepeatsUsers" />
</div>
</div>
2019-04-06 11:54:23 -07:00
</div>
</transition>
2019-07-05 00:17:44 -07:00
<div
v-if="!noHeading && !isPreview"
class="status-actions media-body"
>
<div>
2019-07-05 00:17:44 -07:00
<i
v-if="loggedIn"
class="button-icon icon-reply"
:title="$t('tool_tip.reply')"
:class="{'button-icon-active': replying}"
@click.prevent="toggleReplying"
/>
<i
v-else
class="button-icon button-icon-disabled icon-reply"
:title="$t('tool_tip.reply')"
/>
<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
2018-04-09 09:43:31 -07:00
</div>
2019-07-05 00:17:44 -07:00
<retweet-button
:visibility="status.visibility"
:logged-in="loggedIn"
:status="status"
/>
<favorite-button
:logged-in="loggedIn"
:status="status"
/>
<extra-buttons
:status="status"
@onError="showError"
@onSuccess="clearError"
/>
2018-04-09 09:43:31 -07:00
</div>
</div>
</div>
2019-07-05 00:17:44 -07:00
<div
v-if="replying"
class="container"
>
<PostStatusForm
2019-07-05 00:17:44 -07:00
class="reply-body"
:reply-to="status.id"
:attentions="status.attentions"
:replied-user="status.user"
:copy-message-scope="status.visibility"
:subject="replySubject"
@posted="toggleReplying"
/>
2018-04-09 09:43:31 -07:00
</div>
</template>
</div>
2019-07-06 14:54:17 -07:00
<!-- eslint-enable vue/no-v-html -->
2018-04-09 09:43:31 -07:00
</template>
2016-10-28 06:19:42 -07:00
<script src="./status.js" ></script>
2016-10-28 16:38:41 -07:00
<style lang="scss">
2018-04-09 09:43:31 -07:00
@import '../../_variables.scss';
$status-margin: 0.75em;
2018-04-09 09:43:31 -07:00
.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;
}
2018-04-09 09:43:31 -07:00
.status-el {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
border-left-width: 0px;
min-width: 0;
2018-04-07 09:30:27 -07:00
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-left: 4px $fallback--cRed;
border-left: 4px var(--cRed, $fallback--cRed);
2018-04-07 09:30:27 -07:00
&_focused {
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
}
2018-04-09 09:43:31 -07:00
.timeline & {
border-bottom-width: 1px;
border-bottom-style: solid;
}
2018-04-09 09:43:31 -07:00
.media-body {
flex: 1;
padding: 0;
2018-04-10 12:12:59 -07:00
}
2019-03-05 18:48:07 -08:00
.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 {
2018-04-09 09:43:31 -07:00
padding: 0;
vertical-align: bottom;
flex-basis: 100%;
margin-bottom: 0.5em;
2018-04-09 09:43:31 -07:00
small {
font-weight: lighter;
}
.heading-name-row {
2018-04-09 09:43:31 -07:00
padding: 0;
display: flex;
justify-content: space-between;
line-height: 18px;
2019-07-01 11:00:02 -07:00
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;
}
2018-08-13 05:36:10 -07:00
.account-name {
min-width: 1.6em;
margin-right: 0.4em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 0;
}
2018-04-09 09:43:31 -07:00
}
.heading-right {
display: flex;
flex-shrink: 0;
}
.timeago {
margin-right: 0.2em;
}
.heading-reply-row {
2019-07-01 10:46:09 -07:00
position: relative;
align-content: baseline;
2018-04-09 09:43:31 -07:00
font-size: 12px;
line-height: 18px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
align-items: stretch;
2019-07-01 11:00:02 -07:00
> .reply-to-and-accountname > a {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
2019-07-01 11:00:02 -07:00
display: inline-block;
word-break: break-all;
}
}
.reply-to-and-accountname {
display: flex;
height: 18px;
margin-right: 0.5em;
overflow: hidden;
max-width: 100%;
.icon-reply {
transform: scaleX(-1);
}
2018-04-09 09:43:31 -07:00
}
.reply-info {
display: flex;
}
.reply-to {
display: flex;
2018-04-09 09:43:31 -07:00
}
.reply-to-text {
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0.4em 0 0.2em;
2019-07-17 09:50:49 -07:00
color: $fallback--faint;
color: var(--faint, $fallback--faint);
2018-04-09 09:43:31 -07:00
}
.replies-separator {
margin-left: 0.4em;
}
.replies {
line-height: 18px;
2018-04-09 09:43:31 -07:00
font-size: 12px;
display: flex;
flex-wrap: wrap;
& > * {
margin-right: 0.4em;
}
2018-04-09 09:43:31 -07:00
}
.reply-link {
height: 17px;
}
2018-04-09 09:43:31 -07:00
}
.tall-status {
position: relative;
height: 220px;
overflow-x: hidden;
overflow-y: hidden;
z-index: 1;
.status-content {
height: 100%;
mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
linear-gradient(to top, white, white);
// Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor;
mask-composite: exclude;
}
2018-04-09 09:43:31 -07:00
}
.tall-status-hider {
2019-01-27 12:33:36 -08:00
display: inline-block;
word-break: break-all;
2018-04-09 09:43:31 -07:00
position: absolute;
height: 70px;
margin-top: 150px;
width: 100%;
text-align: center;
line-height: 110px;
z-index: 2;
2018-04-09 09:43:31 -07:00
}
.status-unhider, .cw-status-hider {
2018-04-09 09:43:31 -07:00
width: 100%;
text-align: center;
2019-01-27 12:33:36 -08:00
display: inline-block;
word-break: break-all;
2018-04-09 09:43:31 -07:00
}
.status-content {
2018-11-25 11:06:49 -08:00
font-family: var(--postFont, sans-serif);
line-height: 1.4em;
2019-07-05 18:57:48 -07:00
white-space: pre-wrap;
2018-11-25 11:06:49 -08:00
2018-04-09 09:43:31 -07:00
img, video {
max-width: 100%;
max-height: 400px;
vertical-align: middle;
object-fit: contain;
2019-03-05 10:15:18 -08:00
&.emoji {
width: 32px;
height: 32px;
}
2018-04-09 09:43:31 -07:00
}
blockquote {
margin: 0.2em 0 0.2em 2em;
font-style: italic;
}
pre {
overflow: auto;
}
2018-11-25 13:23:07 -08:00
code, samp, kbd, var, pre {
font-family: var(--postCodeFont, monospace);
}
2018-04-09 09:43:31 -07:00
p {
margin: 0 0 1em 0;
}
p:last-child {
margin: 0 0 0 0;
2018-04-09 09:43:31 -07:00
}
h1 {
font-size: 1.1em;
line-height: 1.2em;
2018-08-31 06:13:43 -07:00
margin: 1.4em 0;
}
h2 {
2018-08-31 06:13:43 -07:00
font-size: 1.1em;
margin: 1.0em 0;
}
h3 {
font-size: 1em;
2018-08-31 06:13:43 -07:00
margin: 1.2em 0;
}
h4 {
2018-08-31 06:13:43 -07:00
margin: 1.1em 0;
}
2018-04-09 09:43:31 -07:00
}
2018-04-09 09:43:31 -07:00
.retweet-info {
padding: 0.4em $status-margin;
2018-06-18 01:36:58 -07:00
margin: 0;
.avatar.still-image {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
2018-04-09 09:43:31 -07:00
margin-left: 28px;
width: 20px;
height: 20px;
}
2018-04-09 09:43:31 -07:00
.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;
2018-08-13 05:36:10 -07:00
img {
width: 14px;
height: 14px;
vertical-align: middle;
2018-08-13 05:36:10 -07:00
object-fit: contain
}
}
i {
padding: 0 0.2em;
}
a {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
2018-04-09 09:43:31 -07:00
}
2019-04-08 11:06:18 -07:00
.status-fadein {
animation-duration: 0.4s;
animation-name: fadein;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
2018-04-09 09:43:31 -07:00
.greentext {
color: green;
}
.status-conversation {
border-left-style: solid;
}
.status-actions {
position: relative;
2018-04-09 09:43:31 -07:00
width: 100%;
display: flex;
margin-top: $status-margin;
2018-04-09 09:43:31 -07:00
2019-07-11 05:31:02 -07:00
> * {
max-width: 4em;
2018-04-09 09:43:31 -07:00
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;
}
2018-04-09 09:43:31 -07:00
}
.status:hover .animated.avatar {
canvas {
display: none;
}
img {
visibility: visible;
}
}
.status {
display: flex;
padding: $status-margin;
2018-06-18 01:36:58 -07:00
&.is-retweet {
padding-top: 0;
2018-06-18 01:36:58 -07:00
}
2018-04-09 09:43:31 -07:00
}
.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;
}
2019-05-13 11:54:25 -07:00
.timeline :not(.panel-disabled) > {
.status-el:last-child {
2019-02-12 08:00:09 -08:00
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
2018-11-25 06:42:41 -08:00
border-bottom: none;
}
}
2019-07-17 09:50:49 -07:00
.tooltip.popover.status-popover {
.popover-inner {
font-size: 1rem;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-style: solid;
border-width: 1px;
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: var(--popupShadow);
min-width: 15em;
max-width: 95%;
margin-left: 0.5em;
2019-07-01 10:46:09 -07:00
}
2019-07-17 09:50:49 -07:00
.popover-arrow::before {
2019-07-01 11:00:19 -07:00
position: absolute;
content: '';
left: -7px;
border: solid 7px transparent;
z-index: -1;
2019-07-01 10:46:09 -07:00
}
2019-07-17 09:50:49 -07:00
&[x-placement^="bottom-start"] .popover-arrow::before {
2019-07-01 11:00:19 -07:00
top: -2px;
border-top-width: 0;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
2019-07-17 09:50:49 -07:00
&[x-placement^="top-start"] .popover-arrow::before {
2019-07-01 11:00:19 -07:00
bottom: -2px;
border-bottom-width: 0;
border-top-color: $fallback--border;
border-top-color: var(--border, $fallback--border);
2019-07-01 10:46:09 -07:00
}
2019-07-17 09:50:49 -07:00
.status-el.status-el {
border: none;
}
.status-preview-loading {
padding: 1em;
text-align: center;
i {
font-size: 2em;
}
}
2019-07-01 10:46:09 -07:00
}
2019-04-05 00:08:40 -07:00
.favs-repeated-users {
margin-top: $status-margin;
2019-04-05 00:08:40 -07:00
2019-04-05 10:35:05 -07:00
.stats {
width: 100%;
display: flex;
2019-04-05 11:20:50 -07:00
line-height: 1em;
2019-04-05 10:35:05 -07:00
.stat-count {
2019-04-22 11:07:29 -07:00
margin-right: $status-margin;
2019-04-05 10:35:05 -07:00
2019-04-05 11:20:50 -07:00
.stat-title {
2019-04-05 11:55:19 -07:00
color: var(--faint, $fallback--faint);
2019-04-05 11:20:50 -07:00
font-size: 12px;
text-transform: uppercase;
position: relative;
}
.stat-number {
font-weight: bolder;
font-size: 16px;
line-height: 1em;
}
2019-04-05 10:35:05 -07:00
}
.avatar-row {
flex: 1;
overflow: hidden;
2019-04-05 11:20:50 -07:00
position: relative;
2019-04-22 11:07:29 -07:00
display: flex;
align-items: center;
2019-04-05 11:20:50 -07:00
&::before {
content: '';
position: absolute;
height: 100%;
width: 1px;
left: 0;
background-color: var(--faint, $fallback--faint);
}
2019-04-05 10:35:05 -07:00
}
2019-04-05 00:08:40 -07:00
}
2019-04-01 19:30:06 -07:00
}
2019-01-26 07:45:03 -08:00
@media all and (max-width: 800px) {
2018-04-09 09:43:31 -07:00
.status-el {
.retweet-info {
.avatar.still-image {
2018-04-09 09:43:31 -07:00
margin-left: 20px;
}
}
}
.status {
max-width: 100%;
}
.status .avatar.still-image {
2018-04-09 09:43:31 -07:00
width: 40px;
height: 40px;
&.avatar-compact {
width: 32px;
height: 32px;
}
}
2018-04-09 09:43:31 -07:00
}
2017-06-01 07:35:00 -07:00
2016-10-28 16:38:41 -07:00
</style>