No OneTemporary
Actions

Authored By

Unknown

Size

27 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index a7b565237f..63815bf9bd 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,367 +1,367 @@
	@import './_variables.scss';

	#app {
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 0 50px;
	min-height: 100vh;
	}

	i {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	background-color: rgba(0,0,0,0.15);
	align-content: flex-start;
	}

	.text-center {
	text-align: center;
	}

	body {
	font-family: sans-serif;
	font-size: 14px;
	margin: 0;
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	button{
	user-select: none;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px black;
	font-size: 14px;
	font-family: sans-serif;

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	}

	&:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&.pressed {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg)
	}
	}


	input, textarea, select {
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px black inset;
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	color: $fallback--lightFg;
	color: var(--lightFg, $fallback--lightFg);
	font-family: sans-serif;
	font-size: 14px;
	padding: 8px 7px 4px;
	box-sizing: border-box;

	// TODO: Restyle <select> in a decent way. Needs different markup
	// -webkit-appearance:none;
	// -moz-appearance:none;
	// appearance:none;

	&[type=radio],
	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--fg;
	color: var(--fg, $fallback--fg);
	}
	+ label::before {
	display: inline-block;
	content: '✔';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkBoxRadius;
	border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 2px black inset;
	margin-right: .5em;
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

	-i[class^=icon-] {
	+i[class*=icon-] {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon)
	}


	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.gaps {
	margin: -1em 0 0 -1em;
	}

	.item {
	flex: 1;
	line-height: 25px;
	height: 25px;
	overflow: hidden;

	.nav-icon {
	font-size: 1.1em;
	margin-left: 0.4em;
	}
	}

	.gaps > .item {
	padding: 1em 0 0 1em;
	}

	.auto-size {
	flex: 1
	}

	nav {
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;

	.inner-nav {
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	margin: auto;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	a i {
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}
	}
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	overflow: hidden;
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: 0.6em 1.0em;
	text-align: left;
	font-size: 1.3em;
	line-height: 24px;
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	background-color: $fallback--btn;
	background-color: var(--btn, $fallback--btn);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 60%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	.panel-switcher {
	display: none;
	width: 100%;
	height: 46px;
	button {
	display: block;
	flex: 1;
	max-height: 32px;
	margin: 0.5em;
	padding: 0.5em;
	}
	}

	@media all and (min-width: 960px) {
	body {
	overflow-y: scroll;
	}
	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}

	@media all and (max-width: 959px) {
	.mobile-hidden {
	display: none;
	}

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0 0 0 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}
	}

	.item.right {
	text-align: right;
	padding-right: 20px;
	}
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index abf3b5b7df..bce361dbb9 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,215 +1,215 @@
	<template>
	<div class="post-status-form">
	<form @submit.prevent="postStatus(newStatus)">
	<div class="form-group" >
	<textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @keydown.down="cycleForward" @keydown.up="cycleBackward" @keydown.shift.tab="cycleBackward" @keydown.tab="cycleForward" @keydown.enter="replaceCandidate" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize" @paste="paste"></textarea>
	</div>
	<div style="position:relative;" v-if="candidates">
	<div class="autocomplete-panel">
	<div v-for="candidate in candidates" @click="replace(candidate.utf \|\| (candidate.screen_name + ' '))">
	<div v-if="candidate.highlighted" class="autocomplete">
	<span v-if="candidate.img"><img :src="candidate.img"></span>
	<span v-else>{{candidate.utf}}</span>
	<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
	</div>
	<div v-else class="autocomplete">
	<span v-if="candidate.img"><img :src="candidate.img"></img></span>
	<span v-else>{{candidate.utf}}</span>
	<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
	</div>
	</div>
	</div>
	</div>
	<div class='form-bottom'>
	<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>

	<p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
	<p v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>

	<button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
	<button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
	<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
	</div>
	<div class='error' v-if="error">
	Error: {{ error }}
	<i class="icon-cancel" @click="clearError"></i>
	</div>
	<div class="attachments">
	<div class="media-upload-container attachment" v-for="file in newStatus.files">
	<i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
	<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
	<video v-if="type(file) === 'video'" :src="file.image" controls></video>
	<audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
	<a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
	</div>
	</div>
	</form>
	</div>
	</template>

	<script src="./post_status_form.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.tribute-container {
	ul {
	padding: 0px;
	li {
	display: flex;
	align-items: center;
	}
	}
	img {
	padding: 3px;
	width: 16px;
	height: 16px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}

	.post-status-form, .login {
	.form-bottom {
	display: flex;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.error {
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	text-align: center;
	background-color: rgba(255, 48, 16, 0.65);
	background-color: $fallback--cRed;
	background-color: var(--cRed, $fallback--cRed);
	padding: 0.25em;
	margin: 0.35em;
	display: flex;
	}

	.attachments {
	padding: 0 0.5em;

	.attachment {
	position: relative;
	border: $fallback--border;
	border: var(--border, $fallback--border);
	margin: 0.5em 0.8em 0.2em 0;
	}

	i {
	position: absolute;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	font-weight: bold;
	}
	}


	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	.icon-cancel {
	cursor: pointer;
	}

	form {
	display: flex;
	flex-direction: column;
	padding: 0.6em;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.3em 0.5em 0.6em;
	line-height:24px;
	}

	form textarea {
	line-height:16px;
	resize: none;
	overflow: hidden;
	- transition: min-height 200ms;
	+ transition: min-height 200ms 100ms;
	min-height: 1px;
	box-sizing: content-box;
	}

	form textarea:focus {
	min-height: 48px;
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	.icon-cancel {
	cursor: pointer;
	z-index: 4;
	}

	.autocomplete-panel {
	margin: 0 0.5em 0 0.5em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	position: absolute;
	z-index: 1;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	min-width: 75%;
	background: $fallback--btn;
	background: var(--btn, $fallback--btn);
	color: $fallback--lightFg;
	color: var(--lightFg, $fallback--lightFg);
	}

	.autocomplete {
	cursor: pointer;
	padding: 0.2em 0.4em 0.2em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	display: flex;

	img {
	width: 24px;
	height: 24px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	object-fit: contain;
	}

	span {
	line-height: 24px;
	margin: 0 0.1em 0 0.2em;
	}

	small {
	margin-left: .5em;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}
	}
	}

	</style>
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 14ffd92287..152b06086c 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,475 +1,481 @@
	<template>
	<div class="status-el" v-if="compact">
	<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
	<div v-if="loggedIn">
	<div class='status-actions'>
	<div>
	<a href="#" v-on:click.prevent="toggleReplying">
	<i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
	</a>
	</div>
	<retweet-button :loggedIn="loggedIn" :status=status></retweet-button>
	<favorite-button :loggedIn="loggedIn" :status=status></favorite-button>
	</div>
	</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 status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'status-el_focused': 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>
	<small class="muteWords">{{muteWordHits.join(', ')}}</small>
	<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
	</div>
	</template>
	<template v-if="!muted">
	<div v-if="retweet" class="media container retweet-info">
	<div class="media-left">
	<i class='fa icon-retweet retweeted'></i>
	</div>
	<div class="media-body">
	Repeated by <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
	</div>
	</div>
	<div class="media status container">
	<div class="media-left">
	<a :href="status.user.statusnet_profile_url">
	<StillImage @click.native.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original"/>
	<StillImage v-if="retweet" class='avatar avatar-retweeter' :src="statusoid.user.profile_image_url_original"/>
	</a>
	</div>
	<div class="media-body">
	<div class="usercard" v-if="userExpanded">
	<user-card-content :user="status.user" :switcher="false"></user-card-content>
	</div>
	<div class="user-content">
	<div class="media-heading">
	<div class="name-and-links">
	<h4 class="user-name">{{status.user.name}}</h4>
	<div class="links">
	<h4>
	<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
	<small v-if="status.in_reply_to_screen_name"> >
	<router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
	{{status.in_reply_to_screen_name}}
	</router-link>
	</small>
	<template v-if="isReply">
	<small>
	<a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"><i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i></a>
	</small>
	</template>
	-
	<small>
	<router-link :to="{ name: 'conversation', params: { id: status.id } }">
	<timeago :since="status.created_at" :auto-update="60"></timeago>
	</router-link>
	</small>
	</h4>
	</div>
	<h4 class="replies" v-if="inConversation">
	<small v-if="replies.length">Replies:</small>
	<small v-for="reply in replies">
	<a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}} </a>
	</small>
	</h4>
	</div>
	<div class="heading-icons">
	<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
	<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-binoculars"></i></a>
	<template v-if="expandable">
	<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="icon-plus-squared"></i></a>
	</template>
	</div>
	</div>

	<div class="status-preview" v-if="showPreview && preview">
	<StillImage class="avatar" :src="preview.user.profile_image_url_original"/>
	<div class="text">
	<h4>
	{{ preview.user.name }}
	<small><a>{{ preview.user.screen_name}}</a></small>
	</h4>
	<div @click.prevent="linkClicked" class="status-content" v-html="preview.statusnet_html"></div>
	</div>
	</div>
	<div class="status-preview status-preview-loading" v-else-if="showPreview">
	<i class="icon-spin4 animate-spin"></i>
	</div>

	<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>

	<div v-if='status.attachments' class='attachments'>
	<attachment v-if="!hideAttachments" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
	</attachment>
	</div>
	</div>

	<div class='status-actions'>
	<div v-if="loggedIn">
	<a href="#" v-on:click.prevent="toggleReplying">
	<i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
	</a>
	</div>
	<retweet-button :loggedIn="loggedIn" :status=status></retweet-button>
	<favorite-button :loggedIn="loggedIn" :status=status></favorite-button>
	<delete-button :status=status></delete-button>
	</div>
	</div>
	</div>
	<div class="status container" v-if="replying">
	<div class="reply-left"/>
	<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"/>
	</div>
	</template>
	</div>
	</template>

	<script src="./status.js" ></script>

	<style lang="scss">
	@import '../../_variables.scss';

	status-text-container {
	display: block;
	}

	.status-preview {
	position: absolute;
	max-width: 34em;
	padding: 0.5em;
	display: flex;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	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);
	margin-top: 0.5em;
	margin-left: 1em;
	z-index: 50;

	.avatar {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

	.text {
	h4 {
	margin-bottom: 0.4em;
	small {
	font-weight: lighter;
	}
	}
	padding: 0 0.5em 0.5em 0.5em;
	}
	}

	.status-preview-loading {
	display: block;
	font-size: 2em;
	min-width: 8em;
	text-align: center;
	}

	.status-el {
	hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	line-height: 18px;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	}

	.usercard {
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.notify {
	.avatar {
	border-width: 3px;
	border-style: solid;
	}
	}

	.media-body {
	flex: 1;
	padding-left: 0.5em;
	}


	.user-content {
	min-height: 52px;
	padding-top: 1px;
	}

	.media-heading {
	display: flex;
	min-height: 1.4em;
	margin-bottom: 0.3em;

	+ .links a i {
	+ color: $fallback--link;
	+ color: var(--link, $fallback--link);
	+ }
	+
	+
	small {
	font-weight: lighter;
	}

	h4 {
	margin-right: 0.4em;
	}

	.name-and-links {
	flex: 1 0;
	display: flex;
	flex-wrap: wrap;
	}

	.replies {
	flex-basis: 100%;
	}
	}

	.source_url {

	}

	.expand {
	margin-right: -0.3em;
	}

	a {
	display: inline-block;
	word-break: break-all;
	}

	.status-content {
	margin: 3px 15px 4px 0;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;

	img, video {
	max-width: 100%;
	max-height: 400px;
	vertical-align: middle;
	object-fit: contain;
	}

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}
	}

	p {
	margin: 0;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	}

	.media-left {
	margin: 0.2em 0.3em 0 0;
	.avatar {
	float: right;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}
	}

	.retweet-info {
	padding: 0.7em 0 0 0.6em;

	.media-left {
	display: flex;

	i {
	align-self: center;
	text-align: right;
	flex: 1;
	padding-right: 0.3em;
	}
	}
	}


	}

	.status-fadein {
	animation-duration: 0.5s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.greentext {
	color: green;
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	padding-top: 0.15em;
	width: 100%;
	display: flex;

	div, favorite-button {
	max-width: 6em;
	flex: 1;
	}
	}

	.icon-reply:hover {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.icon-reply-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.status .avatar {
	width: 48px;
	height: 48px;
	border-radius: 5px;
	overflow: hidden;

	img {
	width: 100%;
	height: 100%;
	}

	&.animated::before {
	display: none;
	}

	&.retweeted {
	width: 40px;
	height: 40px;
	margin-right: 8px;
	margin-bottom: 8px;
	}
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status img.avatar-retweeter {
	width: 24px;
	height: 24px;
	position: absolute;
	margin-left: 24px;
	margin-top: 24px;
	}

	.status.compact .avatar {
	width: 32px;
	}

	.status {
	padding: 0.4em 0.7em 0.45em 0.7em;
	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);
	border-left-style: inherit;
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.timeline .panel.timeline {
	overflow: hidden;
	}

	.muted {
	padding: 0.1em 0.4em 0.1em 0.8em;
	button {
	margin-left: auto;
	}

	.muteWords {
	margin-left: 10px;
	}
	}

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-left {
	flex: 0;
	min-width: 48px;
	}

	.reply-body {
	flex: 1;
	}

	@media all and (max-width: 960px) {
	.status-el {
	.name-and-links {
	margin-left: -0.25em;
	}
	}

	.status {
	max-width: 100%;
	}

	.status .avatar {
	width: 40px;
	height: 40px;

	&.retweeted {
	width: 34px;
	height: 34px;
	margin-right: 8px;
	margin-bottom: 8px;
	}
	}

	.status .avatar-retweeter {
	width: 22px;
	height: 22px;
	position: absolute;
	margin-left: 18px;
	margin-top: 18px;
	}
	}

	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sun, Nov 1, 2:47 AM (14 h, 15 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1802274
Default Alt Text: (27 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions