From dd136858f1ea40ad3c94191d647487fa4f31926c Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 18 Oct 2024 20:33:49 +0200 Subject: Adding upstream version 9.0.0. Signed-off-by: Daniel Baumann --- web_src/css/modules/animations.css | 116 +++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 web_src/css/modules/animations.css (limited to 'web_src/css/modules/animations.css') 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; +} -- cgit v1.2.3