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