mirror of
https://github.com/funamitech/mastodon
synced 2024-12-05 02:09:05 +09:00
Merge branch 'main' of https://github.com/glitch-soc/mastodon
This commit is contained in:
Noa Himesaka
commit
30343e8ada
@ -43,4 +43,5 @@ export interface ApiAccountJSON {
|
||||
suspended?: boolean;
|
||||
limited?: boolean;
|
||||
memorial?: boolean;
|
||||
hide_collections: boolean;
|
||||
}
|
||||
|
||||
@ -0,0 +1,43 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
|
||||
import { showAlert } from 'flavours/glitch/actions/alerts';
|
||||
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
copied: { id: 'copy_icon_button.copied', defaultMessage: 'Copied to clipboard' },
|
||||
});
|
||||
|
||||
export const CopyIconButton = ({ title, value, className }) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
navigator.clipboard.writeText(value);
|
||||
setCopied(true);
|
||||
dispatch(showAlert({ message: messages.copied }));
|
||||
setTimeout(() => setCopied(false), 700);
|
||||
}, [setCopied, value, dispatch]);
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
className={classNames(className, copied ? 'copied' : 'copyable')}
|
||||
title={title}
|
||||
onClick={handleClick}
|
||||
iconComponent={ContentCopyIcon}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
CopyIconButton.propTypes = {
|
||||
title: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
@ -18,26 +18,7 @@ import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
|
||||
import { IconButton } from './icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
hidden: {
|
||||
defaultMessage: 'Media hidden',
|
||||
id: 'status.media_hidden',
|
||||
},
|
||||
sensitive: {
|
||||
defaultMessage: 'Sensitive',
|
||||
id: 'media_gallery.sensitive',
|
||||
},
|
||||
toggle: {
|
||||
defaultMessage: 'Click to view',
|
||||
id: 'status.sensitive_toggle',
|
||||
},
|
||||
toggle_visible: {
|
||||
defaultMessage: '{number, plural, one {Hide image} other {Hide images}}',
|
||||
id: 'media_gallery.toggle_visible',
|
||||
},
|
||||
warning: {
|
||||
defaultMessage: 'Sensitive content',
|
||||
id: 'status.sensitive_warning',
|
||||
},
|
||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
|
||||
});
|
||||
|
||||
class Item extends PureComponent {
|
||||
@ -299,8 +280,8 @@ class MediaGallery extends PureComponent {
|
||||
this.props.onOpenMedia(this.props.media, index, this.props.lang);
|
||||
};
|
||||
|
||||
handleRef = (node) => {
|
||||
this.node = node;
|
||||
handleRef = c => {
|
||||
this.node = c;
|
||||
|
||||
if (this.node) {
|
||||
this._setDimensions();
|
||||
@ -379,11 +360,6 @@ class MediaGallery extends PureComponent {
|
||||
<div className={computedClass} style={style} ref={this.handleRef}>
|
||||
<div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
|
||||
{spoilerButton}
|
||||
{visible && sensitive && (
|
||||
<span className='sensitive-marker'>
|
||||
<FormattedMessage {...messages.sensitive} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{children}
|
||||
|
||||
@ -23,7 +23,7 @@ export default class SettingText extends PureComponent {
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{label}</span>
|
||||
<input
|
||||
className='setting-text'
|
||||
className='glitch-setting-text'
|
||||
value={settings.getIn(settingPath)}
|
||||
onChange={this.handleChange}
|
||||
placeholder={label}
|
||||
|
||||
@ -7,7 +7,6 @@ import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
|
||||
|
||||
export default class FollowRequestNote extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
|
||||
@ -9,15 +9,16 @@ import { withRouter } from 'react-router-dom';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
|
||||
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
||||
import LockIcon from '@/material-icons/400-24px/lock.svg?react';
|
||||
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
|
||||
import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
|
||||
import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
|
||||
import ShareIcon from '@/material-icons/400-24px/share.svg?react';
|
||||
import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { Badge, AutomatedBadge, GroupBadge } from 'flavours/glitch/components/badge';
|
||||
import { Button } from 'flavours/glitch/components/button';
|
||||
import { CopyIconButton } from 'flavours/glitch/components/copy_icon_button';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||||
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
|
||||
@ -45,6 +46,7 @@ const messages = defineMessages({
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
report: { id: 'account.report', defaultMessage: 'Report @{name}' },
|
||||
share: { id: 'account.share', defaultMessage: 'Share @{name}\'s profile' },
|
||||
copy: { id: 'account.copy', defaultMessage: 'Copy link to profile' },
|
||||
media: { id: 'account.media', defaultMessage: 'Media' },
|
||||
blockDomain: { id: 'account.block_domain', defaultMessage: 'Block domain {domain}' },
|
||||
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
|
||||
@ -176,11 +178,10 @@ class Header extends ImmutablePureComponent {
|
||||
const isRemote = account.get('acct') !== account.get('username');
|
||||
const remoteDomain = isRemote ? account.get('acct').split('@')[1] : null;
|
||||
|
||||
let info = [];
|
||||
let actionBtn = '';
|
||||
let bellBtn = '';
|
||||
let lockedIcon = '';
|
||||
let menu = [];
|
||||
let actionBtn, bellBtn, lockedIcon, shareBtn;
|
||||
|
||||
let info = [];
|
||||
let menu = [];
|
||||
|
||||
if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
|
||||
info.push(<span className='relationship-tag'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>);
|
||||
@ -198,6 +199,12 @@ class Header extends ImmutablePureComponent {
|
||||
bellBtn = <IconButton icon={account.getIn(['relationship', 'notifying']) ? 'bell' : 'bell-o'} iconComponent={account.getIn(['relationship', 'notifying']) ? NotificationsActiveIcon : NotificationsIcon} active={account.getIn(['relationship', 'notifying'])} title={intl.formatMessage(account.getIn(['relationship', 'notifying']) ? messages.disableNotifications : messages.enableNotifications, { name: account.get('username') })} onClick={this.props.onNotifyToggle} />;
|
||||
}
|
||||
|
||||
if ('share' in navigator) {
|
||||
shareBtn = <IconButton className='optional' iconComponent={ShareIcon} title={intl.formatMessage(messages.share, { name: account.get('username') })} onClick={this.handleShare} />;
|
||||
} else {
|
||||
shareBtn = <CopyIconButton className='optional' title={intl.formatMessage(messages.copy)} value={account.get('url')} />;
|
||||
}
|
||||
|
||||
if (me !== account.get('id')) {
|
||||
if (signedIn && !account.get('relationship')) { // Wait until the relationship is loaded
|
||||
actionBtn = '';
|
||||
@ -235,11 +242,6 @@ class Header extends ImmutablePureComponent {
|
||||
menu.push(null);
|
||||
}
|
||||
|
||||
if ('share' in navigator && !account.get('suspended')) {
|
||||
menu.push({ text: intl.formatMessage(messages.share, { name: account.get('username') }), action: this.handleShare });
|
||||
menu.push(null);
|
||||
}
|
||||
|
||||
if (account.get('id') === me) {
|
||||
if (profileLink) menu.push({ text: intl.formatMessage(messages.edit_profile), href: profileLink });
|
||||
if (preferencesLink) menu.push({ text: intl.formatMessage(messages.preferences), href: preferencesLink });
|
||||
@ -308,7 +310,7 @@ class Header extends ImmutablePureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
const content = { __html: account.get('note_emojified') };
|
||||
const content = { __html: account.get('note_emojified') };
|
||||
const displayNameHtml = { __html: account.get('display_name_html') };
|
||||
const fields = account.get('fields');
|
||||
const isLocal = account.get('acct').indexOf('@') === -1;
|
||||
@ -350,6 +352,7 @@ class Header extends ImmutablePureComponent {
|
||||
<>
|
||||
{actionBtn}
|
||||
{bellBtn}
|
||||
{shareBtn}
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -372,28 +375,29 @@ class Header extends ImmutablePureComponent {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{signedIn && <AccountNoteContainer account={account} />}
|
||||
|
||||
{!(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')} />
|
||||
|
||||
<dd className={pair.get('verified_at') && 'verified'} 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' icon={CheckIcon} className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} className='translate' />
|
||||
</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} className={classNames({ verified: pair.get('verified_at') })}>
|
||||
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} className='translate' />
|
||||
|
||||
<dd className='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' icon={CheckIcon} className='verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
|
||||
</dd>
|
||||
</dl>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -156,7 +156,11 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
|
||||
if (!contents) {
|
||||
contents = (
|
||||
<>
|
||||
{icon && <Icon className='icon' id={icon} icon={iconComponent} />}
|
||||
{icon && (
|
||||
<div className='privacy-dropdown__option__icon'>
|
||||
<Icon className='icon' id={icon} icon={iconComponent} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='privacy-dropdown__option__content'>
|
||||
<strong>{text}</strong>
|
||||
|
||||
@ -110,7 +110,9 @@ class ToggleOptionImpl extends ImmutablePureComponent {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toggle checked={checked} onChange={this.handleChange} />
|
||||
<div className='privacy-dropdown__option__icon'>
|
||||
<Toggle checked={checked} onChange={this.handleChange} />
|
||||
</div>
|
||||
|
||||
<div className='privacy-dropdown__option__content'>
|
||||
<strong>{text}</strong>
|
||||
|
||||
@ -45,6 +45,7 @@ const mapStateToProps = (state, { params: { acct, id } }) => {
|
||||
hasMore: !!state.getIn(['user_lists', 'followers', accountId, 'next']),
|
||||
isLoading: state.getIn(['user_lists', 'followers', accountId, 'isLoading'], true),
|
||||
suspended: state.getIn(['accounts', accountId, 'suspended'], false),
|
||||
hideCollections: state.getIn(['accounts', accountId, 'hide_collections'], false),
|
||||
hidden: getAccountHidden(state, accountId),
|
||||
};
|
||||
};
|
||||
@ -117,7 +118,7 @@ class Followers extends ImmutablePureComponent {
|
||||
};
|
||||
|
||||
render () {
|
||||
const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl } = this.props;
|
||||
const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl, hideCollections } = this.props;
|
||||
|
||||
if (!isAccount) {
|
||||
return (
|
||||
@ -141,6 +142,8 @@ class Followers extends ImmutablePureComponent {
|
||||
emptyMessage = <FormattedMessage id='empty_column.account_suspended' defaultMessage='Account suspended' />;
|
||||
} else if (hidden) {
|
||||
emptyMessage = <LimitedAccountHint accountId={accountId} />;
|
||||
} else if (hideCollections && accountIds.isEmpty()) {
|
||||
emptyMessage = <FormattedMessage id='empty_column.account_hides_collections' defaultMessage='This user has chosen to not make this information available' />;
|
||||
} else if (remote && accountIds.isEmpty()) {
|
||||
emptyMessage = <RemoteHint url={remoteUrl} />;
|
||||
} else {
|
||||
|
||||
@ -45,6 +45,7 @@ const mapStateToProps = (state, { params: { acct, id } }) => {
|
||||
hasMore: !!state.getIn(['user_lists', 'following', accountId, 'next']),
|
||||
isLoading: state.getIn(['user_lists', 'following', accountId, 'isLoading'], true),
|
||||
suspended: state.getIn(['accounts', accountId, 'suspended'], false),
|
||||
hideCollections: state.getIn(['accounts', accountId, 'hide_collections'], false),
|
||||
hidden: getAccountHidden(state, accountId),
|
||||
};
|
||||
};
|
||||
@ -117,7 +118,7 @@ class Following extends ImmutablePureComponent {
|
||||
};
|
||||
|
||||
render () {
|
||||
const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl } = this.props;
|
||||
const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl, hideCollections } = this.props;
|
||||
|
||||
if (!isAccount) {
|
||||
return (
|
||||
@ -141,6 +142,8 @@ class Following extends ImmutablePureComponent {
|
||||
emptyMessage = <FormattedMessage id='empty_column.account_suspended' defaultMessage='Account suspended' />;
|
||||
} else if (hidden) {
|
||||
emptyMessage = <LimitedAccountHint accountId={accountId} />;
|
||||
} else if (hideCollections && accountIds.isEmpty()) {
|
||||
emptyMessage = <FormattedMessage id='empty_column.account_hides_collections' defaultMessage='This user has chosen to not make this information available' />;
|
||||
} else if (remote && accountIds.isEmpty()) {
|
||||
emptyMessage = <RemoteHint url={remoteUrl} />;
|
||||
} else {
|
||||
|
||||
@ -5,11 +5,6 @@ import classNames from 'classnames';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
|
||||
import StatusContent from 'flavours/glitch/components/status_content';
|
||||
|
||||
import { IconButton } from '../../../components/icon_button';
|
||||
|
||||
export default class ActionsModal extends ImmutablePureComponent {
|
||||
@ -58,33 +53,9 @@ 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' rel='noopener noreferrer'>
|
||||
<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 })}>
|
||||
<ul>
|
||||
{this.props.actions.map(this.renderAction)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
"account.disclaimer_full": "Information below may reflect the user's profile incompletely.",
|
||||
"account.follows": "Follows",
|
||||
"account.follows_you": "Follows you",
|
||||
"account.joined": "Joined {date}",
|
||||
"account.suspended_disclaimer_full": "This user has been suspended by a moderator.",
|
||||
"account.view_full_profile": "View full profile",
|
||||
"advanced_options.icon_title": "Advanced options",
|
||||
@ -53,7 +52,6 @@
|
||||
"keyboard_shortcuts.bookmark": "to bookmark",
|
||||
"keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting",
|
||||
"keyboard_shortcuts.toggle_collapse": "to collapse/uncollapse toots",
|
||||
"media_gallery.sensitive": "Sensitive",
|
||||
"moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.",
|
||||
"navigation_bar.app_settings": "App settings",
|
||||
"navigation_bar.featured_users": "Featured users",
|
||||
@ -158,7 +156,6 @@
|
||||
"status.is_poll": "This toot is a poll",
|
||||
"status.local_only": "Only visible from your instance",
|
||||
"status.react": "React",
|
||||
"status.sensitive_toggle": "Click to view",
|
||||
"status.uncollapse": "Uncollapse",
|
||||
"suggestions.dismiss": "Dismiss suggestion"
|
||||
}
|
||||
|
||||
@ -94,6 +94,7 @@ export const accountDefaultValues: AccountShape = {
|
||||
memorial: false,
|
||||
limited: false,
|
||||
moved: null,
|
||||
hide_collections: false,
|
||||
};
|
||||
|
||||
const AccountFactory = ImmutableRecord<AccountShape>(accountDefaultValues);
|
||||
|
||||
@ -602,7 +602,7 @@ body > [data-popper-placement] {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.autosuggest-account .display-name > span {
|
||||
.autosuggest-account .display-name__account {
|
||||
color: $lighter-text-color;
|
||||
}
|
||||
|
||||
@ -698,6 +698,22 @@ body > [data-popper-placement] {
|
||||
.icon-button {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.compose-form__upload-button-icon {
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.compose-form__sensitive-button {
|
||||
display: none;
|
||||
|
||||
&.compose-form__sensitive-button--visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.compose-form__sensitive-button__icon {
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button,
|
||||
@ -821,11 +837,6 @@ body > [data-popper-placement] {
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
& > .display-name {
|
||||
line-height: unset;
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-indicator__display-avatar {
|
||||
@ -1027,12 +1038,6 @@ body > [data-popper-placement] {
|
||||
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-inline-end: 28px; // 12px + 16px
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -1057,8 +1062,9 @@ body > [data-popper-placement] {
|
||||
}
|
||||
|
||||
&.light {
|
||||
.status__relative-time {
|
||||
color: $lighter-text-color;
|
||||
.status__relative-time,
|
||||
.status__visibility-icon {
|
||||
color: $light-text-color;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
@ -1255,8 +1261,6 @@ body > [data-popper-placement] {
|
||||
.account {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
@ -1330,10 +1334,6 @@ body > [data-popper-placement] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
@include avatar-radius;
|
||||
|
||||
@ -1467,10 +1467,13 @@ a.status__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,
|
||||
@ -1481,16 +1484,10 @@ a.status__display-name,
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__display-avatar {
|
||||
float: left;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
.detailed-status__datetime {
|
||||
&:hover {
|
||||
@ -2170,6 +2167,7 @@ $ui-header-height: 55px;
|
||||
.columns-area--mobile {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
.column,
|
||||
@ -2934,7 +2932,6 @@ $ui-header-height: 55px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
padding-inline-end: 5px;
|
||||
z-index: 3;
|
||||
@ -3202,8 +3199,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
display: block;
|
||||
input.glitch-setting-text {
|
||||
box-sizing: border-box;
|
||||
color: $darker-text-color;
|
||||
background: transparent;
|
||||
@ -3221,15 +3217,57 @@ $ui-header-height: 55px;
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&.light {
|
||||
color: $inverted-text-color;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 27%);
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $inverted-text-color;
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
.setting-text {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
color: $inverted-text-color;
|
||||
background: $white;
|
||||
padding: 7px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $white;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: lighten($ui-highlight-color, 12%);
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
background: $white;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
.setting-text {
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__modifiers {
|
||||
color: $inverted-text-color;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@ -4102,19 +4140,18 @@ a.status-card.compact:hover {
|
||||
background: $base-overlay-background;
|
||||
color: $darker-text-color;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
appearance: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
padding: 0;
|
||||
color: lighten($darker-text-color, 8%);
|
||||
}
|
||||
|
||||
.status__content > & {
|
||||
margin-top: 15px; // Add margin when used bare for NSFW video player
|
||||
}
|
||||
@include fullwidth-gallery;
|
||||
}
|
||||
|
||||
.media-spoiler__warning {
|
||||
@ -4125,7 +4162,7 @@ a.status-card.compact:hover {
|
||||
.media-spoiler__trigger {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.spoiler-button {
|
||||
@ -4789,10 +4826,6 @@ a.status-card.compact:hover {
|
||||
flex: 1 1 auto;
|
||||
color: $lighter-text-color;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
@ -4824,11 +4857,6 @@ a.status-card.compact:hover {
|
||||
min-width: 75%;
|
||||
}
|
||||
|
||||
.account__header__wrapper {
|
||||
flex: 0 0 auto;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.account__disclaimer {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
@ -5317,7 +5345,7 @@ a.status-card.compact:hover {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.language-dropdown {
|
||||
@ -5629,20 +5657,6 @@ a.status-card.compact:hover {
|
||||
& > div:last-child .status {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
& > .hashtag {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: $secondary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($secondary-text-color, 4%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results__hashtag {
|
||||
@ -5703,9 +5717,9 @@ a.status-card.compact:hover {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.video-modal__container {
|
||||
.video-modal .video-player {
|
||||
max-height: 80vh;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.audio-modal__container {
|
||||
@ -6101,8 +6115,7 @@ a.status-card.compact:hover {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: $ui-secondary-color;
|
||||
padding: 10px;
|
||||
line-height: 36px;
|
||||
padding: 10px; // purposefully reduce padding in glitch-soc
|
||||
|
||||
& > div {
|
||||
flex: 1 1 auto;
|
||||
@ -6437,56 +6450,11 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $inverted-text-color;
|
||||
background: $white;
|
||||
padding: 10px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
resize: none;
|
||||
outline: 0;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
min-height: 100px;
|
||||
max-height: 50vh;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid darken($ui-secondary-color, 8%);
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
background: $white;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
|
||||
.setting-text {
|
||||
border: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__modifiers {
|
||||
color: $inverted-text-color;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
@ -6991,6 +6959,8 @@ img.modal-warning {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* End Media Gallery */
|
||||
|
||||
.detailed,
|
||||
.fullscreen {
|
||||
.video-player__volume__current,
|
||||
@ -7464,8 +7434,11 @@ img.modal-warning {
|
||||
|
||||
.notification__filter-bar,
|
||||
.account__section-headline {
|
||||
// deliberate glitch-soc choice for now
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: darken(
|
||||
$ui-base-color,
|
||||
4%
|
||||
); // deliberate glitch-soc choice for now
|
||||
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
@ -7604,24 +7577,6 @@ noscript {
|
||||
}
|
||||
}
|
||||
|
||||
// glitch-specific “sensitive” label on displayed images; TODO: remove it?
|
||||
.sensitive-marker {
|
||||
margin: 0 3px;
|
||||
border-radius: 2px;
|
||||
padding: 2px 6px;
|
||||
color: rgba($primary-text-color, 0.8);
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.1s ease;
|
||||
|
||||
.media-gallery:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-modal {
|
||||
width: auto;
|
||||
max-width: 80vw;
|
||||
@ -7727,10 +7682,10 @@ noscript {
|
||||
}
|
||||
|
||||
.column-inline-form {
|
||||
padding: 7px 15px;
|
||||
padding-inline-end: 5px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
@ -7739,18 +7694,8 @@ noscript {
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__backdrop {
|
||||
@ -7965,6 +7910,7 @@ noscript {
|
||||
|
||||
.account__header {
|
||||
overflow: hidden;
|
||||
container: account-header / inline-size;
|
||||
|
||||
&.inactive {
|
||||
opacity: 0.5;
|
||||
@ -7986,6 +7932,7 @@ noscript {
|
||||
height: 145px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
@ -7998,9 +7945,9 @@ noscript {
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
padding: 0 20px;
|
||||
padding-bottom: 16px; // glitch-soc addition for the different tabs design
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
@ -8009,7 +7956,7 @@ noscript {
|
||||
|
||||
.account__avatar {
|
||||
background: darken($ui-base-color, 8%);
|
||||
border: 2px solid lighten($ui-base-color, 4%);
|
||||
border: 2px solid $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8028,8 +7975,8 @@ noscript {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 7px 10px;
|
||||
margin-top: -55px;
|
||||
padding-top: 10px;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
margin-inline-start: -2px; // aligns the pfp with content below
|
||||
@ -8060,11 +8007,22 @@ noscript {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&.copied {
|
||||
border-color: $valid-value-color;
|
||||
}
|
||||
}
|
||||
|
||||
@container account-header (max-width: 372px) {
|
||||
.optional {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
padding: 5px 10px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.emojione {
|
||||
width: 22px;
|
||||
@ -8072,17 +8030,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;
|
||||
@ -8108,63 +8066,97 @@ noscript {
|
||||
}
|
||||
|
||||
&__bio {
|
||||
overflow: hidden;
|
||||
margin: 0 -5px;
|
||||
|
||||
.account__header__content {
|
||||
padding: 20px 15px;
|
||||
padding-bottom: 5px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.account__header__joined {
|
||||
font-size: 14px;
|
||||
padding: 5px 15px;
|
||||
color: $darker-text-color;
|
||||
|
||||
.columns-area--mobile & {
|
||||
padding-inline-start: 20px;
|
||||
padding-inline-end: 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: 8px 16px; // glitch-soc: padding purposefuly reduced
|
||||
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%);
|
||||
}
|
||||
|
||||
dl:first-child .verified {
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
dd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.verified {
|
||||
border: 1px solid rgba($valid-value-color, 0.5);
|
||||
margin-top: -1px;
|
||||
|
||||
.verified a {
|
||||
color: $valid-value-color;
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $valid-value-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $valid-value-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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;
|
||||
@ -8182,14 +8174,10 @@ noscript {
|
||||
}
|
||||
|
||||
&__account-note {
|
||||
margin: 0 -5px;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
margin-bottom: 10px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
@ -8200,23 +8188,12 @@ noscript {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
white-space: pre-wrap;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% + 20px);
|
||||
color: $secondary-text-color;
|
||||
background: $ui-base-color;
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
margin: 0 -10px;
|
||||
font-family: inherit;
|
||||
@ -8230,6 +8207,10 @@ noscript {
|
||||
color: $dark-text-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8387,7 +8368,6 @@ noscript {
|
||||
|
||||
&--compact &__item {
|
||||
padding: 10px;
|
||||
padding-inline-end: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8452,11 +8432,6 @@ noscript {
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@ -9895,11 +9870,6 @@ noscript {
|
||||
&:active {
|
||||
background: rgba($ui-base-color, 0.85);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.hashtag-header {
|
||||
|
||||
@ -80,6 +80,10 @@ html {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.column-header__button.active {
|
||||
color: $ui-highlight-color;
|
||||
|
||||
@ -422,7 +426,7 @@ html {
|
||||
.column-header__collapsible-inner {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.column-settings__hashtags .column-select__option {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user