subline/views/shared/shared.css

/* Initialization for all pages */
*{margin:0;padding:0;font-family:'Saira',sans-serif;}

body{
    display: flex;
    flex-direction: column;
    color: rgb(0, 27, 45);
    min-height: 100vh;
}

/*
Header
*/
.header{
    display: flex;
    justify-content: space-between;
    background: #001b2d;
    width: 100%;
    height: 75px;
}

    .headerStart{
        display: flex;
        align-items:center;
        text-decoration: none;
        margin-left: 25px;
        width: 275px;
    }

        .headerStart img{
            max-height: 75%;
        }

        .headerLogo{
            color: white;
            font-size: 25px;
            margin-left: 10px;
        }

        .mobileHomeButton{
            display: none;
        }

    .headerEnd{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 25px;
        
    }

        .headerEnd > *{
            margin-left: 20px;
        }

        .headerEnd a{
            color: rgb(255, 99, 107);
        }

/* Loader */
#loaderContainer{
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 27, 45, 0.5);
    z-index: 2;
    position: fixed;
}

.loader{
    margin-bottom: 200px;
    margin-right: 100px;
}

.loader .outer{
    border: 10px solid rgba(255, 255, 255, 0);
    border-top: 10px solid rgba(255, 99, 107, 0.8);
    border-bottom: 10px solid rgba(255, 99, 107, 0.8);
    border-radius: 50%;
    height: 80px;
    width: 80px;
    animation: spin1 2s infinite;
    position: absolute;
}

.loader .mid{
    border: 10px solid rgba(255, 255, 255, 0);
    border-right: 10px solid rgba(0, 27, 45, 0.8);
    border-left: 10px solid rgba(0, 27, 45, 0.8);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    margin: 10px 0 0 10px;
    animation: spin2 2s infinite;
    position: absolute;
}

.loader .inner{
    border: 10px solid rgba(255, 255, 255, 0);
    border-top: 10px solid rgba(179, 191, 209, 0.8);
    border-bottom: 10px solid rgba(179, 191, 209, 0.8);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin: 20px 0 0 20px;
    animation: spin3 2s infinite;
    position: absolute;
}

.loader img{
    margin: 10px 0 0 10px;
    height: 70px;
    width: 80px;
    position: absolute;
    z-index: -1;
    animation: imgSpin 3s linear infinite;
}

@keyframes spin1{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin2{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
}

@keyframes spin3{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(1080deg); }
}

@keyframes imgSpin{
    0% { 
        transform: rotateY(0deg);
    }

    100% { 
        transform: rotateY(360deg);
    }
}

/* General style that should apply to all pages */
h1 {
    text-align: center;
    padding-bottom: 13px;
}

h3 {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
}

button{
    outline: 0;
}

button::-moz-focus-inner{
    border: 0;
}

.link{
    cursor: pointer;
    color: gray;
    text-decoration: underline;
    text-align: center;
    font-size: 20px;
}

    .link:hover {
        color: #ff636b;
        text-decoration: underline;
        cursor: pointer;
    }



.button{
    display: initial;
    background: rgb(0, 27, 45);
    border: none;
    text-decoration: none;
    padding: 2px 10px;
    color: rgb(255, 99, 107);
    cursor: pointer;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    min-width: 100px;
    margin: 5px;
    max-height: 52px;
}

    .button:hover{
        background: rgb(179, 191, 209);
    }

    .button:active{
        background: rgb(240, 252, 255);
    }

.linkButton{
    background: none;
    border: none;
    text-decoration: underline;
    color: white;
    cursor: pointer;
    margin: 5px;
    font-size: 15px;
}

.public-buttons {
    position: inherit;
    align-self: center;
    margin-right: 39px;
}

.buttonDisabled{
    background: gray;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px 5px;
    color: rgb(0, 27, 45);
    cursor: default;
    font-size: 25px;
    text-align: center;
}

.line-break{
    border: 1px solid rgb(255, 99, 107);
    margin: 30px 0;
}


.strand, .action{
    display: none;
}

.strand{
    transition: width 1s linear;
}

/*
Banner
*/
#bannerContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: absolute;
    margin-top: 15px;
    pointer-events: none;
    z-index: 100;
}

    .banner{
        display: flex;
        width: 75%;
        height: 65px;
        margin: 10px auto;
        box-shadow: 0 0 10px black;
        border: 2px solid black;
        background: white;
    }

        .banner > div{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25%;
            color: white;
        }

        .banner > p{
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            width: 75%;
            padding-left: 10px;
        }

        .banner > button{
            background: none;
            border: none;
            height: 20px;
            position: relative;
            top: -10px;
            right: -10px;
            cursor: pointer;
            color: white;
            pointer-events: all;
        }

@media screen and (max-width: 1400px){
    .button{
        font-size: 15px;
    }

    .header{
        height: 30px;
    }

        .headerStart{
            margin-left: 10px;
        }

        .headerEnd{
            font-size: 8px;
        }

        .headerLogo{
            white-space: nowrap;
            font-size: 10px;
        }

    .truncateLong{
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobileHide{
        display: none !important;
    }

    .headerStart{
        width: 0;
    }
}