keycloak-uncached

header, button and input

10/23/2013 4:06:13 PM

Details

diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
index 52e3d86..4ae72a7 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html
@@ -1,6 +1,6 @@
 <div class="header rcue">
     <div class="navbar utility">
-        <div class="navbar-inner clearfix">
+        <div class="navbar-inner clearfix container">
             <h1><a href="#"><strong>Keycloak</strong> Central Login</a></h1>
             <ul class="nav pull-right" data-ng-hide="auth.loggedIn">
                 <li><a href="/auth-server/rest/saas/login">Login</a></li>
@@ -19,7 +19,7 @@
         </div>
     </div>
     <div class="navbar primary">
-        <div class="navbar-inner clearfix" data-ng-controller="RealmDropdownCtrl">
+        <div class="navbar-inner clearfix container" data-ng-controller="RealmDropdownCtrl">
             <ul class="nav pull-left">
                 <li>
                     <span class="dropdown-label" data-ng-show="showNav()">Realm:</span>
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
index eeeacc9..8d89464 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
@@ -44,91 +44,109 @@ body {
   background-color: #e4f3fa;
 }
 /* Header */
+.header.rcue .navbar.utility {
+  background-color: #393F45;
+  border-bottom: 1px solid #53565B;
+}
+.header.rcue .navbar.utility .navbar-inner {
+  border-bottom: 0;
+  max-width: 1170px;
+}
+.header.rcue .navbar.primary {
+  background-image: -moz-linear-gradient(top, #474c50, #383f43);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#474c50), to(#383f43));
+  background-image: -webkit-linear-gradient(top, #474c50, #383f43);
+  background-image: -o-linear-gradient(top, #474c50, #383f43);
+  background-image: linear-gradient(to bottom, #474c50, #383f43);
+  background-repeat: repeat-x;
+  background-color: #41474b;
+}
 .header.rcue .navbar.primary .navbar-inner {
   min-height: 42px;
+  max-width: 1170px;
 }
 .header.rcue .navbar.primary .nav > li {
   /*
-        .dropdown {
-            display: inline-block;
-            margin-left: 0.53846153846154em;
-            margin-top: 0.46153846153846em;
-            min-width: 15.3846153846154em;
-            width: auto;
-            
-            .dropdown-toggle {
-                font-size: 0.84615384615385em;
-                color: #fff;
+            .dropdown {
                 display: inline-block;
-                line-height: 2.36363636363636em;
-                border: 1px solid #676c6e;
-                border-radius: 2px;
-                padding: 0 0.54545454545455em;
-                background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
-                display: block;
+                margin-left: 0.53846153846154em;
+                margin-top: 0.46153846153846em;
+                min-width: 15.3846153846154em;
+                width: auto;
                 
-                &:hover,
-                &:focus {
-                    text-decoration: none;
+                .dropdown-toggle {
+                    font-size: 0.84615384615385em;
+                    color: #fff;
+                    display: inline-block;
+                    line-height: 2.36363636363636em;
+                    border: 1px solid #676c6e;
+                    border-radius: 2px;
+                    padding: 0 0.54545454545455em;
+                    background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
+                    display: block;
+                    
+                    &:hover,
+                    &:focus {
+                        text-decoration: none;
+                    }
+                    
+                    &:hover {
+                        border-color: #7e8385;
+                    }
                 }
                 
-                &:hover {
-                    border-color: #7e8385;
-                }
-            }
-            
-            .dropdown-menu {
-            
-                left: 0;
-                min-width: 0;
-                width: 100%;
-                overflow: hidden;
-            
-                li,
-                li.selected {
-                    width: auto;
-                    
-                    a {
+                .dropdown-menu {
+                
+                    left: 0;
+                    min-width: 0;
+                    width: 100%;
+                    overflow: hidden;
+                
+                    li,
+                    li.selected {
                         width: auto;
-                        border-top: 1px solid transparent;
-                        border-bottom: 1px solid transparent;
                         
-                        &:hover {
-                            background-color: #D5ECF9;
-                            background-image: none;
-                            border-bottom: 1px solid #A7D7F1;
-                            border-top: 1px solid #A7D7F1;
-                            color: #4D5258;
+                        a {
+                            width: auto;
+                            border-top: 1px solid transparent;
+                            border-bottom: 1px solid transparent;
+                            
+                            &:hover {
+                                background-color: #D5ECF9;
+                                background-image: none;
+                                border-bottom: 1px solid #A7D7F1;
+                                border-top: 1px solid #A7D7F1;
+                                color: #4D5258;
+                            }
                         }
                     }
+                    
+                    li.selected a {
+                        background-color: #2B99C0;
+                        background-image: linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -o-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -moz-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -webkit-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -ms-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -webkit-gradient(
+                          linear,
+                          left top,
+                          left bottom,
+                          color-stop(0.0, #2EA1CA),
+                          color-stop(1,0, #2792B6)
+                        );
+                        background-repeat: repeat-x;
+                        color: #FFFFFF;
+                    }
                 }
-                
-                li.selected a {
-                    background-color: #2B99C0;
-                    background-image: linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -o-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -moz-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -webkit-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -ms-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -webkit-gradient(
-                      linear,
-                      left top,
-                      left bottom,
-                      color-stop(0.0, #2EA1CA),
-                      color-stop(1,0, #2792B6)
-                    );
-                    background-repeat: repeat-x;
-                    color: #FFFFFF;
+            
+                &.open .dropdown-toggle {
+                    text-decoration: none;
+                    box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
+                    border-color: #7e8385;
                 }
             }
-        
-            &.open .dropdown-toggle {
-                text-decoration: none;
-                box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
-                border-color: #7e8385;
-            }
-        }
-*/
+    */
 
 }
 .header.rcue .navbar.primary .nav > li .dropdown-label {
@@ -166,18 +184,17 @@ body {
 }
 .header.rcue .navbar.primary .nav > li .select-rcue select option {
   background-color: #fff;
-  color: #333;
-  padding: 0.36363636363636em 0.90909090909091em;
+  color: black;
+  padding: 4px 10px;
 }
 .header.rcue .navbar.primary .nav > li a#refresh {
   border: none;
   margin: 0;
   padding: 0;
-  display: inline-block;
-  vertical-align: middle;
+  float: right;
   font-size: 0.76923076923077em;
   margin-left: 1em;
-  margin-top: 0.7em;
+  margin-top: 1.4em;
 }
 .header.rcue .navbar.primary .nav > li a#refresh:hover {
   background: none;
@@ -207,11 +224,12 @@ body {
 }
 .bs-sidebar ul li {
   margin-bottom: 0.5em;
+  margin-left: -1em;
 }
 .bs-sidebar ul li a {
   font-size: 1.3em;
   font-family: "Open Sans", sans-serif;
-  padding-left: 3em;
+  padding-left: 1.92307692307692em;
   color: #4d5258;
   line-height: 2.07692307692308em;
   display: block;
@@ -219,7 +237,8 @@ body {
   border-style: solid;
   border-color: #f9f9f9;
 }
-.bs-sidebar ul li a:hover {
+.bs-sidebar ul li a:hover,
+.bs-sidebar ul li a:focus {
   text-decoration: none;
   color: #777777;
 }
@@ -227,6 +246,9 @@ body {
   background-color: #c7e5f0;
   border-color: #56bae0;
   font-weight: bold;
+  background-image: url(img/icon-sidebar-active.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
 }
 #content-area {
   padding: 0;
@@ -530,20 +552,37 @@ table.list tbody tr.expanded .form-actions {
 }
 /* Break Points */
 @media (max-width: 1200px) {
+  .header.rcue .navbar.utility .navbar-inner,
+  .header.rcue .navbar.primary .navbar-inner {
+    max-width: 970px;
+  }
   #container-right-bg {
     margin-left: 242.5px;
     width: 727.5px;
   }
 }
 @media (max-width: 992px) {
+  .header.rcue .navbar.utility .navbar-inner,
+  .header.rcue .navbar.primary .navbar-inner {
+    max-width: 750px;
+  }
   .bs-sidebar,
   .user .bs-sidebar {
-    padding-top: 2em;
+    padding-top: 1em;
     width: 100%;
   }
+  .bs-sidebar ul li,
+  .user .bs-sidebar ul li {
+    margin-left: 0;
+  }
   .bs-sidebar ul li a,
   .user .bs-sidebar ul li a {
     border-width: 1px;
+    padding-left: 1.53846153846154em;
+  }
+  .bs-sidebar ul li.active a,
+  .user .bs-sidebar ul li.active a {
+    background-image: none;
   }
   #content-area .top-nav {
     border-top: 1px solid #cecece;
@@ -557,8 +596,17 @@ table.list tbody tr.expanded .form-actions {
   }
 }
 @media (max-width: 768px) {
+  .header.rcue .navbar.utility .navbar-inner,
+  .header.rcue .navbar.primary .navbar-inner {
+    max-width: 100%;
+  }
+  .bs-sidebar ul li.active a,
+  .user .bs-sidebar ul li.active a {
+    border-left: none;
+    border-right: none;
+  }
   .container {
-    min-width: 580px;
+    min-width: 56   em;
   }
   #content-area {
     border: none;
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
index 817047c..90b8599 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.less
@@ -63,178 +63,197 @@ body {
 
 /* Header */
 
-.header.rcue .navbar.primary {
+.header.rcue {
 
-    .navbar-inner {
-        min-height: 42px;
-    }
-    
-    .nav > li {
-    
-        .dropdown-label {
-            font-size: 0.84615384615385em;
-            color: #dbdada;
-            margin-left: 1.36363636363636em;
-            float: left;
-            margin-top: 0.63636363636364em;
-            line-height: 2.36363636363636em
+    .navbar.utility {
+        background-color: #393F45;
+        border-bottom: 1px solid #53565B;
+        
+        .navbar-inner {
+            border-bottom: 0;
+            max-width: 1170px;
         }
+    }
 
-        .select-rcue {
-            font-size: 0.76923076923077em;
-            margin-left: 1em;
-            margin-top: 0.7em;
-            display: inline-block;
-            vertical-align: middle;
-            background-color: #555a5e;
-            background-image: none;
-            background-image: url(img/sprite-arrow-down.svg);
-            background-repeat: no-repeat;
-            background-position: right -26px;
-            border: 1px solid #676c6e;
-            border-radius: 2px;
-            padding-left: 0;
-            
-            &:hover {
-                border-color: #7e8385;
+    .navbar.primary {
+        background-image:-moz-linear-gradient(top,#474c50,#383f43);
+        background-image:-webkit-gradient(linear,0 0,0 100%,from(#474c50),to(#383f43));
+        background-image:-webkit-linear-gradient(top,#474c50,#383f43);
+        background-image:-o-linear-gradient(top,#474c50,#383f43);
+        background-image:linear-gradient(to bottom,#474c50,#383f43);
+        background-repeat:repeat-x;
+        background-color: #41474b;
+        
+        .navbar-inner {
+            min-height: 42px;
+            max-width: 1170px;
+        }
+        
+        .nav > li {
+        
+            .dropdown-label {
+                font-size: 0.84615384615385em;
+                color: #dbdada;
+                margin-left: 1.36363636363636em;
+                float: left;
+                margin-top: 0.63636363636364em;
+                line-height: 2.36363636363636em
             }
-            
-            select {
-                color: #fff;
+    
+            .select-rcue {
+                font-size: 0.76923076923077em;
+                margin-left: 1em;
+                margin-top: 0.7em;
+                display: inline-block;
+                vertical-align: middle;
+                background-color: #555a5e;
+                background-image: none;
+                background-image: url(img/sprite-arrow-down.svg);
+                background-repeat: no-repeat;
+                background-position: right -26px;
+                border: 1px solid #676c6e;
+                border-radius: 2px;
+                padding-left: 0;
                 
-                &:-moz-focusring {
-                    color: transparent;
-                    text-shadow: 0 0 0 #fff;
+                &:hover {
+                    border-color: #7e8385;
                 }
                 
-                option {
-                    background-color: #fff;
-                    color: #333;
-                    padding: 0.36363636363636em 0.90909090909091em;
+                select {
+                    color: #fff;
+                    
+                    &:-moz-focusring {
+                        color: transparent;
+                        text-shadow: 0 0 0 #fff;
+                    }
+                    
+                    option {
+                        background-color: #fff;
+                        color: black;
+                        padding: 4px 10px;
+                    }
                 }
             }
-        }
-        
-        a#refresh {
-            border: none;
-            margin: 0;
-            padding: 0;
-            display: inline-block;
-            vertical-align: middle;
-            font-size: 0.76923076923077em;
-            margin-left: 1em;
-            margin-top: 0.7em;
-            
-            &:hover {
-                background: none;
-            }
             
-            .icon-spinner6 {
-                margin-right: 0;
-                background-image: url('img/sprites-gray.png');
+            a#refresh {
+                border: none;
+                margin: 0;
+                padding: 0;
+                float: right;
+                font-size: 0.76923076923077em;
+                margin-left: 1em;
+                margin-top: 1.4em;
                 
                 &:hover {
-                    background-image: url('img/sprites-white.png');
-                    background-color: transparent;
+                    background: none;
+                }
+                
+                .icon-spinner6 {
+                    margin-right: 0;
+                    background-image: url('img/sprites-gray.png');
+                    
+                    &:hover {
+                        background-image: url('img/sprites-white.png');
+                        background-color: transparent;
+                    }
                 }
             }
-        }
-        
-/*
-        .dropdown {
-            display: inline-block;
-            margin-left: 0.53846153846154em;
-            margin-top: 0.46153846153846em;
-            min-width: 15.3846153846154em;
-            width: auto;
             
-            .dropdown-toggle {
-                font-size: 0.84615384615385em;
-                color: #fff;
+    /*
+            .dropdown {
                 display: inline-block;
-                line-height: 2.36363636363636em;
-                border: 1px solid #676c6e;
-                border-radius: 2px;
-                padding: 0 0.54545454545455em;
-                background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
-                display: block;
+                margin-left: 0.53846153846154em;
+                margin-top: 0.46153846153846em;
+                min-width: 15.3846153846154em;
+                width: auto;
                 
-                &:hover,
-                &:focus {
-                    text-decoration: none;
+                .dropdown-toggle {
+                    font-size: 0.84615384615385em;
+                    color: #fff;
+                    display: inline-block;
+                    line-height: 2.36363636363636em;
+                    border: 1px solid #676c6e;
+                    border-radius: 2px;
+                    padding: 0 0.54545454545455em;
+                    background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
+                    display: block;
+                    
+                    &:hover,
+                    &:focus {
+                        text-decoration: none;
+                    }
+                    
+                    &:hover {
+                        border-color: #7e8385;
+                    }
                 }
                 
-                &:hover {
-                    border-color: #7e8385;
-                }
-            }
-            
-            .dropdown-menu {
-            
-                left: 0;
-                min-width: 0;
-                width: 100%;
-                overflow: hidden;
-            
-                li,
-                li.selected {
-                    width: auto;
-                    
-                    a {
+                .dropdown-menu {
+                
+                    left: 0;
+                    min-width: 0;
+                    width: 100%;
+                    overflow: hidden;
+                
+                    li,
+                    li.selected {
                         width: auto;
-                        border-top: 1px solid transparent;
-                        border-bottom: 1px solid transparent;
                         
-                        &:hover {
-                            background-color: #D5ECF9;
-                            background-image: none;
-                            border-bottom: 1px solid #A7D7F1;
-                            border-top: 1px solid #A7D7F1;
-                            color: #4D5258;
+                        a {
+                            width: auto;
+                            border-top: 1px solid transparent;
+                            border-bottom: 1px solid transparent;
+                            
+                            &:hover {
+                                background-color: #D5ECF9;
+                                background-image: none;
+                                border-bottom: 1px solid #A7D7F1;
+                                border-top: 1px solid #A7D7F1;
+                                color: #4D5258;
+                            }
                         }
                     }
+                    
+                    li.selected a {
+                        background-color: #2B99C0;
+                        background-image: linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -o-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -moz-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -webkit-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -ms-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
+                        background-image: -webkit-gradient(
+                          linear,
+                          left top,
+                          left bottom,
+                          color-stop(0.0, #2EA1CA),
+                          color-stop(1,0, #2792B6)
+                        );
+                        background-repeat: repeat-x;
+                        color: #FFFFFF;
+                    }
                 }
-                
-                li.selected a {
-                    background-color: #2B99C0;
-                    background-image: linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -o-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -moz-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -webkit-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -ms-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
-                    background-image: -webkit-gradient(
-                      linear,
-                      left top,
-                      left bottom,
-                      color-stop(0.0, #2EA1CA),
-                      color-stop(1,0, #2792B6)
-                    );
-                    background-repeat: repeat-x;
-                    color: #FFFFFF;
+            
+                &.open .dropdown-toggle {
+                    text-decoration: none;
+                    box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
+                    border-color: #7e8385;
                 }
             }
+    */
+        }
         
-            &.open .dropdown-toggle {
+        .button {
+            font-size: 0.84615384615385em;
+            margin-right: 1.36363636363636em;
+            margin-top: 0.63636363636364em;
+            
+            &:focus {
                 text-decoration: none;
-                box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
-                border-color: #7e8385;
             }
         }
-*/
-    }
-    
-    .button {
-        font-size: 0.84615384615385em;
-        margin-right: 1.36363636363636em;
-        margin-top: 0.63636363636364em;
-        
-        &:focus {
-            text-decoration: none;
-        }
     }
 } 
 
-
 .bs-sidebar {
     background-color: @bg-grey;
     padding-top: 4.3em;
@@ -244,11 +263,12 @@ body {
     
     ul li {
         margin-bottom: 0.5em;
+        margin-left: -1em;
         
         a {
             font-size: 1.3em;
             font-family: @open-sans;
-            padding-left: 3em;
+            padding-left: 1.92307692307692em;
             color: @text-black;
             line-height: 2.07692307692308em;
             display: block;
@@ -256,7 +276,8 @@ body {
             border-style: solid;
             border-color: @bg-grey;
             
-            &:hover {
+            &:hover,
+            &:focus {
                 text-decoration: none;
                 color: @text-grey;
             }
@@ -266,6 +287,9 @@ body {
             background-color: #c7e5f0;
             border-color: #56bae0;
             font-weight: bold;
+            background-image: url(img/icon-sidebar-active.svg);
+            background-repeat: no-repeat;
+            background-position: right center;
         }
     }
 }
@@ -663,6 +687,14 @@ table.list {
 
 @media (max-width: 1200px) {
 
+    .header.rcue {
+        
+        .navbar.utility .navbar-inner,
+        .navbar.primary .navbar-inner {
+            max-width: 970px;
+        }
+    }
+    
     #container-right-bg {
         margin-left: 242.5px;
         width: 727.5px;
@@ -671,14 +703,32 @@ table.list {
 
 @media (max-width: 992px) {
 
+    .header.rcue {
+        
+        .navbar.utility .navbar-inner,
+        .navbar.primary .navbar-inner {
+            max-width: 750px;
+        }
+    }
+    
     .bs-sidebar,
     .user .bs-sidebar {
-        padding-top: 2em;
+        padding-top: 1em;
         width: 100%;
         
-        ul li a {
-            border-width: 1px;
-        }
+        ul li {
+        
+            margin-left: 0;
+            
+            a {
+                border-width: 1px;
+                padding-left: 1.53846153846154em;
+            }
+            
+            &.active a {
+                background-image: none;
+            }   
+        } 
     }
     
     #content-area .top-nav {
@@ -698,8 +748,25 @@ table.list {
 
 @media (max-width: 768px) {
 
+    .header.rcue {
+        
+        .navbar.utility .navbar-inner,
+        .navbar.primary .navbar-inner {
+            max-width: 100%;
+        }
+    }
+    
+    .bs-sidebar,
+    .user .bs-sidebar {
+        
+        ul li.active a {
+            border-left: none;
+            border-right: none;
+        }
+    }  
+    
     .container {
-        min-width: 580px;
+        min-width: 56   em;
     }
     
     #content-area {
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
index 7d3219d..58b6e05 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.css
@@ -55,6 +55,25 @@ textarea {
   padding: 0.45em 0.545454545454545em;
   height: auto;
 }
+input[type="text"][readonly],
+input[type="password"][readonly],
+input[type="email"][readonly],
+textarea[readonly] {
+  background-color: #f0f0f0;
+}
+input[type="text"][readonly]:hover,
+input[type="password"][readonly]:hover,
+input[type="email"][readonly]:hover,
+textarea[readonly]:hover {
+  border-color: #62afdb;
+}
+input[type="text"][readonly]:focus,
+input[type="password"][readonly]:focus,
+input[type="email"][readonly]:focus,
+textarea[readonly]:focus {
+  border-color: #b6b6b6;
+  box-shadow: none;
+}
 .input-below {
   clear: both;
   display: inline-block;
@@ -235,9 +254,14 @@ button.primary:focus,
   right: 0.2em;
   top: 0.4em;
   opacity: 0.5;
+  filter: alpha(opacity=50);
 }
-.search-comp .icon-search:hover {
+.search-comp .icon-search:hover,
+.search-comp .icon-search:active,
+.search-comp .icon-search:focus {
+  background-image: url('img/sprites.png');
   opacity: 1;
+  filter: alpha(opacity=100);
   -webkit-transition: ease-in-out opacity 0.25s;
   -moz-transition: ease-in-out opacity 0.25s;
   -o-transition: ease-in-out opacity 0.25s;
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
index aabf882..1b78ae2 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/forms.less
@@ -56,6 +56,22 @@ textarea {
     height: auto;
 }
 
+input[type="text"][readonly],
+input[type="password"][readonly],
+input[type="email"][readonly],
+textarea[readonly] {
+    background-color: #f0f0f0;
+    
+    &:hover {
+        border-color: #62afdb;
+    }
+    
+    &:focus {
+        border-color: #b6b6b6;
+        box-shadow: none;
+    }
+}
+
 .input-below {
     clear: both;
     display: inline-block;
@@ -266,9 +282,14 @@ button.primary,
         right: 0.2em;
         top: 0.4em;
         opacity: 0.5;
+        filter: alpha(opacity=50);
         
-        &:hover {
+        &:hover,
+        &:active,
+        &:focus {
+            background-image: url('img/sprites.png');
             opacity: 1;
+            filter: alpha(opacity=100);
             -webkit-transition: ease-in-out opacity 0.25s;
             -moz-transition: ease-in-out opacity 0.25s;
             -o-transition: ease-in-out opacity 0.25s;
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/icon-sidebar-active.png b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/icon-sidebar-active.png
new file mode 100644
index 0000000..e7b9b08
Binary files /dev/null and b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/icon-sidebar-active.png differ
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/icon-sidebar-active.svg b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/icon-sidebar-active.svg
new file mode 100644
index 0000000..3b7539d
--- /dev/null
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/icon-sidebar-active.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="23px" height="14px" viewBox="0 0 23 14" enable-background="new 0 0 23 14" xml:space="preserve">
+<polyline fill="none" stroke="#009AD8" stroke-miterlimit="10" points="1,13 7,7 1,1 "/>
+</svg>
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-email-separator.png b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-email-separator.png
new file mode 100644
index 0000000..b8deca4
Binary files /dev/null and b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-email-separator.png differ
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-separator.png b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-separator.png
new file mode 100644
index 0000000..d626a45
Binary files /dev/null and b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-separator.png differ
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-social-separators.png b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-social-separators.png
index 94d2026..3f08929 100644
Binary files a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-social-separators.png and b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/login-register-social-separators.png differ
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/tooltip-box-arrow-right-up.png b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/tooltip-box-arrow-right-up.png
new file mode 100644
index 0000000..5b5174d
Binary files /dev/null and b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/img/tooltip-box-arrow-right-up.png differ