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