gitea/web_src/css/modules/animations.css

117 lines
2.1 KiB
CSS
Raw Normal View History

@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;
}
.is-loading > * {
opacity: 0.3;
}
.btn.is-loading > *,
.button.is-loading > * {
opacity: 0;
}
.is-loading::after {
content: "";
position: absolute;
display: block;
left: 50%;
top: 50%;
height: min(4em, 66.6%);
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
aspect-ratio: 1;
transform: translate(-50%, -50%);
animation: isloadingspin 1000ms 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: var(--border-radius-circle);
}
.is-loading.loading-icon-2px::after {
border-width: 2px;
}
.is-loading.loading-icon-3px::after {
border-width: 3px;
}
/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
form.single-button-form.is-loading > * {
opacity: 1;
}
form.single-button-form.is-loading .button {
color: transparent;
}
.markup pre.is-loading,
.editor-loading.is-loading,
.pdf-content.is-loading {
height: var(--height-loading);
}
.markup .is-loading > * {
visibility: hidden;
}
.markup .is-loading {
color: transparent;
background: transparent;
}
/* TODO: not needed, use "is-loading loading-icon-2px" 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;
}
}
2022-05-07 07:35:12 +02:00
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
.pulse {
animation: pulse 2s linear;
}
.ui.modal,
.ui.dimmer.transition {
animation-name: fadein;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
}