OLD | NEW |
---|---|
1 /* Copyright 2013 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 body { | |
6 background-color: #E6E6E6; | |
7 font-family: Helvetica, Arial, sans-serif; | |
8 font-size: 10pt; | |
9 margin: 50px 40px 20px 40px; | |
10 } | |
11 | |
12 #main-frame-error { | |
13 margin: auto; | |
14 max-width: 540px; | |
15 min-width: 200px; | |
16 } | |
17 | |
18 /* Don't use the main frame div when the error is in a subframe. */ | 5 /* Don't use the main frame div when the error is in a subframe. */ |
19 html[subframe] #main-frame-error { | 6 html[subframe] #main-frame-error { |
20 display: none; | 7 display: none; |
21 } | 8 } |
22 | 9 |
23 /* Don't use the subframe error div when the error is in a main frame. */ | 10 /* Don't use the subframe error div when the error is in a main frame. */ |
24 html:not([subframe]) #sub-frame-error { | 11 html:not([subframe]) #sub-frame-error { |
25 display: none; | 12 display: none; |
26 } | 13 } |
27 | 14 |
28 #box { | |
29 background-color: #fbfbfb; | |
30 border: 1px solid #AAA; | |
31 border-bottom: 1px solid #888; | |
32 border-radius: 3px; | |
33 color: black; | |
34 <if expr="not is_android and not is_ios"> | |
35 /* Not done on mobile for performance reasons. */ | |
36 box-shadow: 0px 2px 2px #AAA; | |
37 </if> | |
38 } | |
39 | |
40 #diagnose-button { | 15 #diagnose-button { |
41 -webkit-margin-start: 0; | 16 -webkit-margin-start: 0; |
42 margin-bottom: 10px; | 17 margin-bottom: 10px; |
43 margin-top: 20px; | 18 margin-top: 20px; |
44 } | 19 } |
45 | 20 |
46 #content-top #buttons, | 21 h1 { |
47 #content-top h1 { | 22 -webkit-margin-before: 0; |
48 color: #666; | |
49 font-size: 1.5em; | |
50 font-weight: normal; | |
51 text-align: center; | |
52 margin: 10px 0 30px; | |
53 } | 23 } |
54 | 24 |
55 h2 { | 25 h2 { |
56 color: #666; | 26 color: #666; |
57 font-size: 1.2em; | 27 font-size: 1.2em; |
58 font-weight: normal; | 28 font-weight: normal; |
59 margin: 10px 0; | 29 margin: 10px 0; |
60 } | 30 } |
61 | 31 |
62 a { | 32 a { |
63 color: rgb(17, 85, 204); | 33 color: rgb(17, 85, 204); |
64 text-decoration: none; | 34 text-decoration: none; |
65 } | 35 } |
66 | 36 |
67 .icon { | 37 .icon { |
68 -webkit-user-select: none; | 38 -webkit-user-select: none; |
69 } | 39 } |
70 | 40 |
71 .icon-generic { | 41 .icon-generic { |
72 /** | 42 /** |
73 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted | 43 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted |
74 * renderer process, so embed the resource manually. | 44 * renderer process, so embed the resource manually. |
75 */ | 45 */ |
76 content: -webkit-image-set( | 46 content: -webkit-image-set( |
77 url('../../app/theme/default_100_percent/common/error_network_generic.png' ) 1x, | 47 url('default_100_percent/common/error_network_generic.png') 1x, |
78 url('../../app/theme/default_200_percent/common/error_network_generic.png' ) 2x); | 48 url('default_200_percent/common/error_network_generic.png') 2x); |
49 height: 50px; | |
50 width: 41px; | |
arv (Not doing code reviews)
2014/09/15 17:35:43
Keep these in alphabetical order
edwardjung
2014/09/16 13:14:30
Done.
| |
51 padding-top: 20px; | |
79 } | 52 } |
80 | 53 |
81 .icon-offline { | 54 .icon-offline { |
82 content: -webkit-image-set( | 55 content: -webkit-image-set( |
83 url('../../app/theme/default_100_percent/common/error_network_offline.png' ) 1x, | 56 url('default_100_percent/offline/100-error-offline.png') 1x, |
84 url('../../app/theme/default_200_percent/common/error_network_offline.png' ) 2x); | 57 url('default_200_percent/offline/200-error-offline.png') 2x); |
85 } | 58 } |
86 | 59 |
87 #content-top { | 60 #content-top { |
88 margin: 20px; | 61 margin: 20px; |
89 } | 62 } |
90 | 63 |
91 #help-box-outer { | 64 #help-box-outer { |
92 -webkit-transition: height ease-in 218ms; | 65 -webkit-transition: height ease-in 218ms; |
93 overflow: hidden; | 66 overflow: hidden; |
94 } | 67 } |
(...skipping 19 matching lines...) Expand all Loading... | |
114 <if expr="not is_android and not is_ios"> | 87 <if expr="not is_android and not is_ios"> |
115 /* Not done on mobile for performance reasons. */ | 88 /* Not done on mobile for performance reasons. */ |
116 text-shadow: 0 1px 0 rgba(255,255,255,0.3); | 89 text-shadow: 0 1px 0 rgba(255,255,255,0.3); |
117 </if> | 90 </if> |
118 } | 91 } |
119 | 92 |
120 [jscontent=failedUrl] { | 93 [jscontent=failedUrl] { |
121 overflow-wrap: break-word; | 94 overflow-wrap: break-word; |
122 } | 95 } |
123 | 96 |
124 button { | |
125 -webkit-user-select: none; | |
126 border: 1px solid rgba(0, 0, 0, 0.25); | |
127 border-radius: 2px; | |
128 color: #444; | |
129 <if expr="not is_android"> | |
130 /* iOS does not support linear-gradient without a prefix. */ | |
131 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); | |
132 text-shadow: 0 1px 0 rgb(240, 240, 240); | |
133 </if> | |
134 <if expr="is_android"> | |
135 /* Android uses flat background colors. */ | |
136 background-color: #ededed; | |
137 font-weight: bold; | |
138 </if> | |
139 <if expr="not is_android and not is_ios"> | |
140 /* Not done on mobile for performance reasons. */ | |
141 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), | |
142 inset 0 1px 2px rgba(255, 255, 255, 0.75); | |
143 </if> | |
144 } | |
145 | |
146 button:hover { | |
147 border: 1px solid rgba(0, 0, 0, 0.3); | |
148 color: #000; | |
149 <if expr="not is_android"> | |
150 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); | |
151 </if> | |
152 <if expr="is_android"> | |
153 background-color: #f0f0f0; | |
154 </if> | |
155 <if expr="not is_android and not is_ios"> | |
156 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), | |
157 inset 0 1px 2px rgba(255, 255, 255, 0.95); | |
158 </if> | |
159 } | |
160 | |
161 button:active { | |
162 border: 1px solid rgba(0, 0, 0, 0.3); | |
163 color: #444; | |
164 <if expr="not is_android"> | |
165 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); | |
166 </if> | |
167 <if expr="is_android"> | |
168 background-color: #e7e7e7; | |
169 </if> | |
170 <if expr="not is_android and not is_ios"> | |
171 box-shadow: none; | |
172 </if> | |
173 } | |
174 | |
175 .text-button { | |
176 margin: 0 5px; | |
177 min-height: 29px; | |
178 min-width: 65px; | |
179 padding: 7px 13px; | |
180 } | |
181 | |
182 .blue-button { | |
183 color: #fff; | |
184 <if expr="not is_android"> | |
185 background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0); | |
186 border: 1px solid rgba(45, 102, 195, 1); | |
187 text-shadow: 0 1px 0 rgba(0,0,0,0.5); | |
188 </if> | |
189 <if expr="is_android"> | |
190 background-color: rgb(39, 180, 231); | |
191 border: 1px solid rgb(0, 152, 206); | |
192 </if> | |
193 <if expr="not is_android and not is_ios"> | |
194 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), | |
195 inset 0 1px 2px rgba(255, 255, 255, 0.2); | |
196 </if> | |
197 } | |
198 | |
199 .blue-button:hover { | |
200 color: #fff; | |
201 <if expr="not is_android"> | |
202 background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1); | |
203 border: 1px solid rgba(45, 102, 195, 1); | |
204 </if> | |
205 <if expr="not is_android and not is_ios"> | |
206 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), | |
207 inset 0 1px 2px rgba(255, 255, 255, 0.2); | |
208 </if> | |
209 } | |
210 | |
211 .blue-button:active { | |
212 <if expr="not is_android"> | |
213 background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed); | |
214 border: 1px solid rgb(38, 84, 160); | |
215 </if> | |
216 <if expr="is_android"> | |
217 background-color: rgb(0, 152, 206); | |
218 </if> | |
219 <if expr="not is_android and not is_ios"> | |
220 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); | |
221 </if> | |
222 } | |
223 | |
224 #search-container { | 97 #search-container { |
225 /* Prevents a space between controls. */ | 98 /* Prevents a space between controls. */ |
226 display: flex; | 99 display: flex; |
227 margin-top: 20px; | 100 margin-top: 20px; |
228 } | 101 } |
229 | 102 |
230 #search-box { | 103 #search-box { |
231 border: 1px solid #cdcdcd; | 104 border: 1px solid #cdcdcd; |
232 flex-grow: 1; | 105 flex-grow: 1; |
233 font-size: 16px; | 106 font-size: 16px; |
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
359 #details-button { | 232 #details-button { |
360 background-color: inherit; | 233 background-color: inherit; |
361 background-image: none; | 234 background-image: none; |
362 border: none; | 235 border: none; |
363 box-shadow: none; | 236 box-shadow: none; |
364 min-width: 0; | 237 min-width: 0; |
365 padding: 0; | 238 padding: 0; |
366 text-decoration: underline; | 239 text-decoration: underline; |
367 } | 240 } |
368 | 241 |
369 #buttons { | |
370 padding-left: 20px; | |
371 padding-right: 20px; | |
372 } | |
373 | |
374 /* Styles for platform dependent separation of controls and details button. */ | 242 /* Styles for platform dependent separation of controls and details button. */ |
375 .suggested-left > #control-buttons, | 243 .suggested-left > #control-buttons, |
376 .suggested-right > #details-button { | 244 .suggested-right > #details-button { |
377 float: left; | 245 float: left; |
378 } | 246 } |
379 | 247 |
380 .suggested-right > #control-buttons, | 248 .suggested-right > #control-buttons, |
381 .suggested-left > #details-button { | 249 .suggested-left > #details-button { |
382 float: right; | 250 float: right; |
383 } | 251 } |
384 | 252 |
385 #details-button.singular { | 253 #details-button.singular { |
386 float: none; | 254 float: none; |
387 } | 255 } |
388 | 256 |
389 #buttons::after { | 257 #buttons::after { |
390 clear: both; | 258 clear: both; |
391 content: ''; | 259 content: ''; |
392 display: block; | 260 display: block; |
393 width: 100%; | 261 width: 100%; |
394 } | 262 } |
263 | |
264 /* Offline page */ | |
265 .offline .icon { | |
266 height: 47px; | |
267 margin: 0 0 40px; | |
268 position: relative; | |
269 width: 44px; | |
270 } | |
271 | |
272 .offline .interstitial-wrapper { | |
273 color: #2b2b2b; | |
274 font-size: 1em; | |
275 line-height: 1.55; | |
276 margin: 100px auto 0; | |
277 max-width: 600px; | |
278 width: 100%; | |
279 } | |
280 | |
281 .offline .runner-container { | |
282 height: 150px; | |
283 max-width: 600px; | |
284 overflow: hidden; | |
285 position: absolute; | |
286 top: 10px; | |
287 width: 44px; | |
288 z-index: 2; | |
289 } | |
290 | |
291 .offline .runner-canvas { | |
292 height: 150px; | |
293 max-width: 600px; | |
294 opacity: 1; | |
295 overflow: hidden; | |
296 position: absolute; | |
297 top: 0; | |
298 } | |
299 | |
300 .offline .controller { | |
301 background: rgba(247,247,247, .1); | |
302 height: 100vh; | |
303 left: 0; | |
304 position: absolute; | |
305 top: 0; | |
306 width: 100vw; | |
307 z-index: 1; | |
308 } | |
309 | |
310 #offline-resources { | |
311 display: none; | |
312 } | |
313 | |
OLD | NEW |