mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix css

Browse Source
This commit is contained in:
YoheiZuho
2024-01-01 10:43:45 +00:00
parent 0bf9f469c5
commit 05611d249b
2 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/mastodon/components/status_emoji_reactions_bar.jsx
View File

@@ -34,16 +34,16 @@ class EmojiReactionButton extends React.PureComponent {
const { name, url, staticUrl, count, me } = this.props; const { name, url, staticUrl, count, me } = this.props;
const classList = { const classList = {
'emoji-reactions-bar__button': true, 'reactions-bar__item': true,
'toggled': me, 'active': me,
}; };
return ( return (
<button className={classNames(classList)} type='button' onClick={this.onClick}> <button className={classNames(classList)} type='button' onClick={this.onClick}>
<span className='emoji'> <span className='reactions-bar__item__emoji'>
<EmojiView name={name} url={url} staticUrl={staticUrl} /> <EmojiView name={name} url={url} staticUrl={staticUrl} />
</span> </span>
<span className='count'>{count}</span> <span className='reactions-bar__item__count'>{count}</span>
</button> </button>
); );
} }

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

@@ -1421,11 +1421,13 @@ body > [data-popper-placement] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px 8px; gap: 4px 8px;
margin: 8px 0 2px 4px; margin: 8px 0 2px 0;
.emoji-reactions-bar__button { .emoji-reactions-bar__button {
background: lighten($ui-base-color, 16%); background: $white;
border: 0; border: 1px solid lighten($ui-base-color, 8%);
border-radius: 3px;
padding: 0 6px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-items: center; justify-items: center;
@@ -1433,7 +1435,8 @@ body > [data-popper-placement] {
height: 20px; height: 20px;
&.toggled { &.toggled {
background: darken($ui-primary-color, 16%); background-color: mix($white, $ui-highlight-color, 80%);
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
} }
.emoji { .emoji {
@@ -1457,7 +1460,7 @@ body > [data-popper-placement] {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 18px; gap: 18px;
margin-top: 16px; //margin-top: 16px;
} }
.detailed-status__action-bar-dropdown { .detailed-status__action-bar-dropdown {