Fix loading state regression in markup content (#25349)

Fix regressions from https://github.com/go-gitea/gitea/pull/25219:

Math before and after:
<img width="630" alt="Screenshot 2023-06-18 at 16 00 52"
src="https://github.com/go-gitea/gitea/assets/115237/f2a01e4b-31ca-407c-8fc3-f0aec569b48e">
<img width="680" alt="Screenshot 2023-06-18 at 16 03 44"
src="https://github.com/go-gitea/gitea/assets/115237/faab8e39-f088-45ab-b460-15fc3654c99d">

Mermain before and after:
<img width="810" alt="Screenshot 2023-06-18 at 15 58 56"
src="https://github.com/go-gitea/gitea/assets/115237/d8c24e81-4702-4e17-b791-7dffe090c068">
<img width="786" alt="Screenshot 2023-06-18 at 15 58 37"
src="https://github.com/go-gitea/gitea/assets/115237/3a268e10-c071-410d-a66e-8c4427d1d61c">
This commit is contained in:
silverwind 2023-06-19 10:00:18 +02:00 committed by GitHub
parent a1c5057fe8
commit c09d0b4952
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -18,10 +18,11 @@
position: absolute; position: absolute;
display: block; display: block;
height: 4rem; height: 4rem;
max-height: 50%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
left: 50%; left: 50%;
top: 50%; top: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: isloadingspin 500ms infinite linear; animation: isloadingspin 500ms infinite linear;
border-width: 4px; border-width: 4px;
@ -40,6 +41,15 @@
height: var(--height-loading); height: var(--height-loading);
} }
.markup .is-loading > * {
visibility: hidden;
}
.markup .is-loading {
color: transparent;
background: transparent;
}
/* TODO: not needed, use "is-loading small-loading-icon" instead */ /* TODO: not needed, use "is-loading small-loading-icon" instead */
.btn-octicon.is-loading::after { .btn-octicon.is-loading::after {
border-width: 2px; border-width: 2px;