html, body { height: 100%; margin: 0; width: 100%; } #overlay { background: rgba(0, 0, 0, 0.2); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } #overlay { align-items: center; background-color: #252526; bottom: 0; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; justify-content: center; left: 0; opacity: 1; position: absolute; right: 0; top: 0; transition: 150ms opacity ease; z-index: 2; } #overlay>.message { color: white; margin-top: 10px; opacity: 0.5; } #overlay.error>.message { color: white; opacity: 0.3; } #overlay>.activitybar { background-color: rgb(44, 44, 44); bottom: 0; height: 100%; left: 0; position: absolute; top: 0; width: 50px; } #overlay>.activitybar svg { fill: white; margin-left: 2px; margin-top: 2px; opacity: 0.3; } #overlay.error>#status { opacity: 0; } #overlay>.statusbar { background-color: rgb(0, 122, 204); bottom: 0; cursor: default; height: 22px; left: 0; position: absolute; right: 0; } #logo { transform-style: preserve-3d; } #logo>svg { fill: rgb(0, 122, 204); opacity: 1; width: 100px; } #status { background: rgba(255, 255, 255, 0.1); border-radius: 5px; box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.75); color: white; font-size: 0.9em; margin-top: 15px; min-width: 100px; position: relative; transition: 300ms opacity ease; } #status>#progress { background: rgba(0, 0, 0, 0.2); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; bottom: 0; height: 3px; left: 0; overflow: hidden; position: absolute; right: 0; } @-moz-keyframes statusProgress { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes statusProgress { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } #status>#progress>#fill { animation: statusProgress 2s ease infinite; background-size: 400% 400%; background: linear-gradient(270deg, #007acc, #0016cc); height: 100%; transition: 500ms width ease; width: 0%; }