Fix focus visibility and style for GAIA Back and Close buttons

chrome/browser/resources/chromeos/login/screen_gaia_signin.css

Index: chrome/browser/resources/chromeos/login/screen_gaia_signin.css
diff --git a/chrome/browser/resources/chromeos/login/screen_gaia_signin.css b/chrome/browser/resources/chromeos/login/screen_gaia_signin.css
index 19d61ac2a852580b0083d22cdfefc3d006b2f37f..364d4335c79ed2de76a3f72338208bdd73d7c4d9 100644
--- a/chrome/browser/resources/chromeos/login/screen_gaia_signin.css
+++ b/chrome/browser/resources/chromeos/login/screen_gaia_signin.css
@@ -69,20 +69,44 @@ throbber-notice {
   background: transparent none;
   background-position: center;
   background-repeat: no-repeat;
-  height: 34px;
+  border-radius: 50%;
+  height: 24px;
   position: absolute;
-  top: 0;
-  width: 34px;
+  top: 10px;
+  width: 24px;
   z-index: 1;
 }
 
+.custom-gaia-button:hover {
+  cursor: pointer;
+}
+
+.custom-gaia-button:focus {
+  background: rgba(0,0,0,.16);
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.75;
+}
+
+ /* Even more specificity than button.custom-appearance:focus:focus */
+.custom-gaia-button:focus:focus:focus {
+   border-color: transparent;
+}

[Greg Levin, 2015/05/06 00:23:58]

This overrides (removes) the light blue halo which appeared around the perimeter
of the solid grey focus circle.

+
+.custom-gaia-button:active {
+  background: rgba(0,0,0,.12);
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 1.0;
+}
+
 #close-button-item {
   background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON);
-  right: 0;
+  right: 10px;
 }
 
 html[dir=rtl] #close-button-item {
-  left: 0;
+  left: 10px;
   right: auto;
 }
 
@@ -99,19 +123,15 @@ html[dir=rtl] #close-button-item {
   background-image: url(chrome://theme/IDR_LOGIN_CLOSE_BUTTTON_MASKED);
 }
 
-#close-button-item:hover {
-  cursor: pointer;
-}
-
 #back-button-item {
   background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON);
-  left: 0;
+  left: 10px;
 }
 
 html[dir=rtl] #back-button-item {
   -webkit-transform: scaleX(-1);
   left: auto;
-  right: 0;
+  right: 10px;
 }
 
 .new-gaia-flow .full-width #back-button-item {
@@ -122,10 +142,6 @@ html[dir=rtl] #back-button-item {
   background-image: url(chrome://theme/IDR_LOGIN_BACK_BUTTTON_MASKED);
 }
 
-#back-button-item:hover {
-  cursor: pointer;
-}
-
 .signin-text {
   color: #666;
   margin-top: 20px;