[WebUI IntelliHome#7] Splitted css file

assets/public/css/isotope.css

@@ -0,0 +1,52 @@
+#iso {
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* Browser Support of ':first-of-type' pseudo-class
+Chrome     Safari     Firefox  Opera     IE     Android   iOS
+Works      3.2+      Works       9.5+     9+      Works      Works
+*/
+#iso .row:first-of-type {
+  margin: 0;
+}
+
+.post {
+    margin: 10px 0;
+    max-width: 100%;
+    padding: 0;
+}
+
+.post .content {
+    padding: 20px;
+}
+
+/*
+* PAGINATION
+*/
+.pagination {
+    display: none;
+    visibility: hidden;
+}
+
+/*
+* MEDIA QUERIES
+*/
+
+@media (min-width: 768px) and (max-width: 980px) {
+  #iso .col-md-3, #iso .col-lg-3 {
+    width: 300px;
+  }
+}
+
+@media (min-width: 980px) and (max-width: 1300px) {
+  #iso .col-md-3, #iso .col-lg-3 {
+    width: 350px;
+  }
+}
+
+@media (min-width: 1300px) {
+  #iso .col-md-3, #iso .col-lg-3 {
+    width: 400px;
+  }
+}

assets/public/css/login.css

@@ -0,0 +1,133 @@
+/*
+  Custom login Style
+*/
+.login-container{
+    position: relative;
+    width: 300px;
+    margin: 80px auto;
+    padding: 20px 40px 40px;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #ccc;
+}
+
+#output{
+    position: absolute;
+    width: 300px;
+    top: -75px;
+    left: 0;
+    color: #fff;
+}
+
+#output.alert-success{
+    background: rgb(25, 204, 25);
+}
+
+#output.alert-danger{
+    background: rgb(228, 105, 105);
+}
+
+
+.login-container::before,.login-container::after{
+    content: "";
+    position: absolute;
+    width: 100%;height: 100%;
+    top: 3.5px;left: 0;
+    background: #fff;
+    z-index: -1;
+    -webkit-transform: rotateZ(4deg);
+    -moz-transform: rotateZ(4deg);
+    -ms-transform: rotateZ(4deg);
+    border: 1px solid #ccc;
+
+}
+
+.login-container::after{
+    top: 5px;
+    z-index: -2;
+    -webkit-transform: rotateZ(-2deg);
+     -moz-transform: rotateZ(-2deg);
+      -ms-transform: rotateZ(-2deg);
+
+}
+
+.avatar{
+    width: 100px;height: 100px;
+    margin: 10px auto 30px;
+    border-radius: 100%;
+    border: 2px solid #aaa;
+    background-size: cover;
+}
+
+.form-box input{
+    width: 100%;
+    padding: 10px;
+    text-align: center;
+    height:40px;
+    border: 1px solid #ccc;;
+    background: #fafafa;
+    transition:0.2s ease-in-out;
+
+}
+
+.form-box input:focus{
+    outline: 0;
+    background: #eee;
+}
+
+.form-box input[type="text"]{
+    border-radius: 5px 5px 0 0;
+    text-transform: lowercase;
+}
+
+.form-box input[type="password"]{
+    border-radius: 0 0 5px 5px;
+    border-top: 0;
+}
+
+.form-box button.login{
+    margin-top:15px;
+    padding: 10px 20px;
+}
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}