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 5body { 6 background-color: #E6E6E6; 7 font-family: Helvetica, Arial, sans-serif; 8 font-size: 10pt; 9 margin: 50px 40px 20px 40px; 10 text-align: center; 11} 12 13#main-frame-error { 14 margin: auto; 15 max-width: 540px; 16 min-width: 200px; 17} 18 19/* Don't use the main frame div when the error is in a subframe. */ 20html[subframe] #main-frame-error { 21 display: none; 22} 23 24/* Don't use the subframe error div when the error is in a main frame. */ 25html:not([subframe]) #sub-frame-error { 26 display: none; 27} 28 29#box { 30 background-color: #fbfbfb; 31 border: 1px solid #AAA; 32 border-bottom: 1px solid #888; 33 border-radius: 3px; 34 box-shadow: 0 2px 2px #AAA; 35 color: black; 36} 37 38#diagnose-button { 39 -webkit-margin-start: 0; 40 margin-bottom: 10px; 41 margin-top: 20px; 42} 43 44h1 { 45 color: #666; 46 font-size: 1.5em; 47 font-weight: normal; 48 margin: 10px 0 25px 0; 49} 50 51a { 52 color: rgb(17, 85, 204); 53 text-decoration: none; 54} 55 56.icon { 57 -webkit-user-select: none; 58} 59 60.icon-generic { 61 /** 62 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted 63 * renderer process, so embed the resource manually. 64 */ 65 content: -webkit-image-set( 66 url('../../../app/theme/default_100_percent/common/error_network_generic.png') 1x, 67 url('../../../app/theme/default_200_percent/common/error_network_generic.png') 2x); 68} 69 70.icon-offline { 71 content: -webkit-image-set( 72 url('../../../app/theme/default_100_percent/common/error_network_offline.png') 1x, 73 url('../../../app/theme/default_200_percent/common/error_network_offline.png') 2x); 74} 75 76#content-top { 77 margin: 20px 20px 20px 25px; 78} 79 80#help-box-outer { 81 -webkit-transition: height ease-in 218ms; 82 overflow: hidden; 83} 84 85#help-box-inner { 86 background-color: #f9f9f9; 87 border-top: 1px solid #EEE; 88 color: #444; 89 padding: 25px 20px; 90 text-align: start; 91} 92 93#suggestions { 94 margin-top: 15px; 95} 96 97#sub-frame-error-details { 98 color: #8F8F8F; 99 text-shadow: 0 1px 0 rgba(255,255,255,0.3); 100} 101 102[jscontent=failedUrl] { 103 overflow-wrap: break-word; 104} 105 106button { 107 -webkit-user-select: none; 108 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 109 border: 1px solid rgba(0, 0, 0, 0.25); 110 border-radius: 2px; 111 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 112 inset 0 1px 2px rgba(255, 255, 255, 0.75); 113 color: #444; 114 margin: 0 5px; 115 min-height: 29px; 116 min-width: 65px; 117 padding: 8px 13px; 118 text-shadow: 0 1px 0 rgb(240, 240, 240); 119} 120 121button:hover { 122 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 123 border: 1px solid rgba(0, 0, 0, 0.3); 124 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 125 inset 0 1px 2px rgba(255, 255, 255, 0.95); 126 color: #000; 127} 128 129button:active { 130 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 131 border: 1px solid rgba(0, 0, 0, 0.3); 132 box-shadow: none; 133 color: #444; 134} 135 136#reload-button { 137 background-image: -webkit-linear-gradient(rgb(93, 154, 255), 138 rgb(93, 154, 255), 139 rgb(88, 145, 240)); 140 border: 1px solid rgba(45, 102, 195, 1); 141 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), 142 inset 0 1px 2px rgba(255, 255, 255, 0.2); 143 color: #fff; 144 text-shadow: 0 1px 0 rgba(0,0,0,0.5); 145} 146 147#reload-button:hover { 148 background-image: -webkit-linear-gradient(rgb(101, 158, 253), 149 rgb(101, 158, 253), 150 rgb(96, 151, 241)); 151 border: 1px solid rgba(45, 102, 195, 1); 152 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 153 inset 0 1px 2px rgba(255, 255, 255, 0.2); 154} 155 156#reload-button:active { 157 background-image: -webkit-linear-gradient(rgb(96, 149, 237), 158 rgb(96, 149, 237), 159 rgb(96, 149, 237)); 160 border: 1px solid rgb(38, 84, 160); 161 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); 162} 163 164.hidden { 165 display: none; 166} 167 168.suggestions { 169 margin-top: 18px; 170} 171 172.suggestion-header { 173 font-weight: bold; 174 margin-bottom: 4px; 175} 176 177.suggestion-body { 178 color: #777; 179} 180 181.error-code { 182 color: #A0A0A0; 183 margin-top: 15px; 184} 185 186/* Increase line height at higher resolutions. */ 187@media (min-width: 641px) and (min-height: 641px) { 188 #help-box-inner { 189 line-height: 18px; 190 } 191} 192 193/* Decrease padding at low sizes. */ 194@media (max-width: 640px), 195 (max-height: 640px) { 196 body { 197 margin: 15px; 198 } 199 h1 { 200 margin: 10px 0 15px 0; 201 } 202 #content-top { 203 margin: 15px; 204 } 205 #help-box-inner { 206 padding: 20px; 207 } 208 .suggestions { 209 margin-top: 10px; 210 } 211 .suggestion-header { 212 margin-bottom: 0; 213 } 214 .error-code { 215 margin-top: 10px; 216 } 217} 218 219/* Don't allow overflow when in a subframe. */ 220html[subframe] body { 221 overflow: hidden; 222} 223 224#sub-frame-error { 225 -webkit-align-items: center; 226 -webkit-flex-flow: column; 227 -webkit-justify-content: center; 228 background-color: #DDD; 229 display: -webkit-flex; 230 height: 100%; 231 left: 0; 232 position: absolute; 233 top: 0; 234 width: 100%; 235} 236 237#sub-frame-error:hover { 238 background-color: #EEE; 239} 240 241#sub-frame-error-details { 242 margin: 0 10px; 243 visibility: hidden; 244} 245 246/* Show details only when hovering. */ 247#sub-frame-error:hover #sub-frame-error-details { 248 visibility: visible; 249} 250 251/* If the iframe is too small, always hide the error code. */ 252/* TODO(mmenke): See if overflow: no-display works better, once supported. */ 253@media (max-width: 200px), 254 (max-height: 95px) { 255 #sub-frame-error-details { 256 display: none; 257 } 258} 259
