diff options
Diffstat (limited to 'Static/Css/notification.css')
| -rw-r--r-- | Static/Css/notification.css | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/Static/Css/notification.css b/Static/Css/notification.css new file mode 100644 index 0000000..beddf4a --- /dev/null +++ b/Static/Css/notification.css @@ -0,0 +1,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*/ + } +} |