| OLD | NEW |
|---|
| (Empty) |
| 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 /* Don't use the main frame div when the error is in a subframe. */ | |
| 6 html[subframe] #main-frame-error { | |
| 7 display: none; | |
| 8 } | |
| 9 | |
| 10 /* Don't use the subframe error div when the error is in a main frame. */ | |
| 11 html:not([subframe]) #sub-frame-error { | |
| 12 display: none; | |
| 13 } | |
| 14 | |
| 15 #diagnose-button { | |
| 16 -webkit-margin-start: 0; | |
| 17 float: none; | |
| 18 margin-bottom: 10px; | |
| 19 margin-top: 20px; | |
| 20 } | |
| 21 | |
| 22 h1 { | |
| 23 margin-top: 0; | |
| 24 word-wrap: break-word; | |
| 25 } | |
| 26 | |
| 27 h1 span { | |
| 28 font-weight: 500; | |
| 29 } | |
| 30 | |
| 31 h2 { | |
| 32 color: #666; | |
| 33 font-size: 1.2em; | |
| 34 font-weight: normal; | |
| 35 margin: 10px 0; | |
| 36 } | |
| 37 | |
| 38 a { | |
| 39 color: rgb(17, 85, 204); | |
| 40 text-decoration: none; | |
| 41 } | |
| 42 | |
| 43 .icon { | |
| 44 -webkit-user-select: none; | |
| 45 display: inline-block; | |
| 46 } | |
| 47 | |
| 48 .icon-generic { | |
| 49 /** | |
| 50 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted | |
| 51 * renderer process, so embed the resource manually. | |
| 52 */ | |
| 53 content: -webkit-image-set( | |
| 54 url(default_100_percent/common/error_network_generic.png) 1x, | |
| 55 url(default_200_percent/common/error_network_generic.png) 2x); | |
| 56 } | |
| 57 | |
| 58 .icon-offline { | |
| 59 content: -webkit-image-set( | |
| 60 url(default_100_percent/offline/100-error-offline.png) 1x, | |
| 61 url(default_200_percent/offline/200-error-offline.png) 2x); | |
| 62 position: relative; | |
| 63 } | |
| 64 | |
| 65 .icon-disabled { | |
| 66 content: -webkit-image-set( | |
| 67 url(default_100_percent/offline/100-disabled.png) 1x, | |
| 68 url(default_200_percent/offline/200-disabled.png) 2x); | |
| 69 width: 112px; | |
| 70 } | |
| 71 | |
| 72 .error-code { | |
| 73 display: block; | |
| 74 font-size: .8em; | |
| 75 } | |
| 76 | |
| 77 #content-top { | |
| 78 margin: 20px; | |
| 79 } | |
| 80 | |
| 81 #help-box-inner { | |
| 82 background-color: #f9f9f9; | |
| 83 border-top: 1px solid #EEE; | |
| 84 color: #444; | |
| 85 padding: 20px; | |
| 86 text-align: start; | |
| 87 } | |
| 88 | |
| 89 .hidden { | |
| 90 display: none; | |
| 91 } | |
| 92 | |
| 93 #suggestion { | |
| 94 margin-top: 15px; | |
| 95 } | |
| 96 | |
| 97 #short-suggestion { | |
| 98 margin-top: 5px; | |
| 99 } | |
| 100 | |
| 101 #sub-frame-error-details { | |
| 102 color: #8F8F8F; | |
| 103 <if expr="not is_android and not is_ios"> | |
| 104 /* Not done on mobile for performance reasons. */ | |
| 105 text-shadow: 0 1px 0 rgba(255,255,255,0.3); | |
| 106 </if> | |
| 107 } | |
| 108 | |
| 109 [jscontent=failedUrl] { | |
| 110 overflow-wrap: break-word; | |
| 111 } | |
| 112 | |
| 113 #search-container { | |
| 114 /* Prevents a space between controls. */ | |
| 115 display: flex; | |
| 116 margin-top: 20px; | |
| 117 } | |
| 118 | |
| 119 #search-box { | |
| 120 border: 1px solid #cdcdcd; | |
| 121 flex-grow: 1; | |
| 122 font-size: 1em; | |
| 123 height: 26px; | |
| 124 margin-right: 0; | |
| 125 padding: 1px 9px; | |
| 126 } | |
| 127 | |
| 128 #search-box:focus { | |
| 129 border: 1px solid rgb(93, 154, 255); | |
| 130 outline: none; | |
| 131 } | |
| 132 | |
| 133 #search-button { | |
| 134 border: none; | |
| 135 border-bottom-left-radius: 0; | |
| 136 border-top-left-radius: 0; | |
| 137 box-shadow: none; | |
| 138 display: flex; | |
| 139 height: 30px; | |
| 140 margin: 0; | |
| 141 padding: 0; | |
| 142 width: 60px; | |
| 143 } | |
| 144 | |
| 145 #search-image { | |
| 146 content: | |
| 147 -webkit-image-set( | |
| 148 url(../../app/theme/default_100_percent/common/omnibox_search_button_l
oupe.png) 1x, | |
| 149 url(../../app/theme/default_200_percent/common/omnibox_search_button_l
oupe.png) 2x); | |
| 150 margin: auto; | |
| 151 } | |
| 152 | |
| 153 .secondary-button { | |
| 154 -webkit-margin-end: 16px; | |
| 155 background: #d9d9d9; | |
| 156 color: #696969; | |
| 157 } | |
| 158 | |
| 159 .snackbar { | |
| 160 background: #323232; | |
| 161 border-radius: 2px; | |
| 162 bottom: 24px; | |
| 163 box-sizing: border-box; | |
| 164 color: #fff; | |
| 165 font-size: .87em; | |
| 166 left: 24px; | |
| 167 max-width: 568px; | |
| 168 min-width: 288px; | |
| 169 opacity: 0; | |
| 170 padding: 16px 24px 12px; | |
| 171 position: fixed; | |
| 172 transform: translateY(90px); | |
| 173 will-change: opacity, transform; | |
| 174 z-index: 999; | |
| 175 } | |
| 176 | |
| 177 .snackbar-show { | |
| 178 -webkit-animation: | |
| 179 show-snackbar .25s cubic-bezier(0.0, 0.0, 0.2, 1) forwards, | |
| 180 hide-snackbar .25s cubic-bezier(0.4, 0.0, 1, 1) forwards 5s; | |
| 181 } | |
| 182 | |
| 183 @-webkit-keyframes show-snackbar { | |
| 184 100% { | |
| 185 opacity: 1; | |
| 186 transform: translateY(0); | |
| 187 } | |
| 188 } | |
| 189 | |
| 190 @-webkit-keyframes hide-snackbar { | |
| 191 0% { | |
| 192 opacity: 1; | |
| 193 transform: translateY(0); | |
| 194 } | |
| 195 100% { | |
| 196 opacity: 0; | |
| 197 transform: translateY(90px); | |
| 198 } | |
| 199 } | |
| 200 | |
| 201 .suggestions { | |
| 202 margin-top: 18px; | |
| 203 } | |
| 204 | |
| 205 .suggestion-header { | |
| 206 font-weight: bold; | |
| 207 margin-bottom: 4px; | |
| 208 } | |
| 209 | |
| 210 .suggestion-body { | |
| 211 color: #777; | |
| 212 } | |
| 213 | |
| 214 /* Increase line height at higher resolutions. */ | |
| 215 @media (min-width: 641px) and (min-height: 641px) { | |
| 216 #help-box-inner { | |
| 217 line-height: 18px; | |
| 218 } | |
| 219 } | |
| 220 | |
| 221 /* Decrease padding at low sizes. */ | |
| 222 @media (max-width: 640px), (max-height: 640px) { | |
| 223 h1 { | |
| 224 margin: 0 0 15px; | |
| 225 } | |
| 226 #content-top { | |
| 227 margin: 15px; | |
| 228 } | |
| 229 #help-box-inner { | |
| 230 padding: 20px; | |
| 231 } | |
| 232 .suggestions { | |
| 233 margin-top: 10px; | |
| 234 } | |
| 235 .suggestion-header { | |
| 236 margin-bottom: 0; | |
| 237 } | |
| 238 } | |
| 239 | |
| 240 /* Don't allow overflow when in a subframe. */ | |
| 241 html[subframe] body { | |
| 242 overflow: hidden; | |
| 243 } | |
| 244 | |
| 245 #sub-frame-error { | |
| 246 -webkit-align-items: center; | |
| 247 background-color: #DDD; | |
| 248 display: -webkit-flex; | |
| 249 -webkit-flex-flow: column; | |
| 250 height: 100%; | |
| 251 -webkit-justify-content: center; | |
| 252 left: 0; | |
| 253 position: absolute; | |
| 254 top: 0; | |
| 255 transition: background-color .2s ease-in-out; | |
| 256 width: 100%; | |
| 257 } | |
| 258 | |
| 259 #sub-frame-error:hover { | |
| 260 background-color: #EEE; | |
| 261 } | |
| 262 | |
| 263 #sub-frame-error .icon-generic { | |
| 264 margin: 0 0 16px; | |
| 265 } | |
| 266 | |
| 267 #sub-frame-error-details { | |
| 268 margin: 0 10px; | |
| 269 text-align: center; | |
| 270 visibility: hidden; | |
| 271 } | |
| 272 | |
| 273 /* Show details only when hovering. */ | |
| 274 #sub-frame-error:hover #sub-frame-error-details { | |
| 275 visibility: visible; | |
| 276 } | |
| 277 | |
| 278 /* If the iframe is too small, always hide the error code. */ | |
| 279 /* TODO(mmenke): See if overflow: no-display works better, once supported. */ | |
| 280 @media (max-width: 200px), (max-height: 95px) { | |
| 281 #sub-frame-error-details { | |
| 282 display: none; | |
| 283 } | |
| 284 } | |
| 285 | |
| 286 /* Adjust icon for small embedded frames in apps. */ | |
| 287 @media (max-height: 100px) { | |
| 288 #sub-frame-error .icon-generic { | |
| 289 height: auto; | |
| 290 margin: 0; | |
| 291 padding-top: 0; | |
| 292 width: 25px; | |
| 293 } | |
| 294 } | |
| 295 | |
| 296 /* details-button is special; it's a <button> element that looks like a link. */ | |
| 297 #details-button { | |
| 298 box-shadow: none; | |
| 299 min-width: 0; | |
| 300 } | |
| 301 | |
| 302 /* Styles for platform dependent separation of controls and details button. */ | |
| 303 .suggested-left > #control-buttons, | |
| 304 .suggested-left #stale-load-button, | |
| 305 .suggested-right > #details-button { | |
| 306 float: left; | |
| 307 } | |
| 308 | |
| 309 .suggested-right > #control-buttons, | |
| 310 .suggested-right #stale-load-button, | |
| 311 .suggested-left > #details-button { | |
| 312 float: right; | |
| 313 } | |
| 314 | |
| 315 .suggested-left .secondary-button { | |
| 316 -webkit-margin-end: 0px; | |
| 317 -webkit-margin-start: 16px; | |
| 318 } | |
| 319 | |
| 320 #details-button.singular { | |
| 321 float: none; | |
| 322 } | |
| 323 | |
| 324 #buttons::after { | |
| 325 clear: both; | |
| 326 content: ''; | |
| 327 display: block; | |
| 328 width: 100%; | |
| 329 } | |
| 330 | |
| 331 /* Offline page */ | |
| 332 .offline { | |
| 333 transition: -webkit-filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1), | |
| 334 background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1); | |
| 335 will-change: -webkit-filter, background-color; | |
| 336 } | |
| 337 | |
| 338 .offline.inverted { | |
| 339 -webkit-filter: invert(100%); | |
| 340 background-color: #000; | |
| 341 } | |
| 342 | |
| 343 .offline .interstitial-wrapper { | |
| 344 color: #2b2b2b; | |
| 345 font-size: 1em; | |
| 346 line-height: 1.55; | |
| 347 margin: 0 auto; | |
| 348 max-width: 600px; | |
| 349 padding-top: 100px; | |
| 350 width: 100%; | |
| 351 } | |
| 352 | |
| 353 .offline .runner-container { | |
| 354 height: 150px; | |
| 355 max-width: 600px; | |
| 356 overflow: hidden; | |
| 357 position: absolute; | |
| 358 top: 35px; | |
| 359 width: 44px; | |
| 360 } | |
| 361 | |
| 362 .offline .runner-canvas { | |
| 363 height: 150px; | |
| 364 max-width: 600px; | |
| 365 opacity: 1; | |
| 366 overflow: hidden; | |
| 367 position: absolute; | |
| 368 top: 0; | |
| 369 z-index: 2; | |
| 370 } | |
| 371 | |
| 372 .offline .controller { | |
| 373 background: rgba(247,247,247, .1); | |
| 374 height: 100vh; | |
| 375 left: 0; | |
| 376 position: absolute; | |
| 377 top: 0; | |
| 378 width: 100vw; | |
| 379 z-index: 1; | |
| 380 } | |
| 381 | |
| 382 #offline-resources { | |
| 383 display: none; | |
| 384 } | |
| 385 | |
| 386 @media (max-width: 420px) { | |
| 387 .suggested-left > #control-buttons, | |
| 388 .suggested-right > #control-buttons { | |
| 389 float: none; | |
| 390 } | |
| 391 | |
| 392 .snackbar { | |
| 393 left: 0; | |
| 394 bottom: 0; | |
| 395 width: 100%; | |
| 396 border-radius: 0; | |
| 397 } | |
| 398 } | |
| 399 | |
| 400 @media (max-height: 350px) { | |
| 401 h1 { | |
| 402 margin: 0 0 15px; | |
| 403 } | |
| 404 | |
| 405 .icon-offline { | |
| 406 margin: 0 0 10px; | |
| 407 } | |
| 408 | |
| 409 .interstitial-wrapper { | |
| 410 margin-top: 5%; | |
| 411 } | |
| 412 | |
| 413 .nav-wrapper { | |
| 414 margin-top: 30px; | |
| 415 } | |
| 416 } | |
| 417 | |
| 418 @media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) { | |
| 419 .offline .interstitial-wrapper { | |
| 420 margin-left: 0; | |
| 421 margin-right: 0; | |
| 422 } | |
| 423 } | |
| 424 | |
| 425 @media (min-width: 420px) and (max-width: 736px) and | |
| 426 (min-height: 240px) and (max-height: 420px) and | |
| 427 (orientation:landscape) { | |
| 428 .interstitial-wrapper { | |
| 429 margin-bottom: 100px; | |
| 430 } | |
| 431 } | |
| 432 | |
| 433 @media (min-height: 240px) and (orientation: landscape) { | |
| 434 .offline .interstitial-wrapper { | |
| 435 margin-bottom: 90px; | |
| 436 } | |
| 437 | |
| 438 .icon-offline { | |
| 439 margin-bottom: 20px; | |
| 440 } | |
| 441 } | |
| 442 | |
| 443 @media (max-height: 320px) and (orientation: landscape) { | |
| 444 .icon-offline { | |
| 445 margin-bottom: 0; | |
| 446 } | |
| 447 | |
| 448 .offline .runner-container { | |
| 449 top: 10px; | |
| 450 } | |
| 451 } | |
| 452 | |
| 453 @media (max-width: 240px) { | |
| 454 button { | |
| 455 padding-left: 12px; | |
| 456 padding-right: 12px; | |
| 457 } | |
| 458 | |
| 459 .interstitial-wrapper { | |
| 460 overflow: inherit; | |
| 461 padding: 0 8px; | |
| 462 } | |
| 463 } | |
| 464 | |
| 465 @media (max-width: 120px) { | |
| 466 button { | |
| 467 width: auto; | |
| 468 } | |
| 469 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1639953002:
Network error interstitial update - add suggestions list (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master