1
0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-11 09:11:50 +00:00
tobspr_shapez.io/src/css/states/preload.scss

153 lines
3.5 KiB
SCSS
Raw Normal View History

2024-06-20 09:59:43 +00:00
#state_PreloadState {
.changelogDialogEntry {
margin-top: 1rem;
2024-06-20 09:59:43 +00:00
width: 100%;
flex-direction: column;
text-align: left;
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
border-radius: $globalBorderRadius;
2024-06-20 09:59:43 +00:00
@include DarkThemeOverride {
background: #33343c;
}
.version {
@include Heading;
}
.date {
@include PlainText;
&::before {
content: " | ";
}
color: #aaabaf;
}
.changes {
@include PlainText;
padding-left: 1.5rem;
margin-top: 1rem;
2024-06-20 09:59:43 +00:00
strong {
background: $colorBlueBright;
color: #fff;
text-transform: uppercase;
padding: 0.1rem 0.2rem;
margin-right: 0.3rem;
2024-06-20 09:59:43 +00:00
}
a {
color: $colorBlueBright;
}
li {
@include SuperSmallText;
margin-bottom: 0.5rem;
2024-06-20 09:59:43 +00:00
}
}
}
.failureBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
background: #d5d8de;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.logo {
img {
width: 24rem;
2024-06-20 09:59:43 +00:00
}
margin-bottom: 3rem;
2024-06-20 09:59:43 +00:00
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.failureInner {
// background: darken($mainBgColor, 6);
max-width: 35rem;
2024-06-20 09:59:43 +00:00
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
padding: 1.5rem;
border-radius: $globalBorderRadius;
2024-06-20 09:59:43 +00:00
@include DropShadow;
.errorHeader {
color: #ef5072;
}
.errorMessage {
@include PlainText;
display: block;
color: #666;
text-align: left;
overflow-wrap: break-word;
2024-06-20 09:59:43 +00:00
hyphens: auto;
// border: dotted #666;
padding: 1rem 0;
margin-top: 1rem;
2024-06-20 09:59:43 +00:00
}
.supportHelp {
margin-top: 1rem;
2024-06-20 09:59:43 +00:00
@include PlainText;
.email {
color: $themeColor;
cursor: pointer;
pointer-events: all;
}
}
.lower {
display: flex;
align-items: center;
margin-top: 1.6rem;
2024-06-20 09:59:43 +00:00
i {
flex-grow: 1;
text-align: right;
color: #777;
@include PlainText;
}
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
padding: 0.5rem 0.8rem 0.4rem;
2024-06-20 09:59:43 +00:00
color: #fff;
}
}
}
}
/* Animations */
.status {
transform: scale(0.7);
2024-06-20 09:59:43 +00:00
opacity: 0;
@include StateAnim(transform, opacity);
}
&.arrived {
.status {
opacity: 1;
transform: none;
}
}
}