browserid.css

.persona-button--select-color {
  line-height: 23px;
}

input[type=radio].persona-button--select-color-radio {
  margin: 0 10px 0 0;
  display: table-cell;
  vertical-align: middle;
}

/* Link body */
.persona-button {
  color: #fff !important;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.1;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 0 1px rgba(0,0,0,0.5), 0 0 2px rgba(0,0,0,0.2);

  background: #297dc3;
  background: -moz-linear-gradient(top, #43a6e2, #287cc2);
  background: -ms-linear-gradient(top, #43a6e2, #287cc2);
  background: -o-linear-gradient(top, #43a6e2, #287cc2);
  background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
  background: linear-gradient(top, #43a6e2, #287cc2);

  -moz-border-radius:   3px;
  -ms-border-radius:     3px;
  -o-border-radius:     3px;
  -webkit-border-radius:   3px;
  border-radius:       3px;

  -moz-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
  -ms-box-shadow:   0 1px 0 rgba(0,0,0,0.2);
  -o-box-shadow:     0 1px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  box-shadow:     0 1px 0 rgba(0,0,0,0.2);
}

.persona-button:hover {
  background: #21669f;
  background: -moz-linear-gradient(top, #3788b9, #21669f);
  background: -ms-linear-gradient(top, #3788b9, #21669f);
  background: -o-linear-gradient(top, #3788b9, #21669f);
  background: -webkit-linear-gradient(top, #3788b9, #21669f);
  background: linear-gradient(top, #3788b9, #21669f);
  color: #fff !important;
}

.persona-button:active, .persona-button:focus {
  color: #fff !important;
  top: 1px;
  -moz-box-shadow:   none;
  -ms-box-shadow:   none;
  -o-box-shadow:     none;
  -webkit-box-shadow: none;
  box-shadow:     none;
}

.persona-button.disabled, .persona-button.disabled:hover,
.persona-button.disabled:active, .persona-button.disabled:focus{
  background: #297dc3;
  background: -moz-linear-gradient(top, #43a6e2, #287cc2);
  background: -ms-linear-gradient(top, #43a6e2, #287cc2);
  background: -o-linear-gradient(top, #43a6e2, #287cc2);
  background: -webkit-linear-gradient(top, #43a6e2, #287cc2);
  background: linear-gradient(top, #43a6e2, #287cc2);
  opacity: 0.5;
  top: 0;
}

.persona-button__text {
  display: inline-block;
  padding: 5px 10px 5px 40px;
}

/* Icon */
.persona-button__text:after{
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAPCAYAAAA/I0V3AAAA4klEQVR42o2RWaqEMBRE3YaCiDjPwQGcd9CrysLv4wTyoLFD90dxqbp1EgdPRB7Kskznea6Zn/aPoKoqUUrJOI5m4l2QBfSyLHKep1zXZSae3An1fS/7vst931bGkzuhaZrsLVbGkzuheZ7lOI6HyJ2QUkqv6yrbtv0LT+6E7G0UrfBfP3lZlpoXH4ZBmHgn5Pv+KwxDfqp0XQdgJp6c/RsUBIGOokiSJDE/s21bACbe5Ozp0TdAHMdSFIXUdS1N01C2wpObPT36HifwCJzI0iX29Oh7XP0E3CB9L01TzM+i/wePv4ZE5RtAngAAAABJRU5ErkJggg==) 10px center no-repeat;
  content: '';
  display: block;
  width: 31px;

  position: absolute;
  bottom: 0;
  left: -3px;
  top: 0;
  z-index: 10;
}

/*  Icon background */
.persona-button__text:before{
  content: '';
  display: block;
  height: 100%;
  width: 20px;

  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  z-index: 1;

  background: #42a9dd;
  background: -moz-linear-gradient(top, #50b8e8, #3095ce);
  background: -ms-linear-gradient(top, #50b8e8, #3095ce);
  background: -o-linear-gradient(top, #50b8e8, #3095ce);
  background: -webkit-linear-gradient(top, #50b8e8, #3095ce);
  background: linear-gradient(top, #50b8e8, #3095ce);

  -moz-border-radius:   3px 0 0 3px;
  -ms-border-radius:     3px 0 0 3px;
  -o-border-radius:     3px 0 0 3px;
  -webkit-border-radius:   3px 0 0 3px;
  border-radius:       3px 0 0 3px;
}

/* Triangle */
.persona-button:before{
  background: #42a9dd;
  content: '';
  display: block;
  height: 26px;
  width: 26px;

  position: absolute;
  left: 2px;
  top: 50%;
  margin-top: -13px;
  z-index: 0;

  background: -moz-linear-gradient(-45deg, #50b8e8, #3095ce);
  background: -ms-linear-gradient(-45deg, #50b8e8, #3095ce);
  background: -o-linear-gradient(-45deg, #50b8e8, #3095ce);
  background: -webkit-linear-gradient(-45deg, #50b8e8, #3095ce);
  background: linear-gradient(-45deg, #3095ce, #50b8e8); /* flipped for updated spec */

  -moz-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
  -ms-box-shadow:   1px -1px 1px rgba(0,0,0,0.1);
  -o-box-shadow:     1px -1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 1px -1px 1px rgba(0,0,0,0.1);
  box-shadow:     1px -1px 1px rgba(0,0,0,0.1);

  -moz-transform:   rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:     rotate(45deg);
  -webkit-transform:   rotate(45deg);
  transform:       rotate(45deg);
}

/* Inset shadow (required here because the icon background clips it when on the `a` element) */
.persona-button:after{
  content: '';
  display: block;
  height: 100%;
  width: 100%;

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;

  -moz-border-radius:   3px;
  -ms-border-radius:     3px;
  -o-border-radius:     3px;
  -webkit-border-radius:   3px;
  border-radius:       3px;

  -moz-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
  -ms-box-shadow:   inset 0 -1px 0 rgba(0,0,0,0.3);
  -o-box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
  box-shadow:     inset 0 -1px 0 rgba(0,0,0,0.3);
}



/* ========================================================
 *    Dark button
 * ===================================================== */
.persona-button.dark{
  background: #3c3c3c;
  background: -moz-linear-gradient(top, #606060, #3c3c3c);
  background: -ms-linear-gradient(top, #606060, #3c3c3c);
  background: -o-linear-gradient(top, #606060, #3c3c3c);
  background: -webkit-linear-gradient(top, #606060, #3c3c3c);
  background: linear-gradient(top, #606060, #3c3c3c);
}
.persona-button.dark:hover{
  background: #2d2d2d;
  background: -moz-linear-gradient(top, #484848, #2d2d2d);
  background: -ms-linear-gradient(top, #484848, #2d2d2d);
  background: -o-linear-gradient(top, #484848, #2d2d2d);
  background: -webkit-linear-gradient(top, #484848, #2d2d2d);
  background: linear-gradient(top, #484848, #2d2d2d);
}
.persona-button.dark span:before{ /* Icon BG */
  background: #d34f2d;
  background: -moz-linear-gradient(top, #ebac45, #d34f2d);
  background: -ms-linear-gradient(top, #ebac45, #d34f2d);
  background: -o-linear-gradient(top, #ebac45, #d34f2d);
  background: -webkit-linear-gradient(top, #ebac45, #d34f2d);
  background: linear-gradient(top, #ebac45, #d34f2d);
}
.persona-button.dark:before{ /* Triangle */
  background: #d34f2d;
  background: -moz-linear-gradient(-45deg, #ebac45, #d34f2d);
  background: -ms-linear-gradient(-45deg, #ebac45, #d34f2d);
  background: -o-linear-gradient(-45deg, #ebac45, #d34f2d);
  background: -webkit-linear-gradient(-45deg, #ebac45, #d34f2d);
  background: linear-gradient(-45deg, #d34f2d, #ebac45); /* flipped for updated spec */
}

/* ========================================================
 *    Orange button
 * ===================================================== */
.persona-button.orange{
  background: #ee731a;
  background: -moz-linear-gradient(top, #ee731a, #d03116);
  background: -ms-linear-gradient(top, #ee731a, #d03116);
  background: -o-linear-gradient(top, #ee731a, #d03116);
  background: -webkit-linear-gradient(top, #ee731a, #d03116);
  background: linear-gradient(top, #ee731a, #d03116);
}
.persona-button.orange:hover{
  background: #cb6216;
  background: -moz-linear-gradient(top, #cb6216, #b12a13);
  background: -ms-linear-gradient(top, #cb6216, #b12a13);
  background: -o-linear-gradient(top, #cb6216, #b12a13);
  background: -webkit-linear-gradient(top, #cb6216, #b12a13);
  background: linear-gradient(top, #cb6216, #b12a13);
}
.persona-button.orange span:before{ /* Icon BG */
  background: #e84a21;
  background: -moz-linear-gradient(top, #f7ad27, #e84a21);
  background: -ms-linear-gradient(top, #f7ad27, #e84a21);
  background: -o-linear-gradient(top, #f7ad27, #e84a21);
  background: -webkit-linear-gradient(top, #f7ad27, #e84a21);
  background: linear-gradient(top, #f7ad27, #e84a21);
}
.persona-button.orange:before{ /* Triangle */
  background: #e84a21;
  background: -moz-linear-gradient(-45deg, #f7ad27, #e84a21);
  background: -ms-linear-gradient(-45deg, #f7ad27, #e84a21);
  background: -o-linear-gradient(-45deg, #f7ad27, #e84a21);
  background: -webkit-linear-gradient(-45deg, #f7ad27, #e84a21);
  background: linear-gradient(-45deg, #e84a21, #f7ad27); /* flipped for updated spec */
}

.persona__whatis {
	font-size: 10px !important;
  margin: 5px 0 0 0 !important;
  line-height: 1 !important;
}

.persona__whatis_link {
  margin: 0 !important;
  color: #757575 !important;
}

.persona__error {
  padding: 12px;
  background-color: #ffebe8;
  color: #333;
  border: 1px solid #cc0000;
  font-size: 12px;
}

.persona__error-login {
	margin: 10px;
	vertical-align: top;
}

.persona__error-comment {
  display: inline-block;
}

.persona__warning {
  padding: 12px;
  background-color: #ffebe8;
  color: #333;
  border: 1px solid #cc0000;
  font-size: 12px;
}

.persona__warning-heading {
  display: inline-block;
}

/**
 * Registration screen.
 *
 * Hide the user email address in persona only auth.
 */
.persona--persona-only-auth.login-action-register .user_email,
.persona--persona-only-auth.login-action-register [for=user_email],
.persona--persona-only-auth.login-action-register #reg_passmail {
  display:none;
}

/**
 * Login/Registration screens.
 *
 * Push the submit button off the screen, but allow it to be
 *     programatically clickable.
 */
.persona--persona-only-auth #wp-submit {
	position: absolute;
	left: -9999px !important;
}

/**
 * Comment form.
 *
 */
.persona--comments #respond input[type=submit] {
	position: absolute;
	left: -9999px !important;
}

/**
 * Login screen
 *
 * Hide the login form. While this does not truely prevent
 * users from from logging in using the standard
 * authentication mechanism, it cleans up the login form a bit.
 */
.persona--persona-only-auth.login-action-login #user_login,
.persona--persona-only-auth.login-action-login [for=user_login],
.persona--persona-only-auth.login-action-login #user_pass,
.persona--persona-only-auth.login-action-login [for=user_pass],
.persona--persona-only-auth.login-action-login [name=log],
.persona--persona-only-auth.login-action-login [name=pwd] {
  display: none;
}

/**
 * Waiting screen
 */
.persona__submit {
  position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  background-color: rgba(255,255,255,.7);
  z-index: 1000;
}

/**
 * These animations are used for the loading spinner. No animated gifs here.
 */

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(365deg);
    }
}
@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(365deg);
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(365deg);
    }
}


.persona__submit_spinner {
    background-image: url('data:image/png;base64,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');
    display: block;
    top: 30%;
    left: 50%;
    margin: -25px 0 0 -50px;
    width: 50px;
    height: 50px;
    position: absolute;
    -webkit-animation: 0.9s spin infinite linear;
    -moz-animation: 0.9s spin infinite linear;
    animation: 0.9s spin infinite linear;
}


.persona__widget-button-container {
  list-style-type: none;
}