Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 00:38:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

💅 Aesthetic changes

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-19 13:38:16 +08:00
parent 1826b01103
commit 8c97dcc5bc
3 changed files with 107 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.css
View file

@ -197,7 +197,6 @@ a.mention span {
}
.timeline.contextual > li .replies {
margin-top: -16px;
font-size: 90%;
}
.timeline.contextual > li .replies :is(ul, li) {
margin: 0;

31
src/components/status.css
View file

@ -455,6 +455,7 @@ a.card:hover {
.status .extra-meta {
padding-top: 8px;
color: var(--text-insignificant-color);
font-size: 90%;
}
.status .extra-meta * {
vertical-align: middle;
@ -472,7 +473,7 @@ a.card:hover {
}
.status.large .extra-meta {
padding-top: 0;
margin-left: calc(-50px - 8px);
margin-left: calc(-50px - 16px);
}
/* ACTIONS */
@ -480,32 +481,36 @@ a.card:hover {
.status .actions {
display: flex;
gap: 8px;
justify-content: space-between;
}
.status.large .actions {
padding-top: 8px;
padding-top: 4px;
padding-bottom: 16px;
margin-left: calc(-50px - 16px);
color: var(--text-insignificant-color);
border-top: 1px solid var(--outline-color);
margin-top: 8px;
}
.status .actions > button {
.status .action.has-count {
flex: 1;
}
.status .action > button {
min-height: 40px;
min-width: 40px;
padding: 0 8px;
font-variant-numeric: tabular-nums;
}
.status .actions > button.plain {
.status .action > button.plain {
color: inherit;
border: 1.5px solid transparent;
}
.status .actions > button.plain:hover {
.status .action > button.plain:hover {
color: var(--link-color);
background-color: var(--button-plain-bg-hover-color);
}
.status .actions > button.plain.reblog-button:hover {
.status .action > button.plain.reblog-button:hover {
color: var(--reblog-color);
}
.status .actions > button.plain.reblog-button.checked {
.status .action > button.plain.reblog-button.checked {
color: var(--reblog-color);
border-color: var(--reblog-color);
}
@ -524,13 +529,13 @@ a.card:hover {
opacity: 0;
}
}
.status .actions > button.plain.reblog-button.checked .icon {
.status .action > button.plain.reblog-button.checked .icon {
animation: reblogged 1s ease-in-out;
}
.status .actions > button.plain.favourite-button:hover {
.status .action > button.plain.favourite-button:hover {
color: var(--favourite-color);
}
.status .actions > button.plain.favourite-button.checked {
.status .action > button.plain.favourite-button.checked {
color: var(--favourite-color);
border-color: var(--favourite-color);
}
@ -552,11 +557,11 @@ a.card:hover {
opacity: 0;
}
}
.status .actions > button.plain.favourite-button.checked .icon {
.status .action > button.plain.favourite-button.checked .icon {
transform-origin: bottom center;
animation: hearted 1s ease-in-out;
}
.status .actions > button.plain.bookmark-button.checked {
.status .action > button.plain.bookmark-button.checked {
color: var(--link-color);
border-color: var(--link-color);
}

11
src/components/status.jsx
View file

@ -429,6 +429,7 @@ function Status({
)}
</div>
<div class="actions">
<div class="action has-count">
<StatusButton
title="Reply"
alt="Comments"
@ -441,8 +442,10 @@ function Status({
};
}}
/>
</div>
{/* TODO: if visibility = private, only can reblog own statuses */}
{visibility !== 'direct' && (
<div class="action has-count">
<StatusButton
checked={reblogged}
title={['Boost', 'Unboost']}
@ -474,7 +477,9 @@ function Status({
}
}}
/>
</div>
)}
<div class="action has-count">
<StatusButton
checked={favourited}
title={['Favourite', 'Unfavourite']}
@ -488,7 +493,8 @@ function Status({
states.statuses.set(statusID, {
...status,
favourited: !favourited,
favouritesCount: favouritesCount + (favourited ? -1 : 1),
favouritesCount:
favouritesCount + (favourited ? -1 : 1),
});
if (favourited) {
const newStatus = await masto.statuses.unfavourite(id);
@ -502,6 +508,8 @@ function Status({
}
}}
/>
</div>
<div class="action">
<StatusButton
checked={bookmarked}
title={['Bookmark', 'Unbookmark']}
@ -527,6 +535,7 @@ function Status({
}
}}
/>
</div>
{isSelf && (
<span class="menu-container">
<button type="button" title="More" class="plain more-button">