mirror of
https://github.com/purplecabbage/phonegap-plugins.git
synced 2026-01-15 01:08:17 -05:00
101 lines
2.1 KiB
CSS
101 lines
2.1 KiB
CSS
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 */
|
|
}
|
|
}
|