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

Improve simplified belt, show hints everywheer

Browse Source
This commit is contained in:
tobspr
2020-09-19 12:21:32 +02:00
parent ed206363f2
commit 2075f4d011
18 changed files with 831 additions and 819 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/css/common.scss
View File

@@ -468,13 +468,24 @@ canvas {
display: flex;
flex-grow: 1;
}
.hint {
position: absolute;
@include S(left, 20px);
@include S(right, 20px);
@include S(bottom, 60px);
@include Text;
color: #666;
}
.loadingStatus {
position: absolute;
@include S(left, 20px);
@include S(right, 20px);
@include S(bottom, 30px);
@include Text;
@include TextShadow3D(#aaa);
@include PlainText;
color: #aaa;
display: flex;
flex-direction: column;
justify-content: center;

83
src/css/states/ingame.scss
View File

@@ -1,37 +1,46 @@
#state_InGameState {
.gameLoadingOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
pointer-events: all;
display: flex;
background: $mainBgColor;
flex-direction: column;
}
#ingame_Canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#ingame_HUD_ModalDialogs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@include DarkThemeOverride {
.gameLoadingOverlay {
background: $darkModeGameBackground;
}
}
}
#state_InGameState {
.gameLoadingOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
pointer-events: all;
display: flex;
background: $mainBgColor;
flex-direction: column;
}
.hint {
position: absolute;
@include S(bottom, 40px);
@include S(left, 20px);
@include S(right, 20px);
@include PlainText;
text-align: center;
}
#ingame_Canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#ingame_HUD_ModalDialogs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@include DarkThemeOverride {
.gameLoadingOverlay {
background: $darkModeGameBackground;
}
}
}

290
src/css/states/preload.scss
View File

@@ -1,145 +1,145 @@
#state_PreloadState {
&.failure {
.loadingImage,
.loadingStatus {
display: none;
}
}
.changelogDialogEntry {
margin-top: 10px;
width: 100%;
flex-direction: column;
text-align: left;
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
@include DarkThemeOverride {
background: #424242;
}
.version {
@include Heading;
}
.date {
@include PlainText;
&::before {
content: " | ";
}
color: #aaabaf;
}
.changes {
@include PlainText;
@include S(padding-left, 15px);
strong {
background: $colorBlueBright;
color: #fff;
text-transform: uppercase;
@include S(padding, 1px, 2px);
@include S(margin-right, 3px);
}
a {
color: $colorBlueBright;
}
li {
@include SuperSmallText;
@include S(margin-bottom, 10px);
}
}
}
.failureBox {
.logo {
img {
@include S(width, 240px);
}
@include S(margin-bottom, 30px);
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.failureInner {
// background: darken($mainBgColor, 6);
@include S(max-width, 350px);
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include S(border-radius, $globalBorderRadius);
@include DropShadow;
.errorHeader {
color: #ef5072;
}
.errorMessage {
@include PlainText;
display: block;
color: #666;
text-align: left;
@include BreakText;
hyphens: auto;
// border: dotted #666;
// @include S(border-width, 1px, 0);
@include S(padding, 10px, 0);
@include S(margin-top, 10px);
}
.supportHelp {
@include S(margin-top, 10px);
@include PlainText;
.email {
color: $themeColor;
cursor: pointer;
pointer-events: all;
}
}
.lower {
display: flex;
align-items: center;
@include S(margin-top, 16px);
i {
flex-grow: 1;
text-align: right;
color: #777;
@include PlainText;
}
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
@include S(padding, 5px, 8px, 4px);
color: #fff;
}
}
}
}
/* Animations */
.status {
transform: scale(0.7) $hardwareAcc;
opacity: 0;
@include StateAnim(transform, opacity);
}
&.arrived {
.status {
opacity: 1;
transform: none;
}
}
}
#state_PreloadState {
&.failure {
.loadingImage,
.loadingStatus {
display: none;
}
}
.changelogDialogEntry {
margin-top: 10px;
width: 100%;
flex-direction: column;
text-align: left;
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
@include DarkThemeOverride {
background: #424242;
}
.version {
@include Heading;
}
.date {
@include PlainText;
&::before {
content: " | ";
}
color: #aaabaf;
}
.changes {
@include PlainText;
@include S(padding-left, 15px);
strong {
background: $colorBlueBright;
color: #fff;
text-transform: uppercase;
@include S(padding, 1px, 2px);
@include S(margin-right, 3px);
}
a {
color: $colorBlueBright;
}
li {
@include SuperSmallText;
@include S(margin-bottom, 10px);
}
}
}
.failureBox {
.logo {
img {
@include S(width, 240px);
}
@include S(margin-bottom, 30px);
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.failureInner {
// background: darken($mainBgColor, 6);
@include S(max-width, 350px);
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include S(border-radius, $globalBorderRadius);
@include DropShadow;
.errorHeader {
color: #ef5072;
}
.errorMessage {
@include PlainText;
display: block;
color: #666;
text-align: left;
@include BreakText;
hyphens: auto;
// border: dotted #666;
// @include S(border-width, 1px, 0);
@include S(padding, 10px, 0);
@include S(margin-top, 10px);
}
.supportHelp {
@include S(margin-top, 10px);
@include PlainText;
.email {
color: $themeColor;
cursor: pointer;
pointer-events: all;
}
}
.lower {
display: flex;
align-items: center;
@include S(margin-top, 16px);
i {
flex-grow: 1;
text-align: right;
color: #777;
@include PlainText;
}
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
@include S(padding, 5px, 8px, 4px);
color: #fff;
}
}
}
}
/* Animations */
.status {
transform: scale(0.7) $hardwareAcc;
opacity: 0;
@include StateAnim(transform, opacity);
}
&.arrived {
.status {
opacity: 1;
transform: none;
}
}
}