| 1 | @-webkit-keyframes RouterLoaderAnimation { | = | 1 | @-webkit-keyframes RouterLoaderAnimation { |
| 2 | 0% { opacity: 0; } | 2 | 0% { opacity: 0; } | |
| 3 | 100% { opacity: 1; } | 3 | 100% { opacity: 1; } | |
| 4 | } | 4 | } | |
| 5 | @-moz-keyframes RouterLoaderAnimation { | 5 | @-moz-keyframes RouterLoaderAnimation { | |
| 6 | 0% { opacity: 0; } | 6 | 0% { opacity: 0; } | |
| 7 | 100% { opacity: 1; } | 7 | 100% { opacity: 1; } | |
| 8 | } | 8 | } | |
| 9 | @keyframes RouterLoaderAnimation { | 9 | @keyframes RouterLoaderAnimation { | |
| 10 | 0% { opacity: 0; } | 10 | 0% { opacity: 0; } | |
| 11 | 100% { opacity: 1; } | 11 | 100% { opacity: 1; } | |
| 12 | } | 12 | } | |
| 13 | 13 | |||
| 14 | .Container { | 14 | .Container { | |
| 15 | position: fixed; | 15 | position: fixed; | |
| 16 | z-index: 99999999; | 16 | z-index: 99999999; | |
| 17 | top: 0; | 17 | top: 0; | |
| 18 | right: 0; | 18 | right: 0; | |
| 19 | bottom: 0; | 19 | bottom: 0; | |
| 20 | left: 0; | 20 | left: 0; | |
| 21 | opacity: 0; | 21 | opacity: 0; | |
| 22 | background: rgba(#fff, .25); | 22 | background: rgba(#fff, .25); | |
| 23 | display: flex; | 23 | display: flex; | |
| 24 | justify-content: center; | 24 | justify-content: center; | |
| 25 | align-items: center; | 25 | align-items: center; | |
| 26 | animation: RouterLoaderAnimation .2s; | 26 | animation: RouterLoaderAnimation .2s; | |
| 27 | animation-fill-mode: forwards; | 27 | animation-fill-mode: forwards; | |
| 28 | } | 28 | } | |
| -+ | 29 | :global(.dark-style) .Container { | ||
| 30 | background: rgba(#25282E, .25); | |||
| 31 | } | |||
| 29 | = | 32 | ||
| 30 | .Spinner { | 33 | .Spinner { | |
| 31 | display: block; | 34 | display: block; | |
| 32 | } | 35 | } | |
| 33 | 36 | |||
| 34 | .SpinnerEl { | 37 | .SpinnerEl { | |
| 35 | border-width: 2px !important; | 38 | border-width: 2px !important; | |
| 36 | width: 3rem !important; | 39 | width: 3rem !important; | |
| 37 | height: 3rem !important; | 40 | height: 3rem !important; | |
| 38 | } | 41 | } | |
| 39 | 42 | |||
| 40 | :global(.app-loading) .Container { | 43 | :global(.app-loading) .Container { | |
| 41 | display: none; | 44 | display: none; | |
| 42 | } | 45 | } |