142 lines
3.6 KiB
SCSS
142 lines
3.6 KiB
SCSS
#ingame_HUD_GameMenu {
|
|
position: absolute;
|
|
@include S(top, 10px);
|
|
@include S(right, 10px);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
@include S(grid-gap, 6px);
|
|
|
|
backdrop-filter: blur(D(1px));
|
|
|
|
> button,
|
|
> .button {
|
|
@include PlainText;
|
|
@include IncreasedClickArea(0px);
|
|
background: green;
|
|
@include S(width, 30px);
|
|
@include S(height, 30px);
|
|
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.12s ease-in-out;
|
|
transition-property: opacity, transform;
|
|
|
|
display: inline-flex;
|
|
background: center center / 70% no-repeat;
|
|
grid-row: 1;
|
|
|
|
&.pressed {
|
|
transform: scale(0.9) !important;
|
|
}
|
|
|
|
opacity: 0.7;
|
|
&:hover {
|
|
opacity: 0.9 !important;
|
|
}
|
|
|
|
@include DarkThemeInvert;
|
|
|
|
&.shop {
|
|
grid-column: 1;
|
|
& {
|
|
/* @load-async */
|
|
background-image: uiResource("icons/shop.png");
|
|
}
|
|
}
|
|
|
|
&.stats {
|
|
grid-column: 2;
|
|
& {
|
|
/* @load-async */
|
|
background-image: uiResource("icons/statistics.png");
|
|
}
|
|
}
|
|
|
|
&.save {
|
|
& {
|
|
/* @load-async */
|
|
background-image: uiResource("icons/save.png");
|
|
}
|
|
grid-column: 3;
|
|
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
|
|
0% {
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1.5, 1.5) rotate(20deg);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
85% {
|
|
transform: scale(0.9, 0.9);
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
transform: scale(1.1, 1.1);
|
|
}
|
|
}
|
|
|
|
&.saving {
|
|
@include InlineAnimation(0.4s ease-in-out infinite) {
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
&.settings {
|
|
grid-column: 4;
|
|
& {
|
|
/* @load-async */
|
|
background-image: uiResource("icons/settings_menu_settings.png");
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
&:not(.hasBadge) .badge {
|
|
display: none;
|
|
}
|
|
|
|
&.hasBadge {
|
|
&.shop {
|
|
filter: none;
|
|
opacity: 0.9;
|
|
|
|
& {
|
|
/* @load-async */
|
|
background-image: uiResource("icons/shop_active.png");
|
|
}
|
|
}
|
|
|
|
transform-origin: 50% 50%;
|
|
@include InlineAnimation(0.8s ease-in-out infinite) {
|
|
50% {
|
|
transform: scale(1.3) rotate(6deg);
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
@include PlainText;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|