carrousel
This commit is contained in:
@@ -933,8 +933,9 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
|
||||
text-align: left;
|
||||
margin-bottom: 0rem !important; }
|
||||
.titre_bsn p {
|
||||
text-transform: uppercase;
|
||||
padding-right: 15%; }
|
||||
.titre_bsn .chapeau {
|
||||
text-transform: uppercase; }
|
||||
@media (max-width: 442px) {
|
||||
.titre_bsn {
|
||||
margin-left: 30%; }
|
||||
@@ -962,13 +963,17 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
|
||||
animation: glissement 1.2s 1 normal ease-in-out forwards; }
|
||||
|
||||
.programmes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 8rem; }
|
||||
.programmes .slick-list {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
padding: 0px 150px !important; }
|
||||
.programmes .slick-list .slick-slide {
|
||||
width: min-content; }
|
||||
|
||||
.programme {
|
||||
z-index: 1;
|
||||
@@ -991,13 +996,50 @@ body#top.modular.fullwidth.title-center.title-h1h2 {
|
||||
.programme {
|
||||
min-width: 20rem; } }
|
||||
|
||||
.programme:hover {
|
||||
background-color: #000;
|
||||
transition: 0.2s ease-in-out; }
|
||||
.programme:hover p {
|
||||
color: #fff; }
|
||||
.programme:hover h4 {
|
||||
color: #fff; }
|
||||
/*CSS pour afficher/masquer un texte via un bouton*/
|
||||
/*Style du module TEXTE*/
|
||||
.texte-cache-raisondetre {
|
||||
position: relative;
|
||||
max-height: 200px;
|
||||
/*Hauteur du texte visible avant le clic*/
|
||||
overflow: hidden;
|
||||
/*On cache tout ce qui dépasse des 400px*/
|
||||
transition: max-height 1s ease;
|
||||
/* Transition CSS entre l'ouverture et la fermeture*/ }
|
||||
@media (max-width: 1024px) {
|
||||
.texte-cache-raisondetre {
|
||||
max-height: 200px; } }
|
||||
@media (max-width: 442px) {
|
||||
.texte-cache-raisondetre {
|
||||
max-height: 200px; } }
|
||||
|
||||
/*Style du module TEXTE lorsqu'il est ouvert*/
|
||||
.texte-cache-raisondetre.ouvert {
|
||||
max-height: 300vh;
|
||||
/* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/ }
|
||||
|
||||
/*On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"*/
|
||||
.texte-cache-raisondetre:not(.ouvert)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
|
||||
.bouton-raisondetre {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: solid;
|
||||
border-radius: 0px !important;
|
||||
background-color: transparent;
|
||||
text-transform: uppercase;
|
||||
left: 45%;
|
||||
margin-bottom: 2rem !important; }
|
||||
@media (max-width: 442px) {
|
||||
.bouton-raisondetre {
|
||||
left: 0%; } }
|
||||
|
||||
/*CSS pour afficher/masquer un texte via un bouton*/
|
||||
/*Style du module TEXTE*/
|
||||
@@ -1686,3 +1728,208 @@ h1 {
|
||||
|
||||
.modular .modular-row:last-child {
|
||||
margin-bottom: 2rem; }
|
||||
|
||||
/* Slider */
|
||||
.slick-loading .slick-list {
|
||||
background: #fff url("./ajax-loader.gif") center center no-repeat; }
|
||||
|
||||
/* Icons */
|
||||
@font-face {
|
||||
font-family: "slick";
|
||||
src: url("./fonts/slick.eot");
|
||||
src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
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%; }
|
||||
[dir="rtl"] .slick-prev {
|
||||
left: auto;
|
||||
right: 5%; }
|
||||
.slick-prev:before {
|
||||
content: url("../../images/fleche_blanche.svg"); }
|
||||
[dir="rtl"] .slick-prev:before {
|
||||
content: url("../../images/fleche_blanche.svg"); }
|
||||
|
||||
.slick-next {
|
||||
right: -25px; }
|
||||
[dir="rtl"] .slick-next {
|
||||
left: -25px;
|
||||
right: auto; }
|
||||
.slick-next:before {
|
||||
content: url("../../images/fleche_blanche.svg"); }
|
||||
[dir="rtl"] .slick-next:before {
|
||||
content: url("../../images/fleche_blanche.svg"); }
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px; }
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%; }
|
||||
.slick-dots li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer; }
|
||||
.slick-dots li button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer; }
|
||||
.slick-dots li button:hover, .slick-dots li button:focus {
|
||||
outline: none; }
|
||||
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
|
||||
opacity: 1; }
|
||||
.slick-dots li button:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "•";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: "slick";
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
opacity: 0.25;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; }
|
||||
.slick-dots li.slick-active button:before {
|
||||
color: black;
|
||||
opacity: 0.75; }
|
||||
|
||||
/* Slider */
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.slick-list:focus {
|
||||
outline: none; }
|
||||
.slick-list.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand; }
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0); }
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
.slick-track:before, .slick-track:after {
|
||||
content: "";
|
||||
display: table; }
|
||||
.slick-track:after {
|
||||
clear: both; }
|
||||
.slick-loading .slick-track {
|
||||
visibility: hidden; }
|
||||
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
display: none; }
|
||||
[dir="rtl"] .slick-slide {
|
||||
float: right; }
|
||||
.slick-slide img {
|
||||
display: block; }
|
||||
.slick-slide.slick-loading img {
|
||||
display: none; }
|
||||
.slick-slide.dragging img {
|
||||
pointer-events: none; }
|
||||
.slick-initialized .slick-slide {
|
||||
display: block; }
|
||||
.slick-loading .slick-slide {
|
||||
visibility: hidden; }
|
||||
.slick-vertical .slick-slide {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent; }
|
||||
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none; }
|
||||
|
||||
Reference in New Issue
Block a user