css/auth.css

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