146 lines
2.6 KiB
CSS
146 lines
2.6 KiB
CSS
|
|
@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 {
|
|
background: url('/assets/images/icons/cosmos_gray.png') no-repeat center center;
|
|
}
|
|
|
|
.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;
|
|
} |