redesign login page

Author: schrej

public/themes/pterodactyl/css/pterodactyl.css

@@ -23,19 +23,44 @@
  @import 'checkbox.css';
 
 .login-page {
-    height: auto;
+    background: #303f9f;
+}
+
+.login-logo {
+    color: white;
+    font-weight: bold;
+}
+
+.login-copyright {
+    color: white;
+}
+
+.login-copyright a, .login-copyright a:hover {
+    color: white;
+    font-weight: bold;
+}
+
+.particles-js-canvas-el {
+    position: absolute;
 }
 
 .login-box, .register-box {
-    width: 40%;
-    max-width: 500px;
-    margin: 7% auto;
+    position: absolute;
+    margin: -180px 0 0 -180px;
+    left: 50%;
+    top: 50%;
+    height: 360px;
+    width: 360px;
+    z-index: 100;
 }
 
 @media (max-width:768px) {
-    .login-box, .register-box {
+    .login-box {
         width: 90%;
-        margin-top: 20px
+        margin-top: 20px;
+        margin: 5%;
+        left: 0;
+        top: 0;
     }
 }
 
@@ -282,6 +307,7 @@ tr:hover + tr.server-description {
     position: absolute;
     bottom: 5px;
     right: 10px;
+    color: white;
 }
 
 input.form-autocomplete-stop[readonly] {

public/themes/pterodactyl/vendor/particlesjs/particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.40246529723245905,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 5,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}