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 {
white-space: nowrap;
.status-deck {
header {
white-space: nowrap;
}
header h1 {
min-width: 0;
flex-grow: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
align-self: stretch;
}
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);
}
}
.status-deck header h1 {
min-width: 0;
flex-grow: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
align-self: stretch;
}
.status-deck header h1 .deck-back {
margin-left: -16px;
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.hero-heading {

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);