168 lines
4.5 KiB
SCSS
168 lines
4.5 KiB
SCSS
#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, 40px);
|
|
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
transform: translateY(-50vh);
|
|
}
|
|
50% {
|
|
transform: translateY(5vh);
|
|
}
|
|
75% {
|
|
transform: translateY(-2vh);
|
|
}
|
|
}
|
|
}
|
|
|
|
.subTitle {
|
|
@include PlainText;
|
|
display: inline-block;
|
|
@include S(margin, 0px, 0, 20px);
|
|
color: $colorGreenBright;
|
|
|
|
@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: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
@include S(grid-gap, 10px);
|
|
|
|
.rewardName {
|
|
grid-column: 1 / 3;
|
|
display: none;
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
transform: translateX(200vw);
|
|
}
|
|
50% {
|
|
transform: translateX(-10vw);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(4vw);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rewardDesc {
|
|
grid-column: 1 / 3;
|
|
@include PlainText;
|
|
@include S(margin-bottom, 15px);
|
|
color: #aaacaf;
|
|
@include S(width, 400px);
|
|
text-align: left;
|
|
strong {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.images {
|
|
display: flex;
|
|
.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;
|
|
position: relative;
|
|
@include S(margin-top, 30px);
|
|
|
|
&:not(.unlocked) {
|
|
pointer-events: none;
|
|
opacity: 0.8;
|
|
cursor: default;
|
|
}
|
|
|
|
&::after {
|
|
content: " ";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 10, 20, 0.8);
|
|
|
|
@include InlineAnimation(10s linear) {
|
|
0% {
|
|
left: 0;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|