src/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 }
  41
  42 .icon-generic {
  43   /**
  44    * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
  45    * renderer process, so embed the resource manually.
  46    */
  47   content: -webkit-image-set(
  48       url('default_100_percent/common/error_network_generic.png') 1x,
  49       url('default_200_percent/common/error_network_generic.png') 2x);
  50   height: 50px;
  51   padding-top: 20px;
  52   width: 41px;
  53 }
  54
  55 .icon-offline {
  56   content: -webkit-image-set(
  57       url('default_100_percent/offline/100-error-offline.png') 1x,
  58       url('default_200_percent/offline/200-error-offline.png') 2x);
  59   height: 47px;
  60   margin: 0 0 40px;
  61   position: relative;
  62   width: 44px;
  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 .hidden {
 138   display: none;
 139 }
 140
 141 .suggestions {
 142   margin-top: 18px;
 143 }
 144
 145 .suggestion-header {
 146   font-weight: bold;
 147   margin-bottom: 4px;
 148 }
 149
 150 .suggestion-body {
 151   color: #777;
 152 }
 153
 154 .error-code {
 155   color: #A0A0A0;
 156   margin-top: 15px;
 157 }
 158
 159 /* Increase line height at higher resolutions. */
 160 @media (min-width: 641px) and (min-height: 641px) {
 161   #help-box-inner {
 162     line-height: 18px;
 163   }
 164 }
 165
 166 /* Decrease padding at low sizes. */
 167 @media (max-width: 640px), (max-height: 640px) {
 168   body {
 169     margin: 15px;
 170   }
 171   h1 {
 172     margin: 10px 0 15px;
 173   }
 174   #content-top {
 175     margin: 15px;
 176   }
 177   #help-box-inner {
 178     padding: 20px;
 179   }
 180   .suggestions {
 181     margin-top: 10px;
 182   }
 183   .suggestion-header {
 184     margin-bottom: 0;
 185   }
 186   .error-code {
 187     margin-top: 10px;
 188   }
 189 }
 190
 191 /* Don't allow overflow when in a subframe. */
 192 html[subframe] body {
 193   overflow: hidden;
 194 }
 195
 196 #sub-frame-error {
 197   -webkit-align-items: center;
 198   background-color: #DDD;
 199   display: -webkit-flex;
 200   -webkit-flex-flow: column;
 201   height: 100%;
 202   -webkit-justify-content: center;
 203   left: 0;
 204   position: absolute;
 205   top: 0;
 206   transition: background-color .2s ease-in-out;
 207   width: 100%;
 208 }
 209
 210 #sub-frame-error:hover {
 211   background-color: #EEE;
 212 }
 213
 214 #sub-frame-error .icon-generic {
 215   margin: 0 0 16px;
 216 }
 217
 218 #sub-frame-error-details {
 219   margin: 0 10px;
 220   text-align: center;
 221   visibility: hidden;
 222 }
 223
 224 /* Show details only when hovering. */
 225 #sub-frame-error:hover #sub-frame-error-details {
 226   visibility: visible;
 227 }
 228
 229 /* If the iframe is too small, always hide the error code. */
 230 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
 231 @media (max-width: 200px), (max-height: 95px) {
 232   #sub-frame-error-details {
 233     display: none;
 234   }
 235 }
 236
 237 /* Adjust icon for small embedded frames in apps. */
 238 @media (max-height: 100px) {
 239   #sub-frame-error .icon-generic {
 240     height: auto;
 241     margin: 0;
 242     padding-top: 0;
 243     width: 25px;
 244   }
 245 }
 246
 247 /* details-button is special; it's a <button> element that looks like a link. */
 248 #details-button {
 249   background-color: inherit;
 250   background-image: none;
 251   border: none;
 252   box-shadow: none;
 253   min-width: 0;
 254   padding: 0;
 255   text-decoration: underline;
 256 }
 257
 258 /* Styles for platform dependent separation of controls and details button. */
 259 .suggested-left > #control-buttons,
 260 .suggested-right > #details-button  {
 261   float: left;
 262 }
 263
 264 .suggested-right > #control-buttons,
 265 .suggested-left > #details-button  {
 266   float: right;
 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: 100px auto 0;
 286   max-width: 600px;
 287   width: 100%;
 288 }
 289
 290 .offline .runner-container {
 291   height: 150px;
 292   max-width: 600px;
 293   overflow: hidden;
 294   position: absolute;
 295   top: 10px;
 296   width: 44px;
 297   z-index: 2;
 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 }
 308
 309 .offline .controller {
 310   background: rgba(247,247,247, .1);
 311   height: 100vh;
 312   left: 0;
 313   position: absolute;
 314   top: 0;
 315   width: 100vw;
 316   z-index: 1;
 317 }
 318
 319 #offline-resources {
 320   display: none;
 321 }
 322
 323 @media (max-width: 400px) {
 324   .suggested-left > #control-buttons,
 325   .suggested-right > #control-buttons {
 326     float: none;
 327     margin: 50px 0 20px;
 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 }