chrome/renderer/resources/neterror.css

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