hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use SVG icons for boosts/faves

Browse Source 
And yeah I returned the boosts, and faves is now a star to match what
masto/akkoma does
This commit is contained in:
daudix
2024-02-27 21:50:58 +03:00
parent d0eaa63568
commit 21dc1ed7b1
2 changed files with 60 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
sass/_comments.scss
View File

@ -1,4 +1,8 @@
section#comments {
#load-comments {
cursor: pointer;
}
#comments-wrapper {
display: flex;
flex-direction: column;
@ -125,18 +129,23 @@ section#comments {
grid-area: interactions;
margin-top: 1rem;
.boosts,
.faves {
background-color: transparent;
border-radius: var(--rounded-corner);
color: var(--red-fg);
border-radius: 999px;
display: inline-block;
font-variant-numeric: tabular-nums;
padding: 0.5rem 1rem;
margin-right: 0.25rem;
padding: 0.25rem 0.75rem;
text-decoration: none;
transition: var(--transition);
svg {
margin-inline-end: 0.25rem;
vertical-align: -0.125em;
}
&:hover {
background-color: var(--red-bg);
box-shadow: var(--edge-highlight);
text-decoration: none;
}
@ -144,10 +153,21 @@ section#comments {
&:active {
transform: scale(var(--active));
}
}
&::before {
content: "❤️";
margin-inline-end: 0.25rem;
.boosts {
color: var(--yellow-fg);
&:hover {
background-color: var(--yellow-bg);
}
}
.faves {
color: var(--red-fg);
&:hover {
background-color: var(--red-bg);
}
}
}