diff options
author | Daniel Baumann <daniel@debian.org> | 2024-10-18 20:33:49 +0200 |
---|---|---|
committer | Daniel Baumann <daniel@debian.org> | 2024-12-12 23:57:56 +0100 |
commit | e68b9d00a6e05b3a941f63ffb696f91e554ac5ec (patch) | |
tree | 97775d6c13b0f416af55314eb6a89ef792474615 /web_src/css/modules/animations.css | |
parent | Initial commit. (diff) | |
download | forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.tar.xz forgejo-e68b9d00a6e05b3a941f63ffb696f91e554ac5ec.zip |
Adding upstream version 9.0.3.
Signed-off-by: Daniel Baumann <daniel@debian.org>
Diffstat (limited to 'web_src/css/modules/animations.css')
-rw-r--r-- | web_src/css/modules/animations.css | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css new file mode 100644 index 0000000..a86c923 --- /dev/null +++ b/web_src/css/modules/animations.css @@ -0,0 +1,116 @@ +@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-full); +} + +.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; + } +} + +@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; +} |