type media videos

2025-05-27 15:33:47 +02:00
parent 1b110ac316
commit a7abf60b1b
93 changed files with 12353 additions and 17 deletions
@@ -0,0 +1,157 @@
+.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;
+        }
+}    
@@ -13,6 +13,7 @@
                margin-left: 0;
            }
            .block-entity-fieldnodefield-images{
+              margin-top: 5rem;
                padding: 0;
                order: 7;

@@ -144,8 +145,13 @@
                  }
            }
            
+            }
+
+            
        }

-    // }
-    }
+        .block-region-third{
+          transform: translateY(-46rem);
+          margin-bottom: -46rem;
+        }
 }