| html, |
| body { |
| height:100%; |
| font-size:12px; |
| width:100%; |
| } |
| |
| html { |
| display:table; |
| } |
| |
| body { |
| background-color:#A7A7A7; |
| background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); |
| background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); |
| background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); |
| background-image:-webkit-gradient( |
| linear, |
| left top, |
| left bottom, |
| color-stop(0, #A7A7A7), |
| color-stop(0.51, #E4E4E4) |
| ); |
| display:table-cell; |
| font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; |
| text-transform:uppercase; |
| vertical-align:middle; |
| } |
| |
| .app { |
| background-image:url(../img/cordova.png); |
| background-repeat:no-repeat; |
| margin:0px auto; |
| width:275px; |
| } |
| |
| h1 { |
| font-size:2em; |
| font-weight:300; |
| margin:0px; |
| overflow:visible; |
| padding:0px; |
| text-align:center; |
| } |
| |
| .status { |
| background-color:#333333; |
| border-radius:4px; |
| -webkit-border-radius:4px; |
| color:#FFFFFF; |
| font-size:1em; |
| margin:0px auto; |
| padding:2px 10px; |
| text-align:center; |
| width:100%; |
| max-width:175px; |
| } |
| |
| .status.complete { |
| background-color:#4B946A; |
| } |
| |
| .hide { |
| display:none; |
| } |
| |
| @keyframes fade { |
| from { opacity: 1.0; } |
| 50% { opacity: 0.4; } |
| to { opacity: 1.0; } |
| } |
| |
| @-webkit-keyframes fade { |
| from { opacity: 1.0; } |
| 50% { opacity: 0.4; } |
| to { opacity: 1.0; } |
| } |
| |
| .blink { |
| animation:fade 3000ms infinite; |
| -webkit-animation:fade 3000ms infinite; |
| } |
| |
| /* portrait */ |
| /* @media screen and (max-aspect-ratio: 1/1) */ |
| .app { |
| background-position:center top; |
| height:100px; /* adds enough room for text */ |
| padding:180px 0px 0px 0px; /* background height - shadow offset */ |
| } |
| |
| /* lanscape (when wide enough) */ |
| @media screen and (min-aspect-ratio: 1/1) and (min-width:445px) { |
| .app { |
| background-position:left center; |
| height:140px; /* height + padding = background image size */ |
| padding-left:170px; /* background width */ |
| padding-top:60px; /* center the text */ |
| } |
| } |