You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
3.6 KiB
133 lines
3.6 KiB
#ingame_HUD_UnlockNotification {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
pointer-events: all;
|
|
@include InlineAnimation(0.1s ease-in-out) {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.dialog {
|
|
background: rgba(#222428, 0.5);
|
|
@include S(border-radius, $globalBorderRadius);
|
|
@include S(padding, 30px);
|
|
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
color: #fff;
|
|
text-align: center;
|
|
.title,
|
|
.subTitle {
|
|
@include SuperHeading;
|
|
text-transform: uppercase;
|
|
@include S(font-size, 50px);
|
|
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
transform: translateY(-50vh);
|
|
}
|
|
50% {
|
|
transform: translateY(5vh);
|
|
}
|
|
75% {
|
|
transform: translateY(-2vh);
|
|
}
|
|
}
|
|
}
|
|
|
|
.subTitle {
|
|
@include Heading;
|
|
background: $colorGreenBright;
|
|
display: inline-block;
|
|
@include S(padding, 1px, 6px);
|
|
@include S(margin, 20px, 0, 20px);
|
|
|
|
@include S(border-radius, $globalBorderRadius);
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
transform: translateY(-60vh);
|
|
}
|
|
50% {
|
|
transform: translateY(6vh);
|
|
}
|
|
75% {
|
|
transform: translateY(-3vh);
|
|
}
|
|
}
|
|
}
|
|
|
|
.contents {
|
|
@include S(width, 400px);
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
transform: translateX(-100vw);
|
|
}
|
|
50% {
|
|
transform: translateX(5vw);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-2vw);
|
|
}
|
|
}
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include S(grid-gap, 10px);
|
|
|
|
.reward {
|
|
grid-column: 1 / 3;
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
transform: translateX(200vw);
|
|
}
|
|
50% {
|
|
transform: translateX(-10vw);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(4vw);
|
|
}
|
|
}
|
|
}
|
|
|
|
.buildingExplanation {
|
|
@include S(width, 200px);
|
|
@include S(height, 200px);
|
|
display: inline-block;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
@include S(border-radius, $globalBorderRadius);
|
|
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
button.close {
|
|
border: 0;
|
|
@include InlineAnimation(2s ease-in-out) {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
95% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@include S(margin-top, 30px);
|
|
}
|
|
}
|
|
}
|