@@ -7,16 +7,6 @@ import Permalink from '../../../components/permalink'; | |||
import emojify from '../../../emoji'; | |||
import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser'; | |||
const messageStyle = { | |||
marginLeft: '68px', | |||
padding: '8px 0', | |||
paddingBottom: '0', | |||
cursor: 'default', | |||
color: '#d9e1e8', | |||
fontSize: '15px', | |||
position: 'relative' | |||
}; | |||
const linkStyle = { | |||
fontWeight: '500' | |||
}; | |||
@@ -32,9 +22,9 @@ const Notification = React.createClass({ | |||
renderFollow (account, link) { | |||
return ( | |||
<div className='notification'> | |||
<div style={messageStyle}> | |||
<div className='notification__message'> | |||
<div style={{ position: 'absolute', 'left': '-26px'}}> | |||
<i className='fa fa-fw fa-user-plus' style={{ color: '#2b90d9' }} /> | |||
<i className='fa fa-fw fa-user-plus' /> | |||
</div> | |||
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} /> | |||
@@ -52,7 +42,7 @@ const Notification = React.createClass({ | |||
renderFavourite (notification, link) { | |||
return ( | |||
<div className='notification'> | |||
<div style={messageStyle}> | |||
<div className='notification__message'> | |||
<div style={{ position: 'absolute', 'left': '-26px'}}> | |||
<i className='fa fa-fw fa-star' style={{ color: '#ca8f04' }} /> | |||
</div> | |||
@@ -68,9 +58,9 @@ const Notification = React.createClass({ | |||
renderReblog (notification, link) { | |||
return ( | |||
<div className='notification'> | |||
<div style={messageStyle}> | |||
<div className='notification__message'> | |||
<div style={{ position: 'absolute', 'left': '-26px'}}> | |||
<i className='fa fa-fw fa-retweet' style={{ color: '#2b90d9' }} /> | |||
<i className='fa fa-fw fa-retweet' /> | |||
</div> | |||
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> | |||
@@ -1,18 +1,6 @@ | |||
import PureRenderMixin from 'react-addons-pure-render-mixin'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
const outerStyle = { | |||
display: 'flex', | |||
cursor: 'pointer', | |||
fontSize: '14px', | |||
border: '1px solid #363c4b', | |||
borderRadius: '4px', | |||
color: '#616b86', | |||
marginTop: '14px', | |||
textDecoration: 'none', | |||
overflow: 'hidden' | |||
}; | |||
const contentStyle = { | |||
flex: '1 1 auto', | |||
padding: '8px', | |||
@@ -20,25 +8,6 @@ const contentStyle = { | |||
overflow: 'hidden' | |||
}; | |||
const titleStyle = { | |||
display: 'block', | |||
fontWeight: '500', | |||
marginBottom: '5px', | |||
color: '#d9e1e8', | |||
overflow: 'hidden', | |||
textOverflow: 'ellipsis', | |||
whiteSpace: 'nowrap' | |||
}; | |||
const descriptionStyle = { | |||
color: '#d9e1e8' | |||
}; | |||
const imageOuterStyle = { | |||
flex: '0 0 100px', | |||
background: '#373b4a' | |||
}; | |||
const imageStyle = { | |||
display: 'block', | |||
width: '100%', | |||
@@ -77,20 +46,20 @@ const Card = React.createClass({ | |||
if (card.get('image')) { | |||
image = ( | |||
<div style={imageOuterStyle}> | |||
<div className='status-card__image'> | |||
<img src={card.get('image')} alt={card.get('title')} style={imageStyle} /> | |||
</div> | |||
); | |||
} | |||
return ( | |||
<a style={outerStyle} href={card.get('url')} className='status-card'> | |||
<a href={card.get('url')} className='status-card'> | |||
{image} | |||
<div style={contentStyle}> | |||
<strong style={titleStyle} title={card.get('title')}>{card.get('title')}</strong> | |||
<p style={descriptionStyle}>{card.get('description').substring(0, 50)}</p> | |||
<span style={hostStyle}>{getHostname(card.get('url'))}</span> | |||
<div className='status-card__content' style={contentStyle}> | |||
<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> | |||
</div> | |||
</a> | |||
); | |||
@@ -62,7 +62,7 @@ const DetailedStatus = React.createClass({ | |||
{media} | |||
<div style={{ marginTop: '15px', color: '#616b86', fontSize: '14px', lineHeight: '18px' }}> | |||
<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> | |||
</div> | |||
</div> | |||
@@ -35,7 +35,7 @@ | |||
.column-icon { | |||
color: $color3; | |||
background: lighten($color1, 4%); | |||
&:hover { | |||
color: lighten($color3, 7%); | |||
} | |||
@@ -188,7 +188,7 @@ | |||
a.status__content__spoiler-link { | |||
display: inline-block; | |||
border-radius: 2px; | |||
color: lighten($color1, 6%); | |||
color: lighten($color1, 8%); | |||
font-weight: 500; | |||
font-size: 11px; | |||
padding: 0px 6px; | |||
@@ -201,7 +201,7 @@ a.status__content__spoiler-link { | |||
padding-left: 68px; | |||
position: relative; | |||
min-height: 48px; | |||
border-bottom: 1px solid lighten($color1, 6%); | |||
border-bottom: 1px solid lighten($color1, 8%); | |||
cursor: default; | |||
.status__relative-time { | |||
@@ -228,7 +228,7 @@ a.status__content__spoiler-link { | |||
.detailed-status { | |||
background: lighten($color1, 4%); | |||
.status__content { | |||
font-size: 19px; | |||
line-height: 24px; | |||
@@ -240,12 +240,19 @@ a.status__content__spoiler-link { | |||
} | |||
} | |||
.detailed-status__meta { | |||
margin-top: 15px; | |||
color: lighten($color1, 26%); | |||
font-size: 14px; | |||
line-height: 18px; | |||
} | |||
.detailed-status__action-bar { | |||
background: lighten($color1, 4%); | |||
display: flex; | |||
flex-direction: row; | |||
border-top: 1px solid lighten($color1, 6%); | |||
border-bottom: 1px solid lighten($color1, 6%); | |||
border-top: 1px solid lighten($color1, 8%); | |||
border-bottom: 1px solid lighten($color1, 8%); | |||
padding: 10px 0; | |||
} | |||
@@ -260,7 +267,7 @@ a.status__content__spoiler-link { | |||
.account { | |||
padding: 10px; | |||
border-bottom: 1px solid lighten($color1, 6%); | |||
border-bottom: 1px solid lighten($color1, 8%); | |||
.account__display-name { | |||
flex: 1 1 auto; | |||
@@ -302,7 +309,7 @@ a.status__content__spoiler-link { | |||
font-weight: 400; | |||
overflow: hidden; | |||
color: $color3; | |||
p { | |||
margin-bottom: 20px; | |||
@@ -329,8 +336,8 @@ a.status__content__spoiler-link { | |||
} | |||
.account__action-bar { | |||
border-top: 1px solid lighten($color1, 6%); | |||
border-bottom: 1px solid lighten($color1, 6%); | |||
border-top: 1px solid lighten($color1, 8%); | |||
border-bottom: 1px solid lighten($color1, 8%); | |||
line-height: 36px; | |||
overflow: hidden; | |||
flex: 0 0 auto; | |||
@@ -341,7 +348,7 @@ a.status__content__spoiler-link { | |||
text-decoration: none; | |||
overflow: hidden; | |||
width: 80px; | |||
border-left: 1px solid lighten($color1, 6%); | |||
border-left: 1px solid lighten($color1, 8%); | |||
padding: 10px 5px; | |||
& > span { | |||
@@ -426,6 +433,20 @@ a.status__content__spoiler-link { | |||
} | |||
} | |||
.notification__message { | |||
margin-left: 68px; | |||
padding: 8px 0; | |||
padding-bottom: 0; | |||
cursor: default; | |||
color: $color3; | |||
font-size: 15px; | |||
position: relative; | |||
.fa { | |||
color: $color4; | |||
} | |||
} | |||
.notification__display-name { | |||
color: inherit; | |||
text-decoration: none; | |||
@@ -650,7 +671,7 @@ a.status__content__spoiler-link { | |||
.tabs-bar { | |||
display: flex; | |||
background: lighten($color1, 6%); | |||
background: lighten($color1, 8%); | |||
flex: 0 0 auto; | |||
overflow-y: auto; | |||
} | |||
@@ -664,7 +685,7 @@ a.status__content__spoiler-link { | |||
text-align: center; | |||
font-size:12px; | |||
font-weight: 500; | |||
border-bottom: 2px solid lighten($color1, 6%); | |||
border-bottom: 2px solid lighten($color1, 8%); | |||
&.active { | |||
border-bottom: 2px solid $color4; | |||
@@ -854,9 +875,9 @@ a.status__content__spoiler-link { | |||
} | |||
.column-link { | |||
background: lighten($color1, 6%); | |||
background: lighten($color1, 8%); | |||
color: $color5; | |||
&:hover { | |||
background: lighten($color1, 11%); | |||
} | |||
@@ -974,11 +995,40 @@ button.active i.fa-retweet { | |||
} | |||
.status-card { | |||
display: flex; | |||
cursor: pointer; | |||
font-size: 14px; | |||
border: 1px solid lighten($color1, 8%); | |||
border-radius: 4px; | |||
color: lighten($color1, 26%); | |||
margin-top: 14px; | |||
text-decoration: none; | |||
overflow: hidden; | |||
&:hover { | |||
background: lighten($color1, 6%); | |||
background: lighten($color1, 8%); | |||
} | |||
} | |||
.status-card__title { | |||
display: block; | |||
font-weight: 500; | |||
margin-bottom: 5px; | |||
color: $color3; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
} | |||
.status-card__description { | |||
color: $color3; | |||
} | |||
.status-card__image { | |||
flex: 0 0 100px; | |||
background: lighten($color1, 8%); | |||
} | |||
.load-more { | |||
display: block; | |||
color: lighten($color1, 26%); | |||
@@ -987,7 +1037,7 @@ button.active i.fa-retweet { | |||
text-decoration: none; | |||
&:hover { | |||
background: lighten($color1, 6%); | |||
background: lighten($color1, 8%); | |||
} | |||
} | |||
@@ -1037,8 +1087,8 @@ button.active i.fa-retweet { | |||
} | |||
.collapsable { | |||
color: $color5; | |||
background: lighten($color1, 6%); | |||
color: $color5; | |||
background: lighten($color1, 8%); | |||
} | |||
.media-spoiler { | |||
@@ -1047,17 +1097,17 @@ button.active i.fa-retweet { | |||
} | |||
.modal-container--preloader { | |||
background: lighten($color1, 6%); | |||
background: lighten($color1, 8%); | |||
} | |||
.account--panel { | |||
background: lighten($color1, 4%); | |||
border-top: 1px solid lighten($color1, 6%); | |||
border-bottom: 1px solid lighten($color1, 6%); | |||
border-top: 1px solid lighten($color1, 8%); | |||
border-bottom: 1px solid lighten($color1, 8%); | |||
} | |||
.column-settings--outer { | |||
background: lighten($color1, 6%); | |||
background: lighten($color1, 8%); | |||
} | |||
.column-settings--section { | |||
@@ -5,24 +5,24 @@ | |||
.entry { | |||
background: lighten($color2, 8%); | |||
&, .detailed-status.light { | |||
.detailed-status.light, .status.light { | |||
border-bottom: 1px solid $color2; | |||
} | |||
&:last-child { | |||
&, .detailed-status.light { | |||
&, .detailed-status.light, .status.light { | |||
border-bottom: 0; | |||
border-radius: 0 0 4px 4px; | |||
} | |||
} | |||
&:first-child { | |||
&, .detailed-status.light { | |||
&, .detailed-status.light, .status.light { | |||
border-radius: 4px 4px 0 0; | |||
} | |||
&:last-child { | |||
&, .detailed-status.light { | |||
&, .detailed-status.light, .status.light { | |||
border-radius: 4px; | |||
} | |||
} | |||