index.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. * {
  20. -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  21. }
  22. body {
  23. -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  24. -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  25. -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
  26. background-color:#E4E4E4;
  27. background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  28. background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  29. background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  30. background-image:-webkit-gradient(
  31. linear,
  32. left top,
  33. left bottom,
  34. color-stop(0, #A7A7A7),
  35. color-stop(0.51, #E4E4E4)
  36. );
  37. background-attachment:fixed;
  38. font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  39. font-size:12px;
  40. height:100%;
  41. margin:0px;
  42. padding:0px;
  43. text-transform:uppercase;
  44. width:100%;
  45. }
  46. /* Portrait layout (default) */
  47. .app {
  48. background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
  49. position:absolute; /* position in the center of the screen */
  50. left:50%;
  51. top:50%;
  52. height:50px; /* text area height */
  53. width:225px; /* text area width */
  54. text-align:center;
  55. padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
  56. margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
  57. /* offset horizontal: half of text area width */
  58. }
  59. /* Landscape layout (with min-width) */
  60. @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
  61. .app {
  62. background-position:left center;
  63. padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
  64. margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
  65. /* offset horizontal: half of image width and text area width */
  66. }
  67. }
  68. h1 {
  69. font-size:24px;
  70. font-weight:normal;
  71. margin:0px;
  72. overflow:visible;
  73. padding:0px;
  74. text-align:center;
  75. }
  76. .event {
  77. border-radius:4px;
  78. -webkit-border-radius:4px;
  79. color:#FFFFFF;
  80. font-size:12px;
  81. margin:0px 30px;
  82. padding:2px 0px;
  83. }
  84. .event.listening {
  85. background-color:#333333;
  86. display:block;
  87. }
  88. .event.received {
  89. background-color:#4B946A;
  90. display:none;
  91. }
  92. @keyframes fade {
  93. from { opacity: 1.0; }
  94. 50% { opacity: 0.4; }
  95. to { opacity: 1.0; }
  96. }
  97. @-webkit-keyframes fade {
  98. from { opacity: 1.0; }
  99. 50% { opacity: 0.4; }
  100. to { opacity: 1.0; }
  101. }
  102. .blink {
  103. animation:fade 3000ms infinite;
  104. -webkit-animation:fade 3000ms infinite;
  105. }