/*
* 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 */
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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:#000;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:16px;
height:100%;
margin:0px;
padding:0px;
width:100%;
}
/* Portrait layout (default) */
.app {
margin: 0 auto;
}
#title-bar{
height: 60px;
position: fixed;
width: 100%;
z-index: 1000;
background: #000
}
h1#title {text-align: center;color: #fff200;font-size: 1.313em;padding: 17px 10px;margin: 0;font-weight: normal;}
#logo{
background-color: #fff200;
height: 225px;
margin: 0 auto;
width: 100;
}
#logo-img{
width: 60px;
float: left;
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:0px;
margin:0px;
}
}
#content{
position: relative;
margin-bottom: 120px;
top: 60px;
z-index: 100;
}
#footer{
position: fixed;
bottom: 0px;
padding: 0px;
width: 100%;
z-index: 1000;
background: #000;
height: 60px;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
width:100%;
left:0;
text-align:center;
padding: 3px 0;
background-color: rgba(0,0,0,0.5);
}
#sdk-version {
position: absolute;
right: auto;
left: 10px;
bottom: 50px;
width: 80px;
height: 20px;
border-radius: 10px;
background: #8e8e8e8e;
border: 2px solid #ffff;
padding: 20px 0 0 0;
text-align: center;
}
#scanner-btn {
position: absolute;
right: 10px;
bottom: 100px;
width: 70px;
height: 70px;
border-radius: 70px;
background: #8e8e8e;
border:2px solid #fff;
padding: 20px 0 0 0;
text-align: center;
}
#scanner-btn:before{
content: "\0000a0";
display: inline-block;
height: 32px;
width: 32px;
line-height: 24px;
position: relative;
top: -4px;
left: 3px;
background-size: 100% 100%;
background: url("data:image/svg+xml;utf8, ") no-repeat left center transparent;
}
#scanner-btn.stop{
/*background: #ff0033;*/
background: #4dbd74;
}
#pick-device {
position: absolute;
left: 117px;
top: 13px;
width: 201px;
border-radius: 5px;
background: #0f0f08;
padding: 10px 10px 0;
color: #fff200;
min-height: 34px;
font-size: 0.688em;
text-decoration: none;
}
#pick-device:before{
content: "\0000a0";
display: inline-block;
height: 24px;
width: 28px;
line-height: 24px;
position: relative;
top: 0px;
left: 0px;
background-size: 100% 100%;
background: url("data:image/svg+xml;utf8,") no-repeat left center transparent;
}
#connect-btn {
position: absolute;
right: 15px;
top: 13px;
width: 34px;
border-radius: 5px;
background: #0f0f08;
padding: 9px 10px 0;
color: #fff200;
height: 34px;
font-size: 0.688em;
text-decoration: none;
}
#connect-btn:before{
content: "\0000a0";
display: inline-block;
height: 16px;
width: 16px;
line-height: 24px;
position: relative;
top: 0px;
left: 0px;
background-size: 100% 100%;
background: url("data:image/svg+xml;utf8,") no-repeat left center transparent;
}
#connect-btn.disconnect{
background: #ff0033;
}
#connect-btn.disconnect:before{
background: url("data:image/svg+xml;utf8,") no-repeat left center transparent;
}
#show-result{
width: 90%;
height: 150px;
margin : 0 auto;
}
#device-connection{
margin : 0px;
padding : 5px 0px 0px 0px;
}
.event {
color: #FFFFFF;
font-size: 0.688em;
height: 20px;
float: left;
margin: 0;
position: absolute;
left: 20px;
top: 23px;
display: block;
font-weight: bold;
}
.event.listening {
/*background-color:#333333;*/
display:block;
}
.event.received {
/*background-color:#4B946A;*/
display:none;
}
.event.disconnected{
background-color:#dc0202;
}
.event.connected{
background-color:#4B946A;
}
.event.connecting{
/*background-color: #e4da5b;*/
}
.event.disconnecting{
/*background-color: #e4da5b;*/
}
.results-header{
font-size: 1.10em;
color: #fff;
padding: 17px 20px;
font-weight: normal;
text-align: center;
text-transform: UPPERCASE;
}
.result{
text-align: left;
padding: 8px 2px;
font-size: 0.875em;
color: #ffffff;
min-height: 60px;
padding: 21px 20px;
background: #0a0a06;
}
.result span.symbol {color: #fff200;}
#content div.result:nth-child(2n+1){
background: #000;
}
@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;
}