123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- @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.small-loading-icon::after {
- border-width: 2px;
- }
-
- /* 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 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;
- }
-
- .ui.modal,
- .ui.dimmer.transition {
- animation-name: fadein;
- animation-duration: 100ms;
- animation-timing-function: ease-in-out;
- }
|