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 312 @media (max-width: 400px) { 313 .suggested-left > #control-buttons, 314 .suggested-right > #control-buttons { 315 float: none; 316 margin: 50px 0 20px; 317 } 318 } 319 320 @media (max-height: 350px) { 321 h1 { 322 margin: 0 0 15px; 323 } 324 325 .icon-offline { 326 margin: 0 0 10px; 327 } 328 329 .interstitial-wrapper { 330 margin-top: 5%; 331 } 332 333 .nav-wrapper { 334 margin-top: 30px; 335 } 336 } 337