git.roojs.org Git - xtuple/blob - node-datasource/views/login/stylesheets/screen.css

   1 /**
   2
   3   Css classes for the login area in node-datasource.
   4
   5 */
   6 * {
   7   margin: 0;
   8 }
   9
  10 html {
  11   position: relative;
  12   min-height: 100%;
  13 }
  14
  15 body {
  16   margin: 0 0 160px; /* bottom = footer height */
  17 }
  18
  19 html {
  20   font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  21   font-size: 11px;
  22   font-weight: 500;
  23 }
  24
  25 .footer {
  26   position: absolute;
  27   left: 0;
  28   bottom: 0;
  29   height: 160px;
  30   width: 100%;
  31   background-color: #eee;
  32 }
  33
  34 .footer-container {
  35   position: relative;
  36   margin: 0 auto;
  37   padding: 30px 5px 0 5px;
  38   max-width: 700px;
  39 }
  40 .footer-container p {
  41   color: #888;
  42   font-family: Helvetica, arial, freesans, clean, sans-serif;
  43   font-size: 1em;
  44   text-align: center;
  45   line-height: 1.6em;
  46 }
  47 .footer-container a {
  48   color: #4183c4;
  49   text-decoration: none;
  50 }
  51 .footer-container a:hover {
  52   text-decoration: underline;
  53 }
  54
  55 .clearfix {
  56   *zoom: 1;
  57 }
  58 .clearfix:before,
  59 .clearfix:after {
  60   display: table;
  61   content: "";
  62   line-height: 0;
  63 }
  64 .clearfix:after {
  65   clear: both;
  66 }
  67
  68 .hide-text {
  69   font: 0/0 a;
  70   color: transparent;
  71   text-shadow: none;
  72   background-color: transparent;
  73   border: 0;
  74 }
  75
  76 .input-block-level {
  77   display: block;
  78   width: 100%;
  79   min-height: 30px;
  80   -webkit-box-sizing: border-box;
  81   -moz-box-sizing: border-box;
  82   box-sizing: border-box;
  83 }
  84
  85 label.login-message-box {
  86   -webkit-box-sizing: border-box;
  87   -moz-box-sizing: border-box;
  88   box-sizing: border-box;
  89   display: block;
  90   margin: 10px auto;
  91   font-size: 14px;
  92   width: 100%;
  93   text-align: center;
  94 }
  95
  96 label.login-message-box.error {
  97   color: #ff0000;
  98 }
  99
 100 #login {
 101   position: relative;
 102   width: 280px;
 103   margin: 80px auto;
 104   padding-bottom: 20px;
 105 }
 106
 107 #header_image {
 108   display: block;
 109   margin: 0 auto 5px auto;
 110   width: 162px;
 111   text-align: center;
 112 }
 113
 114 #oauth {
 115   display: table;
 116   padding-bottom: 5px;
 117 }
 118
 119 #oauth_icon {
 120   display: table-cell;
 121   float: left;
 122   margin-right: 5px;
 123 }
 124
 125 #oauth_request {
 126   display: table-cell;
 127   vertical-align: middle;
 128 }
 129
 130 #oauth_party {
 131   -webkit-box-sizing: border-box;
 132   -moz-box-sizing: border-box;
 133   box-sizing: border-box;
 134   -webkit-border-radius: 6px;
 135   -moz-border-radius: 6px;
 136   border-radius: 6px;
 137   background-color: #2f6c9d;
 138   padding: 40px 30px 70px 30px;
 139   position: relative;
 140   overflow: visible;
 141   z-index: 2;
 142   color: #ffffff;
 143 }
 144
 145 #oauth_party .login-button {
 146   font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
 147   font-size: 11px;
 148   padding: 4px;
 149   margin: 10px 0 10px 20px;
 150   -webkit-border-radius: 2px;
 151   -moz-border-radius: 2px;
 152   border-radius: 2px;
 153   color: #0e0b38;
 154   text-transform: uppercase;
 155   text-shadow: #ccc 0 0 0;
 156   font-weight: 500;
 157   float: right;
 158 }
 159
 160 #main {
 161   -webkit-box-sizing: border-box;
 162   -moz-box-sizing: border-box;
 163   box-sizing: border-box;
 164   -webkit-border-radius: 6px;
 165   -moz-border-radius: 6px;
 166   border-radius: 6px;
 167   background-color: #2f6c9d;
 168   padding: 40px 50px 30px 50px;
 169   position: relative;
 170   overflow: visible;
 171   z-index: 2;
 172 }
 173
 174 #main div {
 175   position: relative;
 176 }
 177
 178 #main #form-fields {
 179   margin: 0 auto;
 180 }
 181
 182 #main .login-input {
 183   display: block;
 184   width: 97%;
 185   margin: 0;
 186   text-transform: lowercase;
 187   outline: none;
 188   color: #666666;
 189   font-smoothing: antialiased;
 190   font-size: 14px;
 191   line-height: 1.5em;
 192 }
 193
 194 #main .login-input:-moz-placeholder {
 195   color: #d5d5d5;
 196 }
 197
 198 #main .login-input:-ms-input-placeholder {
 199   color: #d5d5d5;
 200 }
 201
 202 #main .login-input::-webkit-input-placeholder {
 203   color: #d5d5d5;
 204 }
 205
 206 #main .login-label {
 207   display: block;
 208   margin: 15px auto 7px auto;
 209   text-transform: uppercase;
 210   color: #ffffff;
 211   text-shadow: #2f6c9d 2px 2px 1px;
 212 }
 213
 214 #main .login-button {
 215   display: block;
 216   font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
 217   font-size: 11px;
 218   padding: 4px;
 219   margin: 30px 0 0 72%;
 220   -webkit-border-radius: 2px;
 221   -moz-border-radius: 2px;
 222   border-radius: 2px;
 223   color: #0e0b38;
 224   text-transform: uppercase;
 225   text-shadow: #ccc 0 0 0;
 226   font-weight: 500;
 227 }
 228
 229 #main #organizations {
 230   position: relative;
 231   max-height: 200px;
 232 }
 233
 234 .organization-item {
 235   padding: 8px;
 236   margin: 10px 0;
 237   display: block;
 238   position: relative;
 239   background-color: #ffffff;
 240   text-transform: uppercase;
 241   color: #ff6600;
 242   cursor:default;
 243 }
 244
 245 .forgot-password {
 246   color: orange;
 247   text-decoration: none;
 248 }
 249
 250 .forgot-password:hover {
 251   text-decoration: underline;
 252 }
 253
 254 @include box-sizing(border-box);
 255 #main #organizations .organization-item:hover {
 256   background-color: #ffffff;
 257 }