Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Load css resources async, improve building descriptions

Browse Source
This commit is contained in:
tobspr
2020-09-23 11:14:35 +02:00
parent 9881bd6799
commit 1f12e755a9
49 changed files with 15779 additions and 15552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/states/keybindings.scss
View File

@@ -35,10 +35,12 @@
background: transparent center center / 40% no-repeat;
opacity: 0.9;
&.editKeybinding {
/* @load-async */
background-image: uiResource("icons/edit_key.png");
}
&.resetKeybinding {
/* @load-async */
background-image: uiResource("icons/reset_key.png");
}

52
src/css/states/main_menu.scss
View File

@@ -22,7 +22,10 @@
@include S(height, 25px);
pointer-events: all;
cursor: pointer;
background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
& {
/* @load-async */
background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
}
transition: opacity 0.12s ease-in-out;
@include IncreasedClickArea(2px);
opacity: 0.7;
@@ -32,6 +35,7 @@
}
.exitAppButton {
/* @load-async */
background-image: uiResource("icons/main_menu_exit.png");
background-size: 90%;
}
@@ -129,8 +133,10 @@
width: 100%;
@include S(height, 40px);
@include S(width, 180px);
background: #171a23 uiResource("get_on_steam.png") center center / contain no-repeat;
& {
/* @load-async */
background: #171a23 uiResource("get_on_steam.png") center center / contain no-repeat;
}
overflow: hidden;
display: block;
text-indent: -999em;
@@ -167,7 +173,10 @@
@include S(margin, 10px, 0);
@include S(width, 100px);
@include S(height, 30px);
background: uiResource("demo_badge.png") center center / contain no-repeat;
& {
/* @load-async */
background: uiResource("demo_badge.png") center center / contain no-repeat;
}
display: inline-block;
}
@@ -335,14 +344,22 @@
align-self: center;
justify-self: center;
@include IncreasedClickArea(0px);
background: #44484a uiResource("icons/play.png") center center / 40% no-repeat;
& {
/* @load-async */
background: #44484a uiResource("icons/play.png") center center / 40% no-repeat;
}
}
button.downloadGame {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: transparent;
background-image: uiResource("icons/download.png");
& {
/* @load-async */
background-image: uiResource("icons/download.png");
}
@include S(width, 15px);
@include IncreasedClickArea(0px);
@include S(height, 15px);
@@ -362,7 +379,11 @@
grid-row: 2 / 3;
background-color: transparent;
@include IncreasedClickArea(0px);
background-image: uiResource("icons/delete.png");
& {
/* @load-async */
background-image: uiResource("icons/delete.png");
}
@include S(width, 15px);
@include S(height, 15px);
align-self: end;
@@ -379,7 +400,11 @@
button.renameGame {
background-color: transparent;
@include IncreasedClickArea(2px);
background-image: uiResource("icons/edit_key.png");
& {
/* @load-async */
background-image: uiResource("icons/edit_key.png");
}
@include S(width, 10px);
@include S(height, 10px);
align-self: center;
@@ -445,7 +470,11 @@
grid-template-columns: 1fr auto;
justify-content: center;
background: $linkBg uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
& {
/* @load-async */
background: $linkBg uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
}
@include S(padding, 5px);
@include S(padding-left, 10px);
@include S(border-radius, $globalBorderRadius);
@@ -472,9 +501,11 @@
@include S(height, 50px);
background: center center / 80% no-repeat;
&.githubLogo {
/* @load-async */
background-image: uiResource("main_menu/github.png");
}
&.discordLogo {
/* @load-async */
background-image: uiResource("main_menu/discord.png");
background-size: 95%;
}
@@ -516,12 +547,15 @@
transition: background-color 0.12s ease-in-out;
&.redditLink {
/* @load-async */
background-image: uiResource("main_menu/reddit.svg");
}
&.changelog {
/* @load-async */
background-image: uiResource("main_menu/changelog.svg");
}
&.helpTranslate {
/* @load-async */
background-image: uiResource("main_menu/translate.svg");
}
}

99
src/css/states/mobile_warning.scss
View File

@@ -1,48 +1,51 @@
#state_MobileWarningState {
display: flex;
align-items: center;
background: #333438 !important;
@include S(padding, 20px);
box-sizing: border-box;
justify-content: center;
flex-direction: column;
.logo {
width: 80%;
max-width: 200px;
margin-bottom: 10px;
}
p {
color: #aaacaf;
display: block;
margin-bottom: 13px;
font-size: 16px;
line-height: 20px;
max-width: 300px;
text-align: left;
a {
color: $colorBlueBright;
}
}
.standaloneLink {
width: 200px;
height: 80px;
min-height: 40px;
background: uiResource("get_on_steam.png") center center / contain no-repeat;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
margin-top: 10px;
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;
transform: skewX(-0.5deg);
&:hover {
transform: skewX(-1deg) scale(1.02);
opacity: 0.9;
}
}
}
#state_MobileWarningState {
display: flex;
align-items: center;
background: #333438 !important;
@include S(padding, 20px);
box-sizing: border-box;
justify-content: center;
flex-direction: column;
.logo {
width: 80%;
max-width: 200px;
margin-bottom: 10px;
}
p {
color: #aaacaf;
display: block;
margin-bottom: 13px;
font-size: 16px;
line-height: 20px;
max-width: 300px;
text-align: left;
a {
color: $colorBlueBright;
}
}
.standaloneLink {
width: 200px;
height: 80px;
min-height: 40px;
& {
/* @load-async */
background: uiResource("get_on_steam.png") center center / contain no-repeat;
}
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
margin-top: 10px;
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;
transform: skewX(-0.5deg);
&:hover {
transform: skewX(-1deg) scale(1.02);
opacity: 0.9;
}
}
}

13
src/css/states/settings.scss
View File

@@ -159,8 +159,11 @@
@include S(padding, 4px);
@include S(padding-right, 15px);
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
& {
/* @load-async */
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
}
transition: background-color 0.12s ease-in-out;
&:hover {
@@ -196,7 +199,11 @@
// dirty but works
// color: #222;
background-color: $darkModeControlsBackground;
background-image: uiResource("icons/enum_selector_white.png");
& {
/* @load-async */
background-image: uiResource("icons/enum_selector_white.png");
}
color: #ddd;
&:hover {
background-color: darken($darkModeControlsBackground, 2);