Justin Edmund
bed7d0d408
* Update transcendence components to use CSS modules * Fix summon transcendence Summon transcendence was doing something wonky. This adapts the updateUncap endpoint method to make it a little bit clearer whats going on.
76 lines
1.2 KiB
SCSS
76 lines
1.2 KiB
SCSS
.transcendence {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-half;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $unit-10x;
|
|
height: $unit-10x;
|
|
|
|
animation: scaleIn $duration-zoom ease-out;
|
|
background: var(--dialog-bg);
|
|
border-radius: $card-corner;
|
|
border: 0.5px solid rgba(0, 0, 0, 0.18);
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
|
|
outline: none;
|
|
padding: $unit;
|
|
transform-origin: var(--radix-popover-content-transform-origin);
|
|
z-index: 32;
|
|
|
|
&.open {
|
|
opacity: 1;
|
|
display: flex;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-small;
|
|
font-weight: $medium;
|
|
}
|
|
|
|
.pending {
|
|
color: $yellow;
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
}
|
|
20% {
|
|
opacity: 0.2;
|
|
transform: scale(0.4);
|
|
}
|
|
40% {
|
|
opacity: 0.4;
|
|
transform: scale(0.8);
|
|
}
|
|
60% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
65% {
|
|
opacity: 0.65;
|
|
transform: scale(1.1);
|
|
}
|
|
70% {
|
|
opacity: 0.7;
|
|
transform: scale(1);
|
|
}
|
|
75% {
|
|
opacity: 0.75;
|
|
transform: scale(0.98);
|
|
}
|
|
80% {
|
|
opacity: 0.8;
|
|
transform: scale(1.02);
|
|
}
|
|
90% {
|
|
opacity: 0.9;
|
|
transform: scale(0.96);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|