mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-12-11 09:11:50 +00:00
515c07c067
shapez used to have a nice error handler, but later it was removed. To help debug game in both development and release cases, add a simple error handler/screen that displays the error stack trace, lists the installed mods and shows some build information. It also allows copying this information to the system clipboard. Having such an error screen should make mod development easier once the local mod error handling is removed.
142 lines
2.6 KiB
CSS
142 lines
2.6 KiB
CSS
@font-face {
|
|
font-family: "GameFont";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-display: swap;
|
|
src: url("res/fonts/GameFont.woff2") format("woff2");
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
touch-action: pan-x pan-y;
|
|
pointer-events: none;
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
html {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: #dee1ea;
|
|
}
|
|
|
|
body {
|
|
color: #555;
|
|
user-select: none;
|
|
background: inherit;
|
|
overflow-wrap: break-word;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
#ll_fp {
|
|
font-family: "GameFont", Arial, sans-serif;
|
|
font-size: 14px;
|
|
position: fixed;
|
|
z-index: -1;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0.05;
|
|
}
|
|
|
|
#ll_p {
|
|
display: grid;
|
|
position: fixed;
|
|
z-index: 999;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
justify-content: center;
|
|
place-items: center;
|
|
background: #d5d8de;
|
|
grid-template-rows: 1fr 200px;
|
|
grid-gap: 40px;
|
|
padding: 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#ll_p * {
|
|
line-height: 1;
|
|
}
|
|
|
|
#ll_loader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-self: end;
|
|
justify-content: center;
|
|
}
|
|
|
|
#ll_loader > .ll_text {
|
|
text-align: center;
|
|
color: #777a7f;
|
|
font-family: "GameFont", Arial, sans-serif;
|
|
font-size: 24px;
|
|
height: 30px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
#ll_progressbar {
|
|
width: 80vw;
|
|
max-width: 800px;
|
|
margin-top: 40px;
|
|
height: 7px;
|
|
border-radius: 20px;
|
|
background: rgba(0, 10, 20, 0.08);
|
|
|
|
/* border: 5px solid transparent; */
|
|
display: flex;
|
|
position: relative;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@keyframes LL_LoadingAnimation {
|
|
50% {
|
|
background-color: #34ae67;
|
|
}
|
|
}
|
|
|
|
#ll_progressbar > span {
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
height: 190%;
|
|
width: 5%;
|
|
background: #fff;
|
|
transform: translateY(-50%);
|
|
top: 50%;
|
|
display: inline-flex;
|
|
background-color: #269fba;
|
|
animation: LL_LoadingAnimation 4s ease-in-out infinite;
|
|
position: relative;
|
|
z-index: 10;
|
|
border: 4px solid #d5d8de;
|
|
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
|
|
transition: width 0.5s ease-in-out;
|
|
min-width: 4%;
|
|
}
|
|
|
|
#ll_logo > img {
|
|
width: 40vw;
|
|
max-width: 700px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
#ll_preload_status {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 100;
|
|
opacity: 1 !important;
|
|
font-size: 18px;
|
|
color: rgba(0, 10, 20, 0.5);
|
|
|
|
font-family: "GameFont", Arial, sans-serif;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
}
|