mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-24 13:09:23 -05:00
a43ea22479
Co-author: @wxiaoguang Close #25096 The way to fix it in this PR is to change form submit to fetch using formData, and add flags to avoid post repeatedly. Should be able to apply to more forms that have the same issue after this PR. In the demo below, 'approve' is clicked several times, and then 'comment' is clicked several time after 'request changes' clicked. After: https://github.com/go-gitea/gitea/assets/17645053/beabeb1d-fe66-4b76-b048-4f022b4e83a0 Update: screenshots from /devtest >  > >  > >  --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
@keyframes isloadingspin {
|
|
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
.is-loading {
|
|
pointer-events: none !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.is-loading > * {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.is-loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
height: 4rem;
|
|
max-height: 50%;
|
|
aspect-ratio: 1 / 1;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: isloadingspin 500ms infinite linear;
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.is-loading.small-loading-icon::after {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.markup pre.is-loading,
|
|
.editor-loading.is-loading,
|
|
.pdf-content.is-loading {
|
|
height: var(--height-loading);
|
|
}
|
|
|
|
/* TODO: not needed, use "is-loading small-loading-icon" instead */
|
|
.btn-octicon.is-loading::after {
|
|
border-width: 2px;
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
/* TODO: not needed, use "is-loading small-loading-icon" instead */
|
|
code.language-math.is-loading::after {
|
|
padding: 0;
|
|
border-width: 2px;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.8);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 2s linear;
|
|
}
|