unmute: { id: 'account.unmute', defaultMessage: 'Unmute' }
});
-const buttonsStyle = {
- padding: '10px',
- height: '18px'
-};
-
class Account extends React.PureComponent {
constructor (props, context) {
return (
<div className='account'>
- <div style={{ display: 'flex' }}>
+ <div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
- <div
style={{ float: 'left', marginLeft: '12px', marginRight: '10px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div>
+ <div
className='account__avatar-wrapper'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div>
<DisplayName account={account} />
</Permalink>
- <div style={buttonsStyle}>
+ <div className='account__relationship'>
{buttons}
</div>
</div>
render () {
const { value, suggestions, disabled, placeholder, onKeyUp } = this.props;
const { suggestionsHidden, selectedSuggestion } = this.state;
- const className = 'autosuggest-textarea__textarea';
- const style = { direction: 'ltr' };
+ const style = { direction: 'ltr' };
if (isRtl(value)) {
style.direction = 'rtl';
<div className='autosuggest-textarea'>
<textarea
ref={this.setTextarea}
- className={className}
+ className='autosuggest-textarea__textarea'
disabled={disabled}
placeholder={placeholder}
autoFocus={true}
return (
<div
- className='avatar'
+ className='account__avatar'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
style={style}
render () {
const style = {
- fontFamily: 'inherit',
display: this.props.block ? 'block' : 'inline-block',
width: this.props.block ? '100%' : 'auto',
- position: 'relative',
- boxSizing: 'border-box',
- textAlign: 'center',
- border: '10px none',
- fontSize: '14px',
- fontWeight: '500',
- letterSpacing: '0',
padding: `0 ${this.props.size / 2.25}px`,
height: `${this.props.size}px`,
- cursor: 'pointer',
- lineHeight: `${this.props.size}px`,
- borderRadius: '4px',
- textDecoration: 'none',
- whiteSpace: 'nowrap',
- textOverflow: 'ellipsis',
- overflow: 'hidden'
+ lineHeight: `${this.props.size}px`
};
return (
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
-const iconStyle = {
- display: 'inline-block',
- marginRight: '5px'
-};
-
class ColumnBackButton extends React.PureComponent {
constructor (props, context) {
render () {
return (
<div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
- <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
+ <i className='fa fa-fw fa-chevron-left column-back-button__icon'/>
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div>
);
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
-const outerStyle = {
- position: 'absolute',
- right: '0',
- top: '-48px',
- padding: '15px',
- fontSize: '16px',
- flex: '0 0 auto',
- cursor: 'pointer'
-};
-
-const iconStyle = {
- display: 'inline-block',
- marginRight: '5px'
-};
-
class ColumnBackButtonSlim extends React.PureComponent {
constructor (props, context) {
render () {
return (
- <div style={{ position: 'relative' }}>
- <div role='button' tabIndex='0' style={outerStyle} onClick={this.handleClick} className='column-back-button'>
- <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
+ <div className='column-back-button--slim'>
+ <div className='column-back-button--slim-button' role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button'>
+ <i className='fa fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div>
</div>
);
}
-
}
ColumnBackButtonSlim.contextTypes = {
import { Motion, spring } from 'react-motion';
import PropTypes from 'prop-types';
-const iconStyle = {
- fontSize: '16px',
- padding: '15px',
- position: 'absolute',
- right: '0',
- top: '-48px',
- cursor: 'pointer',
- zIndex: '3'
-};
-
class ColumnCollapsable extends React.PureComponent {
constructor (props, context) {
const collapsedClassName = collapsed ? 'collapsable-collapsed' : 'collapsable';
return (
- <div style={{ position: 'relative' }}>
- <div role='button' tabIndex='0' title={`${title}`} style={{...iconStyle }} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}>
+ <div className='column-collapsable'>
+ <div role='button' tabIndex='0' title={`${title}`} className={`column-icon ${collapsedClassName}`} onClick={this.handleToggleCollapsed}>
<i className={`fa fa-${icon}`} />
</div>
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
return (
- <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} className='display-name'>
- <strong style={{ fontWeight: '500' }} dangerouslySetInnerHTML={displayNameHTML} /> <span style={{ fontSize: '14px' }}>@{this.props.account.get('acct')}</span>
+ <span className='display-name'>
+ <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHTML} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
</span>
);
}
renderItem (item, i) {
if (item === null) {
- return <li key={i} className='dropdown__sep' />;
+ return <li key={ 'sep' + i } className='dropdown__sep' />;
}
const { text, action, href = '#' } = item;
return (
- <li key={i}>
- <a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)}>
+ <li className='dropdown__content-list-item' key={ text + i }>
+ <a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)} className='dropdown__content-list-link'>
{text}
</a>
</li>
return (
<Dropdown ref={this.setRef}>
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }}>
- <i className={`fa fa-fw fa-${icon}`} style={{ verticalAlign: 'middle' }} />
+ <i className={ `fa fa-fw fa-${icon} dropdown__icon` } />
</DropdownTrigger>
- <DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
- <ul>
+ <DropdownContent className={directionClass}>
+ <ul className='dropdown__content-list'>
{items.map(this.renderItem)}
</ul>
</DropdownContent>
classes.push('overlayed');
}
+ if (this.props.className) {
+ classes.push(this.props.className)
+ }
+
return (
<Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
{({ rotate }) =>
}
IconButton.propTypes = {
+ className: PropTypes.string,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
import { FormattedMessage } from 'react-intl';
-const style = {
- textAlign: 'center',
- fontSize: '16px',
- fontWeight: '500',
- paddingTop: '120px'
-};
-
const LoadingIndicator = () => (
- <div className='loading-indicator' style={style}>
+ <div className='loading-indicator'>
<FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
</div>
);
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }
});
-const outerStyle = {
- marginTop: '8px',
- overflow: 'hidden',
- width: '100%',
- boxSizing: 'border-box',
- position: 'relative'
-};
-
-const spoilerStyle = {
- textAlign: 'center',
- height: '100%',
- cursor: 'pointer',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'column'
-};
-
-const spoilerSpanStyle = {
- display: 'block',
- fontSize: '14px',
-};
-
-const spoilerSubSpanStyle = {
- display: 'block',
- fontSize: '11px',
- fontWeight: '500'
-};
-
-const spoilerButtonStyle = {
- position: 'absolute',
- top: '4px',
- left: '4px',
- zIndex: '100'
-};
-
-const itemStyle = {
- boxSizing: 'border-box',
- position: 'relative',
- float: 'left',
- border: 'none',
- display: 'block'
-};
-
-const thumbStyle = {
- display: 'block',
- width: '100%',
- height: '100%',
- textDecoration: 'none',
- backgroundSize: 'cover',
- cursor: 'zoom-in'
-};
-
-const gifvThumbStyle = {
- position: 'relative',
- zIndex: '1',
- width: '100%',
- height: '100%',
- objectFit: 'cover',
- top: '50%',
- transform: 'translateY(-50%)',
- cursor: 'zoom-in'
-};
-
class Item extends React.PureComponent {
-
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this);
if (attachment.get('type') === 'image') {
thumbnail = (
<a
- href={attachment.get('remote_url') ? attachment.get('remote_url') : attachment.get('url')}
+ className='media-gallery__item-thumbnail'
+ href={attachment.get('remote_url') || attachment.get('url')}
onClick={this.handleClick}
target='_blank'
- style={{ background: `url(${attachment.get('preview_url')}) no-repeat center`, ...thumbStyle }}
+ style={{ background: `url(${attachment.get('preview_url')}) no-repeat center`}}
/>
);
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && this.props.autoPlayGif;
thumbnail = (
- <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }} className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
+ <div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
<video
+ className='media-gallery__item-gifv-thumbnail'
+ role='application'
src={attachment.get('url')}
onClick={this.handleClick}
autoPlay={autoPlay}
loop={true}
muted={true}
- style={gifvThumbStyle}
/>
<span className='media-gallery__gifv__label'>GIF</span>
}
return (
- <div key={attachment.get('id')} style={{ ...itemStyle, left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
+ <div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
{thumbnail}
</div>
);
}
children = (
- <div role='button' tabIndex='0' style={spoilerStyle} className='media-spoiler' onClick={this.handleOpen}>
- <span style={spoilerSpanStyle}>{warning}</span>
- <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+ <div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
+ <span className='media-spoiler__warning'>{warning}</span>
+ <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
} else {
}
return (
- <div style={{ ...outerStyle, height: `${this.props.height}px` }}>
- <div style={{ ...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block' }}>
+ <div className='media-gallery' style={{ height: `${this.props.height}px` }}>
+ <div className='spoiler-button' style={{ display: !this.state.visible ? 'none' : 'block' }}>
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
</div>
}
render () {
- const { href, children, ...other } = this.props;
+ const { href, children, className, ...other } = this.props;
- return <a href={href} onClick={this.handleClick} {...other}>{children}</a>;
+ return <a href={href} onClick={this.handleClick} {...other} className={'permalink ' + className}>{children}</a>;
}
}
};
Permalink.propTypes = {
+ className: PropTypes.string,
href: PropTypes.string.isRequired,
to: PropTypes.string.isRequired,
children: PropTypes.node
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
return (
- <div style={{ cursor: 'default' }}>
+ <div className='status__wrapper'>
<div className='status__prepend'>
- <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet' /></div>
+ <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} reblogged' values={{ name: <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={displayNameHTML} /></a> }} />
</div>
return (
<div className={this.props.muted ? 'status muted' : 'status'}>
- <div style={{ fontSize: '15px' }}>
- <div style={{ float: 'right', fontSize: '14px' }}>
+ <div className='status__info'>
+ <div className='status__info-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div>
- <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
- <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+ <a onClick={this.handleAccountClick.bind(this, status.getIn(['account', 'id']))} href={status.getIn(['account', 'url'])} className='status__display-name'>
+ <div className='status__avatar'>
<Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />
</div>
}
return (
- <div style={{ marginTop: '10px', overflow: 'hidden' }}>
- <div style={{ float: 'left', marginRight: '18px'}}><IconButton title={reply_title} icon={reply_icon} onClick={this.handleReplyClick} /></div>
- <div style={{ float: 'left', marginRight: '18px'}}><IconButton disabled={status.get('visibility') === 'private' || status.get('visibility') === 'direct'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
- <div style={{ float: 'left', marginRight: '18px'}}><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
+ <div className='status__action-bar'>
+ <div className='status__action-bar-button-wrapper'><IconButton title={reply_title} icon={reply_icon} onClick={this.handleReplyClick} /></div>
+ <div className='status__action-bar-button-wrapper'><IconButton disabled={status.get('visibility') === 'private' || status.get('visibility') === 'direct'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
+ <div className='status__action-bar-button-wrapper'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} className='star-icon' /></div>
- <div style={{ width: '18px', height: '18px', float: 'left' }}>
+ <div className='status__action-bar-dropdown'>
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction="right" />
</div>
</div>
}
return (
- <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
+ <div className='status__content' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p style={{ marginBottom: hidden && status.get('mentions').size === 0 ? '0px' : '' }} >
<span dangerouslySetInnerHTML={spoilerContent} /> <a tabIndex='0' className='status__content__spoiler-link' role='button' onClick={this.handleSpoilerClick}>{toggleText}</a>
</p>
return (
<div
className='status__content'
- style={{ cursor: 'pointer', ...directionStyle }}
+ style={{ ...directionStyle }}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content}
} else {
return (
<div
- className='status__content'
+ className='status__content status__content--no-action'
style={{ ...directionStyle }}
dangerouslySetInnerHTML={content}
/>
<div className='scrollable' ref={this.setRef}>
{unread}
- <div>
+ <div className='status-list'>
{prepend}
{statusIds.map((statusId) => {
expand_video: { id: 'video_player.video_error', defaultMessage: 'Video could not be played' }
});
-const videoStyle = {
- position: 'relative',
- zIndex: '1',
- width: '100%',
- height: '100%',
- objectFit: 'cover',
- top: '50%',
- transform: 'translateY(-50%)'
-};
-
-const muteStyle = {
- position: 'absolute',
- top: '4px',
- right: '4px',
- color: 'white',
- textShadow: "0px 1px 1px black, 1px 0px 1px black",
- opacity: '0.8',
- zIndex: '5'
-};
-
-const coverStyle = {
- marginTop: '8px',
- textAlign: 'center',
- height: '100%',
- cursor: 'pointer',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'column',
- position: 'relative'
-};
-
-const spoilerSpanStyle = {
- display: 'block',
- fontSize: '14px'
-};
-
-const spoilerSubSpanStyle = {
- display: 'block',
- fontSize: '11px',
- fontWeight: '500'
-};
-
-const spoilerButtonStyle = {
- position: 'absolute',
- top: '4px',
- left: '4px',
- color: 'white',
- textShadow: "0px 1px 1px black, 1px 0px 1px black",
- zIndex: '100'
-};
-
-const expandButtonStyle = {
- position: 'absolute',
- bottom: '4px',
- right: '4px',
- color: 'white',
- textShadow: "0px 1px 1px black, 1px 0px 1px black",
- zIndex: '100'
-};
-
class VideoPlayer extends React.PureComponent {
constructor (props, context) {
hasAudio: true,
videoError: false
};
+
this.handleClick = this.handleClick.bind(this);
this.handleVideoClick = this.handleVideoClick.bind(this);
this.handleOpen = this.handleOpen.bind(this);
const { media, intl, width, height, sensitive, autoplay } = this.props;
let spoilerButton = (
- <div style={{...spoilerButtonStyle, display: !this.state.visible ? 'none' : 'block'}} >
+ <div className='status__video-player-spoiler' style={{ display: !this.state.visible ? 'none' : 'block' }} >
<IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
</div>
);
let expandButton = (
- <div style={expandButtonStyle} >
+ <div className='status__video-player-expand'>
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
</div>
);
if (this.state.hasAudio) {
muteButton = (
- <div style={muteStyle}>
+ <div className='status__video-player-mute'>
<IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
</div>
);
if (!this.state.visible) {
if (sensitive) {
return (
- <div role='button' tabIndex='0' style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
+ <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
- <span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
- <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+ <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+ <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
} else {
return (
- <div role='button' tabIndex='0' style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
+ <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
- <span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
- <span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
+ <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
+ <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
}
if (this.state.preview && !autoplay) {
return (
- <div role='button' tabIndex='0' style={{ cursor: 'pointer', position: 'relative', marginTop: '8px', width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }} onClick={this.handleOpen}>
+ <div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center` }} onClick={this.handleOpen}>
{spoilerButton}
- <div style={{ position: 'absolute', top: '50%', left: '50%', fontSize: '36px', transform: 'translate(-50%, -50%)', padding: '5px', borderRadius: '100px', color: 'rgba(255, 255, 255, 0.8)' }}><i className='fa fa-play' /></div>
+ <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
</div>
);
}
if (this.state.videoError) {
return (
- <div style={{...coverStyle, width: `${width}px`, height: `${height}px` }} className='video-error-cover' >
- <span style={spoilerSpanStyle}><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
+ <div style={{ width: `${width}px`, height: `${height}px` }} className='video-error-cover' >
+ <span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
</div>
);
}
return (
- <div style={{ cursor: 'default', marginTop: '8px', overflow: 'hidden', width: `${width}px`, height: `${height}px`, boxSizing: 'border-box', background: '#000', position: 'relative' }}>
+ <div className='status__video-player' style={{ width: `${width}px`, height: `${height}px` }}>
{spoilerButton}
{muteButton}
{expandButton}
- <video role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
+ <video className='status__video-player-video' role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} onClick={this.handleVideoClick} />
</div>
);
}
disclaimer: { id: 'account.disclaimer', defaultMessage: 'This user is from another instance. This number may be larger.' }
});
-const outerDropdownStyle = {
- padding: '10px',
- flex: '1 1 auto'
-};
-
-const outerLinksStyle = {
- flex: '1 1 auto',
- display: 'flex',
- lineHeight: '18px'
-};
-
class ActionBar extends React.PureComponent {
render () {
return (
<div className='account__action-bar'>
- <div style={outerDropdownStyle}>
+ <div className='account__action-bar-dropdown'>
<DropdownMenu items={menu} icon='bars' size={24} direction="right" />
</div>
- <div style={outerLinksStyle}>
+ <div className='account__action-bar-links'>
<Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
<span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
<strong><FormattedNumber value={account.get('statuses_count')} /> {extraInfo}</strong>
constructor (props, context) {
super(props, context);
-
+
this.state = {
isHovered: false
};
-
+
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
}
className='account__header__avatar'
target='_blank'
rel='noopener'
- style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden', backgroundSize: '90px 90px', backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
+ style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
}
return (
- <div>
+ <div className='account-timeline__header'>
<InnerHeader
account={account}
me={me}
import ImmutablePropTypes from 'react-immutable-proptypes';
const AutosuggestAccount = ({ account }) => (
- <div style={{ overflow: 'hidden' }} className='autosuggest-account'>
- <div
style={{ float: 'left', marginRight: '5px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div>
+ <div className='autosuggest-account'>
+ <div
className='autosuggest-account-icon'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div>
<DisplayName account={account} />
</div>
);
import ImmutablePropTypes from 'react-immutable-proptypes';
const AutosuggestStatus = ({ status }) => (
- <div style={{ overflow: 'hidden' }} className='autosuggest-status'>
+ <div className='autosuggest-status'>
<FormattedMessage id='search.status_by' defaultMessage='Status by {name}' values={{ name: <strong>@{status.getIn(['account', 'acct'])}</strong> }} />
</div>
);
checkRemainingText (diff) {
if (diff <= 0) {
- return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>;
+ return <span className='character-counter character-counter--over'>{diff}</span>;
}
- return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>;
+ return <span className='character-counter'>{diff}</span>;
}
render () {
}
if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
- publishText = <span><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
+ publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
} else {
publishText = intl.formatMessage(messages.publish) + (this.props.privacy !== 'unlisted' ? '!' : '');
}
return (
- <div style={{ padding: '10px' }}>
+ <div className='compose-form'>
<Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<div className="spoiler-input">
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type="text" className="spoiler-input__input" />
<ReplyIndicatorContainer />
- <div style={{ position: 'relative' }}>
+ <div className='compose-form__autosuggest-wrapper'>
<AutosuggestTextarea
ref={this.setAutosuggestTextarea}
placeholder={intl.formatMessage(messages.placeholder)}
<UploadFormContainer />
</div>
- <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ <div className='compose-form__buttons-wrapper'>
<div className='compose-form__buttons'>
<UploadButtonContainer />
<PrivacyDropdownContainer />
<SpoilerButtonContainer />
</div>
- <div style={{ display: 'flex', minWidth: 0 }}>
- <div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={text} /></div>
- <div style={{ paddingTop: '10px', overflow: 'hidden' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} block /></div>
+ <div className='compose-form__publish'>
+ <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
+ <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabled || text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length > 500} block /></div>
</div>
</div>
</div>
imagePathPNG: '/emoji/'
};
-const style = {
+const dropdownStyle = {
position: 'absolute',
right: '5px',
top: '5px'
};
+const dropdownTriggerStyle = {
+ display: 'block',
+ fontSize: '24px',
+ lineHeight: '24px',
+ marginLeft: '2px',
+ width: '24px'
+}
+
class EmojiPickerDropdown extends React.PureComponent {
constructor (props, context) {
}
return (
- <Dropdown ref={this.setRef} style={style}>
- <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
+ <Dropdown ref={this.setRef} style={dropdownStyle}>
+ <DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={dropdownTriggerStyle}>
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger>
render () {
return (
<div className='navigation-bar'>
- <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}
style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} animate size={40} /></Permalink>
+ <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}><Avatar src={this.props.account.get('avatar')} animate size={40} /></Permalink>
- <div style={{ flex: '1 1 auto', marginLeft: '8px' }}>
- <strong style={{ fontWeight: '500', display: 'block' }}>{this.props.account.get('acct')}</strong>
- <a href='/settings/profile' style={{ color: 'inherit', textDecoration: 'none' }}><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
+ <div className='navigation-bar__profile'>
+ <strong className='navigation-bar__profile-account'>{this.props.account.get('acct')}</strong>
+ <a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
</div>
</div>
);
change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust status privacy' }
});
-const iconStyle = {
- lineHeight: '27px',
- height: null
-};
-
class PrivacyDropdown extends React.PureComponent {
constructor (props, context) {
return (
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}>
- <div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div>
+ <div className='privacy-dropdown__value'><IconButton className='privacy-dropdown__value-icon' icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} /></div>
<div className='privacy-dropdown__dropdown'>
{options.map(item =>
<div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>
return (
<div className='reply-indicator'>
- <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
- <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div>
+ <div className='reply-indicator__header'>
+ <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div>
- <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
- <div
style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div>
+ <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name'>
+ <div
className='reply-indicator__display-avatar'><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div>
<DisplayName account={status.get('account')} />
</a>
</div>
upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
});
-const iconStyle = {
- lineHeight: '27px',
- height: null
-};
-
class UploadButton extends React.PureComponent {
constructor (props, context) {
const { intl, resetFileKey, disabled } = this.props;
return (
- <div style={this.props.style}>
- <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} style={iconStyle} size={18} inverted />
+ <div className='compose-form__upload-button'>
+ <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted />
<input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
</div>
);
const { intl, media } = this.props;
const uploads = media.map(attachment =>
- <div key={attachment.get('id')} style={{ margin: '5px', flex: '1 1 0' }}>
+ <div className='compose-form__upload' key={attachment.get('id')}>
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) =>
- <div style={{ transform: `translateZ(0) scale(${scale})`, width: '100%', height: '100px', borderRadius: '4px', background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }}>
+ <div style={{ transform: `translateZ(0) scale(${scale})`, background: `url(${attachment.get('preview_url')}) no-repeat center` }}>
<IconButton icon='times' title={intl.formatMessage(messages.undo)} size={36} onClick={this.props.onRemoveFile.bind(this, attachment.get('id'))} />
</div>
}
);
return (
- <div style={{ overflow: 'hidden' }}>
+ <div className='compose-form__upload-wrapper'>
<UploadProgressContainer />
- <div style={{ display: 'flex', padding: '5px' }}>{uploads}</div>
+ <div className='compose-form__uploads-wrapper'>{uploads}</div>
</div>
);
}
return (
<div className='upload-progress'>
- <div>
+ <div className='upload-progress__icon'>
<i className='fa fa-upload' />
</div>
- <div style={{ flex: '1 1 auto' }}>
+ <div className='upload-progress__message'>
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
<div className='upload-progress__backdrop'>
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }
});
-const outerStyle = {
- padding: '14px 10px'
-};
-
-const panelStyle = {
- display: 'flex',
- flexDirection: 'row',
- padding: '10px 0'
-};
-
-const btnStyle = {
- flex: '1 1 auto',
- textAlign: 'center'
-};
-
const AccountAuthorize = ({ intl, account, onAuthorize, onReject }) => {
const content = { __html: emojify(account.get('note')) };
return (
- <div>
- <div style={outerStyle}>
- <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}>
- <div
style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div>
+ <div className='account-authorize__wrapper'>
+ <div className='account-authorize'>
+ <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name'>
+ <div
className='account-authorize__avatar'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div>
<DisplayName account={account} />
</Permalink>
- <div style={{ fontSize: '14px' }} className='account__header__content' dangerouslySetInnerHTML={content} />
+ <div className='account__header__content' dangerouslySetInnerHTML={content} />
</div>
- <div className='account--panel' style={panelStyle}>
- <div style={btnStyle}><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
- <div style={btnStyle}><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
+ <div className='account--panel'>
+ <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
+ <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
</div>
</div>
)
<ScrollContainer scrollKey='followers'>
<div className='scrollable' onScroll={this.handleScroll}>
- <div>
+ <div className='followers'>
<HeaderContainer accountId={this.props.params.accountId} />
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
<LoadMore onClick={this.handleLoadMore} />
<ScrollContainer scrollKey='following'>
<div className='scrollable' onScroll={this.handleScroll}>
- <div>
+ <div className='following'>
<HeaderContainer accountId={this.props.params.accountId} />
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
<LoadMore onClick={this.handleLoadMore} />
return (
<Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile={true}>
- <div style={{ position: 'relative' }}>
+ <div className='getting-started__wrapper'>
<ColumnLink icon='users' hideOnMobile={true} text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />
<ColumnLink icon='globe' hideOnMobile={true} text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />
<ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />
settings: { id: 'home.settings', defaultMessage: 'Column settings' }
});
-const outerStyle = {
- padding: '15px'
-};
-
-const sectionStyle = {
- cursor: 'default',
- display: 'block',
- fontWeight: '500',
- marginBottom: '10px'
-};
-
-const rowStyle = {
-
-};
-
class ColumnSettings extends React.PureComponent {
render () {
return (
<ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={209} onCollapse={onSave}>
- <div className='column-settings--outer' style={outerStyle}>
- <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
+ <div className='column-settings__outer'>
+ <span className='column-settings__section'><FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' /></span>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show boosts' />} />
</div>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingToggle settings={settings} settingKey={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
</div>
- <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
+ <span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingText settings={settings} settingKey={['regex', 'body']} onChange={onChange} label={intl.formatMessage(messages.filter_regex)} />
</div>
</div>
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
-const style = {
- display: 'block',
- fontFamily: 'inherit',
- marginBottom: '10px',
- padding: '7px 0',
- boxSizing: 'border-box',
- width: '100%'
-};
-
class SettingText extends React.PureComponent {
constructor (props, context) {
return (
<input
- style={style}
className='setting-text'
value={settings.getIn(settingKey)}
onChange={this.handleChange}
<Column icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='mutes'>
- <div className='scrollable' onScroll={this.handleScroll}>
+ <div className='scrollable mutes' onScroll={this.handleScroll}>
{accountIds.map(id =>
<AccountContainer key={id} id={id} />
)}
</Column>
);
}
+
}
Mutes.propTypes = {
settings: { id: 'notifications.settings', defaultMessage: 'Column settings' }
});
-const outerStyle = {
- padding: '15px'
-};
-
-const sectionStyle = {
- cursor: 'default',
- display: 'block',
- fontWeight: '500',
- marginBottom: '10px'
-};
-
-const rowStyle = {
-
-};
-
class ColumnSettings extends React.PureComponent {
render () {
return (
<ColumnCollapsable icon='sliders' title={intl.formatMessage(messages.settings)} fullHeight={616} onCollapse={onSave}>
- <div className='column-settings--outer' style={outerStyle}>
- <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
+ <div className='column-settings__outer'>
+ <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingToggle settings={settings} settingKey={['alerts', 'follow']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'follow']} onChange={onChange} label={showStr} />
<SettingToggle settings={settings} settingKey={['sounds', 'follow']} onChange={onChange} label={soundStr} />
</div>
- <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
+ <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingToggle settings={settings} settingKey={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'favourite']} onChange={onChange} label={showStr} />
<SettingToggle settings={settings} settingKey={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
</div>
- <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
+ <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingToggle settings={settings} settingKey={['alerts', 'mention']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'mention']} onChange={onChange} label={showStr} />
<SettingToggle settings={settings} settingKey={['sounds', 'mention']} onChange={onChange} label={soundStr} />
</div>
- <span className='column-settings--section' style={sectionStyle}><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
+ <span className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
- <div style={rowStyle}>
+ <div className='column-settings__row'>
<SettingToggle settings={settings} settingKey={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
<SettingToggle settings={settings} settingKey={['shows', 'reblog']} onChange={onChange} label={showStr} />
<SettingToggle settings={settings} settingKey={['sounds', 'reblog']} onChange={onChange} label={soundStr} />
import emojify from '../../../emoji';
import escapeTextContentForBrowser from 'escape-html';
-const linkStyle = {
- fontWeight: '500'
-};
-
class Notification extends React.PureComponent {
renderFollow (account, link) {
return (
<div className='notification notification-follow'>
<div className='notification__message'>
- <div style={{ position: 'absolute', 'left': '-26px'}}>
+ <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-user-plus' />
</div>
return (
<div className='notification notification-favourite'>
<div className='notification__message'>
- <div style={{ position: 'absolute', 'left': '-26px'}}>
- <i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} />
+ <div className='notification__favourite-icon-wrapper'>
+ <i className='fa fa-fw fa-star star-icon'/>
</div>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
return (
<div className='notification notification-reblog'>
<div className='notification__message'>
- <div style={{ position: 'absolute', 'left': '-26px'}}>
+ <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-retweet' />
</div>
const account = notification.get('account');
const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');
const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
- const link = <Permalink className='notification__display-name' style={linkStyle} href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
+ const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />;
switch(notification.get('type')) {
case 'follow':
import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle';
-const labelStyle = {
- display: 'block',
- lineHeight: '24px',
- verticalAlign: 'middle'
-};
-
-const labelSpanStyle = {
- display: 'inline-block',
- verticalAlign: 'middle',
- marginBottom: '14px',
- marginLeft: '8px'
-};
-
const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' }) => (
- <label htmlFor={htmlFor} style={labelStyle}>
+ <label htmlFor={htmlFor} className='setting-toggle__label'>
<Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
- <span className='setting-toggle' style={labelSpanStyle}>{label}</span>
+ <span className='setting-toggle'>{label}</span>
</label>
);
<ColumnBackButton />
<ScrollContainer scrollKey='reblogs'>
- <div className='scrollable'>
+ <div className='scrollable reblogs'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div>
</ScrollContainer>
}
return (
- <div className='status-check-box' style={{ display: 'flex' }}>
+ <div className='status-check-box'>
<div
className='status__content'
- style={{ flex: '1 1 auto', padding: '10px' }}
dangerouslySetInnerHTML={content}
/>
- <div style={{ flex: '0 0 auto', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+ <div className='status-check-box-toggle'>
<Toggle checked={checked} onChange={onToggle} disabled={disabled} />
</div>
</div>
return mapStateToProps;
};
-const textareaStyle = {
- marginBottom: '10px'
-};
-
class Report extends React.PureComponent {
constructor (props, context) {
<Column heading={intl.formatMessage(messages.heading)} icon='flag'>
<ColumnBackButtonSlim />
- <div className='report scrollable' style={{ display: 'flex', flexDirection: 'column', maxHeight: '100%', boxSizing: 'border-box' }}>
- <div className='report__target' style={{ flex: '0 0 auto', padding: '10px' }}>
+ <div className='report scrollable'>
+ <div className='report__target'>
<FormattedMessage id='report.target' defaultMessage='Reporting' />
<strong>{account.get('acct')}</strong>
</div>
- <div style={{ flex: '1 1 auto' }} className='scrollable'>
+ <div className='scrollable report__statuses'>
<div>
{statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
</div>
</div>
- <div style={{ flex: '0 0 100px', padding: '10px' }}>
+ <div className='report__textarea-wrapper'>
<textarea
className='report__textarea'
placeholder={intl.formatMessage(messages.placeholder)}
value={comment}
onChange={this.handleCommentChange}
- style={textareaStyle}
disabled={isSubmitting}
/>
- <div style={{ marginTop: '10px', overflow: 'hidden' }}>
- <div style={{ float: 'right' }}><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div>
+ <div className='report__submit'>
+ <div className='report__submit-button'><Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /></div>
</div>
</div>
</div>
return (
<div className='detailed-status__action-bar'>
- <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
- <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton disabled={status.get('visibility') === 'direct' || status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
- <div style={{ flex: '1 1 auto', textAlign: 'center' }}><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
- <div style={{ flex: '1 1 auto', textAlign: 'center' }}><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div>
+ <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
+ <div className='detailed-status__button'><IconButton disabled={status.get('visibility') === 'direct' || status.get('visibility') === 'private'} active={status.get('reblogged')} title={intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /></div>
+ <div className='detailed-status__button'><IconButton animate={true} active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} activeStyle={{ color: '#ca8f04' }} /></div>
+ <div className='detailed-status__button'><DropdownMenu size={18} icon='ellipsis-h' items={menu} direction="left" /></div>
</div>
);
}
import ImmutablePropTypes from 'react-immutable-proptypes';
-const contentStyle = {
- flex: '1 1 auto',
- padding: '8px',
- paddingLeft: '14px',
- overflow: 'hidden'
-};
-
-const imageStyle = {
- display: 'block',
- width: '100%',
- height: 'auto',
- margin: '0',
- borderRadius: '4px 0 0 4px'
-};
-
const hostStyle = {
display: 'block',
marginTop: '5px',
if (card.get('image')) {
image = (
<div className='status-card__image'>
- <img src={card.get('image')} alt={card.get('title')} style={imageStyle} />
+ <img src={card.get('image')} alt={card.get('title')} className='status-card__image-image' />
</div>
);
}
<a href={card.get('url')} className='status-card' target='_blank' rel='noopener'>
{image}
- <div className='status-card__content' style={contentStyle}>
+ <div className='status-card__content'>
<strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
<p className='status-card__description'>{card.get('description').substring(0, 50)}</p>
<span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span>
}
if (status.get('application')) {
- applicationLink = <span> · <a className='detailed-status__application' style={{ color: 'inherit' }} href={status.getIn(['application', 'website'])} target='_blank' rel='nooopener'>{status.getIn(['application', 'name'])}</a></span>;
+ applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='nooopener'>{status.getIn(['application', 'name'])}</a></span>;
}
return (
- <div style={{ padding: '14px 10px' }} className='detailed-status'>
- <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name' style={{ display: 'block', overflow: 'hidden', marginBottom: '15px' }}>
- <div
style={{ float: 'left', marginRight: '10px' }}><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
+ <div className='detailed-status'>
+ <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
+ <div
className='.detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div>
<DisplayName account={status.get('account')} />
</a>
{media}
<div className='detailed-status__meta'>
- <a className='detailed-status__datetime' style={{ color: 'inherit' }} href={status.get('url')} target='_blank' rel='noopener'><FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /></a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-retweet' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('reblogs_count')} /></span></Link> · <Link to={`/statuses/${status.get('id')}/favourites`} style={{ color: 'inherit', textDecoration: 'none' }}><i className='fa fa-star' /><span style={{ fontWeight: '500', fontSize: '12px', marginLeft: '6px', display: 'inline-block' }}><FormattedNumber value={status.get('favourites_count')} /></span></Link>
+ <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
+ <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+ </a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
+ <i className='fa fa-retweet' />
+ <span className='detailed-status__reblogs'>
+ <FormattedNumber value={status.get('reblogs_count')} />
+ </span>
+ </Link> · <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
+ <i className='fa fa-star' />
+ <span className='detailed-status__favorites'>
+ <FormattedNumber value={status.get('favourites_count')} />
+ </span>
+ </Link>
</div>
</div>
);
<ColumnBackButton />
<ScrollContainer scrollKey='thread'>
- <div className='scrollable'>
+ <div className='scrollable detailed-status__wrapper'>
{ancestors}
<DetailedStatus status={status} autoPlayGif={autoPlayGif} me={me} onOpenVideo={this.handleOpenVideo} onOpenMedia={this.handleOpenMedia} />
<div className='modal-root__modal boost-modal'>
<div className='boost-modal__container'>
<div className='status light'>
- <div style={{ fontSize: '15px' }}>
- <div style={{ float: 'right', fontSize: '14px' }}>
+ <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'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div>
- <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
- <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+ <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
+ <div className='status__avatar'>
<Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />
</div>
let icon = '';
if (this.props.icon) {
- icon = <i className={`fa fa-fw fa-${this.props.icon}`} style={{ display: 'inline-block', marginRight: '5px' }} />;
+ icon = <i className={`fa fa-fw fa-${this.props.icon} column-header__icon`} />;
}
return (
import PropTypes from 'prop-types';
import { Link } from 'react-router';
-const outerStyle = {
- padding: '15px',
- fontSize: '16px',
- textDecoration: 'none'
-};
-
-const iconStyle = {
- display: 'inline-block',
- marginRight: '5px'
-};
-
const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
if (href) {
return (
<a href={href} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}>
- <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+ <i className={`fa fa-fw fa-${icon} column-link__icon`} />
{text}
</a>
);
} else {
return (
- <Link to={to} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}>
- <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+ <Link to={to} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}>
+ <i className={`fa fa-fw fa-${icon} column-link__icon`} />
{text}
</Link>
);
import PropTypes from 'prop-types';
-const style = {
- display: 'flex',
- flex: '1 1 auto',
- overflowX: 'auto'
-};
-
class ColumnsArea extends React.PureComponent {
render () {
return (
- <div className='columns-area' style={style}>
+ <div className='columns-area'>
{this.props.children}
</div>
);
close: { id: 'lightbox.close', defaultMessage: 'Close' }
});
-const leftNavStyle = {
- position: 'absolute',
- background: 'rgba(0, 0, 0, 0.5)',
- padding: '30px 15px',
- cursor: 'pointer',
- fontSize: '24px',
- top: '0',
- left: '-61px',
- boxSizing: 'border-box',
- height: '100%',
- display: 'flex',
- alignItems: 'center'
-};
-
-const rightNavStyle = {
- position: 'absolute',
- background: 'rgba(0, 0, 0, 0.5)',
- padding: '30px 15px',
- cursor: 'pointer',
- fontSize: '24px',
- top: '0',
- right: '-61px',
- boxSizing: 'border-box',
- height: '100%',
- display: 'flex',
- alignItems: 'center'
-};
-
-const closeStyle = {
- position: 'absolute',
- top: '4px',
- right: '4px'
-};
-
class MediaModal extends React.PureComponent {
constructor (props, context) {
leftNav = rightNav = content = '';
if (media.size > 1) {
- leftNav = <div role='button' tabIndex='0' style={leftNavStyle} className='modal-container__nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
- rightNav = <div role='button' tabIndex='0' style={rightNavStyle} className='modal-container__nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
+ leftNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
+ rightNav = <div role='button' tabIndex='0' className='modal-container__nav modal-container__nav--right' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
}
if (attachment.get('type') === 'image') {
<div className='modal-root__modal media-modal'>
{leftNav}
- <div>
- <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} />
+ <div className='media-modal__content'>
+ <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
{content}
</div>
return (
<div key={key}>
- <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity, transform: `translateZ(0px)` }} onClick={onClose} />
+ <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
<div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
<SpecificComponent {...props} onClose={onClose} />
</div>
close: { id: 'lightbox.close', defaultMessage: 'Close' }
});
-const closeStyle = {
- position: 'absolute',
- zIndex: '100',
- top: '4px',
- right: '4px'
-};
-
class VideoModal extends React.PureComponent {
render () {
return (
<div className='modal-root__modal media-modal'>
<div>
- <div style={closeStyle}><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
+ <div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
<ExtendedVideoPlayer src={url} muted={false} controls={true} time={time} />
</div>
</div>
"upload_button.label": "Media toevoegen",
"upload_form.undo": "Ongedaan maken",
"video_player.toggle_sound": "Geluid in-/uitschakelen",
-
+
};
export default nl;
.button {
background-color: darken($color4, 3%);
- font-family: inherit;
- display: inline-block;
- position: relative;
- box-sizing: border-box;
- text-align: center;
border: 10px none;
+ border-radius: 4px;
+ box-sizing: border-box;
color: $color5;
+ cursor: pointer;
+ display: inline-block;
+ font-family: inherit;
font-size: 14px;
font-weight: 500;
- letter-spacing: 0;
- text-transform: uppercase;
- padding: 0 16px;
height: 36px;
- cursor: pointer;
+ letter-spacing: 0;
line-height: 36px;
- border-radius: 4px;
+ overflow: hidden;
+ padding: 0 16px;
+ position: relative;
+ text-align: center;
+ text-transform: uppercase;
text-decoration: none;
+ text-overflow: ellipsis;
transition: all 100ms ease-in;
+ white-space: nowrap;
- &:hover, &:active, &:focus {
+ &:active,
+ &:focus,
+ &:hover {
background-color: lighten($color4, 7%);
transition: all 200ms ease-out;
}
}
}
+.column-collapsable {
+ position: relative;
+}
+
.column-icon {
- color: $color3;
background: lighten($color1, 4%);
+ color: $color3;
+ cursor: pointer;
+ font-size: 16px;
+ padding: 15px;
+ position: absolute;
+ right: 0;
+ top: -48px;
+ z-index: 3;
&:hover {
color: lighten($color3, 7%);
}
}
-.avatar {
- border-radius: 4px;
- background: transparent no-repeat;
- background-position: 50%;
- background-clip: padding-box;
- position: relative;
-}
-
.lightbox .icon-button {
color: $color1;
}
+.compose-form {
+ padding: 10px;
+}
+
.compose-form__warning {
color: $color2;
margin-bottom: 15px;
border-radius: 0 0 4px 0;
}
+.compose-form__buttons-wrapper {
+ display: flex;
+ justify-content: space-between;
+}
+
.compose-form__buttons {
padding: 10px;
background: darken($color5, 8%);
}
}
+.compose-form__upload-button-icon {
+ line-height: 27px;
+}
+
+.compose-form__upload-wrapper {
+ overflow: hidden;
+}
+
+.compose-form__uploads-wrapper {
+ display: flex;
+ padding: 5px;
+}
+
+.compose-form__upload {
+ flex: 1 1 0;
+ margin: 5px;
+}
+
+.compose-form__upload-cancel {
+ background-size: cover;
+ border-radius: 4px;
+ height: 100px;
+ width: 100px;
+}
+
.compose-form__label {
display: block;
line-height: 24px;
}
}
+.compose-form__autosuggest-wrapper {
+ position: relative;
+}
+
+.compose-form__publish {
+ display: flex;
+ min-width: 0;
+}
+
+.compose-form__publish-button-wrapper {
+ overflow: hidden;
+ padding-top: 10px;
+}
+
.emojione {
display: inline-block;
font-size: inherit;
bottom: -2px;
background: $color3;
padding: 10px;
+}
- .reply-indicator__display-name {
- color: $color1;
- }
+.reply-indicator__header {
+ margin-bottom: 5px;
+ overflow: hidden;
+}
+
+.reply-indicator__cancel {
+ float: right;
+ line-height: 24px;
+}
+
+.reply-indicator__display-name {
+ color: $color1;
+ display: block;
+ max-width: 100%;
+ line-height: 24px;
+ overflow: hidden;
+ padding-right: 25px;
+ text-decoration: none;
+}
+
+.reply-indicator__display-avatar {
+ float: left;
+ margin-right: 5px;
+}
+
+.status__content {
+ cursor: pointer;
+}
+
+.status__content--no-action {
+ cursor: default;
}
-.status__content, .reply-indicator__content {
+.status__content,
+.reply-indicator__content {
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
line-height: inherit;
}
+.status__prepend-icon-wrapper {
+ left: -26px;
+ position: absolute;
+}
+
.status {
padding: 8px 10px;
padding-left: 68px;
border-bottom: 1px solid lighten($color1, 8%);
cursor: default;
- .status__relative-time {
- color: lighten($color1, 26%);
- }
-
- .status__display-name {
- color: lighten($color1, 26%);
- }
-
&.light {
.status__relative-time {
color: $color3;
}
}
+.status__relative-time {
+ color: lighten($color1, 26%);
+}
+
+.status__display-name {
+ color: lighten($color1, 26%);
+ display: block;
+ max-width: 100%;
+ padding-right: 25px;
+}
+
+.status__info {
+ font-size: 15px;
+}
+
+.status__info-time {
+ float: right;
+ font-size: 14px;
+}
+
.status-check-box {
border-bottom: 1px solid lighten($color1, 8%);
+ display: flex;
.status__content {
background: lighten($color1, 4%);
+ flex: 1 1 auto;
+ padding: 10px;
}
}
+.status-check-box-toggle {
+ align-items: center;
+ display: flex;
+ flex: 0 0 auto;
+ justify-content: center;
+ padding: 10px;
+}
+
.status__prepend {
margin-left: 68px;
color: lighten($color1, 26%);
}
}
+.status__action-bar {
+ margin-top: 10px;
+ overflow: hidden;
+}
+
+.status__action-bar-button-wrapper {
+ float: left;
+ margin-right: 18px;
+}
+
+.status__action-bar-dropdown {
+ float: left;
+ height: 18px;
+ width: 18px;
+}
+
.detailed-status {
background: lighten($color1, 4%);
+ padding: 14px 10px;
.status__content {
font-size: 19px;
padding: 10px 0;
}
+.detailed-status__link {
+ color: inherit;
+ text-decoration: none;
+}
+
+.detailed-status__favorites,
+.detailed-status__reblogs {
+ display: inline-block;
+ font-weight: 500;
+ font-size: 12px;
+ margin-left: 6px;
+}
+
.reply-indicator__content {
color: $color1;
font-size: 14px;
}
}
+.account__wrapper {
+ display: flex;
+}
+
+.account__avatar-wrapper {
+ float: left;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+
+.account__avatar {
+ border-radius: 4px;
+ background: transparent no-repeat;
+ background-position: 50%;
+ background-clip: padding-box;
+ position: relative;
+}
+
+.account__relationship {
+ height: 18px;
+ padding: 10px;
+}
+
.account__header {
flex: 0 0 auto;
background: lighten($color1, 4%);
}
.account__header__content {
- word-wrap: break-word;
- word-break: normal;
+ color: $color3;
+ font-size: 14px;
font-weight: 400;
overflow: hidden;
- color: $color3;
+ word-break: normal;
+ word-wrap: break-word;
p {
margin-bottom: 20px;
display: flex;
}
+.account__action-bar-dropdown {
+ flex: 1 1 auto;
+ padding: 10px;
+}
+
+.account__action-bar-links {
+ display: flex;
+ flex: 1 1 auto;
+ line-height: 18px;
+}
+
.account__action-bar__tab {
text-decoration: none;
overflow: hidden;
}
}
-.status__display-name, .status__relative-time, .detailed-status__display-name, .detailed-status__datetime, .detailed-status__application, .account__display-name {
+.account__header__avatar {
+ background-size: 90px 90px;
+ display: block;
+ height: 90px;
+ margin: 0 auto 10px;
+ overflow: hidden;
+ width: 90px;
+}
+
+.account-authorize {
+ padding: 14px 10px;
+
+ .detailed-status__display-name {
+ display: block;
+ margin-bottom: 15px;
+ overflow: hidden;
+ }
+}
+
+.account-authorize__avatar {
+ float: left;
+ margin-right: 10px;
+}
+
+.status__display-name,
+.status__relative-time,
+.detailed-status__display-name,
+.detailed-status__datetime,
+.detailed-status__application,
+.account__display-name {
text-decoration: none;
}
-.status__display-name, .account__display-name {
+.status__display-name,
+.account__display-name {
strong {
color: $color5;
}
}
}
-.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name {
- &:hover {
- strong {
- text-decoration: underline;
- }
+.status__display-name,
+.reply-indicator__display-name,
+.detailed-status__display-name,
+.account__display-name {
+ &:hover strong {
+ text-decoration: underline;
}
}
-.account__display-name {
- strong {
- display: block;
- }
+.account__display-name strong {
+ display: block;
+}
+
+.detailed-status__application,
+.detailed-status__datetime {
+ color: inherit;
}
.detailed-status__display-name {
color: $color2;
+ display: block;
line-height: 24px;
+ margin-bottom: 15px;
+ overflow: hidden;
- strong, span {
+ strong,
+ span {
display: block;
}
}
}
+.detailed-status__display-avatar {
+ float: right;
+ margin-right: 10px;
+}
+
+.status__avatar {
+ height: 48px;
+ left: 10px;
+ position: absolute;
+ top: 10px;
+ width: 48px;
+}
+
.muted {
- .status__content p, .status__content a {
+ .status__content p,
+ .status__content a {
color: lighten($color1, 26%);
}
opacity: 0.5;
}
- a.status__content__spoiler-link {
+ .status__content__spoiler-link {
background: lighten($color1, 26%);
color: lighten($color1, 4%);
}
}
+.notification__favourite-icon-wrapper {
+ left: -26px;
+ position: absolute;
+}
+
+.star-icon.active {
+ color: #ca8f04;
+}
+
.notification__display-name {
color: inherit;
+ font-weight: 500;
text-decoration: none;
&:hover {
}
}
-.status__relative-time, .detailed-status__datetime {
+.display-name {
+ display: block;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.display-name__html {
+ font-weight: 500;
+}
+
+.display-name__account {
+ font-size: 14px;
+}
+
+.status__relative-time,
+.detailed-status__datetime {
&:hover {
text-decoration: underline;
}
strong {
color: $color5;
}
+
+ .permalink {
+ text-decoration: none;
+ }
+}
+
+.navigation-bar__profile {
+ flex: 1 1 auto;
+ margin-left: 8px;
+}
+
+.navigation-bar__profile-account {
+ display: block;
+ font-weight: 500;
+}
+
+.navigation-bar__profile-edit {
+ color: inherit;
+ text-decoration: none;
}
.dropdown {
.dropdown--active .dropdown__content {
display: block;
+ line-height: 18px;
+ text-align: left;
z-index: 9999;
&:before {
}
}
+.dropdown__icon {
+ vertical-align: middle;
+}
+
.static-content {
padding: 10px;
padding-top: 20px;
}
.columns-area {
+ display: flex;
+ flex: 1 1 auto;
flex-direction: row;
justify-content: flex-start;
+ overflow-x: auto;
}
@media screen and (min-width: 360px) {
}
}
+.column-back-button__icon {
+ display: inline-block;
+ margin-right: 5px;
+}
+
+.column-back-button--slim {
+ position: relative;
+}
+
+.column-back-button--slim-button {
+ cursor: pointer;
+ flex: 0 0 auto;
+ font-size: 16px;
+ padding: 15px;
+ position: absolute;
+ right: 0;
+ top: -48px;
+}
+
.react-toggle {
display: inline-block;
position: relative;
background: lighten($color1, 8%);
color: $color5;
display: block;
+ font-size: 16px;
+ padding: 15px;
+ text-decoration: none;
&:hover {
background: lighten($color1, 11%);
}
}
-.autosuggest-textarea, .spoiler-input {
+.column-link__icon {
+ display: inline-block;
+ margin-right: 5px;
+}
+
+.autosuggest-textarea,
+.spoiler-input {
position: relative;
}
-.autosuggest-textarea__textarea, .spoiler-input__input {
+.autosuggest-textarea__textarea,
+.spoiler-input__input {
display: block;
box-sizing: border-box;
width: 100%;
}
}
+.autosuggest-account {
+ overflow: hidden;
+}
+
+.autosuggest-account-icon {
+ float: left;
+ margin-right: 5px;
+}
+
+.autosuggest-status {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ strong {
+ font-weight: 500;
+ }
+}
+
+.character-counter__wrapper {
+ line-height: 36px;
+ margin-right: 16px;
+ padding-top: 10px;
+}
+
+.character-counter {
+ cursor: default;
+ font-size: 16px;
+}
+
+.character-counter--over {
+ color: #ff5050;
+}
+
+.getting-started__wrapper {
+ position: relative;
+}
+
.getting-started {
box-sizing: border-box;
padding-bottom: 235px;
background: transparent;
border: none;
border-bottom: 2px solid $color3;
+ box-sizing: border-box;
+ display: block;
+ font-family: inherit;
+ margin-bottom: 10px;
+ padding: 7px 0px;
+ width: 100%;
&:focus, &:active {
color: $color5;
font-size: 16px;
}
}
-
+
@import 'boost';
button.icon-button i.fa-retweet {
white-space: nowrap;
}
+.status-card__content {
+ flex: 1 1 auto;
+ overflow: hidden;
+ padding: 14px 14px 14px 8px;
+}
+
.status-card__description {
color: $color3;
}
background: lighten($color1, 8%);
}
+.status-card__image-image {
+ border-radius: 4px 0px 0px 4px;
+ display: block;
+ height: auto;
+ margin: 0;
+ width: 100%;
+}
+
.load-more {
display: block;
color: lighten($color1, 26%);
}
}
+.column-header__icon {
+ display: inline-block;
+ margin-right: 5px;
+}
+
.loading-indicator {
color: $color2;
+ font-size: 16px;
+ font-weight: 500;
+ padding-top: 120px;
+ text-align: center;
}
.collapsable-collapsed {
}
}
-.media-spoiler, .video-error-cover {
+.media-spoiler,
+.video-error-cover {
+ align-items: center;
background: $color8;
color: $color5;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ margin-top: 8px;
+ position: relative;
+ text-align: center;
+ z-index: 100;
+}
+
+.media-spoiler__warning {
+ display: block;
+ font-size: 14px;
+}
+
+.media-spoiler__trigger {
+ display: block;
+ font-size: 11px;
+ font-weight: 500;
+}
+
+.spoiler-button {
+ left: 4px;
+ position: absolute;
+ top: 4px;
}
.modal-container--preloader {
background: lighten($color1, 4%);
border-top: 1px solid lighten($color1, 8%);
border-bottom: 1px solid lighten($color1, 8%);
+ display: flex;
+ flex-direction: row;
+ padding: 10px 0px;
+}
+
+.account--panel__button,
+.detailed-status__button {
+ flex: 1 1 auto;
+ text-align: center;
}
-.column-settings--outer {
+.column-settings__outer {
background: lighten($color1, 8%);
+ padding: 15px;
}
-.column-settings--section {
+.column-settings__section {
color: $color3;
+ cursor: default;
+ display: block;
+ font-weight: 500;
+ margin-bottom: 10px;
}
.modal-container__nav {
+ align-items: center;
+ background: rgba(0, 0, 0, 0.5);
+ box-sizing: border-box;
color: $color5;
+ cursor: pointer;
+ display: flex;
+ font-size: 24px;
+ height: 100%;
+ padding: 30px 15px;
+ position: absolute;
+ top: 0;
+}
+
+.modal-container__nav--left {
+ left: -61px;
+}
+
+.modal-container__nav--right {
+ right: -61px;
}
.account--follows-info {
color: $color5;
}
+.setting-toggle__label {
+ display: block;
+ line-height: 24px;
+ vertical-align: middle;
+}
+
.setting-toggle {
color: $color3;
+ display: inline-block;
+ margin-bottom: 14px;
+ margin-left: 8px;
+ vertical-align: middle;
+}
+
+.report.scrollable {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ max-height: 100%;
}
.report__target {
border-bottom: 1px solid lighten($color1, 4%);
color: $color2;
- padding-bottom: 10px;
+ flex: 0 0 auto;
+ padding: 10px;
strong {
display: block;
}
}
+.report__statuses {
+ flex: 1 1 auto;
+}
+
+.report__textarea-wrapper {
+ flex: 0 0 100px;
+ padding: 10px;
+}
+
.report__textarea {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom: 2px solid $color3;
border-radius: 2px 2px 0 0;
- padding: 7px 4px;
- font-size: 14px;
color: $color5;
display: block;
- width: 100%;
- outline: 0;
font-family: inherit;
+ font-size: 14px;
+ margin-bottom: 10px;
+ outline: 0;
+ padding: 7px 4px;
resize: vertical;
+ width: 100%;
&:active, &:focus {
border-bottom-color: $color4;
}
}
+.report__submit {
+ margin-top: 10px;
+ overflow: hidden;
+}
+
+.report__submit-button {
+ float: right;
+}
+
.empty-column-indicator {
color: lighten($color1, 20%);
background: $color1;
}
}
-.autosuggest-status {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-
- strong {
- font-weight: 500;
- }
-}
-
.upload-area {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- visibility: hidden;
+ align-items: center;
background: rgba($color8, 0.8);
display: flex;
- align-items: center;
+ height: 100%;
justify-content: center;
+ left: 0;
opacity: 0;
+ position: absolute;
+ top: 0;
+ visibility: hidden;
+ width: 100%;
z-index: 2000;
* {
}
}
+.upload-progess__message {
+ flex: 1 1 auto;
+}
+
.upload-progress__backdrop {
width: 100%;
height: 6px;
box-shadow: 0 -4px 4px rgba($color8, 0.1);
}
+ .privacy-dropdown__value-icon {
+ line-height: 27px;
+ }
+
.privacy-dropdown__dropdown {
display: block;
box-shadow: 2px 4px 6px rgba($color8, 0.1);
z-index: 9999;
opacity: 0;
background: rgba($color8, 0.7);
+ transform: translateZ(0px);
}
.modal-root__container {
}
}
+.media-modal__close {
+ position: absolute;
+ right: 4;
+ top: 4;
+ z-index: 100;
+}
+
.onboarding-modal {
background: $color2;
color: $color1;
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;
+ }
}
.boost-modal__container {
}
}
+.boost-modal__status-header {
+ font-size: 15px;
+}
+
+.boost-modal__status-time {
+ float: right;
+ font-size: 14px;
+}
+
.loading-bar {
background-color: $color4;
height: 3px;
}
}
}
+
+/* Media Gallery */
+.media-gallery {
+ box-sizing: border-box;
+ margin-top: 8px;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.media-gallery__item {
+ border: none;
+ box-sizing: border-box;
+ display: block;
+ float: left;
+ position: relative;
+}
+
+.media-gallery__item-thumbnail {
+ background-size: cover;
+ cursor: zoom-in;
+ display: block;
+ height: 100%;
+ text-decoration: none;
+ width: 100%;
+}
+
+.media-gallery__gifv {
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.media-gallery__item-gifv-thumbnail {
+ cursor: zoom-in;
+ height: 100%;
+ object-fit: cover;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 100%;
+ z-index: 1;
+}
+
+.media-gallery__item-thumbnail-label {
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ overflow: hidden;
+ position: absolute;
+}
+/* End Media Gallery */
+
+/* Status Video Player */
+.status__video-player {
+ background: #000;
+ box-sizing: border-box;
+ cursor: default; /* May not be needed */
+ margin-top: 8px;
+ overflow: hidden;
+ position: relative;
+}
+
+.status__video-player-video {
+ height: 100%;
+ object-fit: cover;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 100%;
+ z-index: 1;
+}
+
+.status__video-player-expand,
+.status__video-player-mute {
+ color: #fff;
+ opacity: 0.8;
+ position: absolute;
+ right: 4px;
+ text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+ top: 4px;
+}
+
+.status__video-player-spoiler {
+ color: #fff;
+ text-shadow: 0px 1px 1px #000, 1px 0px 1px #000;
+}
+
+.status__video-player-expand {
+ z-index: 100;
+}
+
+.status__video-player-mute {
+ z-index: 5;
+}
+
+.media-spoiler-video {
+ background-size: cover;
+ cursor: pointer;
+ margin-top: 8px;
+ position: relative;
+}
+
+.media-spoiler-video-play-icon {
+ border-radius: 100px;
+ color: rgba(255, 255, 255, 0.8);
+ fontSize: 36px;
+ padding: 5px;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+/* End Video Player */
cat aescling's git repositories / mastodon.git / commitdiff