formatted css
This commit is contained in:
parent
36b4245fb5
commit
21aaf01772
1 changed files with 65 additions and 67 deletions
|
@ -1,97 +1,95 @@
|
||||||
* {
|
* {
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
|
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
|
||||||
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
|
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
|
||||||
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
|
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
|
||||||
background-color:#E4E4E4;
|
background-color: #E4E4E4;
|
||||||
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
|
background-image: linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
|
||||||
background-image:-webkit-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: -ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
|
||||||
background-image:-webkit-gradient(
|
background-image: -webkit-gradient(
|
||||||
linear,
|
linear,
|
||||||
left top,
|
left top,
|
||||||
left bottom,
|
left bottom,
|
||||||
color-stop(0, #A7A7A7),
|
color-stop(0, #A7A7A7),
|
||||||
color-stop(0.51, #E4E4E4)
|
color-stop(0.51, #E4E4E4)
|
||||||
);
|
);
|
||||||
background-attachment:fixed;
|
background-attachment: fixed;
|
||||||
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
|
font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
|
||||||
font-size:12px;
|
font-size: 12px;
|
||||||
height:100%;
|
height: 100%;
|
||||||
margin:0px;
|
margin: 0px;
|
||||||
padding:0px;
|
padding: 0px;
|
||||||
text-transform:uppercase;
|
text-transform: uppercase;
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
/* Portrait layout (default) */
|
|
||||||
.app {
|
|
||||||
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
|
|
||||||
position:absolute; /* position in the center of the screen */
|
|
||||||
left:50%;
|
|
||||||
top:50%;
|
|
||||||
height:50px; /* text area height */
|
|
||||||
width:225px; /* text area width */
|
|
||||||
text-align:center;
|
|
||||||
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
|
|
||||||
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
|
|
||||||
/* offset horizontal: half of text area width */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Landscape layout (with min-width) */
|
/* Landscape layout (with min-width) */
|
||||||
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
@media screen and (min-aspect-ratio: 1/1) and (min-width: 400px) {
|
||||||
.app {
|
.app {
|
||||||
background-position:left center;
|
background-position: left center;
|
||||||
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
|
padding: 75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
|
||||||
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
|
margin: -90px 0px 0px -198px; /* offset vertical: half of image height */
|
||||||
/* offset horizontal: half of image width and text area width */
|
/* offset horizontal: half of image width and text area width */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size:24px;
|
font-size: 24px;
|
||||||
font-weight:normal;
|
font-weight: normal;
|
||||||
margin:0px;
|
margin: 0px;
|
||||||
overflow:visible;
|
overflow: visible;
|
||||||
padding:0px;
|
padding: 0px;
|
||||||
text-align:center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event {
|
.event {
|
||||||
border-radius:4px;
|
border-radius: 4px;
|
||||||
-webkit-border-radius:4px;
|
-webkit-border-radius: 4px;
|
||||||
color:#FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size:12px;
|
font-size: 12px;
|
||||||
margin:0px 30px;
|
margin: 0px 30px;
|
||||||
padding:2px 0px;
|
padding: 2px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event.listening {
|
.event.listening {
|
||||||
background-color:#333333;
|
background-color: #333333;
|
||||||
display:block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.event.received {
|
.event.received {
|
||||||
background-color:#4B946A;
|
background-color: #4B946A;
|
||||||
display:none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fade {
|
@keyframes fade {
|
||||||
from { opacity: 1.0; }
|
from {
|
||||||
50% { opacity: 0.4; }
|
opacity: 1.0;
|
||||||
to { opacity: 1.0; }
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes fade {
|
@-webkit-keyframes fade {
|
||||||
from { opacity: 1.0; }
|
from {
|
||||||
50% { opacity: 0.4; }
|
opacity: 1.0;
|
||||||
to { opacity: 1.0; }
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blink {
|
.blink {
|
||||||
animation:fade 3000ms infinite;
|
animation: fade 3000ms infinite;
|
||||||
-webkit-animation:fade 3000ms infinite;
|
-webkit-animation: fade 3000ms infinite;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue