|
|
@@ -0,0 +1,110 @@
|
|
|
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
|
+}
|
