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

[frontend/components] Improve ticker appearance

Browse source
This commit is contained in:
pancakes 2025-03-29 12:21:47 +10:00
parent 9127d886ca
commit 60c3992a69
No known key found for this signature in database
2 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Iceshrimp.Frontend/Components/Note/NoteMetadata.razor
View file

@ -34,14 +34,14 @@
}
</span>
</span>
<span class="ticker" title="@InstanceName">
<span class="ticker" style="@(InstanceColor != null ? "--color: " + InstanceColor + "CC;" : "")" title="@InstanceName">
@if (InstanceIcon != null)
{
<img class="icon" src="@InstanceIcon" alt="icon"/>
}
@if (InstanceName != null)
{
<span class="instance" style="@(InstanceColor != null ? "--color: " + InstanceColor + ";" : "")">@InstanceName</span>
<span class="instance">@InstanceName</span>
}
</span>
</div>

7
Iceshrimp.Frontend/Components/Note/NoteMetadata.razor.css
View file

@ -31,6 +31,7 @@
}
.ticker {
--color: var(--highlight-color);
display: inline-flex;
gap: 0.5em;
align-items: center;
@ -38,6 +39,9 @@
align-self: start;
/*Margin on the left so non truncated names are aligned to the right*/
margin-left: auto;
padding: 0 0.2rem;
background-color: var(--color);
border-radius: 4px;
font-size: 0.9em;
text-overflow: ellipsis;
overflow: clip;
@ -49,8 +53,7 @@
line-height: 1;
}
.instance {
--color: var(--font-color);
color: var(--color);
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
}