@keyframes shiny-btn1 { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } @keyframes shake { 0% { -webkit-transform: translateX(0); } 10% { -webkit-transform: translateX(-10px); } 20% { -webkit-transform: translateX(10px); } 30% { -webkit-transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); } 60% { -webkit-transform: translateX(10px); } 70% { -webkit-transform: translateX(-10px); } 80% { -webkit-transform: translateX(10px); } 90% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @keyframes pulsing { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } .dot { background-color: #222; border-radius: 100%; width: 1.5rem; height: 1.5rem; margin: 0 0.25rem; /* Animation */ animation: bounce 1.4s infinite; animation-fill-mode: both; } @media (prefers-color-scheme: dark) { .dot { background-color: #eee; } } .dot:nth-child(1) { animation-delay: -0.32s; } .dot:nth-child(2) { animation-delay: -0.16s; } .dot:nth-child(3) { animation-delay: 0s; } .loader { display: flex; justify-content: center; align-items: center; height: 100%; } .shinyButton { overflow: hidden; } .stickyButton { position: fixed; bottom: 20px; width: 100%; left: 0; right: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.50); z-index: 10; } .shinyButton:before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; animation: shiny-btn1 3s ease-in-out infinite; } .shake { animation: shake 1s; animation-iteration-count: 1; } .code { background-color: rgba(0.2,0.2,0.2,0.2); } @media (prefers-color-scheme: dark) { .MuiPopper-root > * { color:white; background-color: rgba(0,0,0,0.8); } } .darken { filter: brightness(0.5); } .MuiAlert-icon { align-items: center; } .loading-image:empty { background: url('assets/images/icons/cosmos_gray.png') no-repeat center center; background-size: contain; } .raw-table table { width: 100%; border-collapse: collapse; } .raw-table table th { text-align: left; } .raw-table table th, .raw-table table td { padding: 5px; border: 1px solid #ccc; } .pulsing { animation: pulsing 2s ease-in-out infinite; }