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