notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Reaction title, consistent custom emoji, fixed gaps, and translucent reacted background color

Browse source
This commit is contained in:
pancakes 2024-12-02 14:46:01 +10:00 • committed by Laura Hausmann
parent 7d2af70250
commit 39426da00e
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Iceshrimp.Frontend/Components/Note/NoteFooter.razor.css
View file

@ -3,6 +3,10 @@
} }
.reactions { .reactions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }

2
Iceshrimp.Frontend/Components/Note/NoteReaction.razor
View file

@ -1,5 +1,5 @@
@using Iceshrimp.Shared.Schemas.Web @using Iceshrimp.Shared.Schemas.Web
<button @onclick="React" class="reaction @(Reaction.Reacted ? "reacted" : "")"> <button @onclick="React" class="reaction @(Reaction.Reacted ? "reacted" : "")" title="@Reaction.Name">
<span class="icon"> <span class="icon">
@if (Reaction.Url == null) @if (Reaction.Url == null)
{ {

8
Iceshrimp.Frontend/Components/Note/NoteReaction.razor.css
View file

@ -3,13 +3,12 @@
align-items: center; align-items: center;
line-height: 1; line-height: 1;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
margin-right: 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
border: 0.1em solid var(--notice-color); border: 0.1em solid var(--notice-color);
} }
.reacted { .reacted {
background-color: var(--notice-color); background-color: color-mix(in srgb, var(--notice-color) 30%, transparent);
color: var(--foreground-color); color: var(--foreground-color);
} }
@ -18,7 +17,10 @@
} }
.custom-reaction { .custom-reaction {
width: 1em; display: inline-block;
height: 1em;
width: auto;
vertical-align: -0.1em;
} }
.icon { .icon {