Installation

1. Téléchargez le fichier. Ce fichier contient tout le code toast, vous pouvez changer le html, par exemple les icônes. J'utilise l'ensemble Font Awesome pour les icônes.

2. Connectez ce fichier, entrez votre chemin correct vers le fichier, je l'ai dans le dossier template js

<script src="{THEME}/js/toast.js?v={cache-id}" defer></script>

3. Connectez le ficfier font-awesome avant [/b] [b]si vous ne l'avez pas

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

3. Ajoutez à votre fichier CSS tout en bas

.flex-grow-1 {flex: 1 1 0; max-width: 100%; min-width: 50px;}
.toasts {position: fixed; right: 10px; top: 20px; z-index: 990; display: grid; gap: 20px;}
.toast {background-color: #fff; color: #000; border-radius: 6px; overflow: hidden;
	position: relative; width: 400px; display: flex; align-items: center; gap: 20px; 
	padding: 16px 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); --accent: #00a2ff; 
	animation: showToast 0.5s ease forwards; max-width: calc(100vw - 40px);}
.toast__icon {font-size: 28px; color: var(--accent);}
.toast__title {font-weight: 700;}
.toast__text {font-size: 14px;}
.toast__close {font-size: 18px; margin: 0 -10px; display: grid; place-items: center; 
	cursor: pointer; opacity: 0.6; width: 40px; height: 40px;}
.toast::after {content: ''; width: 100%; height: 3px; background-color: var(--accent); 
	position: absolute; left: 0; bottom: 0; animation: progressToast var(--toast-timer) linear forwards}
.toast--success {--accent: #41b92f;}
.toast--warning {--accent: #f4bd00;}
.toast--error {--accent: #dd3954;}
.toast--is-hiding {animation: hideToast 0.5s ease forwards;}
@keyframes progressToast {
	100% {width: 0}
}
@keyframes showToast {
	0% {transform: translateX(calc(100% + 20px));}
	40% {transform: translateX(-5%);}
	80% {transform: translateX(0%);}
	100% {transform: translateX(-10px);}
}
@keyframes hideToast {
	0% {transform: translateX(-10px);}
	40% {transform: translateX(0%);}
	80% {transform: translateX(-5%);}
	100% {transform: translateX(calc(100% + 20px));}
}

COMMENT UTILISER TOASTS:
Toutes les fenêtres d'alerte DLE ont déjà été remplacées. Essayez de voter à nouveau dans n'importe quelle actualité et vous verrez.

Pour ses besoins, la fenêtre est appelée par le code js

<a href="#" onclick="DLEalert('Succés', 'Tous les enregistrements on été effectués','success');return false;">Testons-le avec style</a>

Nous avons 4 paramètres, les 2 premiers sont obligatoires. Options:
- Texte.
- Titre.
- Style. Disponible: info, success, error, warning.
- Minuterie en millisecondes

---

---