tykayn
/
mastodon
mirror of https://framagit.org/tykayn/mastodon.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

🎨 make avatars a bit bigger 

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
This commit is contained in:
Baptiste Lemoine 2020-01-07 13:06:39 +01:00
parent 9e79e11091
commit fa91d39338
24 changed files with 385 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,27 +37,27 @@ class Account extends ImmutablePureComponent {
handleFollow = () => {
this.props.onFollow(this.props.account);
}
};
handleBlock = () => {
this.props.onBlock(this.props.account);
}
};
handleMute = () => {
this.props.onMute(this.props.account);
}
};
handleMuteNotifications = () => {
this.props.onMuteNotifications(this.props.account, true);
}
};
handleUnmuteNotifications = () => {
this.props.onMuteNotifications(this.props.account, false);
}
};
handleAction = () => {
this.props.onActionClick(this.props.account);
}
};
render () {
const { account, intl, hidden, onActionClick, actionIcon, actionTitle } = this.props;
@ -111,7 +111,10 @@ class Account extends ImmutablePureComponent {
<div className='account'>
<div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<div className='account__avatar-wrapper'><Avatar
account={account}
size={55}
/></div >
<DisplayName account={account} />
</Permalink>

4
app/javascript/mastodon/components/avatar.js
View File

@ -26,12 +26,12 @@ export default class Avatar extends React.PureComponent {
handleMouseEnter = () => {
if (this.props.animate) return;
this.setState({ hovering: true });
}
};
handleMouseLeave = () => {
if (this.props.animate) return;
this.setState({ hovering: false });
}
};
render() {
const { account, size, animate, inline } = this.props;

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

@ -503,12 +503,12 @@ class Status extends ImmutablePureComponent {
if (otherAccounts && otherAccounts.size > 0) {
statusAvatar = (<AvatarComposite
accounts={otherAccounts}
size={48}
size={55}
/>);
} else if (account === undefined || account === null) {
statusAvatar = (<Avatar
account={status.get('account')}
size={48}
size={55}
/>);
} else {
statusAvatar = (<AvatarOverlay

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

@ -1,10 +1,10 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import Button from 'mastodon/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { autoPlayGif, me, isStaff } from 'mastodon/initial_state';
import { autoPlayGif, isStaff, me } from 'mastodon/initial_state';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import Avatar from 'mastodon/components/avatar';
@ -70,7 +70,7 @@ class Header extends ImmutablePureComponent {
openEditProfile = () => {
window.open('/settings/profile', '_blank');
}
};
isStatusesPageActive = (match, location) => {
if (!match) {
@ -78,7 +78,7 @@ class Header extends ImmutablePureComponent {
}
return !location.pathname.match(/\/(followers|following)\/?$/);
}
};
_updateEmojis () {
const node = this.node;
@ -111,15 +111,15 @@ class Header extends ImmutablePureComponent {
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
};
setRef = (c) => {
this.node = c;
}
};
render () {
const { account, intl, domain, identity_proofs } = this.props;
@ -263,7 +263,10 @@ class Header extends ImmutablePureComponent {
<div className='account__header__bar'>
<div className='account__header__tabs'>
<a className='avatar' href={account.get('url')} rel='noopener noreferrer' target='_blank'>
<Avatar account={account} size={90} />
<Avatar
account={account}
size={120}
/>
</a>
<div className='spacer' />

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

@ -26,7 +26,7 @@ export default class NavigationBar extends ImmutablePureComponent {
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span >
<Avatar
account={this.props.account}
size={48}
size={55}
/>
</Permalink >

2
app/javascript/mastodon/features/direct_timeline/components/conversation.js
View File

@ -179,7 +179,7 @@ class Conversation extends ImmutablePureComponent {
<div className='conversation__avatar'>
<AvatarComposite
accounts={accounts}
size={48}
size={55}
/>
</div >

21
app/javascript/mastodon/features/directory/components/account_card.js
View File

@ -9,10 +9,10 @@ import DisplayName from 'mastodon/components/display_name';
import Permalink from 'mastodon/components/permalink';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import IconButton from 'mastodon/components/icon_button';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
import { shortNumberFormat } from 'mastodon/utils/numbers';
import { followAccount, unfollowAccount, blockAccount, unblockAccount, unmuteAccount } from 'mastodon/actions/accounts';
import { blockAccount, followAccount, unblockAccount, unfollowAccount, unmuteAccount } from 'mastodon/actions/accounts';
import { openModal } from 'mastodon/actions/modal';
import { initMuteModal } from 'mastodon/actions/mutes';
@ -113,27 +113,27 @@ class AccountCard extends ImmutablePureComponent {
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
};
handleFollow = () => {
this.props.onFollow(this.props.account);
}
};
handleBlock = () => {
this.props.onBlock(this.props.account);
}
};
handleMute = () => {
this.props.onMute(this.props.account);
}
};
setRef = (c) => {
this.node = c;
}
};
render () {
const { account, intl } = this.props;
@ -165,7 +165,10 @@ class AccountCard extends ImmutablePureComponent {
<div className='directory__card__bar'>
<Permalink className='directory__card__bar__name' href={account.get('url')} to={`/accounts/${account.get('id')}`}>
<Avatar account={account} size={48} />
<Avatar
account={account}
size={55}
/>
<DisplayName account={account} />
</Permalink>

5
app/javascript/mastodon/features/follow_requests/components/account_authorize.js
View File

@ -31,7 +31,10 @@ class AccountAuthorize extends ImmutablePureComponent {
<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 account={account} size={48} /></div>
<div className='account-authorize__avatar'><Avatar
account={account}
size={55}
/></div >
<DisplayName account={account} />
</Permalink>

143
app/javascript/mastodon/features/notifications/components/notification.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { HotKeys } from 'react-hotkeys';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -54,12 +54,12 @@ class Notification extends ImmutablePureComponent {
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
}
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
}
};
handleOpen = () => {
const { notification } = this.props;
@ -69,34 +69,34 @@ class Notification extends ImmutablePureComponent {
} else {
this.handleOpenProfile();
}
}
};
handleOpenProfile = () => {
const { notification } = this.props;
this.context.router.history.push(`/accounts/${notification.getIn(['account', 'id'])}`);
}
};
handleMention = e => {
e.preventDefault();
const { notification, onMention } = this.props;
onMention(notification.get('account'), this.context.router.history);
}
};
handleHotkeyFavourite = () => {
const { status } = this.props;
if (status) this.props.onFavourite(status);
}
};
handleHotkeyBoost = e => {
const { status } = this.props;
if (status) this.props.onReblog(status, e);
}
};
handleHotkeyToggleHidden = () => {
const { status } = this.props;
if (status) this.props.onToggleHidden(status);
}
};
getHandlers() {
return {
@ -117,18 +117,37 @@ class Notification extends ImmutablePureComponent {
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='user-plus' fixedWidth />
</div>
<div
className='notification notification-follow focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}
>
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
<span className='media'>
<span className='media-left'>
<AccountContainer
id={account.get('id')}
hidden={this.props.hidden}
/>
</span >
<span className='media-center'>
<FormattedMessage
id='notification.follow'
defaultMessage='{name} followed you'
values={{ name: link }}
/>
</span >
<span className='media-right'>
<Icon
id='user-plus'
fixedWidth
/>
</span >
</span >
</span >
</div>
<AccountContainer id={account.get('id')} hidden={this.props.hidden} />
</div >
</HotKeys >
);
@ -139,18 +158,36 @@ class Notification extends ImmutablePureComponent {
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-follow-request focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
<div
className='notification notification-follow-request focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage({
id : 'notification.follow_request',
defaultMessage: '{name} has requested to follow you',
}, { name: account.get('acct') }), notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='user' fixedWidth />
<Icon
id='user'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={{ name: link }} />
<FormattedMessage
id='notification.follow_request'
defaultMessage='{name} has requested to follow you'
values={{ name: link }}
/>
</span >
</div >
<FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
<FollowRequestContainer
id={account.get('id')}
withNote={false}
hidden={this.props.hidden}
/>
</div >
</HotKeys >
);
@ -178,14 +215,26 @@ class Notification extends ImmutablePureComponent {
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div
className='notification notification-favourite focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='star' className='star-icon' fixedWidth />
<Icon
id='star'
className='star-icon'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
<FormattedMessage
id='notification.favourite'
defaultMessage='{name} favourited your status'
values={{ name: link }}
/>
</span >
</div >
@ -210,14 +259,25 @@ class Notification extends ImmutablePureComponent {
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div
className='notification notification-reblog focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='retweet' fixedWidth />
<Icon
id='retweet'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
<FormattedMessage
id='notification.reblog'
defaultMessage='{name} boosted your status'
values={{ name: link }}
/>
</span >
</div >
@ -244,17 +304,30 @@ class Notification extends ImmutablePureComponent {
return (
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-poll focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}>
<div
className='notification notification-poll focusable'
tabIndex='0'
aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}
>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='tasks' fixedWidth />
<Icon
id='tasks'
fixedWidth
/>
</div >
<span title={notification.get('created_at')}>
{ownPoll ? (
<FormattedMessage id='notification.own_poll' defaultMessage='Your poll has ended' />
<FormattedMessage
id='notification.own_poll'
defaultMessage='Your poll has ended'
/>
) : (
<FormattedMessage id='notification.poll' defaultMessage='A poll you have voted in has ended' />
<FormattedMessage
id='notification.poll'
defaultMessage='A poll you have voted in has ended'
/>
)}
</span >
</div >
@ -279,7 +352,13 @@ class Notification extends ImmutablePureComponent {
const { notification } = this.props;
const account = notification.get('account');
const displayNameHtml = { __html: account.get('display_name_html') };
const link = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
const link = (<bdi ><Permalink
className='notification__display-name'
href={account.get('url')}
title={account.get('acct')}
to={`/accounts/${account.get('id')}`}
dangerouslySetInnerHTML={displayNameHtml}
/></bdi >);
switch (notification.get('type')) {
case 'follow':

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

@ -45,15 +45,15 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
e.stopPropagation();
}
};
handleOpenVideo = (media, startTime) => {
this.props.onOpenVideo(media, startTime);
}
};
handleExpandedToggle = () => {
this.props.onToggleHidden(this.props.status);
}
};
_measureHeight (heightJustChanged) {
if (this.props.measureHeight && this.node) {
@ -68,7 +68,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
setRef = c => {
this.node = c;
this._measureHeight();
}
};
componentDidUpdate (prevProps, prevState) {
this._measureHeight(prevState.height !== this.state.height);
@ -86,7 +86,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
}
};
render () {
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
@ -211,8 +211,14 @@ export default class DetailedStatus extends ImmutablePureComponent {
<div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', { compact })}>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
<div className='detailed-status__display-avatar'><Avatar
account={status.get('account')}
size={55}
/></div >
<DisplayName
account={status.get('account')}
localDomain={this.props.domain}
/>
</a>
<StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />

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

@ -26,8 +26,21 @@ export default class ActionsModal extends ImmutablePureComponent {
return (
<li key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
{icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
<a
href={href}
target='_blank'
rel='noopener noreferrer'
onClick={this.props.onClick}
data-index={i}
className={classNames({ active })}
>
{icon && <IconButton
title={text}
icon={icon}
role='presentation'
tabIndex='-1'
inverted
/>}
<div >
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div >
<div >{meta}</div >
@ -35,7 +48,7 @@ export default class ActionsModal extends ImmutablePureComponent {
</a >
</li >
);
}
};
render () {
const status = this.props.status && (
@ -49,7 +62,10 @@ export default class ActionsModal extends ImmutablePureComponent {
<a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
<Avatar account={this.props.status.get('account')} size={48} />
<Avatar
account={this.props.status.get('account')}
size={55}
/>
</div>
<DisplayName account={this.props.status.get('account')} />

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

@ -1,7 +1,7 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import Button from '../../../components/button';
import StatusContent from '../../../components/status_content';
import Avatar from '../../../components/avatar';
@ -37,7 +37,7 @@ class BoostModal extends ImmutablePureComponent {
handleReblog = () => {
this.props.onReblog(this.props.status);
this.props.onClose();
}
};
handleAccountClick = (e) => {
if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
@ -45,11 +45,11 @@ class BoostModal extends ImmutablePureComponent {
this.props.onClose();
this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
}
}
};
setRef = (c) => {
this.button = c;
}
};
render () {
const { status, intl } = this.props;
@ -66,7 +66,10 @@ class BoostModal extends ImmutablePureComponent {
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>
<div className='status__avatar'>
<Avatar account={status.get('account')} size={48} />
<Avatar
account={status.get('account')}
size={55}
/>
</div>
<DisplayName account={status.get('account')} />

38
app/javascript/mastodon/features/ui/components/link_footer.js
View File

@ -129,25 +129,25 @@ class LinkFooter extends React.PureComponent {
<div className='extras'>
<button className='mod-theme btn btn-block btn-small btn-primary pull-left'>
{this.themeIsDark ? (
<span
onClick={this.setState('theme', 'light')}
title='set light'
>
<i className='fa fa-pencil-o' /> to light
</span >
) : (
<span
onClick={
this.changeTheme
}
title='set dark'
>
<i className='fa fa-pencil' /> to dark
</span >
)}
</button >
{/*<button className='mod-theme btn btn-block btn-small btn-primary pull-left'>*/}
{/* {this.themeIsDark ? (*/}
{/* <span*/}
{/* onClick={this.setState('theme', 'light')}*/}
{/* title='set light'*/}
{/* >*/}
{/* <i className='fa fa-pencil-o' /> to light*/}
{/* </span >*/}
{/* ) : (*/}
{/* <span*/}
{/* onClick={*/}
{/* this.changeTheme*/}
{/* }*/}
{/* title='set dark'*/}
{/* >*/}
{/* <i className='fa fa-pencil' /> to dark*/}
{/* </span >*/}
{/* )}*/}
{/*</button >*/}
{this.state.enableChristmasSnow && (
<div

6
app/javascript/styles/bliss/about.scss
View File

@ -711,9 +711,9 @@
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
width: $avatar-side;
height: $avatar-side;
background-size: $avatar-side $avatar-side;
}
}

21
app/javascript/styles/bliss/components.scss
View File

@ -2197,27 +2197,16 @@ a.account__display-name {
}
.notification {
&__message {
margin-left: 48px + 15px * 2;
padding-top: 15px;
}
&__favourite-icon-wrapper {
left: -32px;
}
.status {
padding-top: 8px;
}
background-color: $classic-base-color !important;
padding: 1em 0;
color: $ui-highlight-color;
border-left: $ui-highlight-color 5px solid;
.account {
padding: 0;
padding-top: 8px;
}
.account__avatar-wrapper {
margin-left: 17px;
margin-right: 15px;
}
}
}
}

4
app/javascript/styles/bliss/footer.scss
View File

@ -181,12 +181,12 @@
@media all and(min-width: $maximum-width) {
& {
width: 30vw;
width: 25vw;
}
}
@media all and(max-width: $maximum-width) {
& {
width: 27vw;
width: 22vw;
height: 50vh;
overflow-y: auto;
padding-right: 1em;

2
app/javascript/styles/bliss/variables.scss
View File

@ -55,6 +55,8 @@ $small-breakpoint: 960px;
$xs-top-breakpoint: 738px;
$xs-breakpoint: 675px;
// pictures
$avatar-side: 55px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;

6
app/javascript/styles/bliss/widgets.scss
View File

@ -95,9 +95,9 @@
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
width: $avatar-side;
height: $avatar-side;
background-size: $avatar-side $avatar-side;
}
}
}

1
app/javascript/styles/contrast/variables.scss
View File

@ -22,3 +22,4 @@ $action-button-color: #8d9ac2;
$inverted-text-color: $black !default;
$lighter-text-color: darken($ui-base-color, 6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default;
$avatar-side: 55px;

52
app/javascript/styles/custom.scss
View File

@ -1,26 +1,26 @@
@import 'large_center';
// custom sheet made on https://www.cipherbliss.com
// Commonly used web colors
$black: #fff; // Black
$white: #000; // White
$success-green: #6bbd77 !default; // Padua
$error-red: #d4839b !default; // Cerise
$warning-red: #528dc8 !default; // Sunset Orange
$gold-star: #00ec84 !default; // Dark Goldenrod
// User Interface Colors
$ui-base-color: #313644; // Midnight Express
$ui-base-lighter-color: #bdd2d6;
$ui-primary-color: #a1ccff; // Echo Blue
$ui-secondary-color: #7fc0ff; // Pattens Blue
$ui-highlight-color: #00a7d1; // Summer Sky
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
// fix
// then we import the rest of the world
@import 'application';
@import 'bliss/messaging';
//@import 'large_center';
//// custom sheet made on https://www.cipherbliss.com
//// Commonly used web colors
//$black: #fff; // Black
//$white: #000; // White
//$success-green: #6bbd77 !default; // Padua
//$error-red: #d4839b !default; // Cerise
//$warning-red: #528dc8 !default; // Sunset Orange
//$gold-star: #00ec84 !default; // Dark Goldenrod
//
//// User Interface Colors
//$ui-base-color: #313644; // Midnight Express
//$ui-base-lighter-color: #bdd2d6;
//$ui-primary-color: #a1ccff; // Echo Blue
//$ui-secondary-color: #7fc0ff; // Pattens Blue
//$ui-highlight-color: #00a7d1; // Summer Sky
//$avatar-side: 55px;
//// Variables for components
//$media-modal-media-max-width: 100%;
//// put margins on top and bottom of image to avoid the screen covered by image.
//$media-modal-media-max-height: 80%;
//// fix
//
//// then we import the rest of the world
//@import 'application';
//@import 'bliss/messaging';

6
app/javascript/styles/mastodon/about.scss
View File

@ -751,9 +751,9 @@ $small-breakpoint: 960px;
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
width: $avatar-side;
height: $avatar-side;
background-size: $avatar-side $avatar-side;
}
}

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

@ -949,8 +949,12 @@
}
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
opacity: 1;
@ -3467,9 +3471,15 @@ a.status-card.compact:hover {
}
@keyframes loader-label {
0% { opacity: 0.25; }
30% { opacity: 1; }
100% { opacity: 0.25; }
0% {
opacity: 0.25;
}
30% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
.video-error-cover {
@ -5163,6 +5173,7 @@ a.status-card.compact:hover {
overflow: hidden;
position: absolute;
}
/* End Media Gallery */
.detailed,
@ -5834,9 +5845,15 @@ noscript {
}
@keyframes flicker {
0% { opacity: 1; }
30% { opacity: 0.75; }
100% { opacity: 1; }
0% {
opacity: 1;
}
30% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 630px) and (max-height: 400px) {

2
app/javascript/styles/mastodon/variables.scss
View File

@ -76,3 +76,5 @@ $no-gap-breakpoint: 415px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;
$avatar-side: 55px;

4
app/javascript/styles/mastodon/widgets.scss
View File

@ -372,8 +372,8 @@
.account__avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
width: $avatar-side;
height: $avatar-side;
border-radius: 50%;
position: relative;
margin-left: -10px;