css 登录CSS

Posted 2021-05-13

/* Private Portal - Login and Registration */

  form .field{position: relative;}

  form .field.has-icon-line:before{
    content:"";
    position:absolute;
    left: 32px;
    top:5px;
    bottom:5px;
    width:1px;
    background:#eaeaea;
  }

  .login-form .field label, .registration-form .field label, .forgotpw-form .field label {
    font-weight: 300;
    font-size: 18px;
    display: block;
    color: #8d8f92;
  }

  .login-form .field label{
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 5px;
  }

  .login-form input[type="text"], .login-form input[type="password"] {
    font-size: 14px;
    display: block;
    margin: 0 0 15px 0;
  }

  .login-form .field .fa{position: absolute;left: 12px;top: 15px;}

  #login_form input[type="submit"]{ margin-bottom:20px;}
  
  .login-form .actions input {
    width: 100%;
    margin-bottom: 15px;
  }

  .login-form .newaccount, .login-form .forgotpw {
    float: left;
  }

  .login-form .forgotpw {
  float: right;
  }

  .registration-form label.invalid,
  .forgotpw-form label.invalid {
    font-weight: normal;
    display: block;
    margin: -10px 0 20px 0;
  }

  .login-form form {
  overflow: hidden;
  }

  .left-divider {
  }

  .alternatelogins {
    margin-top: 30px;
    padding: 14px 0;
    text-align: center;
    border-top: 1px solid #D3D3D3;
  }

  .alternatelogins:before{
    content: "or";
    text-align:center;
    display: inline-block;
    color: #A5A5A5;
    position: relative;
    top: -27px;
    background: #F5F5F5;
    padding: 0 8px;
    text-transform: uppercase;
    font-size: 12px;
  }

  .alternatelogins div {
    margin: 0 0 10px 0;
  }

  .alternatelogins a,
  #add_facebook input,
  #add_twitter input {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    padding: 0 1em;
    border-radius: 4px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    color: #222;
    background: #fff;
    -webkit-appearance: none;
    overflow: visible;
    width: 100%;
  }

  .alternatelogins a:hover,
  .alternatelogins a:focus,
  .alternatelogins a:active,
  #add_facebook input,
  #add_twitter input {
    color: #222;
    text-decoration: none;
  }

  .alternatelogins a:before {
    content: "";
    float: left;
    width: 36px;
    height: 36px;
  }

  .alternatelogins #twitter,
  #add_twitter input {    
    color: #327695;
    background: #cfe4f0;    
  }

  .alternatelogins #twitter:hover,
  .alternatelogins #twitter:focus,
  .alternatelogins #twitter:active,
  #add_twitter input:hover,
  #add_twitter input:focus,
  #add_twitter input:active {
    color: #327695;
    background-color: #B5D6EB;
  }

  .alternatelogins #twitter:active,
  #add_twitter input:active {
    background: #cadde9;
    box-shadow: inset 0 1px 0 #bbd6e7;
  }

  .alternatelogins #twitter:before {
    margin: 0 1em 0 -0.9em;
    background-position: -36px -22px;
  }

  .alternatelogins #facebook,
  #add_facebook input {    
    color: #fff;
    background-color: #5872a7;    
  }

  .alternatelogins #facebook:hover,
  .alternatelogins #facebook:focus,
  #add_facebook input:hover,
  #add_facebook input:focus {
    color: #fff !important;
    background-color: #3b5998;
  }

  .alternatelogins #facebook:active,
  #add_facebook input:active {
    color: #fff;
    background: #4f6aa3;
    box-shadow: inset 0 1px 0 #45619d;
  }

  .alternatelogins #facebook:before {
    margin: 0 1em 0 -1em;
    background-position: 0 -22px;
  }

  #add_facebook input,
  #add_twitter input {
    height: 22px;
    font-size: 11px;
    line-height: 22px;
    padding-left: 35px;
  }

  #registration-in-progress {
    display: none;
    padding: 5px;
    background-color: #fffdef;
    border: 2px solid #ede9c2;
  }

   #registration-in-progress img {
       float: left;
       margin-right: 5px;
   }

  .desk-external-variables {
    display: none;
  }