1
/* Copyright 2013 The Chromium Authors. All rights reserved.
2
 * Use of this source code is governed by a BSD-style license that can be
3
 * found in the LICENSE file. */
4

5
html, body {
6
  padding: 0;
7
  margin: 0;
8
  width: 100%;
9
  height: 100%;
10
}
11

12
.icon {
13
  -webkit-user-select: none;
14
  user-select: none;
15
  display: inline-block;
16
}
17

18

19
.hidden {
20
  display: none;
21
}
22

23

24
/* Offline page */
25
.offline {
26
  transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
27
              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
28
}
29

30
.offline body {
31
  transition: background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
32
}
33
.offline.inverted {
34
  background-color: #000;
35
  filter: invert(1);
36
}
37

38
.offline.inverted body {
39
  background-color: #fff;
40
}
41

42
.offline .interstitial-wrapper {
43
  color: #2b2b2b;
44
  font-size: 0.8em;
45
  line-height: 1.55;
46
  margin: 0 auto;
47
  max-width: 600px;
48
  padding-top: 150px;
49
  width: 100%;
50
}
51

52
.offline .runner-container {
53
  direction: ltr;
54
  height: 150px;
55
  max-width: 600px;
56
  overflow: hidden;
57
  position: absolute;
58
  top: 35px;
59
  width: 44px;
60
}
61

62
.offline .runner-canvas {
63
  height: 150px;
64
  max-width: 600px;
65
  opacity: 1;
66
  overflow: hidden;
67
  position: absolute;
68
  top: 0;
69
  z-index: 10;
70
}
71

72
.offline .controller {
73
  background: rgba(247, 247, 247, .1);
74
  height: 100vh;
75
  left: 0;
76
  position: absolute;
77
  top: 0;
78
  width: 100vw;
79
  z-index: 1;
80
}
81

82
#offline-resources {
83
  display: none;
84
}
85

86

87
.arcade-mode,
88
.arcade-mode .runner-container,
89
.arcade-mode .runner-canvas {
90
  image-rendering: -moz-crisp-edges;
91
  image-rendering: -webkit-crisp-edges;
92
  image-rendering: pixelated;
93
  image-rendering: crisp-edges;
94
  max-width: 100%;
95
  overflow: hidden;
96
}
97

98
.arcade-mode #buttons,
99
.arcade-mode #main-content {
100
  opacity: 0;
101
  overflow: hidden;
102
}
103

104
.arcade-mode .interstitial-wrapper {
105
  height: 100vh;
106
  max-width: 100%;
107
  overflow: hidden;
108
}
109

110
.arcade-mode .runner-container {
111
  image-rendering: -moz-crisp-edges;
112
  image-rendering: -webkit-crisp-edges;
113
  image-rendering: pixelated;
114
  image-rendering: crisp-edges;
115
  left: 0;
116
  margin: auto;
117
  right: 0;
118
  transform-origin: top center;
119
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
120
  z-index: 2;
121
}
122

123

124
@media (prefers-color-scheme: dark) {
125
	
126
  body {
127
	background-color: #000;
128
  }
129

130
  .offline .runner-canvas {
131
    filter: invert(1);
132
  }
133

134
  .offline.inverted {
135
    background-color: #fff;
136
    filter: invert(1);
137
  }
138

139
  .offline.inverted body {
140
    background-color: #fff;
141
  }
142

143
  h1{filter: invert(1);}
144
}
145

146
@media (max-width: 420px) {
147
  .suggested-left > #control-buttons, .suggested-right > #control-buttons {
148
    float: none;
149
  }
150
  .snackbar {
151
    left: 0;
152
    bottom: 0;
153
    width: 100%;
154
    border-radius: 0;
155
  }
156
}
157

158
@media (max-height: 350px) {
159
  h1 {
160
    margin: 0 0 15px;
161
  }
162
  .icon-offline {
163
    margin: 0 0 10px;
164
  }
165
  .interstitial-wrapper {
166
    margin-top: 5%;
167
  }
168
  .nav-wrapper {
169
    margin-top: 30px;
170
  }
171
}
172

173
@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
174
  .offline .interstitial-wrapper {
175
    margin-left: 0;
176
    margin-right: 0;
177
  }
178
}
179

180
@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
181
  .interstitial-wrapper {
182
    margin-bottom: 100px;
183
  }
184
}
185

186
@media (min-height: 240px) and (orientation: landscape) {
187
  .offline .interstitial-wrapper {
188
    margin-bottom: 90px;
189
  }
190
  .icon-offline {
191
    margin-bottom: 20px;
192
  }
193
}
194

195
@media (max-height: 320px) and (orientation: landscape) {
196
  .icon-offline {
197
    margin-bottom: 0;
198
  }
199
  .offline .runner-container {
200
    top: 10px;
201
  }
202
}
203

204
@media (max-width: 240px) {
205
  .interstitial-wrapper {
206
    overflow: inherit;
207
    padding: 0 8px;
208
  }
209
}
210