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 body { 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. */ 20 html[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. */ 25 html: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 44 h1 { 45 color: #666; 46 font-size: 1.5em; 47 font-weight: normal; 48 margin: 10px 0 25px 0; 49 } 50 51 a { 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 106 button { 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 121 button: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 129 button: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. */ 220 html[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
