diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 307d9dbc45ac16b4fb76af8bd0ec2fa09cf72e66..22118f8eaf82da49cbbd7c9d41bab803c7b866de 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -253,7 +253,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
return (
<div style={outerStyle}>
- <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
+ <div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })}>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index b4aec09f023f919204eb52b34b9458dc852eccdb..087e433b206a03ec45fa56a243bce5ed0bec1b25 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1063,6 +1063,29 @@
}
}
}
+
+ &-unlisted time::after,
+ &-private time::after,
+ &-direct time::after {
+ display: inline-block;
+ text-align: center;
+ width: 14px;
+ height: 14px;
+ font: 14px/1 FontAwesome;
+ margin-left: 4px;
+ }
+
+ &-unlisted time::after {
+ content: "\f09C";
+ }
+
+ &-private time::after {
+ content: "\F023";
+ }
+
+ &-direct time::after {
+ content: "\F0E0";
+ }
}
.notification-favourite {
@@ -1196,6 +1219,7 @@
.detailed-status {
background: lighten($ui-base-color, 4%);
padding: 14px 10px;
+ position: relative;
&--flex {
display: flex;
@@ -1209,6 +1233,37 @@
}
}
+ &-unlisted::before,
+ &-private::before,
+ &-direct::before {
+ display: block;
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ right: 10px;
+ top: 20px;
+ font: 14px/1 FontAwesome;
+ color: #606984;
+ }
+
+ &-unlisted .display-name,
+ &-private .display-name,
+ &-direct .display-name {
+ padding-right: 10px;
+ }
+
+ &-unlisted::before {
+ content: "\f09C";
+ }
+
+ &-private::before {
+ content: "\F023";
+ }
+
+ &-direct::before {
+ content: "\F0E0";
+ }
+
.status__content {
font-size: 19px;
line-height: 24px;