Added new skin and plugin

New skin (skin-black). Added pace plugin to show page loading like
youtube.

less/AdminLTE.less

@@ -1,8 +1,8 @@
 /*! 
  *   AdminLTE v1.0
  *   Author: AlmsaeedStudio.com
- *   License: Please visit http://wrapbootstrap.com for information about 
- *            this theme's license
+ *   License: Open source - MIT
+ *           Please visit http://opensource.org/licenses/MIT for more information
 !*/
 
 //google fonts
@@ -44,4 +44,5 @@
 
 //Plugins
 //--------
-@import "iCheck.less";
+@import "iCheck.less";
+@import "pace.less";

less/core.less

@@ -314,7 +314,7 @@ img {
 }
 
 /* Remove border radius */
-.flat, .flat > * {
+.flat {
     .border-radius(0)!important;
 }
 

less/header.less

@@ -95,9 +95,7 @@ body > .header {
 // Content Header 
 .right-side > .content-header {
     position: relative;
-    padding: 15px 15px 10px 20px;
-    background: #fbfbfb;
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    padding: 15px 15px 10px 20px;    
     // Header Text 
     > h1 {
         margin: 0;

less/mixins.less

@@ -3,11 +3,11 @@
 
 
 //Changes the color and the hovering properties of the navbar
-.navbar-variant(@color) {
+.navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
     background-color: @color;
     //Navbar links
     .nav a {
-        color: #acd0e5;
+        color: @font-color;
     }
 
     .nav > li > a:hover,
@@ -16,8 +16,8 @@
         .nav .open > a,
         .nav .open > a:hover,
         .nav .open > a:focus {
-        background: darken(@color, 10%);
-        color: #f6f6f6;
+        background: @hover-bg;
+        color: @hover-color;
     }
 
     .navbar-right > .nav {
@@ -25,7 +25,11 @@
     }
     //Add color to the sidebar toggle button
     .sidebar-toggle .icon-bar {
-        background: #acd0e5;
+        background: @font-color;
+       
+    }
+    .sidebar-toggle:hover .icon-bar {
+        background: @hover-color!important;
     }
 }
 

less/pace.less

@@ -0,0 +1,17 @@
+.pace .pace-progress {
+  background: #00c0ef;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  left: 0;
+  height: 2px;
+
+  -webkit-transition: width 1s;
+  -moz-transition: width 1s;
+  -o-transition: width 1s;
+  transition: width 1s;
+}
+
+.pace-inactive {
+  display: none;
+}

less/skins.less

@@ -5,7 +5,7 @@
 */
 
 /* 
-    skin-blue 
+    Skin Blue 
     ---------
 */
 
@@ -17,7 +17,11 @@
 .skin-blue .logo {
     .logo-variant(darken(@light-blue, 5%));
 }
-
+/* skin-blue content header */
+.skin-blue .right-side > .content-header {
+    background: #fbfbfb;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
 /* Skin-blue user panel */
 .skin-blue .user-panel {
 
@@ -112,4 +116,117 @@
             .border-radius(0, 2px, 0, 2px)!important;
         }
     }
+}
+
+/*
+    Skin Black
+    --------
+*/
+
+/* skin-black navbar */
+.skin-black .navbar {
+    .navbar-variant(#fff; #333; #999; #fff);
+    border-bottom: 1px solid #eee;
+}
+/* skin-black logo */
+.skin-black .logo {
+    .logo-variant(#333);
+}
+/* skin-black content header */
+.skin-black .right-side > .content-header {
+    background: transparent;
+    box-shadow: none;
+}
+/* Skin-red user panel */
+.skin-black .user-panel {
+
+    > .image > img {
+        border: 1px solid #444;
+    }
+
+    > .info, > .info > a {
+        color: #eee;
+    }
+}
+
+/* skin-black sidebar */
+.skin-black {
+    .sidebar {
+        border-bottom: 1px solid #333;
+    }
+    // the menu 
+    .sidebar > .sidebar-menu > li {
+        border-top: 1px solid #333;
+        border-bottom: 0px solid #444;
+
+        &:first-of-type {
+            border-top: 1px solid #444;
+            > a {
+                border-top: 0px solid #333;
+            }
+        }
+        > a {
+            margin-right: 1px;
+        }
+        //Hover and active states
+        > a:hover, &.active > a {
+            color: #f6f6f6;
+            background: #444;            
+        }
+
+        > .treeview-menu {
+            margin: 0 1px;
+            background: #444;
+        }
+    }
+
+    // Sidebar color
+    .left-side {
+        background: #333;
+    }
+
+    .sidebar a {
+        color: #eee;
+        &:hover {
+            text-decoration: none;
+        }
+    }
+    // skin blue treeview-menu
+    .treeview-menu {
+        > li {
+            > a {color: #ccc;}
+            &.active > a, > a:hover {
+                color: #fff;
+            }
+        }
+    }
+
+    .sidebar-form {
+        .border-radius(2px);
+        border: 0px solid #555;
+        margin: 10px 10px;
+        input[type="text"], .btn {
+            box-shadow: none;
+            background-color: rgba(255,255,255, 0.1);   
+            border: 0 solid rgba(255,255,255, 0.1);
+            height: 35px;
+            outline: none;
+        }
+        input[type="text"]{
+            color: #666;            
+            .border-radius(2px, 0, 2px, 0)!important;
+            &:focus, &:focus + .input-group-btn .btn {
+                background-color: #444;                
+                border: 0;
+            }
+            &:focus + .input-group-btn .btn {
+                border-left: 0;
+            }
+        }
+        .btn {
+            color: #999;
+            .border-radius(0, 2px, 0, 2px)!important;
+            border-left: 0;
+        }
+    }
 }

less/vars.less

@@ -2,6 +2,7 @@
 //-----------------------
 
 //Layout
+//Side bar and logo width
 @left-side-width: 220px;
 
 //Colors