ui/trickscore.razor.scss
TrickScore {
position: absolute;
height: 100%;
width: 100%;
.multiplier {
background: linear-gradient( 0deg, #00000000 0%, #000000b3 20%, #000000b3 80%, #00000000 100% );
position: absolute;
bottom: 6.5%;
left: 50%;
width: auto;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
color: #e7af25;
transform: translateX( -50% );
transition: opacity 0.25s ease-out, color 0.15s ease-out, transform 0.2s ease-out;
animation: trick_pop 0.25s ease-out;
}
.skate-trick-text.done {
color: #3273eb;
text-shadow: 0 0 18px #3273eb66, 0 6px 14px #00000080;
}
.skate-trick-text.failed {
color: red;
text-shadow: 0 0 18px #ff303066, 0 6px 14px #00000080;
}
.tricks {
position: absolute;
bottom: 3%;
left: 50%;
width: auto;
height: auto;
transform: translateX( -50% );
text-transform: none;
font-size: 32px;
transition: opacity 0.25s ease-out, color 0.15s ease-out, transform 0.2s ease-out;
animation: trick_slide 0.25s ease-out;
}
.fadeout {
opacity: 0;
transform: translateX( -50% ) translateY( 6px );
}
.hidden {
display: none;
}
.skate-trick-text {
font-family: Bahnschrift;
color: white;
font-size: 40px;
text-stroke: 5px black;
padding-left: 10px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
text-transform: lowercase;
text-shadow: 0 6px 14px #00000080;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.pulse.pulse-a {
animation: trick_pulse 0.28s cubic-bezier( 0.2, 1.4, 0.3, 1 );
}
.pulse.pulse-b {
animation: trick_pulse 0.28s cubic-bezier( 0.2, 1.4, 0.3, 1 );
}
}
@keyframes trick_pop {
0% {
transform: translateX( -50% ) scale( 0.95 );
opacity: 0;
}
100% {
transform: translateX( -50% ) scale( 1 );
opacity: 1;
}
}
@keyframes trick_slide {
0% {
transform: translateX( -50% ) translateY( 6px );
opacity: 0;
}
100% {
transform: translateX( -50% ) translateY( 0 );
opacity: 1;
}
}
@keyframes trick_pulse {
0% {
transform: translateX( -50% ) scale( 0.96 );
}
60% {
transform: translateX( -50% ) scale( 1.04 );
}
100% {
transform: translateX( -50% ) scale( 1 );
}
}