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