diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 33 |
1 files changed, 30 insertions, 3 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index cc315a90..84397bfa 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -14,7 +14,7 @@ </div> <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/> </div> - <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > + <div class="status-el base00-background base03-border status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > <template v-if="muted"> <div class="media status container muted"> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> @@ -130,6 +130,11 @@ border-left-width: 0px; line-height: 18px; + .timeline & { + border-bottom-width: 1px; + border-bottom-style: solid; + } + .notify { .avatar { border-width: 3px; @@ -188,6 +193,7 @@ img, video { max-width: 100%; max-height: 400px; + object-fit: contain; } blockquote { @@ -226,6 +232,20 @@ } } + .status-fadein { + animation-duration: 0.5s; + animation-name: fadein; + } + + @keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + .greentext { color: green; } @@ -279,12 +299,19 @@ .status { padding: 0.4em 0.7em 0.45em 0.7em; - border-bottom: 1px solid; - border-bottom-color: inherit; border-left: 4px rgba(255, 48, 16, 0.65); border-left-style: inherit; } + .status-conversation:last-child { + border-bottom: none; + } + + .timeline .panel.timeline { + border-radius: 10px; + overflow: hidden; + } + .muted { padding: 0.1em 0.4em 0.1em 0.8em; button { |