gitea/web_src/css/modules/animations.css
silverwind 1e1e8b5d43
Fix OAuth loading state (#24788)
Fix regression from https://github.com/go-gitea/gitea/pull/24740 where
the loading state was not showing because the `oauth-login-image` class
was removed. Replaced the Fomantic loader with a pure CSS loader and
cleaned up the HTML.

Diff:
https://github.com/go-gitea/gitea/pull/24788/files?diff=unified&w=1


![](https://github.com/go-gitea/gitea/assets/115237/b5b4137f-9821-464b-9777-858fe85d9e03)

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-18 11:50:11 +00:00

87 lines
1.5 KiB
CSS

@keyframes isloadingspin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.is-loading {
background: transparent !important;
color: transparent !important;
border: transparent !important;
pointer-events: none !important;
position: relative !important;
overflow: hidden !important;
}
.is-loading::after {
content: "";
position: absolute;
display: block;
width: 4rem;
height: 4rem;
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%;
}
.markup pre.is-loading,
.editor-loading.is-loading {
height: var(--height-loading);
}
.btn-octicon.is-loading::after {
border-width: 2px;
height: 1.25rem;
width: 1.25rem;
}
code.language-math.is-loading::after {
padding: 0;
border-width: 2px;
width: 1.25rem;
height: 1.25rem;
}
#oauth2-login-navigator.is-loading::after {
width: 40px;
height: 40px;
}
@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;
}