src/assets/less/slide.less
@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; } }}