[frontend] Improving styling on disabled renote button

This commit is contained in:
Lilian 2024-07-05 00:41:01 +02:00
parent b7ed190ff2
commit 0eb94e6e4b
No known key found for this signature in database
2 changed files with 14 additions and 4 deletions

View file

@ -20,17 +20,17 @@
<button class="btn" @onclick="Reply" @onclick:stopPropagation="true"> <button class="btn" @onclick="Reply" @onclick:stopPropagation="true">
<Icon Name="Icons.ArrowUUpLeft" Size="1.3em"/> <Icon Name="Icons.ArrowUUpLeft" Size="1.3em"/>
</button> </button>
<button class="btn" @onclick="Renote" @onclick:stopPropagation="true"> <button class="btn @(RenotePossible ? "" : "disabled")" @onclick="Renote" @onclick:stopPropagation="true">
@if (RenotePossible) @if (RenotePossible)
{ {
<Icon Name="Icons.Repeat" Size="1.3em"/> <Icon Name="Icons.Repeat" Size="1.3em"/>
} }
else else
{ {
<Icon Name="Icons.Lock" Size="1.3em"/> <Icon ExtraClasses="faded" Name="Icons.Lock" Size="1.3em"/>
} }
@if (Renotes > 0) @if (Renotes > 0)
{ {
<span class="renote-count">@Renotes</span> <span class="renote-count">@Renotes</span>
} }
</button> </button>

View file

@ -8,7 +8,6 @@
min-width: 2.5em; min-width: 2.5em;
height: 2em; height: 2em;
padding: 0.75em; padding: 0.75em;
/*margin-right: 0.5em;*/
background-color: var(--foreground-color); background-color: var(--foreground-color);
width: fit-content; width: fit-content;
} }
@ -24,4 +23,15 @@
.positioned { .positioned {
position: relative; position: relative;
top: 0; top: 0;
}
.disabled {
cursor: not-allowed;
}
::deep {
.faded {
cursor: not-allowed;
opacity: 50%;
}
} }