tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change layout of posts in web UI (#19423)

Browse Source
This commit is contained in:
Eugen Rochko
2022-10-25 19:02:21 +02:00
committed by GitHub
parent fcca781aae
commit 0ca29eaa3f
13 changed files with 195 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/mastodon/components/account.js
View File

@@ -136,7 +136,7 @@ class Account extends ImmutablePureComponent {
<div className='account'>
<div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<div className='account__avatar-wrapper'><Avatar account={account} size={46} /></div>
{mute_expires_at}
<DisplayName account={account} />
</Permalink>

14
app/javascript/mastodon/components/status.js
View File

@@ -386,6 +386,15 @@ class Status extends ImmutablePureComponent {
account = status.get('account');
status = status.get('reblog');
} else if (showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
prepend = (
<div className='status__prepend'>
<div className='status__prepend-icon-wrapper'><Icon id='reply' className='status__prepend-icon' fixedWidth /></div>
<FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
</div>
);
}
if (pictureInPicture.get('inUse')) {
@@ -481,7 +490,7 @@ class Status extends ImmutablePureComponent {
}
if (account === undefined || account === null) {
statusAvatar = <Avatar account={status.get('account')} size={48} />;
statusAvatar = <Avatar account={status.get('account')} size={46} />;
} else {
statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
}
@@ -501,8 +510,6 @@ class Status extends ImmutablePureComponent {
{prepend}
<div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
<div className='status__expand' onClick={this.handleClick} role='presentation' />
<div className='status__info'>
<a onClick={this.handleClick} href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
@@ -522,7 +529,6 @@ class Status extends ImmutablePureComponent {
status={status}
onClick={this.handleClick}
expanded={!status.get('hidden')}
showThread={showThread}
onExpandedToggle={this.handleExpandedToggle}
onTranslate={this.handleTranslate}
collapsable

16
app/javascript/mastodon/components/status_action_bar.js
View File

@@ -246,8 +246,9 @@ class StatusActionBar extends ImmutablePureComponent {
render () {
const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
const { signedIn } = this.context.identity;
const anonymousAccess = !me;
const anonymousAccess = !signedIn;
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
const mutingConversation = status.get('muted');
@@ -350,24 +351,25 @@ class StatusActionBar extends ImmutablePureComponent {
}
const shareButton = ('share' in navigator) && publicStatus && (
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
);
const filterButton = this.props.onFilter && (
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
);
return (
<div className='status__action-bar'>
<IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
<IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
<IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
<IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
<IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
{shareButton}
{filterButton}
<div className='status__action-bar-dropdown'>
<div className='status__action-bar__dropdown'>
<DropdownMenuContainer
scrollKey={scrollKey}
disabled={anonymousAccess}

11
app/javascript/mastodon/components/status_content.js
View File

@@ -58,7 +58,6 @@ class StatusContent extends React.PureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
expanded: PropTypes.bool,
showThread: PropTypes.bool,
onExpandedToggle: PropTypes.func,
onTranslate: PropTypes.func,
onClick: PropTypes.func,
@@ -214,7 +213,6 @@ class StatusContent extends React.PureComponent {
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
const renderReadMore = this.props.onClick && status.get('collapsed');
const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language');
const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
@@ -226,12 +224,6 @@ class StatusContent extends React.PureComponent {
'status__content--collapsed': renderReadMore,
});
const showThreadButton = renderViewThread && (
<button className='status__content__read-more-button' onClick={this.props.onClick}>
<FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
</button>
);
const readMoreButton = renderReadMore && (
<button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
<FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
@@ -275,7 +267,6 @@ class StatusContent extends React.PureComponent {
{!hidden && poll}
{!hidden && translateButton}
{showThreadButton}
</div>
);
} else if (this.props.onClick) {
@@ -286,7 +277,6 @@ class StatusContent extends React.PureComponent {
{poll}
{translateButton}
{showThreadButton}
</div>
{readMoreButton}
@@ -299,7 +289,6 @@ class StatusContent extends React.PureComponent {
{poll}
{translateButton}
{showThreadButton}
</div>
);
}

2
app/javascript/mastodon/features/account/components/featured_tags.js
View File

@@ -41,7 +41,7 @@ class FeaturedTags extends ImmutablePureComponent {
name={featuredTag.get('name')}
href={featuredTag.get('url')}
to={`/@${account.get('acct')}/tagged/${featuredTag.get('name')}`}
uses={featuredTag.get('statuses_count')}
uses={featuredTag.get('statuses_count') * 1}
withGraph={false}
description={((featuredTag.get('statuses_count') * 1) > 0) ? intl.formatMessage(messages.lastStatusAt, { date: intl.formatDate(featuredTag.get('last_status_at'), { month: 'short', day: '2-digit' }) }) : intl.formatMessage(messages.empty)}
/>

31
app/javascript/mastodon/features/account/components/header.js
View File

@@ -326,25 +326,26 @@ class Header extends ImmutablePureComponent {
{!(suspended || hidden) && (
<div className='account__header__extra'>
<div className='account__header__bio'>
{fields.size > 0 && (
<div className='account__header__fields'>
{fields.map((pair, i) => (
<dl key={i}>
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
<dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd>
</dl>
))}
</div>
)}
{(account.get('id') !== me && signedIn) && <AccountNoteContainer account={account} />}
{account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content translate' dangerouslySetInnerHTML={content} />}
<div className='account__header__joined'><FormattedMessage id='account.joined' defaultMessage='Joined {date}' values={{ date: intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' }) }} /></div>
<div className='account__header__fields'>
<dl>
<dt><FormattedMessage id='account.joined_short' defaultMessage='Joined' /></dt>
<dd>{intl.formatDate(account.get('created_at'), { year: 'numeric', month: 'short', day: '2-digit' })}</dd>
</dl>
{fields.map((pair, i) => (
<dl key={i}>
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
<dd className={`${pair.get('verified_at') ? 'verified' : ''} translate`} title={pair.get('value_plain')}>
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><Icon id='check' className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd>
</dl>
))}
</div>
</div>
<div className='account__header__extra__links'>

2
app/javascript/mastodon/features/compose/components/action_bar.js
View File

@@ -56,7 +56,7 @@ class ActionBar extends React.PureComponent {
return (
<div className='compose__action-bar'>
<div className='compose__action-bar-dropdown'>
<DropdownMenuContainer items={menu} icon='chevron-down' size={16} direction='right' />
<DropdownMenuContainer items={menu} icon='ellipsis-v' size={18} direction='right' />
</div>
</div>
);

2
app/javascript/mastodon/features/compose/components/navigation_bar.js
View File

@@ -21,7 +21,7 @@ export default class NavigationBar extends ImmutablePureComponent {
<div className='navigation-bar'>
<Permalink href={this.props.account.get('url')} to={`/@${this.props.account.get('acct')}`}>
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
<Avatar account={this.props.account} size={48} />
<Avatar account={this.props.account} size={46} />
</Permalink>
<div className='navigation-bar__profile'>

3
app/javascript/mastodon/features/status/components/action_bar.js
View File

@@ -287,9 +287,10 @@ class ActionBar extends React.PureComponent {
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
<div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
{shareButton}
<div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
{shareButton}
<div className='detailed-status__action-bar-dropdown'>
<DropdownMenuContainer size={18} icon='ellipsis-h' disabled={!signedIn} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
</div>

2
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@@ -262,7 +262,7 @@ class DetailedStatus extends ImmutablePureComponent {
<div style={outerStyle}>
<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>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
</a>

28
app/javascript/mastodon/features/ui/components/actions_modal.js
View File

@@ -2,10 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import StatusContent from '../../../components/status_content';
import Avatar from '../../../components/avatar';
import RelativeTimestamp from '../../../components/relative_timestamp';
import DisplayName from '../../../components/display_name';
import IconButton from '../../../components/icon_button';
import classNames from 'classnames';
@@ -38,32 +34,8 @@ export default class ActionsModal extends ImmutablePureComponent {
}
render () {
const status = this.props.status && (
<div className='status light'>
<div className='boost-modal__status-header'>
<div className='boost-modal__status-time'>
<a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<RelativeTimestamp timestamp={this.props.status.get('created_at')} />
</a>
</div>
<a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
<Avatar account={this.props.status.get('account')} size={48} />
</div>
<DisplayName account={this.props.status.get('account')} />
</a>
</div>
<StatusContent status={this.props.status} />
</div>
);
return (
<div className='modal-root__modal actions-modal'>
{status}
<ul className={classNames({ 'with-status': !!status })}>
{this.props.actions.map(this.renderAction)}
</ul>

11
app/javascript/mastodon/features/ui/components/boost_modal.js
View File

@@ -97,12 +97,11 @@ class BoostModal extends ImmutablePureComponent {
<div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'>
<div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
<div className='boost-modal__status-header'>
<div className='boost-modal__status-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
<RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div>
<div className='status__info'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<span className='status__visibility-icon'><Icon id={visibilityIcon.icon} title={visibilityIcon.text} /></span>
<RelativeTimestamp timestamp={status.get('created_at')} />
</a>
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>

428
app/javascript/styles/mastodon/components.scss
View File

@@ -367,7 +367,7 @@
}
.compose-form {
padding: 10px;
padding: 15px;
&__sensitive-button {
padding: 10px;
@@ -714,7 +714,7 @@
.compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 10px;
padding-top: 15px;
}
}
}
@@ -808,7 +808,7 @@
.reply-indicator__content {
position: relative;
font-size: 15px;
line-height: 20px;
line-height: 22px;
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
@@ -955,12 +955,12 @@
.status__content__read-more-button {
display: block;
font-size: 15px;
line-height: 20px;
line-height: 22px;
color: $highlight-text-color;
border: 0;
background: transparent;
padding: 0;
padding-top: 8px;
padding-top: 16px;
text-decoration: none;
&:hover,
@@ -972,7 +972,7 @@
.translate-button {
margin-top: 16px;
font-size: 15px;
line-height: 20px;
line-height: 22px;
display: flex;
justify-content: space-between;
color: $dark-text-color;
@@ -1022,11 +1022,6 @@
}
}
.status__prepend-icon-wrapper {
left: -26px;
position: absolute;
}
.focusable {
&:focus {
outline: 0;
@@ -1040,19 +1035,11 @@
}
.status {
padding: 8px 10px;
padding-left: 68px;
position: relative;
padding: 16px;
min-height: 54px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: auto;
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
padding-right: 26px; // 10px + 16px
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
@@ -1061,9 +1048,11 @@
opacity: 1;
animation: fade 150ms linear;
.media-gallery,
.video-player,
.audio-player {
margin-top: 8px;
.audio-player,
.attachment-list {
margin-top: 16px;
}
&.light {
@@ -1091,7 +1080,7 @@
color: $highlight-text-color;
}
a.status__content__spoiler-link {
&__spoiler-link {
color: $primary-text-color;
background: $ui-primary-color;
@@ -1104,7 +1093,16 @@
}
}
.status__relative-time,
.status__relative-time {
display: block;
font-size: 15px;
line-height: 22px;
height: 40px;
order: 2;
flex: 0 0 auto;
color: $dark-text-color;
}
.notification__relative_time {
color: $dark-text-color;
float: right;
@@ -1121,13 +1119,36 @@
}
.status__info .status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
display: flex;
font-size: 15px;
line-height: 22px;
align-items: center;
gap: 10px;
overflow: hidden;
.display-name {
bdi {
overflow: hidden;
text-overflow: ellipsis;
}
&__account {
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.status__info {
font-size: 15px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.status-check-box__status {
@@ -1166,12 +1187,14 @@
}
.status__prepend {
margin-left: 68px;
padding: 16px;
padding-bottom: 0;
display: flex;
gap: 10px;
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: $dark-text-color;
padding: 8px 0;
padding-bottom: 2px;
font-size: 14px;
position: relative;
.status__display-name strong {
color: $dark-text-color;
@@ -1185,22 +1208,11 @@
}
.status__action-bar {
align-items: center;
display: flex;
margin-top: 8px;
}
.status__action-bar-button {
margin-right: 18px;
&.icon-button--with-counter {
margin-right: 14px;
}
}
.status__action-bar-dropdown {
height: 23.15px;
width: 23.15px;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-top: 16px;
}
.detailed-status__action-bar-dropdown {
@@ -1213,7 +1225,7 @@
.detailed-status {
background: lighten($ui-base-color, 4%);
padding: 14px 10px;
padding: 16px;
&--flex {
display: flex;
@@ -1243,14 +1255,15 @@
}
}
.media-gallery,
.video-player,
.audio-player {
margin-top: 8px;
margin-top: 16px;
}
}
.detailed-status__meta {
margin-top: 15px;
margin-top: 16px;
color: $dark-text-color;
font-size: 14px;
line-height: 18px;
@@ -1312,7 +1325,7 @@
}
.account {
padding: 10px;
padding: 16px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
&.compact {
@@ -1326,7 +1339,9 @@
.account__display-name {
flex: 1 1 auto;
display: block;
display: flex;
align-items: center;
gap: 10px;
color: $darker-text-color;
overflow: hidden;
text-decoration: none;
@@ -1359,12 +1374,7 @@
.account__wrapper {
display: flex;
}
.account__avatar-wrapper {
float: left;
margin-left: 12px;
margin-right: 12px;
gap: 10px;
}
.account__avatar {
@@ -1372,9 +1382,6 @@
display: block;
position: relative;
width: 36px;
height: 36px;
background-size: 36px 36px;
&-inline {
display: inline-block;
@@ -1414,7 +1421,7 @@ a .account__avatar {
}
.account__avatar-overlay {
@include avatar-size(48px);
@include avatar-size(46px);
position: relative;
@@ -1615,10 +1622,13 @@ a.account__display-name {
}
.detailed-status__display-name {
color: $secondary-text-color;
display: block;
line-height: 24px;
margin-bottom: 15px;
color: $darker-text-color;
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
line-height: 22px;
margin-bottom: 16px;
overflow: hidden;
strong,
@@ -1629,31 +1639,13 @@ a.account__display-name {
}
strong {
font-size: 16px;
color: $primary-text-color;
}
}
.detailed-status__display-avatar {
float: left;
margin-right: 10px;
}
.status__avatar {
height: 48px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.status__expand {
width: 68px;
position: absolute;
left: 0;
top: 0;
height: 100%;
cursor: pointer;
width: 46px;
height: 46px;
}
.muted {
@@ -1684,40 +1676,52 @@ a.account__display-name {
}
.notification__report {
padding: 8px 10px;
padding-left: 68px;
position: relative;
padding: 16px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
min-height: 54px;
display: flex;
gap: 10px;
&__avatar {
flex: 0 0 auto;
}
&__details {
flex: 1 1 auto;
display: flex;
justify-content: space-between;
align-items: center;
color: $darker-text-color;
gap: 10px;
font-size: 15px;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
& > div {
overflow: hidden;
text-overflow: ellipsis;
}
strong {
font-weight: 500;
}
}
&__avatar {
position: absolute;
left: 10px;
top: 10px;
&__actions {
flex: 0 0 auto;
}
}
.notification__message {
margin: 0 10px 0 68px;
padding: 8px 0 0;
padding: 16px;
padding-bottom: 0;
cursor: default;
color: $darker-text-color;
font-size: 15px;
line-height: 22px;
position: relative;
font-weight: 500;
display: flex;
gap: 10px;
.fa {
color: $highlight-text-color;
@@ -1731,9 +1735,6 @@ a.account__display-name {
}
.notification__favourite-icon-wrapper {
left: -26px;
position: absolute;
.star-icon {
color: $gold-star;
}
@@ -1767,15 +1768,10 @@ a.account__display-name {
text-decoration: none;
&:hover {
color: $primary-text-color;
text-decoration: underline;
}
}
.notification__relative_time {
float: right;
}
.display-name {
display: block;
max-width: 100%;
@@ -1788,10 +1784,6 @@ a.account__display-name {
font-weight: 500;
}
.display-name__account {
font-size: 14px;
}
.status__relative-time,
.detailed-status__datetime {
&:hover {
@@ -1860,11 +1852,12 @@ a.account__display-name {
}
.navigation-bar {
padding: 10px;
padding: 15px;
display: flex;
align-items: center;
flex-shrink: 0;
cursor: default;
gap: 10px;
color: $darker-text-color;
strong {
@@ -1899,9 +1892,7 @@ a.account__display-name {
.navigation-bar__profile {
flex: 1 1 auto;
margin-left: 8px;
line-height: 20px;
margin-top: -1px;
overflow: hidden;
}
@@ -2466,101 +2457,6 @@ $ui-header-height: 55px;
padding: 10px 0;
padding-top: 0;
}
.detailed-status {
padding: 15px;
.media-gallery,
.video-player,
.audio-player {
margin-top: 15px;
}
}
.account__header__bar {
padding: 5px 10px;
}
.navigation-bar,
.compose-form {
padding: 15px;
}
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
padding-top: 15px;
}
.notification__report {
padding: 15px 15px 15px (48px + 15px * 2);
min-height: 48px + 2px;
&__avatar {
left: 15px;
top: 17px;
}
}
.status {
padding: 15px 15px 15px (48px + 15px * 2);
min-height: 48px + 2px;
&__avatar {
left: 15px;
top: 17px;
}
&__content {
padding-top: 5px;
}
&__prepend {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__prepend-icon-wrapper {
left: -32px;
}
.media-gallery,
&__action-bar,
.video-player,
.audio-player {
margin-top: 10px;
}
}
.account {
padding: 15px 10px;
&__header__bio {
margin: 0 -10px;
}
}
.notification {
&__message {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__favourite-icon-wrapper {
left: -32px;
}
.status {
padding-top: 8px;
}
.account {
padding-top: 8px;
}
.account__avatar-wrapper {
margin-left: 17px;
margin-right: 15px;
}
}
}
@media screen and (min-width: $no-gap-breakpoint) {
@@ -2805,10 +2701,7 @@ $ui-header-height: 55px;
}
.navigation-bar {
padding-top: 20px;
padding-bottom: 20px;
flex: 0 1 48px;
min-height: 20px;
}
.compose-form {
@@ -5303,24 +5196,6 @@ a.status-card.compact:hover {
width: 480px;
position: relative;
flex-direction: column;
.status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.status__avatar {
height: 28px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.status__content__spoiler-link {
color: lighten($secondary-text-color, 8%);
}
}
.actions-modal {
@@ -5352,9 +5227,9 @@ a.status-card.compact:hover {
.block-modal__action-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: $ui-secondary-color;
padding: 10px;
line-height: 36px;
padding: 15px;
& > div {
flex: 1 1 auto;
@@ -5368,15 +5243,6 @@ a.status-card.compact:hover {
}
}
.boost-modal__status-header {
font-size: 15px;
}
.boost-modal__status-time {
float: right;
font-size: 14px;
}
.mute-modal,
.block-modal {
line-height: 24px;
@@ -5988,7 +5854,7 @@ a.status-card.compact:hover {
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
margin-top: 14px;
margin-top: 16px;
overflow: hidden;
&__icon {
@@ -6034,7 +5900,6 @@ a.status-card.compact:hover {
&.compact {
border: 0;
margin-top: 4px;
.attachment-list__list {
padding: 0;
@@ -7177,6 +7042,7 @@ noscript {
.account__header {
overflow: hidden;
background: lighten($ui-base-color, 4%);
&.inactive {
opacity: 0.5;
@@ -7210,8 +7076,7 @@ noscript {
&__bar {
position: relative;
background: lighten($ui-base-color, 4%);
padding: 5px;
padding: 0 20px;
border-bottom: 1px solid lighten($ui-base-color, 12%);
.avatar {
@@ -7230,8 +7095,8 @@ noscript {
&__tabs {
display: flex;
align-items: flex-start;
padding: 7px 10px;
margin-top: -55px;
padding-top: 10px;
&__buttons {
display: flex;
@@ -7249,7 +7114,8 @@ noscript {
}
&__name {
padding: 5px 10px;
margin-top: 16px;
margin-bottom: 16px;
.account-role {
vertical-align: top;
@@ -7261,17 +7127,17 @@ noscript {
}
h1 {
font-size: 16px;
line-height: 24px;
font-size: 17px;
line-height: 22px;
color: $primary-text-color;
font-weight: 500;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
small {
display: block;
font-size: 14px;
font-size: 15px;
color: $darker-text-color;
font-weight: 400;
overflow: hidden;
@@ -7286,34 +7152,41 @@ noscript {
}
&__bio {
overflow: hidden;
margin: 0 -5px;
.account__header__content {
padding: 20px 15px;
padding-bottom: 5px;
color: $primary-text-color;
.columns-area--mobile & {
padding-left: 20px;
padding-right: 20px;
}
}
.account__header__joined {
font-size: 14px;
padding: 5px 15px;
color: $darker-text-color;
.columns-area--mobile & {
padding-left: 20px;
padding-right: 20px;
}
}
.account__header__fields {
margin: 0;
border-top: 1px solid lighten($ui-base-color, 12%);
margin-top: 16px;
border-radius: 4px;
background: darken($ui-base-color, 4%);
border: 0;
dl {
display: block;
padding: 11px 16px;
border-bottom-color: lighten($ui-base-color, 4%);
}
dd,
dt {
font-size: 13px;
line-height: 18px;
padding: 0;
text-align: initial;
}
dt {
width: auto;
background: transparent;
text-transform: uppercase;
color: $dark-text-color;
}
dd {
color: $darker-text-color;
}
a {
color: lighten($ui-highlight-color, 8%);
@@ -7330,12 +7203,14 @@ noscript {
}
&__extra {
margin-top: 4px;
margin-top: 16px;
&__links {
font-size: 14px;
color: $darker-text-color;
padding: 10px 0;
margin: 0 -10px;
padding-top: 16px;
padding-bottom: 10px;
a {
display: inline-block;
@@ -7353,17 +7228,10 @@ noscript {
}
&__account-note {
padding: 15px;
padding-bottom: 10px;
color: $primary-text-color;
font-size: 14px;
font-weight: 400;
border-bottom: 1px solid lighten($ui-base-color, 12%);
.columns-area--mobile & {
padding-left: 20px;
padding-right: 20px;
}
margin-bottom: 10px;
label {
display: block;