css/auth.css

   1 /* ---------- GENERAL ---------- */
   2 * {
   3   box-sizing: border-box;
   4 }
   5 *:before, *:after {
   6   box-sizing: border-box;
   7 }
   8
   9 body {
  10   background: #eaeaea;
  11   color: #999;
  12   font: 400 16px/1.5em sans-serif;
  13   margin: 0;
  14 }
  15
  16 h3 {
  17   margin: 0;
  18 }
  19
  20 a {
  21   color: #999;
  22   text-decoration: none;
  23 }
  24
  25 a:hover {
  26   color: #1dabb8;
  27 }
  28
  29 fieldset {
  30   border: none;
  31   margin: 0;
  32 }
  33
  34 input {
  35   border: none;
  36   font-family: inherit;
  37   font-size: inherit;
  38   margin: 0;
  39   -webkit-appearance: none;
  40 }
  41
  42 input:focus {
  43   outline: none;
  44 }
  45
  46 input[type="submit"] {
  47   cursor: pointer;
  48 }
  49
  50 .clearfix {
  51   *zoom: 1;
  52 }
  53 .clearfix:before, .clearfix:after {
  54   content: ' ';
  55   display: table;
  56 }
  57 .clearfix:after {
  58   clear: both;
  59 }
  60
  61 .container {
  62   left: 50%;
  63   position: fixed;
  64   top: 50%;
  65   -webkit-transform: translate(-50%, -50%);
  66       -ms-transform: translate(-50%, -50%);
  67           transform: translate(-50%, -50%);
  68 }
  69
  70 .footer {
  71   text-align: center;
  72   margin-top: 10px;
  73   margin-bottom: 10px;
  74   font-size: 0.7em;
  75   background: #ECECAC;
  76   color: black;
  77 }
  78
  79 /* ---------- LOGIN-FORM ---------- */
  80 #login-form {
  81   width: 300px;
  82 }
  83
  84 #login-form h3 {
  85   background-color: #282830;
  86   border-radius: 5px 5px 0 0;
  87   color: #fff;
  88   font-size: 14px;
  89   padding: 20px;
  90   text-align: center;
  91   text-transform: uppercase;
  92 }
  93
  94 #login-form fieldset {
  95   background: #fff;
  96   border-radius: 0 0 5px 5px;
  97   padding: 20px;
  98   position: relative;
  99 }
 100
 101 #login-form fieldset:before {
 102   background-color: #fff;
 103   content: "";
 104   height: 8px;
 105   left: 50%;
 106   margin: -4px 0 0 -4px;
 107   position: absolute;
 108   top: 0;
 109   -webkit-transform: rotate(45deg);
 110   -ms-transform: rotate(45deg);
 111   transform: rotate(45deg);
 112   width: 8px;
 113 }
 114
 115 #login-form input {
 116   font-size: 14px;
 117 }
 118
 119 #login-form input[type="email"],
 120 #login-form input[type="password"] {
 121   border: 1px solid #dcdcdc;
 122   padding: 12px 10px;
 123   width: 100%;
 124 }
 125
 126 #login-form input[type="email"] {
 127   border-radius: 3px 3px 0 0;
 128 }
 129
 130 #login-form input[type="password"] {
 131   border-top: none;
 132   border-radius: 0px 0px 3px 3px;
 133 }
 134
 135 #login-form input[type="submit"] {
 136   background: #1dabb8;
 137   border-radius: 3px;
 138   color: #fff;
 139   float: right;
 140   font-weight: bold;
 141   margin-top: 20px;
 142   padding: 12px 20px;
 143 }
 144
 145 #login-form input[type="submit"]:hover {
 146   background: #198d98;
 147 }
 148
 149 #login-form footer {
 150   font-size: 12px;
 151   margin-top: 16px;
 152 }
 153
 154 .info {
 155   background: #e5e5e5;
 156   border-radius: 50%;
 157   display: inline-block;
 158   height: 20px;
 159   line-height: 20px;
 160   margin: 0 10px 0 0;
 161   text-align: center;
 162   width: 20px;
 163 }
 164
 165 /* ---------- GREETING ---------- */
 166 #greeting {
 167   width: 300px;
 168 }
 169
 170 #greeting fieldset {
 171   background: #fff;
 172   border-radius: 0 0 5px 5px;
 173   padding: 20px;
 174   position: relative;
 175 }
 176
 177 #greeting h3 {
 178   background-color: #282830;
 179   border-radius: 5px 5px 0 0;
 180   color: #fff;
 181   font-size: 14px;
 182   padding: 20px;
 183   text-align: center;
 184   text-transform: uppercase;
 185 }
 186
 187 #greeting p {
 188   text-align: center;
 189   color: navy;
 190 }
 191
 192 #greeting a {
 193   color: green;
 194 }
 195
 196 .error {
 197   color: red;
 198 }