slick carroussel

user/themes/epau-antimatter/css-compiled/template.css

@@ -1746,10 +1746,8 @@ h1 {
 .slick-next {
   position: absolute;
   display: block;
-  height: 20px;
-  width: 20px;
-  line-height: 0px;
-  font-size: 0px;
+  opacity: 0.5;
+  width: 60px;
   cursor: pointer;
   background: transparent;
   color: transparent;
@@ -1760,48 +1758,26 @@ h1 {
   padding: 0;
   border: none;
   outline: none; }
-  .slick-prev:hover, .slick-prev:focus,
-  .slick-next:hover,
-  .slick-next:focus {
-    outline: none;
-    background: transparent;
-    color: transparent; }
-    .slick-prev:hover:before, .slick-prev:focus:before,
-    .slick-next:hover:before,
-    .slick-next:focus:before {
-      opacity: 1; }
-  .slick-prev.slick-disabled:before,
-  .slick-next.slick-disabled:before {
-    opacity: 0.25; }
-  .slick-prev:before,
-  .slick-next:before {
-    font-family: "slick";
-    font-size: 20px;
-    line-height: 1;
-    color: white;
-    opacity: 0.75;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale; }
 
 .slick-prev {
-  left: 5%; }
+  left: 100px; }
   [dir="rtl"] .slick-prev {
     left: auto;
-    right: 5%; }
+    right: 100px; }
   .slick-prev:before {
-    content: url("../../images/fleche_blanche.svg"); }
+    content: url(../images/chevron_to_left.svg); }
     [dir="rtl"] .slick-prev:before {
-      content: url("../../images/fleche_blanche.svg"); }
+      content: url(../images/chevron_to_right.svg); }
 
 .slick-next {
-  right: -25px; }
+  right: 100px; }
   [dir="rtl"] .slick-next {
-    left: -25px;
+    left: 100px;
     right: auto; }
   .slick-next:before {
-    content: url("../../images/fleche_blanche.svg"); }
+    content: url(../images/chevron_to_right.svg); }
     [dir="rtl"] .slick-next:before {
-      content: url("../../images/fleche_blanche.svg"); }
+      content: url(../images/chevron_to_left.svg); }
 
 /* Dots */
 .slick-dotted.slick-slider {
@@ -1911,7 +1887,7 @@ h1 {
 
 .slick-slide {
   float: left;
-  height: 100%;
+  height: 50vh;
   min-height: 1px;
   display: none; }
   [dir="rtl"] .slick-slide {

user/themes/epau-antimatter/css-compiled/template/slick-theme.css

@@ -54,14 +54,14 @@
     -moz-osx-font-smoothing: grayscale; }
 
 .slick-prev {
-  left: 5%; }
+  left: -25px; }
   [dir="rtl"] .slick-prev {
     left: auto;
-    right: 5%; }
+    right: -25px; }
   .slick-prev:before {
-    content: url("../../images/fleche_blanche.svg"); }
+    content: "←"; }
     [dir="rtl"] .slick-prev:before {
-      content: url("../../images/fleche_blanche.svg"); }
+      content: "→"; }
 
 .slick-next {
   right: -25px; }
@@ -69,9 +69,9 @@
     left: -25px;
     right: auto; }
   .slick-next:before {
-    content: url("../../images/fleche_blanche.svg"); }
+    content: "→"; }
     [dir="rtl"] .slick-next:before {
-      content: url("../../images/fleche_blanche.svg"); }
+      content: "←"; }
 
 /* Dots */
 .slick-dotted.slick-slider {

user/themes/epau-antimatter/images/chevron_to_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>

user/themes/epau-antimatter/images/chevron_to_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>

user/themes/epau-antimatter/images/fleche_blanche.svg

@@ -6,7 +6,7 @@
    viewBox="0 0 51.400001 18.692308"
    xml:space="preserve"
    id="svg8"
-   sodipodi:docname="flèche_blanche.svg"
+   sodipodi:docname="fleche_blanche.svg"
    inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
    width="29.653847"
    height="18.692308"

user/themes/epau-antimatter/images/noun_Arrow_3771902.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 52 33"
+   xml:space="preserve"
+   id="svg8"
+   sodipodi:docname="noun_Arrow_3771902.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   width="30"
+   height="auto"
+   inkscape:export-filename="/home/ouidade/Sites/EQL/docker-eql/src_d9/web/themes/custom/eql/images/pictos/noun_Arrow_3771902.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+     id="metadata14"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs12" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="6.92"
+     inkscape:cx="20.953757"
+     inkscape:cy="38.222543"
+     inkscape:window-x="0"
+     inkscape:window-y="36"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8"
+     inkscape:pagecheckerboard="0"
+     width="99px" /><polygon
+     points="71.9,49 24.3,49 24.3,51 71.9,51 58.1,64.8 59.5,66.2 75.7,50 59.5,33.8 58.1,35.2 "
+     id="polygon2"
+     inkscape:export-filename="/home/ouidade/Sites/EQL/docker-eql/src_d9/web/themes/custom/eql/images/pictos/polygon2.png"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300"
+     transform="translate(-23.815852,-33.316918)" /></svg>

user/themes/epau-antimatter/scss/template.scss

@@ -69,5 +69,6 @@
 // Media Queries
 @import "template/mediaqueries";
 
-@import "template/slick-theme.scss";
-@import "template/slick.scss";
+// @import "template/slick_custom";
+@import "template/slick-theme";
+@import "template/slick";

user/themes/epau-antimatter/scss/template/slick-theme.scss → user/themes/epau-antimatter/scss/template/_slick-theme.scss

@@ -13,8 +13,8 @@ $slick-loader-path: "./" !default;
 $slick-arrow-color: white !default;
 $slick-dot-color: black !default;
 $slick-dot-color-active: $slick-dot-color !default;
-$slick-prev-character: "\2190" !default;
-$slick-next-character: "\2192" !default;
+$slick-prev-character: url(../images/chevron_to_left.svg);
+$slick-next-character: url(../images/chevron_to_right.svg);
 $slick-dot-character: "\2022" !default;
 $slick-dot-size: 6px !default;
 $slick-opacity-default: 0.75 !default;
@@ -64,10 +64,11 @@ $slick-opacity-not-active: 0.25 !default;
 .slick-next {
     position: absolute;
     display: block;
-    height: 20px;
-    width: 20px;
-    line-height: 0px;
-    font-size: 0px;
+    opacity: 0.5;
+    // height: 50px;
+    width: 60px;
+    // line-height: 2rem;
+    // font-size: 8rem;
     cursor: pointer;
     background: transparent;
     color: transparent;
@@ -78,52 +79,54 @@ $slick-opacity-not-active: 0.25 !default;
     padding: 0;
     border: none;
     outline: none;
-    &:hover, &:focus {
-        outline: none;
-        background: transparent;
-        color: transparent;
-        &:before {
-            opacity: $slick-opacity-on-hover;
-        }
-    }
-    &.slick-disabled:before {
-        opacity: $slick-opacity-not-active;
-    }
-    &:before {
-        font-family: $slick-font-family;
-        font-size: 20px;
-        line-height: 1;
-        color: $slick-arrow-color;
-        opacity: $slick-opacity-default;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
+    // &:hover, &:focus {
+    //     outline: none;
+    //     background: transparent;
+    //     color: transparent;
+    //     &:before {
+    //         opacity: $slick-opacity-on-hover;
+    //     }
+    // }
+    // &.slick-disabled:before {
+    //     opacity: $slick-opacity-not-active;
+    // }
+    // &:before {
+    //     font-family: $slick-font-family;
+    //     font-size: 50px;
+
+    //     line-height: 1;
+    //     color: $slick-arrow-color;
+    //     opacity: $slick-opacity-default;
+    //     -webkit-font-smoothing: antialiased;
+    //     -moz-osx-font-smoothing: grayscale;
+    // }
 }
 
 .slick-prev {
-    left: 5%;
+    left: 100px;
     [dir="rtl"] & {
         left: auto;
-        right: 5%;
+        right: 100px;
     }
+    
     &:before {
-        content: url("../../images/fleche_blanche.svg");
+        content: $slick-prev-character;
         [dir="rtl"] & {
-            content: url("../../images/fleche_blanche.svg");
+            content: $slick-next-character;
         }
     }
 }
 
 .slick-next {
-    right: -25px;
+    right: 100px;
     [dir="rtl"] & {
-        left: -25px;
+        left: 100px;
         right: auto;
     }
     &:before {
-        content: url("../../images/fleche_blanche.svg");
+        content: $slick-next-character;
         [dir="rtl"] & {
-            content: url("../../images/fleche_blanche.svg");
+            content: $slick-prev-character;
         }
     }
 }

user/themes/epau-antimatter/scss/template/slick.scss → user/themes/epau-antimatter/scss/template/_slick.scss

@@ -63,7 +63,7 @@
 }
 .slick-slide {
     float: left;
-    height: 100%;
+    height: 50vh;
     min-height: 1px;
     [dir="rtl"] & {
         float: right;