Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(279)

Side by Side Diff: chrome/browser/resources/ssl/neterror.css

Issue 422933002: Shift the error page "More" button over to text. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Most recent set of comments. Created 6 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 /* Copyright 2013 The Chromium Authors. All rights reserved. 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 2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */ 3 * found in the LICENSE file. */
4 4
5 /******************************************************************************* 5 /*******************************************************************************
6 * 6 *
7 * Note: This is also used by a file in chrome/browser/resources/ssl. When 7 * Note: This is also used by a file in chrome/browser/resources/ssl. When
Bernhard Bauer 2014/08/04 11:49:18 This comment makes less sense in a file that is in
Randy Smith (Not in Mondays) 2014/08/04 12:21:26 And is no longer accurate, even in c/r/r. Removed
8 * updating this file, make sure nothing in that directory regresses. 8 * updating this file, make sure nothing in that directory regresses.
9 * 9 *
10 ******************************************************************************/ 10 ******************************************************************************/
11 11
12 body { 12 body {
13 background-color: #E6E6E6; 13 background-color: #E6E6E6;
14 font-family: Helvetica, Arial, sans-serif; 14 font-family: Helvetica, Arial, sans-serif;
15 font-size: 10pt; 15 font-size: 10pt;
16 margin: 50px 40px 20px 40px; 16 margin: 50px 40px 20px 40px;
17 } 17 }
(...skipping 20 matching lines...) Expand all
38 border-bottom: 1px solid #888; 38 border-bottom: 1px solid #888;
39 border-radius: 3px; 39 border-radius: 3px;
40 color: black; 40 color: black;
41 <if expr="not is_android and not is_ios"> 41 <if expr="not is_android and not is_ios">
42 /* Not done on mobile for performance reasons. */ 42 /* Not done on mobile for performance reasons. */
43 box-shadow: 0px 2px 2px #AAA; 43 box-shadow: 0px 2px 2px #AAA;
44 </if> 44 </if>
45 } 45 }
46 46
47 #diagnose-button { 47 #diagnose-button {
48 -webkit-margin-start: 0;
49 margin-bottom: 10px;
48 margin-top: 20px; 50 margin-top: 20px;
49 margin-bottom: 10px;
50 -webkit-margin-start: 0px;
51 } 51 }
52 52
53 #content-top #buttons, 53 #content-top #buttons,
54 #content-top h1 { 54 #content-top h1 {
55 color: #666; 55 color: #666;
56 margin: 10px 0px 30px 0px; 56 font-size: 1.5em;
57 font-weight: normal; 57 font-weight: normal;
58 font-size: 1.5em; 58 margin: 10px 0 30px 0;
59 text-align: center; 59 text-align: center;
60 } 60 }
61 61
62 h2 { 62 h2 {
63 color: #666; 63 color: #666;
64 font-size: 1.2em; 64 font-size: 1.2em;
65 font-weight: normal; 65 font-weight: normal;
66 margin: 10px 0; 66 margin: 10px 0;
67 } 67 }
68 68
69 a { 69 a {
70 color: #15c; 70 color: rgb(17, 85, 204);
71 text-decoration: none; 71 text-decoration: none;
72 } 72 }
73 73
74 .icon { 74 .icon {
75 -webkit-user-select: none; 75 -webkit-user-select: none;
76 } 76 }
77 77
78 .icon-generic { 78 .icon-generic {
79 /** 79 /**
80 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted 80 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
81 * renderer process, so embed the resource manually. 81 * renderer process, so embed the resource manually.
82 */ 82 */
83 content: -webkit-image-set( 83 content: -webkit-image-set(
84 url('../../app/theme/default_100_percent/common/error_network_generic.png' ) 1x, 84 url('../../../app/theme/default_100_percent/common/error_network_generic.p ng') 1x,
85 url('../../app/theme/default_200_percent/common/error_network_generic.png' ) 2x); 85 url('../../../app/theme/default_200_percent/common/error_network_generic.p ng') 2x);
86 } 86 }
87 87
88 .icon-offline { 88 .icon-offline {
89 content: -webkit-image-set( 89 content: -webkit-image-set(
90 url('../../app/theme/default_100_percent/common/error_network_offline.png' ) 1x, 90 url('../../../app/theme/default_100_percent/common/error_network_offline.p ng') 1x,
91 url('../../app/theme/default_200_percent/common/error_network_offline.png' ) 2x); 91 url('../../../app/theme/default_200_percent/common/error_network_offline.p ng') 2x);
92 } 92 }
93 93
94 #content-top { 94 #content-top {
95 margin: 20px; 95 margin: 20px;
96 } 96 }
97 97
98 #help-box-outer { 98 #help-box-outer {
99 -webkit-transition: height ease-in 218ms;
99 overflow: hidden; 100 overflow: hidden;
100 -webkit-transition: height ease-in 218ms;
101 } 101 }
102 102
103 #help-box-inner { 103 #help-box-inner {
104 background-color: #f9f9f9; 104 background-color: #f9f9f9;
105 border-top: 1px solid #EEE; 105 border-top: 1px solid #EEE;
106 color: #444; 106 color: #444;
107 padding: 20px; 107 padding: 20px;
108 text-align: start; 108 text-align: start;
109 } 109 }
110 110
(...skipping 11 matching lines...) Expand all
122 /* Not done on mobile for performance reasons. */ 122 /* Not done on mobile for performance reasons. */
123 text-shadow: 0 1px 0 rgba(255,255,255,0.3); 123 text-shadow: 0 1px 0 rgba(255,255,255,0.3);
124 </if> 124 </if>
125 } 125 }
126 126
127 [jscontent=failedUrl] { 127 [jscontent=failedUrl] {
128 overflow-wrap: break-word; 128 overflow-wrap: break-word;
129 } 129 }
130 130
131 button { 131 button {
132 -webkit-user-select: none;
132 border: 1px solid rgba(0, 0, 0, 0.25); 133 border: 1px solid rgba(0, 0, 0, 0.25);
133 border-radius: 2px; 134 border-radius: 2px;
134 color: #444; 135 color: #444;
135 -webkit-user-select: none;
136 <if expr="not is_android"> 136 <if expr="not is_android">
137 /* iOS does not support linear-gradient without a prefix. */ 137 /* iOS does not support linear-gradient without a prefix. */
138 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 138 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
139 text-shadow: 0 1px 0 rgb(240, 240, 240); 139 text-shadow: 0 1px 0 rgb(240, 240, 240);
140 </if> 140 </if>
141 <if expr="is_android"> 141 <if expr="is_android">
142 /* Android uses flat background colors. */ 142 /* Android uses flat background colors. */
143 background-color: #ededed; 143 background-color: #ededed;
144 font-weight: bold; 144 font-weight: bold;
145 </if> 145 </if>
146 <if expr="not is_android and not is_ios"> 146 <if expr="not is_android and not is_ios">
147 /* Not done on mobile for performance reasons. */ 147 /* Not done on mobile for performance reasons. */
148 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0 .75); 148 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
149 inset 0 1px 2px rgba(255, 255, 255, 0.75);
149 </if> 150 </if>
150 } 151 }
151 152
152 button:hover { 153 button:hover {
153 border: 1px solid rgba(0, 0, 0, 0.3); 154 border: 1px solid rgba(0, 0, 0, 0.3);
154 color: #000; 155 color: #000;
155 <if expr="not is_android"> 156 <if expr="not is_android">
156 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 157 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
157 </if> 158 </if>
158 <if expr="is_android"> 159 <if expr="is_android">
159 background-color: #f0f0f0; 160 background-color: #f0f0f0;
160 </if> 161 </if>
161 <if expr="not is_android and not is_ios"> 162 <if expr="not is_android and not is_ios">
162 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0 .95); 163 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
164 inset 0 1px 2px rgba(255, 255, 255, 0.95);
163 </if> 165 </if>
164 } 166 }
165 167
166 button:active { 168 button:active {
167 border: 1px solid rgba(0, 0, 0, 0.3); 169 border: 1px solid rgba(0, 0, 0, 0.3);
168 color: #444; 170 color: #444;
169 <if expr="not is_android"> 171 <if expr="not is_android">
170 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 172 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
171 </if> 173 </if>
172 <if expr="is_android"> 174 <if expr="is_android">
173 background-color: #e7e7e7; 175 background-color: #e7e7e7;
174 </if> 176 </if>
175 <if expr="not is_android and not is_ios"> 177 <if expr="not is_android and not is_ios">
176 box-shadow: none; 178 box-shadow: none;
177 </if> 179 </if>
178 } 180 }
179 181
180 .text-button { 182 .text-button {
181 margin: 0px 5px; 183 margin: 0 5px;
182 min-height: 29px; 184 min-height: 29px;
183 min-width: 65px; 185 min-width: 65px;
184 padding: 7px 13px; 186 padding: 7px 13px;
185 } 187 }
186 188
187 .blue-button { 189 .blue-button {
188 color: #fff; 190 color: #fff;
189 <if expr="not is_android"> 191 <if expr="not is_android">
190 background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0); 192 background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0);
191 border: 1px solid rgba(45, 102, 195, 1); 193 border: 1px solid rgba(45, 102, 195, 1);
192 text-shadow: 0 1px 0 rgba(0,0,0,0.5); 194 text-shadow: 0 1px 0 rgba(0,0,0,0.5);
193 </if> 195 </if>
194 <if expr="is_android"> 196 <if expr="is_android">
195 background-color: rgb(39, 180, 231); 197 background-color: rgb(39, 180, 231);
196 border: 1px solid rgb(0, 152, 206); 198 border: 1px solid rgb(0, 152, 206);
197 </if> 199 </if>
198 <if expr="not is_android and not is_ios"> 200 <if expr="not is_android and not is_ios">
199 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0 .2); 201 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15),
202 inset 0 1px 2px rgba(255, 255, 255, 0.2);
200 </if> 203 </if>
201 } 204 }
202 205
203 .blue-button:hover { 206 .blue-button:hover {
204 color: #fff; 207 color: #fff;
205 <if expr="not is_android"> 208 <if expr="not is_android">
206 background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1); 209 background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1);
207 border: 1px solid rgba(45, 102, 195, 1); 210 border: 1px solid rgba(45, 102, 195, 1);
208 </if> 211 </if>
209 <if expr="not is_android and not is_ios"> 212 <if expr="not is_android and not is_ios">
210 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0 .2); 213 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25),
214 inset 0 1px 2px rgba(255, 255, 255, 0.2);
211 </if> 215 </if>
212 } 216 }
213 217
214 .blue-button:active { 218 .blue-button:active {
215 <if expr="not is_android"> 219 <if expr="not is_android">
216 background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed); 220 background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed);
217 border: 1px solid rgb(38, 84, 160); 221 border: 1px solid rgb(38, 84, 160);
218 </if> 222 </if>
219 <if expr="is_android"> 223 <if expr="is_android">
220 background-color: rgb(0, 152, 206); 224 background-color: rgb(0, 152, 206);
(...skipping 12 matching lines...) Expand all
233 #search-box { 237 #search-box {
234 border: 1px solid #cdcdcd; 238 border: 1px solid #cdcdcd;
235 flex-grow: 1; 239 flex-grow: 1;
236 font-size: 16px; 240 font-size: 16px;
237 height: 26px; 241 height: 26px;
238 margin-right: 0; 242 margin-right: 0;
239 padding: 1px 9px; 243 padding: 1px 9px;
240 } 244 }
241 245
242 #search-box:focus { 246 #search-box:focus {
243 border: 1px solid #5d9aff; 247 border: 1px solid rgb(93, 154, 255);
244 outline: none; 248 outline: none;
245 } 249 }
246 250
247 #search-button { 251 #search-button {
248 border: none; 252 border: none;
253 border-bottom-left-radius: 0;
249 border-top-left-radius: 0; 254 border-top-left-radius: 0;
250 border-bottom-left-radius: 0;
251 box-shadow: none; 255 box-shadow: none;
252 display: flex; 256 display: flex;
253 height: 30px; 257 height: 30px;
254 margin: 0; 258 margin: 0;
259 padding: 0;
255 width: 60px; 260 width: 60px;
256 padding: 0;
257 } 261 }
258 262
259 #search-image { 263 #search-image {
260 content: 264 content:
261 -webkit-image-set( 265 -webkit-image-set(
262 url('../../app/theme/default_100_percent/common/omnibox_search_button_ loupe.png') 1x, 266 url('../../../app/theme/default_100_percent/common/omnibox_search_butt on_loupe.png') 1x,
263 url('../../app/theme/default_200_percent/common/omnibox_search_button_ loupe.png') 2x); 267 url('../../../app/theme/default_200_percent/common/omnibox_search_butt on_loupe.png') 2x);
264 margin: auto; 268 margin: auto;
265 } 269 }
266 270
267 .hidden { 271 .hidden {
268 display: none; 272 display: none;
269 } 273 }
270 274
271 .suggestions { 275 .suggestions {
272 margin-top: 18px; 276 margin-top: 18px;
273 } 277 }
(...skipping 18 matching lines...) Expand all
292 line-height: 18px; 296 line-height: 18px;
293 } 297 }
294 } 298 }
295 299
296 /* Decrease padding at low sizes. */ 300 /* Decrease padding at low sizes. */
297 @media (max-width: 640px), (max-height: 640px) { 301 @media (max-width: 640px), (max-height: 640px) {
298 body { 302 body {
299 margin: 15px; 303 margin: 15px;
300 } 304 }
301 h1 { 305 h1 {
302 margin: 10px 0px 15px 0px; 306 margin: 10px 0 15px 0;
303 } 307 }
304 #content-top { 308 #content-top {
305 margin: 15px; 309 margin: 15px;
306 } 310 }
307 #help-box-inner { 311 #help-box-inner {
308 padding: 20px; 312 padding: 20px;
309 } 313 }
310 .suggestions { 314 .suggestions {
311 margin-top: 10px; 315 margin-top: 10px;
312 } 316 }
313 .suggestion-header { 317 .suggestion-header {
314 margin-bottom: 0px; 318 margin-bottom: 0;
315 } 319 }
316 .error-code { 320 .error-code {
317 margin-top: 10px; 321 margin-top: 10px;
318 } 322 }
319 } 323 }
320 324
321 /* Don't allow overflow when in a subframe. */ 325 /* Don't allow overflow when in a subframe. */
322 html[subframe] body { 326 html[subframe] body {
323 overflow: hidden; 327 overflow: hidden;
324 } 328 }
325 329
326 #sub-frame-error { 330 #sub-frame-error {
327 -webkit-align-items: center; 331 -webkit-align-items: center;
332 -webkit-flex-flow: column;
333 -webkit-justify-content: center;
328 background-color: #DDD; 334 background-color: #DDD;
329 display: -webkit-flex; 335 display: -webkit-flex;
330 -webkit-flex-flow: column;
331 height: 100%; 336 height: 100%;
332 -webkit-justify-content: center; 337 left: 0;
333 left: 0px;
334 position: absolute; 338 position: absolute;
335 top: 0px; 339 top: 0;
336 width: 100%; 340 width: 100%;
337 } 341 }
338 342
339 #sub-frame-error:hover { 343 #sub-frame-error:hover {
340 background-color: #EEE; 344 background-color: #EEE;
341 } 345 }
342 346
343 #sub-frame-error-details { 347 #sub-frame-error-details {
344 margin: 0 10px; 348 margin: 0 10px;
345 visibility: hidden; 349 visibility: hidden;
346 } 350 }
347 351
348 /* Show details only when hovering. */ 352 /* Show details only when hovering. */
349 #sub-frame-error:hover #sub-frame-error-details { 353 #sub-frame-error:hover #sub-frame-error-details {
350 visibility: visible; 354 visibility: visible;
351 } 355 }
352 356
353 /* If the iframe is too small, always hide the error code. */ 357 /* If the iframe is too small, always hide the error code. */
354 /* TODO(mmenke): See if overflow: no-display works better, once supported. */ 358 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
355 @media (max-width: 200px), (max-height: 95px) { 359 @media (max-width: 200px), (max-height: 95px) {
356 #sub-frame-error-details { 360 #sub-frame-error-details {
357 display: none; 361 display: none;
358 } 362 }
359 } 363 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698