1%if 0
2/* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5%endif
6
7html {
8  font: message-box;
9  font-size: 100%;
10  background-color: hsl(0,0%,95%);
11  color: #000;
12  height: 100%;
13}
14
15body {
16  margin: 0;
17  display: -moz-box;
18  -moz-box-orient: vertical;
19  width: 100%;
20  height: 100%;
21}
22
23input,
24button {
25  font-size: inherit;
26  font-family: inherit;
27}
28
29a {
30  color: -moz-nativehyperlinktext;
31  text-decoration: none;
32}
33
34.spacer {
35  -moz-box-flex: 1;
36}
37
38#topSection {
39  text-align: center;
40}
41
42#brandLogo {
43  height: 192px;
44  width: 192px;
45  margin: 22px auto 31px;
46  background-image: url("chrome://branding/content/about-logo.png");
47  background-size: 192px auto;
48  background-position: center center;
49  background-repeat: no-repeat;
50}
51
52#searchIconAndTextContainer,
53#snippets {
54  width: 470px;
55}
56
57#searchIconAndTextContainer {
58  display: -moz-box;
59  height: 36px;
60  position: relative;
61}
62
63#searchIcon {
64  border: 1px transparent;
65  padding: 0;
66  margin: 0;
67  width: 36px;
68  height: 36px;
69  background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat;
70  position: absolute;
71}
72
73#searchText {
74  margin-left: 0;
75  -moz-box-flex: 1;
76  padding-top: 6px;
77  padding-bottom: 6px;
78  padding-inline-start: 34px;
79  padding-inline-end: 8px;
80  background: hsla(0,0%,100%,.9) padding-box;
81  border: 1px solid;
82  border-radius: 2px 0 0 2px;
83  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
84  box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
85              0 0 2px hsla(210,65%,9%,.1) inset,
86              0 1px 0 hsla(0,0%,100%,.2);
87  color: inherit;
88  unicode-bidi: plaintext;
89}
90
91#searchText:dir(rtl) {
92  border-radius: 0 2px 2px 0;
93}
94
95#searchText[aria-expanded="true"] {
96  border-radius: 2px 0 0 0;
97}
98
99#searchText[aria-expanded="true"]:dir(rtl) {
100  border-radius: 0 2px 0 0;
101}
102
103#searchText[keepfocus],
104#searchText:focus,
105#searchText[autofocus] {
106  border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
107}
108
109#searchSubmit {
110  margin-inline-start: -1px;
111  color: transparent;
112  background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
113  padding: 0;
114  border: 1px solid;
115  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
116  border-radius: 0 2px 2px 0;
117  border-inline-start: 1px solid transparent;
118  box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
119              0 1px 0 hsla(0,0%,100%,.2);
120  cursor: pointer;
121  transition-property: background-color, border-color, box-shadow;
122  transition-duration: 150ms;
123  width: 50px;
124}
125
126#searchSubmit:dir(rtl) {
127  border-radius: 2px 0 0 2px;
128  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl"), linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1));
129}
130
131#searchText:focus + #searchSubmit,
132#searchText[keepfocus] + #searchSubmit,
133#searchText + #searchSubmit:hover,
134#searchText[autofocus] + #searchSubmit {
135  border-color: #59b5fc #45a3e7 #3294d5;
136}
137
138#searchText:focus + #searchSubmit,
139#searchText[keepfocus] + #searchSubmit,
140#searchText[autofocus] + #searchSubmit {
141  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#4cb1ff, #1793e5);
142  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
143              0 0 0 1px hsla(0,0%,100%,.1) inset,
144              0 1px 0 hsla(210,54%,20%,.03);
145}
146
147#searchText:focus + #searchSubmit:dir(rtl),
148#searchText[keepfocus] + #searchSubmit:dir(rtl),
149#searchText[autofocus] + #searchSubmit:dir(rtl) {
150  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#4cb1ff, #1793e5);
151}
152
153#searchText + #searchSubmit:hover {
154  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted"), linear-gradient(#66bdff, #0d9eff);
155  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
156              0 0 0 1px hsla(0,0%,100%,.1) inset,
157              0 1px 0 hsla(210,54%,20%,.03),
158              0 0 4px hsla(206,100%,20%,.2);
159}
160
161#searchText + #searchSubmit:dir(rtl):hover {
162  background-image: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-rtl-inverted"), linear-gradient(#66bdff, #0d9eff);
163}
164
165#searchText + #searchSubmit:hover:active {
166  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
167              0 0 1px hsla(211,79%,6%,.2) inset;
168  transition-duration: 0ms;
169}
170
171#defaultSnippet1,
172#defaultSnippet2,
173#rightsSnippet {
174  display: block;
175  min-height: 38px;
176  background: 0 center no-repeat;
177  padding: 6px 0;
178  padding-inline-start: 49px;
179}
180
181#rightsSnippet[hidden] {
182  display: none;
183}
184
185#defaultSnippet1:dir(rtl),
186#defaultSnippet2:dir(rtl),
187#rightsSnippet:dir(rtl) {
188  background-position: right 0 center;
189}
190
191#defaultSnippet1 {
192  background-image: url("chrome://browser/content/abouthome/snippet1.png");
193}
194
195#defaultSnippet2 {
196  background-image: url("chrome://browser/content/abouthome/snippet2.png");
197}
198
199#snippets {
200  display: inline-block;
201  text-align: start;
202  margin: 12px 0;
203  color: #3c3c3c;
204  font-size: 75%;
205  /* 12px is the computed font size, 15px the computed line height of the snippets
206     with Segoe UI on a default Windows 7 setup. The 15/12 multiplier approximately
207     converts em from units of font-size to units of line-height. The goal is to
208     preset the height of a three-line snippet to avoid visual moving/flickering as
209     the snippets load. */
210  min-height: calc(15/12 * 3em);
211}
212
213#launcher {
214  display: -moz-box;
215  -moz-box-align: center;
216  -moz-box-pack: center;
217  width: 100%;
218  background-color: hsla(0,0%,0%,.03);
219  border-top: 1px solid hsla(0,0%,0%,.03);
220  box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset,
221              0 -1px 0 hsla(0,0%,100%,.25);
222}
223
224#launcher:not([session]),
225body[narrow] #launcher[session] {
226  display: block; /* display separator and restore button on separate lines */
227  text-align: center;
228  white-space: nowrap; /* prevent navigational buttons from wrapping */
229}
230
231.launchButton {
232  display: -moz-box;
233  -moz-box-orient: vertical;
234  margin: 16px 1px;
235  padding: 14px 6px;
236  min-width: 88px;
237  max-width: 176px;
238  max-height: 85px;
239  vertical-align: top;
240  white-space: normal;
241  background: transparent padding-box;
242  border: 1px solid transparent;
243  border-radius: 2px;
244  color: #525c66;
245  font-size: 75%;
246  cursor: pointer;
247  transition-property: background-color, border-color, box-shadow;
248  transition-duration: 150ms;
249}
250
251body[narrow] #launcher[session] > .launchButton {
252  margin: 4px 1px;
253}
254
255.launchButton:hover {
256  background-color: hsla(211,79%,6%,.03);
257  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
258}
259
260.launchButton:hover:active {
261  background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
262  border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
263  box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
264              0 0 1px hsla(211,79%,6%,.1) inset;
265  transition-duration: 0ms;
266}
267
268.launchButton[hidden],
269#launcher:not([session]) > #restorePreviousSessionSeparator,
270#launcher:not([session]) > #restorePreviousSession {
271  display: none;
272}
273
274#restorePreviousSessionSeparator {
275  width: 3px;
276  height: 116px;
277  margin: 0 10px;
278  background-image: linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
279                    linear-gradient(hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
280                    linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
281  background-position: left top, center, right bottom;
282  background-size: 1px auto;
283  background-repeat: no-repeat;
284}
285
286body[narrow] #restorePreviousSessionSeparator {
287  margin: 0 auto;
288  width: 512px;
289  height: 3px;
290  background-image: linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
291                    linear-gradient(to right, hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
292                    linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
293  background-size: auto 1px;
294}
295
296#restorePreviousSession {
297  max-width: none;
298  font-size: 90%;
299}
300
301body[narrow] #restorePreviousSession {
302  font-size: 80%;
303}
304
305.launchButton::before {
306  display: block;
307  width: 32px;
308  height: 32px;
309  margin: 0 auto 6px;
310  line-height: 0; /* remove extra vertical space due to non-zero font-size */
311}
312
313#downloads::before {
314  content: url("chrome://browser/content/abouthome/downloads.png");
315}
316
317#bookmarks::before {
318  content: url("chrome://browser/content/abouthome/bookmarks.png");
319}
320
321#history::before {
322  content: url("chrome://browser/content/abouthome/history.png");
323}
324
325#addons::before {
326  content: url("chrome://browser/content/abouthome/addons.png");
327}
328
329#sync::before {
330  content: url("chrome://browser/content/abouthome/sync.png");
331}
332
333#settings::before {
334  content: url("chrome://browser/content/abouthome/settings.png");
335}
336
337#restorePreviousSession::before {
338  content: url("chrome://browser/content/abouthome/restore-large.png");
339  height: 48px;
340  width: 48px;
341  display: inline-block; /* display on same line as text label */
342  vertical-align: middle;
343  margin-bottom: 0;
344  margin-inline-end: 8px;
345}
346
347#restorePreviousSession:dir(rtl)::before {
348  transform: scaleX(-1);
349}
350
351body[narrow] #restorePreviousSession::before {
352  content: url("chrome://browser/content/abouthome/restore.png");
353  height: 32px;
354  width: 32px;
355}
356
357#aboutMozilla {
358  display: block;
359  position: relative; /* pin wordmark to edge of document, not of viewport */
360  -moz-box-ordinal-group: 0;
361  opacity: .5;
362  transition: opacity 150ms;
363}
364
365#aboutMozilla:hover {
366  opacity: 1;
367}
368
369#aboutMozilla::before {
370  content: url("chrome://browser/content/abouthome/mozilla.png");
371  display: block;
372  position: absolute;
373  top: 12px;
374  right: 12px;
375  width: 69px;
376  height: 19px;
377}
378
379/* [HiDPI]
380 * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
381 * rather than upscaling the original-size ones (bug 818940).
382 */
383@media not all and (max-resolution: 1dppx) {
384  #brandLogo {
385    background-image: url("chrome://branding/content/about-logo@2x.png");
386  }
387
388  #defaultSnippet1,
389  #defaultSnippet2,
390  #rightsSnippet {
391    background-size: 40px;
392  }
393
394  #defaultSnippet1 {
395    background-image: url("chrome://browser/content/abouthome/snippet1@2x.png");
396  }
397
398  #defaultSnippet2 {
399    background-image: url("chrome://browser/content/abouthome/snippet2@2x.png");
400  }
401
402  .launchButton::before,
403  #aboutMozilla::before {
404    transform: scale(.5);
405    transform-origin: 0 0;
406  }
407
408  .launchButton:dir(rtl)::before,
409  #aboutMozilla:dir(rtl)::before {
410    transform: scale(.5) translateX(32px);
411  }
412
413  #downloads::before {
414    content: url("chrome://browser/content/abouthome/downloads@2x.png");
415  }
416
417  #bookmarks::before {
418    content: url("chrome://browser/content/abouthome/bookmarks@2x.png");
419  }
420
421  #history::before {
422    content: url("chrome://browser/content/abouthome/history@2x.png");
423  }
424
425  #addons::before {
426    content: url("chrome://browser/content/abouthome/addons@2x.png");
427  }
428
429  #sync::before {
430    content: url("chrome://browser/content/abouthome/sync@2x.png");
431  }
432
433  #settings::before {
434    content: url("chrome://browser/content/abouthome/settings@2x.png");
435  }
436
437  #restorePreviousSession::before {
438    content: url("chrome://browser/content/abouthome/restore-large@2x.png");
439  }
440
441  body[narrow] #restorePreviousSession::before {
442    content: url("chrome://browser/content/abouthome/restore@2x.png");
443  }
444
445  #restorePreviousSession:dir(rtl)::before {
446    transform: scale(-0.5, 0.5) translateX(24px);
447    transform-origin: top center;
448  }
449
450  #aboutMozilla::before {
451    content: url("chrome://browser/content/abouthome/mozilla@2x.png");
452  }
453}
454
455