mirrors/shapez.io
1
Fork 0
mirror of https://github.com/tobspr-games/shapez.io.git synced 2026-01-27 23:10:35 -08:00
Code Issues Projects Releases Wiki Activity

Properly hide some hud elements when hovering

Browse source
This commit is contained in:
tobspr 2020-09-13 09:05:05 +02:00
parent 87f79a6c25
commit a24e7b8d33
8 changed files with 560 additions and 481 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/css/ingame_hud/building_placer.scss
View file

@ -18,12 +18,11 @@
background-color: #55585a;
}
pointer-events: all;
&:hover {
opacity: 10%;
transition: opacity 0.1s ease-out;
&.hovered {
opacity: 0.1;
.buildingImage {
opacity: 0%;
opacity: 0;
}
}
@ -79,6 +78,7 @@
@include S(height, 100px);
background: top left / 100% 100% no-repeat;
@include S(border-radius, $globalBorderRadius);
transition: opacity 0.1s ease-in-out;
}
@include StyleBelowWidth(700px) {

4
src/css/ingame_hud/interactive_tutorial.scss
View file

@ -31,7 +31,8 @@
pointer-events: all;
&:hover {
transition: opacity 0.1s ease-out;
&.hovered {
opacity: 10%;
.helperGif {
opacity: 0%;
@ -57,5 +58,6 @@
@include S(margin-top, 5px);
@include S(height, 150px);
background: center center / contain no-repeat;
transition: opacity 0.1s ease-out;
}
}

143
src/css/ingame_hud/keybindings_overlay.scss
View file

@ -1,69 +1,74 @@
#ingame_HUD_KeybindingOverlay {
position: absolute;
@include S(top, 10px);
@include S(left, 10px);
display: flex;
flex-direction: column;
align-items: flex-start;
color: #333438;
backdrop-filter: blur(D(2px));
padding: D(3px);
@include DarkThemeOverride {
color: #fff;
}
> .binding {
&:not(.visible) {
display: none !important;
}
display: inline-grid;
@include PlainText;
align-items: center;
@include S(margin-bottom, 3px);
grid-auto-flow: column;
@include S(grid-gap, 2px);
i {
display: inline-block;
@include S(height, 10px);
width: 1px;
@include S(margin, 0, 3px);
background-color: #fff;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
}
code {
position: relative;
top: unset;
left: unset;
margin: 0;
&.rightMouse {
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
}
&.leftMouse {
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
label {
color: #333438;
@include SuperSmallText;
text-transform: uppercase;
// color: #fff;
@include DarkThemeOverride {
color: #fff;
}
@include S(margin-left, 5px);
}
}
}
body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) {
display: none;
}
#ingame_HUD_KeybindingOverlay {
position: absolute;
@include S(top, 10px);
@include S(left, 10px);
display: flex;
flex-direction: column;
align-items: flex-start;
color: #333438;
backdrop-filter: blur(D(2px));
padding: D(3px);
@include DarkThemeOverride {
color: #fff;
}
transition: opacity 0.1s ease-out;
&.hovered {
opacity: 0.1;
}
> .binding {
&:not(.visible) {
display: none !important;
}
display: inline-grid;
@include PlainText;
align-items: center;
@include S(margin-bottom, 3px);
grid-auto-flow: column;
@include S(grid-gap, 2px);
i {
display: inline-block;
@include S(height, 10px);
width: 1px;
@include S(margin, 0, 3px);
background-color: #fff;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
}
code {
position: relative;
top: unset;
left: unset;
margin: 0;
&.rightMouse {
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
}
&.leftMouse {
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
label {
color: #333438;
@include SuperSmallText;
text-transform: uppercase;
// color: #fff;
@include DarkThemeOverride {
color: #fff;
}
@include S(margin-left, 5px);
}
}
}
body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) {
display: none;
}