blob: 2ae3768a34984d0ac9ea30ab5caf1da624c2bd4e (
plain)
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
/*
############################################################################
# #
# Description: CSS du message de notification #
# #
############################################################################
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
*/
.show_notif {
left: 2em;
}
/* Div de la notification */
aside {
z-index: 2; /* Position en profondeur */
position: fixed; /* Comment vas être positionné l'élément */
left: -75%; /* position à gauche de l'écran (démarre masqué) */
bottom: 2em; /* position en bas de l'écran */
width: 350px; /* largeur de la div définie selon le contenu */
padding: 0.3em; /* marge interne de 1 fois la taille du texte */
background-color: var(--notifAsideBg); /* couleur du fond */
border: var(--notifAsideBorder); /* taille type et couleur de la bordure */
border-radius: 10px; /* arrondie des angles de la bordure */
text-align: center; /* le texte est centré */
box-shadow: 4px 4px 9px black; /* Ombre, déportation x, deportation y, diffusion, couleur */
transition: all 0.6s ease-in-out; /* ajout d'un effet acceleration/decerelation de l'animation */
}
/* Zone clickable */
aside a {
cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
}
/* Boutton pour fermer */
aside button {
position: absolute; /* Position fixe relative */
right: 0px; /* tout à droite */
top: 0px; /* tout en haut */
border: none; /* sans bordure*/
padding: 0px;
margin-top: 4px;
margin-right: 4px;
color: var(--notifButtonCloseColor);
background-color: var(--notifButtonCloseBg);
border-radius: 4px;
font-size: 19px;
width: 23px;
line-height: 23px;
height: 23px;
border: var(--notifButtonCloseBorder);
transition: all 0.05s ease-in-out;
}
aside button:hover {
cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
color: var(--notifButtonCloseHoverColor);
background-color: var(--notifButtonCloseHoverBg);
}
aside span {
float: left; /* float à gauche */
position: absolute; /* position fixe relative */
left: 0.5em; /* distance a gauche */
/* (espace totale(h3, p pad & marg + font-size) - cloche font-size) / 2*/
top: calc((52.8px - 32px) / 2); /* centré */
font-size: 32px; /* taille de la cloche */
animation-name: cloche; /* nom animation keyframe */
animation-timing-function: ease-in-out; /* vitesse et style de transition */
animation-iteration-count: infinite; /* répété à l'infini */
animation-duration: 2.7s; /* duréé de l'animation */
}
/* Titre de la fenetre */
aside h3 {
font-size: 17px;
margin-top: 0px; /* on supprime la marge du haut */
padding-top: 0.3em; /* on la remplace avec du padding pour que la zone soit clickable */
margin-bottom: 0.3em;
}
/* Contenu */
aside p {
font-style: italic; /* le texte est en italic */
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0.3em;
margin-top: 0.3em;
}
/* Etapes de l'animation */
@keyframes cloche {
0% {transform: rotate(5deg) scale(1.1);}
4% {transform: rotate(-10deg) scale(1.2);}
8% {transform: rotate(10deg) scale(1.2);}
12% {transform: rotate(-10deg) scale(1.2);}
16% {transform: rotate(10deg) scale(1.2);}
20% {transform: rotate(-10deg) scale(1.2);}
24% {transform: rotate(10deg) scale(1.2);}
28% {transform: rotate(-10deg) scale(1.2);}
32% {transform: rotate(10deg) scale(1.2);}
36% {transform: rotate(-5deg) scale(1.1);}
40% {transform: rotate(0deg) scale(1);}
100% {transform: rotate(0deg);}
}
/* MOBILE */
@media screen and (max-width: 768px) {
.show_notif {
bottom: 1em;
left: calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
}
/* Div de la notification */
aside {
bottom: -300px;
width: 90%;
left: calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
}
}
|
