Static/Css/slideshow.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76


/* 
############################################################################
#                                                                          #
# Description: CSS spécifique au slideshow                                 #
#                                                                          #
############################################################################ 
*/


.slideDotSelected {
    color:     var(--mainSiteColor);
    transform: scale(1.4);
}

#secSlides {
    display:             flex;
    flex-direction:      column;
    text-align:          center;
    width:               100%;
    height:              70vh;
    background-color:    var(--navbarBg);
    background-image:    url("/Media/Images/slide0.jpg");
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center;
    transition:          background-image 0.3s linear;
}

#secSlides p {
    z-index:                   1;
    display:                   none;
    margin:                    auto;
    max-width:                 80%;
    font-size:                 var(--fontSizeSlideP);
    color:                     var(--slideText);
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-name:            textSlide;
    animation-duration:        5s;
    animation-iteration-count: infinite;
}

#secSlides p span {
    font-family: akira;
    color:       var(--mainSiteColor);
    text-shadow:
         1px  1px 0 var(--slideStroke),          
         1px -1px 0 var(--slideStroke),
        -1px  1px 0 var(--slideStroke),
        -1px -1px 0 var(--slideStroke);
}

#slideDots {
    margin-bottom: 1em;
}

#slideDots i {
    margin-right: 1em;
}

#slideDots i:last-child {
    margin-right: none;
}

/* Etapes de l'animation */
@keyframes textSlide {
    0%    {transform: translate(0%, 20%);}
    100%  {transform: translate(0%, 0%);}
}

/* MOBILE */
@media screen and (max-width: 768px) {
    #secSlides p {
        font-size: var(--fontSizeMedium);
    }
}