118 lines
2.7 KiB
SCSS
118 lines
2.7 KiB
SCSS
#ingame_HUD_TutorialHints {
|
|
position: absolute;
|
|
@include S(left, 10px);
|
|
@include S(bottom, 10px);
|
|
|
|
@include StyleBelowWidth(1430px) {
|
|
@include S(bottom, 50px);
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgba(50, 60, 70, 0);
|
|
|
|
transition: all 0.2s ease-in-out;
|
|
pointer-events: all;
|
|
|
|
transition-property: background-color, transform, bottom, left;
|
|
|
|
@include S(padding, 5px);
|
|
video {
|
|
transition: all 0.2s ease-in-out;
|
|
transition-property: opacity, width;
|
|
@include S(width, 0px);
|
|
opacity: 0;
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
.header {
|
|
color: #333438;
|
|
display: grid;
|
|
align-items: center;
|
|
@include S(grid-gap, 2px);
|
|
grid-template-columns: 1fr;
|
|
@include S(margin-bottom, 3px);
|
|
z-index: 11;
|
|
position: relative;
|
|
|
|
> span {
|
|
@include DarkThemeInvert;
|
|
|
|
display: flex;
|
|
@include SuperSmallText;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
&::before {
|
|
@include S(margin-right, 4px);
|
|
content: " ";
|
|
@include S(width, 12px);
|
|
@include S(height, 12px);
|
|
display: inline-block;
|
|
background: uiResource("icons/help.png") center center / 95% no-repeat;
|
|
}
|
|
}
|
|
|
|
button.toggleHint {
|
|
@include PlainText;
|
|
@include IncreasedClickArea(0px);
|
|
}
|
|
}
|
|
|
|
button.toggleHint {
|
|
.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.enlarged {
|
|
background: rgba(50, 60, 70, 0.9);
|
|
left: 50%;
|
|
bottom: 50%;
|
|
transform: translate(-50%, 50%);
|
|
|
|
&::before {
|
|
pointer-events: all;
|
|
content: " ";
|
|
position: fixed;
|
|
top: -1000px;
|
|
left: -1000px;
|
|
right: -1000px;
|
|
bottom: -1000px;
|
|
z-index: 0;
|
|
|
|
background: rgba(50, 60, 70, 0.3);
|
|
}
|
|
|
|
.header {
|
|
grid-template-columns: 1fr auto;
|
|
> span {
|
|
display: none;
|
|
}
|
|
button.toggleHint {
|
|
grid-column: 2 / 3;
|
|
}
|
|
}
|
|
|
|
video {
|
|
@include InlineAnimation(0.2s ease-in-out) {
|
|
0% {
|
|
opacity: 0;
|
|
@include S(width, 0px);
|
|
}
|
|
}
|
|
|
|
opacity: 1;
|
|
@include S(width, 500px);
|
|
}
|
|
button.toggleHint {
|
|
.hide {
|
|
display: block;
|
|
}
|
|
.show {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|