66 lines
1.3 KiB
SCSS
66 lines
1.3 KiB
SCSS
#ingame_HUD_InteractiveTutorial {
|
|
position: absolute;
|
|
@include S(left, 10px);
|
|
@include S(bottom, 10px);
|
|
|
|
@include StyleBelowWidth(1430px) {
|
|
@include S(bottom, 10px + 40px);
|
|
}
|
|
|
|
@include S(width, 150px);
|
|
|
|
background: $ingameHudBg;
|
|
@include S(padding, 7px);
|
|
color: #eee;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include S(border-radius, $globalBorderRadius);
|
|
|
|
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
|
|
0% {
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
100% {
|
|
}
|
|
}
|
|
|
|
pointer-events: all;
|
|
|
|
transition: opacity 0.1s ease-out;
|
|
&.hovered {
|
|
opacity: 10%;
|
|
.helperGif {
|
|
opacity: 0%;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
color: #fff;
|
|
opacity: 0.5;
|
|
@include SuperSmallText;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.desc {
|
|
@include SuperSmallText;
|
|
strong {
|
|
color: $colorBlueBright;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.helperGif {
|
|
@include S(margin-top, 5px);
|
|
@include S(width, 150px);
|
|
@include S(height, 150px);
|
|
background: center center / cover no-repeat;
|
|
transition: opacity 0.1s ease-out;
|
|
@include S(border-radius, $globalBorderRadius);
|
|
}
|
|
}
|