Replaced symlink with local version of Plugins

.gitmodules

@@ -1,6 +0,0 @@
-[submodule "Sniffle"]
-	path = Sniffle
-	url = https://github.com/Fluffy-Bean/Sniffle.git
-[submodule "Flyout"]
-	path = Flyout
-	url = https://github.com/Fluffy-Bean/Flyout.git

Flyout

@@ -1 +0,0 @@
-Subproject commit 57d63d741f57eaaa8b863b1ecd5d6df8c1d00834

Flyout/flyout.css

@@ -0,0 +1,51 @@
+.flyout-dim {
+  width: 100vw; height: 100vh;
+
+  display: none;
+
+  position: fixed; z-index: 99;
+
+  object-position: center;
+
+  background-color: #151515aa;
+
+  opacity: 0;
+
+  transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1);
+}
+
+.flyout {
+  margin: 0; padding: 0.5rem;
+
+  max-width: 621px; width: calc(100% - 3.5rem);
+  max-height: 20rem; height: auto; min-height: 10rem;
+
+  position: fixed; z-index: 99999;
+  left: 50%; bottom: -15rem;
+  transform: translateX(-50%) scale(0.5);
+
+  background-color: #151515;
+  color: white;
+
+  transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1);
+
+  border-radius: var(--rad);
+  border: 0.2rem solid var(--green);
+  outline: 0.5rem solid var(--bg);
+}
+
+.flyout-header {
+  font-size: 20px;
+}
+
+.flyout-actionbox {
+  display: inline;
+  box-sizing: border-box;
+}
+/* Worlds shittest workaround to a problem I have no clue how to fix */
+.flyout-actionbox * {
+  width: 100%;
+}
+.flyout-actionbox * * {
+  width: auto;
+}

Flyout/flyout.js

@@ -0,0 +1,50 @@
+$(document).ready(function() {
+  var flyoutRoot = document.getElementById("#flyoutRoot");
+  var flyoutDim = document.getElementById("#flyoutDim");
+
+  var flyoutHeader = document.getElementById("#flyoutHeader");
+  var flyoutDescription = document.getElementById("#flyoutDescription");
+  var flyoutActionbox = document.getElementById("#flyoutActionbox");
+});
+
+function flyoutShow(header, description, actionbox) {
+  // Checking if actionbox is set
+  if (typeof actionbox === 'undefined') {
+    flyoutActionbox.style.display = "none";
+  } else if (actionbox == "") {
+    flyoutActionbox.style.display = "none";
+  } else {
+    flyoutActionbox.style.display = "block";
+  }
+
+  // Set information in flyout
+  flyoutHeader.textContent = header;
+  flyoutDescription.textContent = description;
+  flyoutActionbox.innerHTML = actionbox;
+
+  // Show the flyout
+  flyoutRoot.style.display = "flex";
+  // Show the dim
+  flyoutDim.style.display = "block";
+  setTimeout(function(){
+    // Show the flyout
+    flyoutRoot.style.transform = "translateX(-50%) scale(1)";
+    flyoutRoot.style.bottom = "1rem";
+    // Show the dim
+    flyoutDim.style.opacity = "1";
+  }, 1);
+};
+
+function flyoutClose() {
+  // Hide the flyout
+  flyoutRoot.style.transform = "translateX(-50%) scale(0.5)";
+  flyoutRoot.style.bottom = "-20rem";
+  // Hide the dim
+  flyoutDim.style.opacity = "0";
+  setTimeout(function(){
+    // Hide the flyout
+    flyoutRoot.style.display = "none";
+    // Hide the dim
+    flyoutDim.style.display = "none";
+  }, 500);
+};

Sniffle

@@ -1 +0,0 @@
-Subproject commit 471cd363a78fd2b73d960211a33829bada62e849

Sniffle/sniffle.css

@@ -0,0 +1,112 @@
+/*
+  Sniffle CSS
+
+  Written simply for easy changing!
+*/
+
+
+/*
+  Base notification stacking
+
+  It allows for the notifications to stack simply
+  Due to div having no height initself there is no
+  reason in hiding it when no notifications are showing
+*/
+.sniffle {
+  margin: 0; padding: 0 1rem;
+
+  max-width: 621px; width: calc(100% - 1rem);
+
+  top: 0.5rem; left: 50%;
+  transform: translateX(-50%);
+
+  position: fixed; z-index: 999;
+}
+
+/*
+  Notification body
+
+  It contains 2 child elements,
+  am image .sniffle-img
+  and a text div .sniffle-content
+*/
+.sniffle-notification {
+  margin-bottom: 1rem; padding: 0.5rem;
+
+  max-width: calc(100% - 1rem); min-height: 2.5rem;
+
+  display: flex; flex-direction: row; overflow-y: hidden;
+
+  z-index: 999;
+
+  background-color: #151515;
+
+  box-shadow: 5px 5px 5px #151515aa;
+
+  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
+
+  border-radius: var(--rad);
+}
+.sniffle-notification:hover {
+  transform: scale(1.05);
+
+  cursor: pointer;
+}
+
+
+/*
+  Notification content Root
+
+  Overflow is hidden incase the description of the message is too long too display
+  And to prevent text from overflowing the notification
+*/
+.sniffle-content {
+  margin: 0 auto;
+
+  width: calc(100% - 3.5rem);
+  flex-direction: column; flex-wrap: wrap;
+
+  overflow-y: hidden;
+}
+
+/*
+  Notification icon/image
+*/
+.sniffle-img {
+  margin-right: 1rem;
+
+  max-width: 2.5rem; width: auto;
+  height: auto;
+
+  object-fit: contain;
+}
+/*
+  Notification header
+*/
+.sniffle-header {
+  margin: 0 0 0.25rem 0; padding: 0;
+
+  font-size: 16px;
+  font-weight: bold;
+
+  color: var(--fg);
+}
+/*
+  Notification description
+*/
+.sniffle-description {
+  margin: 0; padding: 0;
+  font-size: 14px;
+
+  word-wrap: break-word;
+  font-weight: bold;
+
+  color: var(--fg);
+}
+.sniffle-description::after {
+  content: '\A Click\00A0 to\00A0 dissmiss';
+
+  white-space: pre;
+
+  opacity: 0.6;
+}

Sniffle/sniffle.js

@@ -0,0 +1,52 @@
+/*
+  Close notification
+  Used by the notifications themself, don't use in code
+*/
+function sniffleClose(a) {
+  a.closest(".sniffle-notification").style.transform="translateY(-20rem) scale(0.8)";
+  a.closest(".sniffle-notification").style.opacity="0";
+
+  setTimeout(function(){
+    a.closest(".sniffle-notification").style.display="none";
+    a.remove()
+  }, 200);
+};
+
+
+/*
+  Add notification
+
+  Header > Required
+    Takes in String input
+
+  Description > Required
+    Takes in String input
+
+  Img > Optional
+    Takes in String input
+*/
+function sniffleAdd(header, description, colour, img) {
+  // Colour is optional, so check if it was added or not
+  if (typeof colour === 'undefined') {
+    colour = '';
+  } else {
+    colour = `style="background-color:${colour};"`;
+  }
+
+  // Image is optional, so check if it was added or not
+  if (typeof img === 'undefined') {
+    img = '';
+  } else {
+    img = `<img class="sniffle-img" src="${img}">`;
+  }
+
+  var newSniffle = `<div class="sniffle-notification" onclick="sniffleClose(this)" ${colour}>\
+  ${img}\
+  <div class="sniffle-content">\
+  <p class="sniffle-header">${header}</p>\
+  <p class="sniffle-description">${description}</p>\
+  </div>\
+  </div>`;
+
+  $(".sniffle").append(newSniffle);
+};