Make refresh button more prominent

This commit is contained in:
Lim Chee Aun 2024-01-16 15:45:57 +08:00
parent 04d431cf71
commit 37c784dad2
2 changed files with 29 additions and 13 deletions

View file

@ -1,7 +1,8 @@
.status-deck header {
.status-deck {
header {
white-space: nowrap;
}
.status-deck header h1 {
header h1 {
min-width: 0;
flex-grow: 1;
text-overflow: ellipsis;
@ -9,10 +10,25 @@
white-space: nowrap;
align-self: stretch;
}
.status-deck header h1 .deck-back {
header h1 .deck-back {
margin-left: -16px;
}
.button-refresh .icon {
animation: spin 1s linear;
}
.button-refresh:is(:hover, :focus) .icon {
transition: transform 1s linear;
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.hero-heading {
font-size: var(--text-size);
display: inline-block;

View file

@ -1118,7 +1118,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
{showRefresh && (
<button
type="button"
class="plain4"
class="plain button-refresh"
onClick={() => {
states.reloadStatusPage++;
setShowRefresh(false);