diff --git a/index.html b/index.html
index dd576d1..1736120 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
- Test
This is a test toast toast toast
+
diff --git a/scripts/toast/createtoast.js b/scripts/toast/createtoast.js
index e69de29..b6dc192 100644
--- a/scripts/toast/createtoast.js
+++ b/scripts/toast/createtoast.js
@@ -0,0 +1,28 @@
+module.exports = (name, text, bg = '#a172a6', persistOnClick = false, time = 5, onclick = () => {}, selectable = false) => {
+ if (!name || !text) {return;}
+ if (!Array.isArray(text)) {text = [text];}
+ let toast = document.createElement('div');
+ toast.className = 'toast';
+ toast.style.backgroundColor = `${bg}c2`;
+ toast.style.borderColor = `${bg}c2`;
+ toast.onmouseenter = () => {toast.style.backgroundColor = bg;};
+ toast.onmouseleave = () => {toast.style.backgroundColor = `${bg}c2`;};
+ toast.onclick = () => {
+ if (!persistOnClick) {}
+ onclick();
+ };
+ document.getElementById('toast-container').appendChild(toast);
+ let h2 = document.createElement('h2');
+ h2.innerHTML = name;
+ if (!selectable) {h2.className = 'nosel';}
+ toast.appendChild(h2);
+ for (let i = 0; i < text.length; i++) {
+ if (text[i].length) {
+ let p = document.createElement('p');
+ p.innerHTML = text[i];
+ if (!selectable) {p.className = 'nosel';}
+ toast.appendChild(p);
+ }
+ else {toast.appendChild(document.createElement('br'));}
+ }
+};
\ No newline at end of file
diff --git a/styles/toast.css b/styles/toast.css
index df48297..fc2b64b 100644
--- a/styles/toast.css
+++ b/styles/toast.css
@@ -11,11 +11,11 @@
#toast-container {
position: fixed;
- top: 10px;
+ top: 34px;
right: 10px;
display: flex;
flex-direction: column-reverse;
- align-items: stretch;
+ align-items: flex-end;
align-content: stretch;
row-gap: 4px;
justify-content: flex-end;
@@ -24,11 +24,19 @@
.toast {
border-radius: 5px;
- background-color: #a172a6;
+ background-color: #a172a6c2;
color: white;
animation: enter-toast .25s ease-out 1;
animation-fill-mode: both;
- animation-delay: 2s;
+ padding: 4px 6px;
+ border-color: #a172a6c2;
+ border-style: solid;
+ border-width: 1px;
+ transition: border-color .15s ease-in, background-color .15s ease-in;
+ max-width: 350px;
+}
+.toast:hover {
+ border-color: white;
}
.toast p {
@@ -37,7 +45,7 @@
}
.toast h2 {
- font-size: 25px;
+ font-size: 20px;
font-family: 'Nunito', sans-serif;
- margin: 6px 0 8px 8px;
+ margin: 6px 0 2px 8px;
}
\ No newline at end of file