simplyfied popup texts as function

bin/index.js

@@ -0,0 +1,5 @@
+function infoPopUp(infotext){
+  $("#info-popup-text").text(infotext);
+  $("#info-popup-text").css("animation", "none");
+  setTimeout(function(){$("#info-popup-text").css("animation", "fade 4s linear");}, 100);
+}

bin/list.js

@@ -9,14 +9,8 @@ $(document).ready(function(){
         id: dataId,
         status: $(this).prop("checked")
       },
-      success: function(){
-          $("#saved font").css("animation", "none");
-          setTimeout(function(){$("#saved font").css("animation", "fade 4s linear");}, 100);
-      },
-      error: function(){
-          $("#error font").css("animation", "none");
-          setTimeout(function(){$("#error font").css("animation", "fade 6s linear");}, 100);
-      }
+      success: function(){infoPopUp("SAVED!");},
+      error: function(){infoPopUp("Netzwerkfehler! Bitte aktualisieren.");}
     });
     if($(this).prop("checked")){$("[data-id='"+dataId+"']").addClass("checked");}
     else{$("[data-id='"+dataId+"']").removeClass("checked");}

cont/list.php

@@ -35,5 +35,3 @@
   ?>
 </div>
 </form>
-<div id="saved"><font>SAVED!</font></div>
-<div id="error"><font>Netzwerkfehler!<br /> Bitte aktualisieren.</font></div>

style/list.css

@@ -92,33 +92,3 @@ border-left: none;
 .list_row.odd.checked {
   border-left: 3px solid #888;
 }
-
-#saved, #error {
-  pointer-events: none;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  bottom: 2%;
-  margin: 0;
-  left: 0;
-  width: 100%;
-}
-#saved font, #error font {
-  color: #ffffff;
-  background-color: #000000;
-  padding: .1em .5em .2em;
-  border-radius: 50px;
-  opacity: 0;
-}
-
-#error font {
-  padding: .1em 1em .2em;
-}
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-}

style/master.css

@@ -65,7 +65,47 @@ h3 {
   cursor: pointer;
 }
 
+.button:hover {
+  background-color: #4CAFFF;
+}
+
+.button-disabled {
+  background-color: grey;
+  cursor: not-allowed;
+}
+
+.button-disabled:hover {
+  background-color: grey;
+}
+
 .hover:hover {
   background-color: #4CAF50;
   cursor: pointer;
 }
+
+#info-popup {
+  pointer-events: none;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  bottom: 2%;
+  margin: 0;
+  left: 0;
+  width: 100%;
+}
+#info-popup-text {
+  color: #ffffff;
+  background-color: #000000;
+  padding: .1em .5em .2em;
+  border-radius: 50px;
+  opacity: 0;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+}