diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index a504cc8..7a07037 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -5757,6 +5757,71 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to margin-bottom: -46rem; } +.carousel { + display: none; +} + +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top { + display: flex !important; + flex-direction: column; + margin-left: 11%; +} +@media screen and (min-width: 1100px) { + .page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top { + display: flex; + } +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block { + margin-left: 0; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images { + margin-top: 5rem; + padding: 0; + order: 7; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel { + display: block; + max-width: 80vw; + margin: auto; + text-align: center; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container { + position: relative; + height: 500px; + max-height: 500px; + overflow: hidden; + width: 100%; + object-fit: contain; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container img { + width: 100%; + height: 100%; + object-fit: contain; + transition: transform 0.3s ease-in-out; + border: none; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container img.animate { + transform: scale(1.02); +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .arrow { + display: none !important; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .caption { + margin-top: 10px; + font-family: sans-serif; + display: none !important; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper { + display: none !important; +} +.page-node-type-ressource .type-media-vidéos.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items { + display: none; +} +.page-node-type-ressource .block-region-third { + transform: translateY(-46rem); + margin-bottom: -46rem; +} + /*partials*/ .layout-container { position: relative; diff --git a/web/themes/custom/eql/scss/pages/_ressource-type-en-images copy.scss b/web/themes/custom/eql/scss/pages/_ressource-type-en-images copy.scss deleted file mode 100644 index 53d86ae..0000000 --- a/web/themes/custom/eql/scss/pages/_ressource-type-en-images copy.scss +++ /dev/null @@ -1,157 +0,0 @@ -.carousel{display: none;} -.page-node-type-ressource{ - - .type-les-projets-en-images.layout__region--top{ - .block-region-top{ - display: flex !important; - flex-direction: column; - margin-left: 11%; - @media screen and (min-width:1100px) { - display: flex; - } - .block { - margin-left: 0; - } - .block-entity-fieldnodefield-images{ - margin-top: 5rem; - padding: 0; - order: 7; - - .carousel { - display: block; - max-width: 60vw; - margin: auto; - text-align: center; - - .main-image-container { - position: relative; - // background: #e0f5ff; - height: 500px; - max-height: 500px; - overflow: hidden; - width: 100%; - object-fit: contain; - - img { - width: 100%; - height: 100%; - object-fit: contain; - transition: transform 0.3s ease-in-out; - border: none ; - // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité - &.animate { - transform: scale(1.02); // léger effet smooth sur changement - } - } - - .arrow { - position: absolute; - top: 50%; - transform: translateY(-50%); - background: #00aaff; - border-radius: 50%; - padding: 5px 10px; - color: white; - cursor: pointer; - content - - &.left { - left: 10px; - } - - &.right { - right: 10px; - } - } - // #prevArrow{ - // &::before{ - // content:url("../images/pictos/fleche-droite-dans-rond.png"); - // display: block; - // transform: scaleX(-1); - // width: 50px; - // } - // } - // #nextArrow{ - // &::before{ - // content:url("../images/pictos/fleche-droite-dans-rond.png"); - // display: block; - // } - // } - } - - .caption { - margin-top: 10px; - font-family: sans-serif; - } - - .thumbnails-wrapper { - position: relative; - max-width: 100%; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - - .thumb-arrow { - cursor: pointer; - padding: 5px 10px; - background: #00aaff; - color: white; - border-radius: 50%; - user-select: none; - z-index: 2; - // font-weight: bold; - - &.left { - margin-right: 10px; - } - - &.right { - margin-left: 10px; - } - } - - .thumbnails { - display: flex; - gap: 10px; - overflow-x: auto; - scroll-behavior: smooth; - max-width: 100%; - padding: 10px 0; - scrollbar-width: none; // Firefox - - &::-webkit-scrollbar { - display: none; // Chrome, Safari - } - - img { - width: 60px; - height: 60px; - object-fit: cover; - border: 2px solid transparent; - cursor: pointer; - - &.active { - border-color: #00aaff; - } - } - } - } - } - - // Masquer les images Drupal originales (facultatif) - .field__items { - display: none; - } - } - - } - - - } - - .block-region-third{ - transform: translateY(-46rem); - margin-bottom: -46rem; - } -} \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_ressource-type-media-vidéos.scss b/web/themes/custom/eql/scss/pages/_ressource-type-media-vidéos.scss new file mode 100644 index 0000000..a1365f1 --- /dev/null +++ b/web/themes/custom/eql/scss/pages/_ressource-type-media-vidéos.scss @@ -0,0 +1,82 @@ +.carousel{display: none;} +.page-node-type-ressource{ + + .type-media-vidéos.layout__region--top{ + .block-region-top{ + display: flex !important; + flex-direction: column; + margin-left: 11%; + @media screen and (min-width:1100px) { + display: flex; + } + .block { + margin-left: 0; + } + .block-entity-fieldnodefield-images{ + margin-top: 5rem; + padding: 0; + order: 7; + + + .carousel { + display: block; + max-width: 80vw; + margin: auto; + text-align: center; + + .main-image-container { + position: relative; + // background: #e0f5ff; + height: 500px; + max-height: 500px; + overflow: hidden; + width: 100%; + object-fit: contain; + + img { + width: 100%; + height: 100%; + object-fit: contain; + transition: transform 0.3s ease-in-out; + border: none ; + // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité + &.animate { + transform: scale(1.02); // léger effet smooth sur changement + } + } + + .arrow { + display: none !important; + } + + } + + .caption { + margin-top: 10px; + font-family: sans-serif; + display: none !important; + + } + + .thumbnails-wrapper { + display: none !important; + + + } + } + // Masquer les images Drupal originales (facultatif) + .field__items { + display: none; + } + } + + } + + + } + + .block-region-third{ + transform: translateY(-46rem); + margin-bottom: -46rem; + } +} \ No newline at end of file diff --git a/web/themes/custom/eql/scss/styles.scss b/web/themes/custom/eql/scss/styles.scss index 6fc27c1..a6f0f91 100644 --- a/web/themes/custom/eql/scss/styles.scss +++ b/web/themes/custom/eql/scss/styles.scss @@ -54,7 +54,7 @@ @import "pages/_lincubateur_newpage"; @import "pages/ressources"; @import "pages/ressource-type-en-images"; - +@import "pages/_ressource-type-media-vidéos"; /*partials*/