@import url('./select-project.css'); @import url('./load-spec.css'); @import url('./error.css'); html, body { background-color: #edeae9; font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px; height: 100%; } #konfigurator-loading-overlay { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #konfigurator-loading-overlay div:first-child { display: block; position: absolute; left: 50%; top: 50%; margin-left: -.75em; margin-top: -.75em; width: 1.25em; height: 1.25em; border: .25em solid #F44; border-top-color: #c43b46; border-bottom-color: #c43b46; border-radius: 50%; animation: rotate 1.1s linear infinite; font-size: 3em; z-index: 1000; } #konfigurator { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0%; transition-property: opacity; transition-delay: 0.5s; transition-duration: 1s; } body.loaded #konfigurator { opacity: 100%; } #loading_screen { display: block; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 1; text-align: center; font-size: x-large; padding-top: 2em; color: #202020; text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.3); opacity: 100%; transition-property: opacity; transition-duration: 1s; pointer-events: none; } #introfade { background-repeat: no-repeat; margin-top: 25vh; margin-bottom: 1em; width: 100%; height: 25vh; background-image: url('../images/zabra-logo.svg'); background-size: contain; background-position: center; animation: 1s ease-in fade ; } body.loaded #loading_screen { opacity: 0%; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fade { 0% { opacity: 0%; } 100% { opacity: 100%; } } #fancy-progress { width: 25vw; height: 1em; border-radius: 0.5em; overflow: hidden; background-image: /* moving diagonal bars */ repeating-linear-gradient(45deg, #FFF 0px, #FFF 15px, #CCC 15px, #CCC 30px); background-blend-mode: normal; background-size: 85px 1em; animation: scroll-diagonal 3s linear infinite; border: 1px solid #AAA; position: absolute; margin-left: -12.5vw; margin-top: .5em; left: 50%; } @keyframes scroll-diagonal { from { background-position: 0 0; } to { background-position: 85px 0px; } }