Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2024-10-27 20:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #458 from Djspaceg/ui/optimization-1

Browse Source 
Optimized some UI layers for fewer paints on interaction
This commit is contained in:
tobspr 2020-07-18 14:38:37 +02:00 committed by GitHub
commit 4efd690bc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/css/ingame_hud/buildings_toolbar.scss
View File

@ -4,17 +4,18 @@
left: 50%;
transform: translateX(-50%);
// NOTE: This flex rule may not be necessary. Need to find out intent.
display: flex;
flex-direction: column;
background-color: rgb(255, 255, 255);
background: transparent;
border-bottom-width: 0;
transition: transform 0.12s ease-in-out;
transition: transform 120ms ease-in-out;
will-change: transform;
background: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
@include DarkThemeOverride {
background: #222428;
background-color: #222428;
}
&:not(.visible) {
@ -60,21 +61,43 @@
@include S(border-radius, $globalBorderRadius);
&.unlocked {
pointer-events: all;
transition: all 50ms ease-in-out;
transition-property: background-color, transform;
cursor: pointer;
will-change: transform;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: $accentColorDark;
opacity: 0;
will-change: opacity;
}
&:hover {
&::before {
opacity: 0.1;
}
}
&.selected {
background-color: rgba($colorBlueBright, 0.6) !important;
transform: scale(1.05);
&::before {
background-color: $colorBlueBright;
opacity: 0.6;
}
.keybinding {
color: #111;
}
}
pointer-events: all;
transition: all 0.05s ease-in-out;
transition-property: background-color, transform;
&.unlocked:hover {
background-color: rgba($accentColorDark, 0.1);
cursor: pointer;
}
}
}

1
src/css/ingame_hud/game_menu.scss
View File

@ -22,6 +22,7 @@
cursor: pointer;
transition: all 0.12s ease-in-out;
transition-property: opacity, transform;
will-change: opacity;
opacity: 0.9;
@include S(margin-left, 5px);
position: relative;

4
src/css/ingame_hud/keybindings_overlay.scss
View File

@ -8,6 +8,10 @@
align-items: flex-start;
color: #333438;
// text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.1);
backdrop-filter: blur(D(3px));
border: D(1px) solid #d2d2d2;
border-radius: D(6px);
padding: D(3px);
@include DarkThemeOverride {
color: #fff;

5
src/css/ingame_hud/pinned_shapes.scss
View File

@ -18,6 +18,7 @@
@include S(margin-bottom, 4px);
color: #333438;
// text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
filter: drop-shadow(#{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2));
&.unpinable {
> canvas {
@ -33,10 +34,12 @@
grid-row: 1 / 3;
pointer-events: all;
transition: transform 0.1s ease-in-out;
transform-origin: D(2px) center;
will-change: transform;
position: relative;
z-index: 20;
&:hover {
transform: scale(2) translateX(#{D(5px)});
transform: scale(2);
z-index: 21;
}
}

4
src/css/mixins.scss
View File

@ -2,8 +2,8 @@
/* Forces an element to get rendered on its own layer, increasing
the performance when animated. Use only transform and opacity in animations! */
@mixin FastAnimation {
// will-change: transform, opacity;
transform: translateZ(0);
will-change: transform, opacity, filter;
// transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}