/*
WARNING: THIS FILE DOES NOTHING
It exists only as a proposal of what CSS you should use in loading.js
The CSS inside of loading.js is precompiled in order to save 200ish milliseconds to the loading screen.
*/
@import (once) "./include/colortheme.less";
@import (once) "./include/browser.less";

#cp-loading {
    position: fixed;
    z-index: 10000000; // #loading
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: @colortheme_loading-bg;
    color: @colortheme_loading-color;
    text-align: center;
    font-size: 1.5em;
    .cp-loading-container {
        margin-top: 50vh;
        transform: translateY(-50%);
    }
    .cp-loading-cryptofist {
        margin-left: auto;
        margin-right: auto;
        height: 300px;
        margin-bottom: 2em;
        @media screen and (max-height: @browser_media-short-screen) {
            display: none;
        }
    }
    .cp-loading-spinner-container {
        position: relative;
        height: 100px;
        > div {
            height: 100px;
        }
    }
}
#cp-loading-tip {
    position: fixed;
    z-index: 10000000; // loading tip
    top: 80%;
    left: 0;
    right: 0;
    text-align: center;

    transition: opacity 750ms;
    transition-delay: 3000ms;
    @media screen and (max-height: @browser_media-medium-screen) {
        display: none;
    }
    span {
        background: @colortheme_loading-bg;
        color: @colortheme_loading-color;
        text-align: center;
        font-size: 1.5em;
        opacity: 0.7;
        font-family: @colortheme_font;
        padding: 15px;
        max-width: 60%;
        display: inline-block;
    }
}