JustalK/PORTFOLIO

@import (reference) "libs/constants.less";
@import (reference) "libs/mixins.less";
 
.slide {
    height: 100%;
 
    & .borders_bottom_left,
    & .borders_top_right {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: @LAYER-COUCHE-1;
 
        &::after,
        &::before {
            content: ' ';
            position: absolute;
            z-index: @LAYER-ANIMATION;
        }
    }
 
    & .borders_top_right {
        &::before {
            width: 100%;
            height: 1px;
            top: 0;
            left: 0;
            background: linear-gradient(to right, transparent, #61c3ff);
            animation: going_right 8s linear infinite;
        }
 
        @keyframes going_right {
            0% {
                transform: translateX(-100%);
            }
 
            100% {
                transform: translateX(100%);
            }
        }
 
        &::after {
            width: 1px;
            height: 100%;
            top: 0;
            right: 0;
            background: linear-gradient(to bottom, transparent, #61c3ff);
            transform: translateY(-100%);
            animation: going_down 8s linear infinite;
            animation-delay: 4s;
        }
 
        @keyframes going_down {
            0% {
                transform: translateY(-100%);
            }
 
            100% {
                transform: translateY(100%);
            }
        }
    }
 
    & .borders_bottom_left {
        &::before {
            width: 100%;
            height: 1px;
            bottom: 0;
            right: 0;
            background: linear-gradient(to left, transparent, #61c3ff);
            animation: going_left 8s linear infinite;
        }
 
        @keyframes going_left {
            0% {
                transform: translateX(100%);
            }
 
            100% {
                transform: translateX(-100%);
            }
        }
 
        &::after {
            width: 1px;
            height: 100%;
            bottom: 0;
            left: 0;
            background: linear-gradient(to top, transparent, #61c3ff);
            transform: translateY(100%);
            animation: going_top 8s linear infinite;
            animation-delay: 4s;
        }
 
        @keyframes going_top {
            0% {
                transform: translateY(100%);
            }
 
            100% {
                transform: translateY(-100%);
            }
        }
    }
 
    & .slider_ads {
        position: absolute;
        left: 30%;
        top: calc(400px - 88px);
        color: white;
        width: 70%;
        text-align: center;
        animation: blinker 3s linear infinite;
        .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.5s);
    }
 
    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }
 
    & .slider_images {
        position: absolute;
        right: 0;
        width: 70%;
        height: calc(400px - 85px);
        top: 0;
        margin-top: 41px;
        border-bottom: 1px solid black;
        background: #1d1d23e8;
        .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.5s);
 
        & img {
            position: absolute;
            right: 50%;
            top: 50%;
            width: 480px;
            height: 280px;
            border: 1px solid black;
            transform: translateX(200%);
            .transition(all 0.5s cubic-bezier(0.8, 0, 0.25, 1));
 
            &.loaded {
                transform: translateX(50%) translateY(-50%);
            }
        }
    }
 
    & .slider_legend {
        position: absolute;
        bottom: 0;
        right: 0;
        top: calc(400px - 44px);
        width: 70%;
        text-align: center;
        background: #1d1d23;
        height: 44px;
        display: block;
        line-height: 42px;
        color: white;
        border-top: 1px solid black;
        font-size: 1.2rem;
        font-family: 'Lato-Bold', sans-serif;
        box-shadow: 0 0 5px rgb(0 0 0 / 75%);
        .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 1s);
    }
 
    .informations {
        position: absolute;
        left: 0;
        top: 0;
        padding-top: 42px;
        height: calc(100% - 42px);
        width: 30%;
        background: #1d1d23ab;
        min-width: 250px;
        border-right: 1px solid black;
        .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.25s);
 
        & .slider_index {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style-type: none;
 
            & li {
                height: 42px;
                list-style-type: none;
                background: #1d1d23;
                padding-left: 10px;
                display: flex;
                border-top: 1px solid black;
                align-items: center;
                font-size: 1.2rem;
                font-family: 'Lato-Bold', sans-serif;
                color: white;
                position: relative;
 
                &::before {
                    content: ' ';
                    display: block;
                    width: 15px;
                    height: 15px;
                    margin-right: 8px;
                    background: #302c30;
                    border-radius: 50%;
                    .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1));
                }
 
                &:hover {
                    &::before {
                        background: #61c3ff;
                    }
                }
 
                &.selected {
                    &::before {
                        background: white;
                    }
                }
            }
        }
 
        & .field {
            margin: 20px;
 
            & span:nth-child(1) {
                display: block;
                padding-bottom: 10px;
                .font-size(1.5);
            }
 
            & span:nth-child(2) {
                font-family: 'Lato-Bold', sans-serif;
                color: @text-color-white;
                .font-size(1.2);
            }
        }
    }
 
    .description {
        position: absolute;
        right: 0;
        bottom: 0;
        background: rgba(29, 29, 35, 0.8);
        width: calc(70% - 1px);
        height: 200px;
        overflow: hidden;
        border-top: 1px solid black;
        .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.75s);
 
        & .block {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
 
            & .block_information {
                position: absolute;
                left: 44px;
                height: 100%;
                background: rgb(17 17 22);
                transform: skewX(-20deg);
                display: flex;
                justify-content: center;
                align-items: center;
 
                & span {
                    transform: skewX(20deg);
                    font-size: 1.5rem;
                    width: 330px;
                    .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1));
                }
            }
 
            & .block_title {
                position: absolute;
                width: 42px;
                height: 200%;
                bottom: 0;
                transform: translateY(25%) rotateZ(20deg);
                background: #302c30;
                text-align: center;
                border: 1px solid black;
                display: flex;
                align-items: center;
                justify-content: center;
 
                & span {
                    font-family: 'Lato-Bold', sans-serif;
                    transform: rotateZ(-90deg);
                    font-size: 1.2rem;
                    color: white;
                }
            }
 
            &.block_1 {
                left: 111px;
                width: calc(100% - 111px);
                z-index: 2;
                .transition(all 0.25s cubic-bezier(0.8, 0, 0.25, 1));
 
                & .block_information {
                    width: calc(100% - 109px);
                }
            }
 
            &.block_2 {
                left: 66px;
                width: calc(100% - 66px);
                z-index: 1;
 
                & .block_information {
                    width: calc(100% - 109px);
                }
            }
        }
 
        &.loading {
            & .block {
                & .block_information {
                    span {
                        opacity: 0;
                    }
                }
            }
        }
 
        &::before {
            content: ' ';
            position: absolute;
            left: 0;
            top: 0;
            width: 130px;
            height: 100%;
            background: @text-color-h2;
            border-right: 1px solid @background-shadow;
            transform: skewX(-20deg) translateX(-50%);
            z-index: 3;
        }
 
        &::after {
            content: ' ';
            position: absolute;
            right: 0;
            top: 0;
            width: 130px;
            height: 100%;
            background: @text-color-h2;
            border-left: 1px solid @background-shadow;
            transform: skewX(-20deg) translateX(50%);
            z-index: 3;
        }
 
        &:hover {
            & .block_1 {
                transform: translate3d(calc(100% - 109px), 0, 0);
            }
        }
    }
 
    &.invisible {
        & .informations {
            transform: translateY(-100%);
        }
 
        & .slider_images {
            transform: translateX(100%);
        }
 
        & .slider_ads {
            transform: translateX(100%);
        }
 
        & .slider_legend {
            transform: translateX(100%);
        }
 
        & .description {
            transform: translateY(100%);
        }
    }
}
 
@media screen and (max-width: @SCREEN_1200) {
    .slide {
        & .informations {
            height: calc(100% - 243px);
            min-width: initial;
 
            & .slider_index {
                display: flex;
                flex-wrap: wrap;
 
                & li {
                    width: calc(50% - 10px);
                }
            }
        }
 
        & .description {
            width: 100%;
        }
    }
}
 
@media screen and (max-width: @SCREEN_900) {
    .slide {
        & .slider_images {
            width: 100%;
        }
 
        & .slider_ads {
            left: 0;
            width: 100%;
        }
 
        & .slider_legend {
            width: 100%;
            border-bottom: 1px solid @background-shadow;
        }
 
        & .informations {
            top: 400px;
            padding-top: 0;
            height: calc(100% - 400px);
 
            & .slider_index {
                display: unset;
 
                & li {
                    width: unset;
                }
            }
        }
 
        & .description_mobile {
            background: #1d1d23;
            position: absolute;
            right: 0;
            bottom: 0;
            width: calc(70% - 1px);
            height: calc(100% - 400px);
            overflow: auto;
 
            & span {
                font-size: 1.5rem;
                padding: 20px;
                display: block;
            }
        }
 
        & .description {
            display: none;
        }
    }
}
 
@media screen and (max-width: @MOBILE) {
    .slide {
        & .informations {
            width: 100%;
            height: 180px;
            top: unset;
            bottom: 0;
            display: flex;
            justify-content: space-evenly;
            background: #302c30db;
 
            & .field {
                margin: 20px;
                width: 20%;
            }
 
            & .slider_index {
                display: flex;
 
                & li {
                    width: calc(50% - 20px);
                    padding-left: 20px;
                }
            }
        }
 
        & .description_mobile {
            width: 100%;
            height: 319px;
            bottom: 180px;
            background: #302c30db;
            border-bottom: 1px solid black;
        }
    }
}