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,16 +1,32 @@
.status-deck header { .status-deck {
header {
white-space: nowrap; white-space: nowrap;
} }
.status-deck header h1 { header h1 {
min-width: 0; min-width: 0;
flex-grow: 1; flex-grow: 1;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
align-self: stretch; align-self: stretch;
} }
.status-deck header h1 .deck-back { header h1 .deck-back {
margin-left: -16px; 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 { .hero-heading {

View file

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