tutorial.styl

/**
 * Tutorial styles.
 */

@import 'lib';

.tutorial-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    width: 100%;
    height: 100%;
    overflow: hidden;

    background-color: $greyscale-black;
}

.slide {
    position: fixed;

    width: 100%;
    height: 100%;
    min-width: 192rem;
    min-height: 108rem;

    transition: opacity 1s;

    &.hidden {
        display: block;
        opacity: 0;
        visibility: hidden;

        transition: none;

        .slide-button {
            display: none;
        }
    }
}

.slide-section-top,
.slide-section-bottom {
    position: absolute;
    left: 50%;

    transform: translateX(-50%);
}

.slide-section-top {
    top: 3.5rem;

    width: 150rem;
    height: 8rem;

    font-size: 3.8rem;
    font-style: italic;
    line-height: 8rem;
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 0, 0, .5);

    color: $greyscale-white;

    b {
        display: inline-block;
        margin: 0 .5rem;
        padding: 0 4rem;
        border-radius: 4rem;
        box-shadow: 0 0 5px rgba(0, 0, 0, .5);

        font-size: 4.5rem;
        font-weight: normal;
        text-indent: -.8rem;
        text-align: center;

        background-color: $greyscale-black;
    }
}

.slide-section-mid {
    width: 100%;
    height: 100%;

    .circle {
        position: absolute;
        top: 50%;
        left: 50%;

        width: 21.8rem;
        height: 21.8rem;
        margin: -10.9rem 0 0 -10.9rem;
        padding: 4.5rem 0;
        border-radius: 50%;

        font-size: 1.9rem;
        font-style: italic;
        line-height: 2.5rem;
        text-align: center;

        color: $greyscale-black;
        background-color: $greyscale-white;

        &::before {
            content: '';

            display: block;
            width: 9rem;
            height: 9rem;
            margin: 0 auto 1.3rem;

            background-image: url('../img/tutorial_install.png');
        }
    }

    .text {
        position: absolute;
        top: 19.5rem;
        left: 50%;

        width: 50rem;
        margin-left: -25rem;

        font-size: 4.2rem;
        font-style: italic;
        line-height: 4.2rem;
        text-align: center;

        color: $greyscale-white;
    }
}

.slide-section-bottom {
    bottom: 5.5rem;
}

.slide-image {
    width: 100%;
    height: 100%;
}

for num in (1..3) {
    .slide-image-0{num} {
        background-image: url('../img/tutorial_' + num + '.png');
    }
}

.slide-button {
    &::-moz-focus-inner {
        border: 0;
    }

    &[data-type="rounded-corner-text"] {
        width: 23.7rem;
        margin: 0 2rem;

        font-family: $primary-font-family;

        background-image: none;
    }
}