github.com/qiwihui/DBShield@v0.0.0-20171107092910-fb8553bed8ef/assets/css/login.css (about)

     1  html, body {
     2      width: 100%;
     3      height: 100%;
     4      font-family: "Helvetica Neue", Helvetica, sans-serif;
     5      color: #444;
     6      -webkit-font-smoothing: antialiased;
     7      background: #f0f0f0;
     8  }
     9  
    10  .header {
    11      text-align: center;
    12      margin-top: 5%;
    13      margin-bottom: -5px;
    14  }
    15  
    16  #container {
    17      position: fixed;
    18      width: 340px;
    19      top: 50%;
    20      left: 50%;
    21      margin-top: -140px;
    22      margin-left: -170px;
    23      background: #fff;
    24      border-radius: 3px;
    25      border: 1px solid #ccc;
    26      box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    27  }
    28  
    29  form {
    30      margin: 0 auto;
    31      margin-top: 20px;
    32  }
    33  
    34  label {
    35      color: #555;
    36      display: inline-block;
    37      margin-left: 18px;
    38      padding-top: 10px;
    39      font-size: 14px;
    40  }
    41  
    42  p a {
    43      font-size: 11px;
    44      color: #aaa;
    45      float: right;
    46      margin-top: -13px;
    47      margin-right: 20px;
    48      -webkit-transition: all .4s ease;
    49      -moz-transition: all .4s ease;
    50      transition: all .4s ease;
    51  }
    52  
    53  p a:hover {
    54      color: #555;
    55  }
    56  
    57  input {
    58      font-family: "Helvetica Neue", Helvetica, sans-serif;
    59      font-size: 12px;
    60      outline: none;
    61  }
    62  
    63  input[type=text], input[type=password] {
    64      color: #777;
    65      padding-left: 10px;
    66      margin: 10px;
    67      margin-top: 12px;
    68      margin-left: 18px;
    69      width: 290px;
    70      height: 35px;
    71      border: 1px solid #c7d0d2;
    72      border-radius: 2px;
    73      box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
    74      -webkit-transition: all .4s ease;
    75      -moz-transition: all .4s ease;
    76      transition: all .4s ease;
    77  }
    78  
    79  input[type=text]:hover, input[type=password]:hover {
    80      border: 1px solid #b6bfc0;
    81      box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
    82  }
    83  
    84  input[type=text]:focus, input[type=password]:focus {
    85      border: 1px solid #a8c9e4;
    86      box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
    87  }
    88  
    89  #lower {
    90      background: #ecf2f5;
    91      width: 100%;
    92      height: 69px;
    93      margin-top: 20px;
    94      box-shadow: inset 0 1px 1px #fff;
    95      border-top: 1px solid #ccc;
    96      border-bottom-right-radius: 3px;
    97      border-bottom-left-radius: 3px;
    98  }
    99  
   100  input[type=checkbox] {
   101      margin-left: 20px;
   102      margin-top: 30px;
   103  }
   104  
   105  .check {
   106      margin-left: 3px;
   107      font-size: 11px;
   108      color: #444;
   109      text-shadow: 0 1px 0 #fff;
   110  }
   111  
   112  input[type=submit] {
   113      float: right;
   114      margin-right: 20px;
   115      margin-top: 20px;
   116      width: 80px;
   117      height: 30px;
   118      font-size: 14px;
   119      font-weight: bold;
   120      color: #fff;
   121      background-color: #acd6ef;
   122      /*IE fallback*/
   123      background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
   124      background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
   125      background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
   126      border-radius: 30px;
   127      border: 1px solid #66add6;
   128      box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
   129      cursor: pointer;
   130  }
   131  
   132  input[type=submit]:hover {
   133      background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
   134      background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
   135      background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
   136  }
   137  
   138  input[type=submit]:active {
   139      background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
   140      background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
   141      background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
   142  }