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; |
| 17 float: none; |
42 margin-bottom: 10px; | 18 margin-bottom: 10px; |
43 margin-top: 20px; | 19 margin-top: 20px; |
44 } | 20 } |
45 | 21 |
46 #content-top #buttons, | 22 h1 { |
47 #content-top h1 { | 23 -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 } | 24 } |
54 | 25 |
55 h2 { | 26 h2 { |
56 color: #666; | 27 color: #666; |
57 font-size: 1.2em; | 28 font-size: 1.2em; |
58 font-weight: normal; | 29 font-weight: normal; |
59 margin: 10px 0; | 30 margin: 10px 0; |
60 } | 31 } |
61 | 32 |
62 a { | 33 a { |
63 color: rgb(17, 85, 204); | 34 color: rgb(17, 85, 204); |
64 text-decoration: none; | 35 text-decoration: none; |
65 } | 36 } |
66 | 37 |
67 .icon { | 38 .icon { |
68 -webkit-user-select: none; | 39 -webkit-user-select: none; |
69 } | 40 } |
70 | 41 |
71 .icon-generic { | 42 .icon-generic { |
72 /** | 43 /** |
73 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted | 44 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted |
74 * renderer process, so embed the resource manually. | 45 * renderer process, so embed the resource manually. |
75 */ | 46 */ |
76 content: -webkit-image-set( | 47 content: -webkit-image-set( |
77 url('../../app/theme/default_100_percent/common/error_network_generic.png'
) 1x, | 48 url('default_100_percent/common/error_network_generic.png') 1x, |
78 url('../../app/theme/default_200_percent/common/error_network_generic.png'
) 2x); | 49 url('default_200_percent/common/error_network_generic.png') 2x); |
| 50 height: 50px; |
| 51 padding-top: 20px; |
| 52 width: 41px; |
79 } | 53 } |
80 | 54 |
81 .icon-offline { | 55 .icon-offline { |
82 content: -webkit-image-set( | 56 content: -webkit-image-set( |
83 url('../../app/theme/default_100_percent/common/error_network_offline.png'
) 1x, | 57 url('default_100_percent/offline/100-error-offline.png') 1x, |
84 url('../../app/theme/default_200_percent/common/error_network_offline.png'
) 2x); | 58 url('default_200_percent/offline/200-error-offline.png') 2x); |
85 } | 59 } |
86 | 60 |
87 #content-top { | 61 #content-top { |
88 margin: 20px; | 62 margin: 20px; |
89 } | 63 } |
90 | 64 |
91 #help-box-outer { | 65 #help-box-outer { |
92 -webkit-transition: height ease-in 218ms; | 66 -webkit-transition: height ease-in 218ms; |
93 overflow: hidden; | 67 overflow: hidden; |
94 } | 68 } |
(...skipping 19 matching lines...) Expand all Loading... |
114 <if expr="not is_android and not is_ios"> | 88 <if expr="not is_android and not is_ios"> |
115 /* Not done on mobile for performance reasons. */ | 89 /* Not done on mobile for performance reasons. */ |
116 text-shadow: 0 1px 0 rgba(255,255,255,0.3); | 90 text-shadow: 0 1px 0 rgba(255,255,255,0.3); |
117 </if> | 91 </if> |
118 } | 92 } |
119 | 93 |
120 [jscontent=failedUrl] { | 94 [jscontent=failedUrl] { |
121 overflow-wrap: break-word; | 95 overflow-wrap: break-word; |
122 } | 96 } |
123 | 97 |
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 { | 98 #search-container { |
225 /* Prevents a space between controls. */ | 99 /* Prevents a space between controls. */ |
226 display: flex; | 100 display: flex; |
227 margin-top: 20px; | 101 margin-top: 20px; |
228 } | 102 } |
229 | 103 |
230 #search-box { | 104 #search-box { |
231 border: 1px solid #cdcdcd; | 105 border: 1px solid #cdcdcd; |
232 flex-grow: 1; | 106 flex-grow: 1; |
233 font-size: 16px; | 107 font-size: 16px; |
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
359 #details-button { | 233 #details-button { |
360 background-color: inherit; | 234 background-color: inherit; |
361 background-image: none; | 235 background-image: none; |
362 border: none; | 236 border: none; |
363 box-shadow: none; | 237 box-shadow: none; |
364 min-width: 0; | 238 min-width: 0; |
365 padding: 0; | 239 padding: 0; |
366 text-decoration: underline; | 240 text-decoration: underline; |
367 } | 241 } |
368 | 242 |
369 #buttons { | |
370 padding-left: 20px; | |
371 padding-right: 20px; | |
372 } | |
373 | |
374 /* Styles for platform dependent separation of controls and details button. */ | 243 /* Styles for platform dependent separation of controls and details button. */ |
375 .suggested-left > #control-buttons, | 244 .suggested-left > #control-buttons, |
376 .suggested-right > #details-button { | 245 .suggested-right > #details-button { |
377 float: left; | 246 float: left; |
378 } | 247 } |
379 | 248 |
380 .suggested-right > #control-buttons, | 249 .suggested-right > #control-buttons, |
381 .suggested-left > #details-button { | 250 .suggested-left > #details-button { |
382 float: right; | 251 float: right; |
383 } | 252 } |
384 | 253 |
385 #details-button.singular { | 254 #details-button.singular { |
386 float: none; | 255 float: none; |
387 } | 256 } |
388 | 257 |
389 #buttons::after { | 258 #buttons::after { |
390 clear: both; | 259 clear: both; |
391 content: ''; | 260 content: ''; |
392 display: block; | 261 display: block; |
393 width: 100%; | 262 width: 100%; |
394 } | 263 } |
| 264 |
| 265 /* Offline page */ |
| 266 .offline .icon { |
| 267 height: 47px; |
| 268 margin: 0 0 40px; |
| 269 position: relative; |
| 270 width: 44px; |
| 271 } |
| 272 |
| 273 .offline .interstitial-wrapper { |
| 274 color: #2b2b2b; |
| 275 font-size: 1em; |
| 276 line-height: 1.55; |
| 277 margin: 100px auto 0; |
| 278 max-width: 600px; |
| 279 width: 100%; |
| 280 } |
| 281 |
| 282 .offline .runner-container { |
| 283 height: 150px; |
| 284 max-width: 600px; |
| 285 overflow: hidden; |
| 286 position: absolute; |
| 287 top: 10px; |
| 288 width: 44px; |
| 289 z-index: 2; |
| 290 } |
| 291 |
| 292 .offline .runner-canvas { |
| 293 height: 150px; |
| 294 max-width: 600px; |
| 295 opacity: 1; |
| 296 overflow: hidden; |
| 297 position: absolute; |
| 298 top: 0; |
| 299 } |
| 300 |
| 301 .offline .controller { |
| 302 background: rgba(247,247,247, .1); |
| 303 height: 100vh; |
| 304 left: 0; |
| 305 position: absolute; |
| 306 top: 0; |
| 307 width: 100vw; |
| 308 z-index: 1; |
| 309 } |
| 310 |
| 311 #offline-resources { |
| 312 display: none; |
| 313 } |
| 314 |
OLD | NEW |