tweaks and mixins

packages/accounts-ui/login_buttons.less

@@ -62,6 +62,12 @@
   border-bottom-left-radius: @radius;
 }
 
+////////// Box-Shadow
+
+.box-shadow (...) {
+    box-shadow: @arguments;
+}
+
 ////////// Display: Inline-block
 
 .display-inline-block () {
@@ -96,6 +102,20 @@
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
+////////// Unselectable
+
+.unselectable () {
+    -webkit-user-select: none; // Chrome/Safari
+    -moz-user-select: none; // Firefox
+    -ms-user-select: none; // IE10+
+
+    // These delarations not implemented in browsers yet:
+    -o-user-select: none;
+    user-select: none;
+
+    // In IE <= 9 and Opera, need unselectable="on" in the HTML.
+}
+
 //////////////////// LOGIN BUTTONS
 
 @login-buttons-accounts-dialog-width: 178px;
@@ -118,7 +138,8 @@
 
 #login-buttons .login-button, .accounts-dialog .login-button {
     cursor: pointer;
-    padding: 1px 8px;
+    .unselectable();
+    padding: 2px 8px;
     height: 20px;
 
     font-size: 80%;
@@ -127,7 +148,7 @@
 
     text-align: center;
 
-    .border-radius(3px);
+    .border-radius(4px);
 
     color: #ffffff;
     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
@@ -136,19 +157,20 @@
     @bottomColor: #616884;
     .vertical-gradient(@topColor, @bottomColor);
     border: 1px solid mix(@bottomColor, #000, 60%);
-    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) inset;
+    .box-shadow(0 1px 1px rgba(255, 255, 255, 0.5) inset);
     &:active {
-      box-shadow: none;
+      .box-shadow(none);
       .vertical-gradient(mix(@bottomColor, @topColor, 30%),
                          mix(@bottomColor, #000, 80%));
     }
-}
 
-#login-buttons .login-button-disabled, .accounts-dialog .login-button-disabled {
-    color: #ccc;
+    &.login-button-disabled, &.login-button-disabled:active {
+        color: #ddd;
+        .box-shadow(none);
+        background: #999;
+    }
 }
 
-
 // precendence of this selector is significant
 .accounts-dialog * {
     // A base for our dialog CSS, to reset browser styles and protect against
@@ -177,15 +199,23 @@
 #login-buttons {
   .login-header { margin-right: 4px; }
   .configure-button, .configure-button:active {
-    .border-radius(3px);
-    background: white;
-    color: red;
+    font-size: 12px;
+    margin-top: 6px;
+    margin-bottom: 6px;
+
+    .vertical-gradient(#f53, #f22);
     text-decoration: underline;
     text-shadow: none;
     border: none;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.5) inset;
+    .box-shadow(0 2px 5px rgba(0,0,0,0.5) inset);
+  }
+  .configure-button:active {
+    background: #b10;
+  }
+
+  .login-link-text {
+    margin-left: 5px; /* so that other elements aren't too close */
   }
-  .login-link-text { margin-left: 5px; /* so that other elements aren't too close */ }
 
   .login-image {
     float: left;
@@ -234,11 +264,8 @@
   z-index: 1000;
   background: white;
 
-  -moz-box-shadow:    0 3px 6px 1px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3);
-  box-shadow:         0 3px 6px 1px rgba(0, 0, 0, 0.3);
-
-  .border-radius(3px);
+  .box-shadow(0 3px 6px 1px rgba(0, 0, 0, 0.3));
+  .border-radius(4px);
 
   margin-top: -5px;
   padding-top: 4px; /* = border-width - margin-top */
@@ -254,6 +281,8 @@
 
   width: @login-buttons-accounts-dialog-width + 9; /* not sure what this 9 is */
 
+  // Labels and links inherit app's font with this line commented out:
+  //font-family: 'Helvetica Neue', Helvetica, Arial, default;
   font-size: 16px;
   color: #333;
   line-height: 1.6;