#state_PreloadState { .changelogDialogEntry { margin-top: 1rem; width: 100%; flex-direction: column; text-align: left; padding: 10px; box-sizing: border-box; background: #eef1f4; border-radius: $globalBorderRadius; @include DarkThemeOverride { background: #33343c; } .version { @include Heading; } .date { @include PlainText; &::before { content: " | "; } color: #aaabaf; } .changes { @include PlainText; padding-left: 1.5rem; margin-top: 1rem; strong { background: $colorBlueBright; color: #fff; text-transform: uppercase; padding: 0.1rem 0.2rem; margin-right: 0.3rem; } a { color: $colorBlueBright; } li { @include SuperSmallText; margin-bottom: 0.5rem; } } } .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; } margin-bottom: 3rem; } @include InlineAnimation(0.3s ease-in-out) { 0% { opacity: 0; } 100% { opacity: 1; } } .failureInner { // background: darken($mainBgColor, 6); max-width: 35rem; margin: 0 20px; text-align: left; @include BoxShadow3D(#fff); padding: 1.5rem; border-radius: $globalBorderRadius; @include DropShadow; .errorHeader { color: #ef5072; } .errorMessage { @include PlainText; display: block; color: #666; text-align: left; overflow-wrap: break-word; hyphens: auto; // border: dotted #666; padding: 1rem 0; margin-top: 1rem; } .supportHelp { margin-top: 1rem; @include PlainText; .email { color: $themeColor; cursor: pointer; pointer-events: all; } } .lower { display: flex; align-items: center; margin-top: 1.6rem; 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; color: #fff; } } } } /* Animations */ .status { transform: scale(0.7); opacity: 0; @include StateAnim(transform, opacity); } &.arrived { .status { opacity: 1; transform: none; } } }