/* | |
* Licensed to the Apache Software Foundation (ASF) under one | |
* or more contributor license agreements. See the NOTICE file | |
* distributed with this work for additional information | |
* regarding copyright ownership. The ASF licenses this file | |
* to you under the Apache License, Version 2.0 (the | |
* "License"); you may not use this file except in compliance | |
* with the License. You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, | |
* software distributed under the License is distributed on an | |
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
* KIND, either express or implied. See the License for the | |
* specific language governing permissions and limitations | |
* under the License. | |
*/ | |
* { | |
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ | |
} | |
body { | |
-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-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ | |
background-color:#E4E4E4; | |
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) | |
); | |
background-attachment:fixed; | |
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; | |
font-size:12px; | |
height:100%; | |
margin:0px; | |
padding:0px; | |
text-transform:uppercase; | |
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) */ | |
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { | |
.app { | |
background-position:left center; | |
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ | |
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ | |
/* offset horizontal: half of image width and text area width */ | |
} | |
} | |
h1 { | |
font-size:24px; | |
font-weight:normal; | |
margin:0px; | |
overflow:visible; | |
padding:0px; | |
text-align:center; | |
} | |
.event { | |
border-radius:4px; | |
-webkit-border-radius:4px; | |
color:#FFFFFF; | |
font-size:12px; | |
margin:0px 30px; | |
padding:2px 0px; | |
} | |
.event.listening { | |
background-color:#333333; | |
display:block; | |
} | |
.event.received { | |
background-color:#4B946A; | |
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; | |
} |