diff --git a/packages/accounts-ui/login_buttons.less b/packages/accounts-ui/login_buttons.less index 7c900b7ac1..f12c7a1b3b 100644 --- a/packages/accounts-ui/login_buttons.less +++ b/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;