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.
108 lines
2.4 KiB
108 lines
2.4 KiB
#ingame_HUD_Watermark {
|
|
position: absolute;
|
|
|
|
@include S(border-radius, $globalBorderRadius);
|
|
@include S(top, 70px);
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
left: 50%;
|
|
text-align: center;
|
|
|
|
background: rgba(207, 65, 65, 0.8);
|
|
color: #fff;
|
|
transform: translateX(-50%);
|
|
@include PlainText;
|
|
@include S(padding, 10px);
|
|
|
|
&:hover {
|
|
transform: translateX(-50%) scale(1.02) !important;
|
|
}
|
|
|
|
> strong {
|
|
@include PlainText;
|
|
text-transform: uppercase;
|
|
}
|
|
> p {
|
|
@include SuperSmallText;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
opacity: 0;
|
|
|
|
&.visible {
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
opacity: 1;
|
|
}
|
|
|
|
&:not(.visible) {
|
|
@include InlineAnimation(0.5s ease-in-out) {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#ingame_HUD_WatermarkClicker {
|
|
@include S(top, 55px);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%) !important;
|
|
@include SuperSmallText;
|
|
color: $colorBlueBright;
|
|
text-transform: uppercase;
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
&::after {
|
|
@include S(margin-left, 4px);
|
|
content: "";
|
|
@include S(width, 10px);
|
|
@include S(height, 10px);
|
|
display: inline-flex;
|
|
background: center center / contain no-repeat;
|
|
& {
|
|
/* @load-async */
|
|
background-image: uiResource("res/ui/icons/demo_steam_link_indicator.png");
|
|
}
|
|
}
|
|
|
|
&.withDiscount {
|
|
color: #4c6b22;
|
|
}
|
|
|
|
> .discount {
|
|
// position: absolute;
|
|
@include S(margin, 0, 5px);
|
|
|
|
background: rgba(#4c6b22, 1);
|
|
color: #c5ea3f;
|
|
@include S(border-radius, $globalBorderRadius);
|
|
@include S(padding, 0px, 2px, 0px, 3px);
|
|
@include SuperSmallText;
|
|
text-transform: uppercase;
|
|
transform: rotate(0deg);
|
|
@include InlineAnimation(1.3s ease-in-out infinite) {
|
|
50% {
|
|
transform: rotate(0.5deg) scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
}
|