|
@@ -1,110 +0,0 @@
|
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
|
|
-
|
23
|
|
-body {
|
24
|
|
- -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
|
25
|
|
- -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
|
26
|
|
- -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
|
27
|
|
- background-color:#E4E4E4;
|
28
|
|
- /*background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);*/
|
29
|
|
- font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
|
30
|
|
- font-size:12px;
|
31
|
|
- height:100vh;
|
32
|
|
- margin:0px;
|
33
|
|
- padding:0px;
|
34
|
|
- /* Padding to avoid the "unsafe" areas behind notches in the screen */
|
35
|
|
- padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
|
36
|
|
- text-transform:uppercase;
|
37
|
|
- width:100%;
|
38
|
|
-}
|
39
|
|
-
|
40
|
|
-/* Portrait layout (default) */
|
41
|
|
-.app {
|
42
|
|
- background: #E4E4E4 no-repeat center top; /* 170px x 200px */
|
43
|
|
- position:absolute; /* position in the center of the screen */
|
44
|
|
- left:50%;
|
45
|
|
- top:50%;
|
46
|
|
- height:50px; /* text area height */
|
47
|
|
- width:225px; /* text area width */
|
48
|
|
- text-align:center;
|
49
|
|
- padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
|
50
|
|
- margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
|
51
|
|
- /* offset horizontal: half of text area width */
|
52
|
|
-}
|
53
|
|
-
|
54
|
|
-/* Landscape layout (with min-width) */
|
55
|
|
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
56
|
|
- .app {
|
57
|
|
- background-position:left center;
|
58
|
|
- padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
|
59
|
|
- margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
|
60
|
|
- /* offset horizontal: half of image width and text area width */
|
61
|
|
- }
|
62
|
|
-}
|
63
|
|
-
|
64
|
|
-h1 {
|
65
|
|
- font-size:24px;
|
66
|
|
- font-weight:normal;
|
67
|
|
- margin:0px;
|
68
|
|
- overflow:visible;
|
69
|
|
- padding:0px;
|
70
|
|
- text-align:center;
|
71
|
|
-}
|
72
|
|
-
|
73
|
|
-.event {
|
74
|
|
- border-radius:4px;
|
75
|
|
- color:#FFFFFF;
|
76
|
|
- font-size:12px;
|
77
|
|
- margin:0px 30px;
|
78
|
|
- padding:2px 0px;
|
79
|
|
-}
|
80
|
|
-
|
81
|
|
-.event.listening {
|
82
|
|
- background-color:#333333;
|
83
|
|
- display:block;
|
84
|
|
-}
|
85
|
|
-
|
86
|
|
-.event.received {
|
87
|
|
- background-color:#4B946A;
|
88
|
|
- display:none;
|
89
|
|
-}
|
90
|
|
-
|
91
|
|
-#deviceready.ready .event.listening { display: none; }
|
92
|
|
-#deviceready.ready .event.received { display: block; }
|
93
|
|
-
|
94
|
|
-@keyframes fade {
|
95
|
|
- from { opacity: 1.0; }
|
96
|
|
- 50% { opacity: 0.4; }
|
97
|
|
- to { opacity: 1.0; }
|
98
|
|
-}
|
99
|
|
-
|
100
|
|
-.blink {
|
101
|
|
- animation:fade 3000ms infinite;
|
102
|
|
- -webkit-animation:fade 3000ms infinite;
|
103
|
|
-}
|
104
|
|
-
|
105
|
|
-
|
106
|
|
-@media screen and (prefers-color-scheme: dark) {
|
107
|
|
- body {
|
108
|
|
- background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
|
109
|
|
- }
|
110
|
|
-}
|