code.gitea.io/gitea@v1.22.3/web_src/css/modules/animations.css (about)

     1  @keyframes isloadingspin {
     2    0% { transform: translate(-50%, -50%) rotate(0deg); }
     3    100% { transform: translate(-50%, -50%) rotate(360deg); }
     4  }
     5  
     6  .is-loading {
     7    pointer-events: none !important;
     8    position: relative !important;
     9  }
    10  
    11  .is-loading > * {
    12    opacity: 0.3;
    13  }
    14  
    15  .btn.is-loading > *,
    16  .button.is-loading > * {
    17    opacity: 0;
    18  }
    19  
    20  .is-loading::after {
    21    content: "";
    22    position: absolute;
    23    display: block;
    24    left: 50%;
    25    top: 50%;
    26    height: min(4em, 66.6%);
    27    width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
    28    aspect-ratio: 1;
    29    transform: translate(-50%, -50%);
    30    animation: isloadingspin 1000ms infinite linear;
    31    border-width: 4px;
    32    border-style: solid;
    33    border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
    34    border-radius: var(--border-radius-full);
    35  }
    36  
    37  .is-loading.loading-icon-2px::after {
    38    border-width: 2px;
    39  }
    40  
    41  .is-loading.loading-icon-3px::after {
    42    border-width: 3px;
    43  }
    44  
    45  /* 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. */
    46  form.single-button-form.is-loading > * {
    47    opacity: 1;
    48  }
    49  
    50  form.single-button-form.is-loading .button {
    51    color: transparent;
    52  }
    53  
    54  .markup pre.is-loading,
    55  .editor-loading.is-loading,
    56  .pdf-content.is-loading {
    57    height: var(--height-loading);
    58  }
    59  
    60  .markup .is-loading > * {
    61    visibility: hidden;
    62  }
    63  
    64  .markup .is-loading {
    65    color: transparent;
    66    background: transparent;
    67  }
    68  
    69  /* TODO: not needed, use "is-loading loading-icon-2px" instead */
    70  code.language-math.is-loading::after {
    71    padding: 0;
    72    border-width: 2px;
    73    width: 1.25rem;
    74    height: 1.25rem;
    75  }
    76  
    77  @keyframes fadein {
    78    0% {
    79      opacity: 0;
    80    }
    81    100% {
    82      opacity: 1;
    83    }
    84  }
    85  
    86  @keyframes fadeout {
    87    0% {
    88      opacity: 1;
    89    }
    90    100% {
    91      opacity: 0;
    92    }
    93  }
    94  
    95  @keyframes pulse {
    96    0% {
    97      transform: scale(1);
    98    }
    99    50% {
   100      transform: scale(1.8);
   101    }
   102    100% {
   103      transform: scale(1);
   104    }
   105  }
   106  
   107  .pulse {
   108    animation: pulse 2s linear;
   109  }
   110  
   111  .ui.modal,
   112  .ui.dimmer.transition {
   113    animation-name: fadein;
   114    animation-duration: 100ms;
   115    animation-timing-function: ease-in-out;
   116  }