browser/base/content/abouthome/aboutHome.css@ca08bd8f51b2
browser/base/content/abouthome/aboutHome.css
Wed, 31 Dec 2014 06:55:46 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:46 +0100
- changeset 1
- ca08bd8f51b2
- permissions
- -rw-r--r--
Added tag TORBROWSER_REPLICA for changeset 6474c204b198
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
7 html {
8 font: message-box;
9 font-size: 100%;
10 background-color: hsl(0,0%,95%);
11 color: #000;
12 height: 100%;
13 }
15 body {
16 margin: 0;
17 display: -moz-box;
18 -moz-box-orient: vertical;
19 width: 100%;
20 height: 100%;
21 }
23 input,
24 button {
25 font-size: inherit;
26 font-family: inherit;
27 }
29 a {
30 color: -moz-nativehyperlinktext;
31 text-decoration: none;
32 }
34 .spacer {
35 -moz-box-flex: 1;
36 }
38 #topSection {
39 text-align: center;
40 }
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 }
52 #searchForm,
53 #snippets {
54 width: 470px;
55 }
57 #searchForm {
58 display: -moz-box;
59 }
61 #searchLogoContainer {
62 display: -moz-box;
63 -moz-box-align: center;
64 padding-top: 2px;
65 -moz-padding-end: 8px;
66 }
68 #searchLogoContainer[hidden] {
69 display: none;
70 }
72 #searchEngineLogo {
73 display: inline-block;
74 height: 28px;
75 width: 70px;
76 min-width: 70px;
77 }
79 #searchText {
80 -moz-box-flex: 1;
81 padding: 6px 8px;
82 background: hsla(0,0%,100%,.9) padding-box;
83 border: 1px solid;
84 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
85 box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
86 0 0 2px hsla(210,65%,9%,.1) inset,
87 0 1px 0 hsla(0,0%,100%,.2);
88 border-radius: 2.5px 0 0 2.5px;
89 }
91 #searchText:-moz-dir(rtl) {
92 border-radius: 0 2.5px 2.5px 0;
93 }
95 #searchText:focus,
96 #searchText[autofocus] {
97 border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
98 }
100 #searchSubmit {
101 -moz-margin-start: -1px;
102 background: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
103 padding: 0 9px;
104 border: 1px solid;
105 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
106 -moz-border-start: 1px solid transparent;
107 border-radius: 0 2.5px 2.5px 0;
108 box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
109 0 1px 0 hsla(0,0%,100%,.2);
110 cursor: pointer;
111 transition-property: background-color, border-color, box-shadow;
112 transition-duration: 150ms;
113 }
115 #searchSubmit:-moz-dir(rtl) {
116 border-radius: 2.5px 0 0 2.5px;
117 }
119 #searchText:focus + #searchSubmit,
120 #searchText + #searchSubmit:hover,
121 #searchText[autofocus] + #searchSubmit {
122 border-color: #59b5fc #45a3e7 #3294d5;
123 color: white;
124 }
126 #searchText:focus + #searchSubmit,
127 #searchText[autofocus] + #searchSubmit {
128 background-image: linear-gradient(#4cb1ff, #1793e5);
129 box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
130 0 0 0 1px hsla(0,0%,100%,.1) inset,
131 0 1px 0 hsla(210,54%,20%,.03);
132 }
134 #searchText + #searchSubmit:hover {
135 background-image: linear-gradient(#66bdff, #0d9eff);
136 box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
137 0 0 0 1px hsla(0,0%,100%,.1) inset,
138 0 1px 0 hsla(210,54%,20%,.03),
139 0 0 4px hsla(206,100%,20%,.2);
140 }
142 #searchText + #searchSubmit:hover:active {
143 box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
144 0 0 1px hsla(211,79%,6%,.2) inset;
145 transition-duration: 0ms;
146 }
148 #defaultSnippet1,
149 #defaultSnippet2,
150 #rightsSnippet {
151 display: block;
152 min-height: 38px;
153 background: 30px center no-repeat;
154 padding: 6px 0;
155 -moz-padding-start: 79px;
156 }
158 #rightsSnippet[hidden] {
159 display: none;
160 }
162 #defaultSnippet1:-moz-dir(rtl),
163 #defaultSnippet2:-moz-dir(rtl),
164 #rightsSnippet:-moz-dir(rtl) {
165 background-position: right 30px center;
166 }
168 #defaultSnippet1 {
169 background-image: url("chrome://browser/content/abouthome/snippet1.png");
170 }
172 #defaultSnippet2 {
173 background-image: url("chrome://browser/content/abouthome/snippet2.png");
174 }
176 #snippets {
177 display: inline-block;
178 text-align: start;
179 margin: 12px 0;
180 color: #3c3c3c;
181 font-size: 75%;
182 /* 12px is the computed font size, 15px the computed line height of the snippets
183 with Segoe UI on a default Windows 7 setup. The 15/12 multiplier approximately
184 converts em from units of font-size to units of line-height. The goal is to
185 preset the height of a three-line snippet to avoid visual moving/flickering as
186 the snippets load. */
187 min-height: calc(15/12 * 3em);
188 }
190 #launcher {
191 display: -moz-box;
192 -moz-box-align: center;
193 -moz-box-pack: center;
194 width: 100%;
195 background-color: hsla(0,0%,0%,.03);
196 border-top: 1px solid hsla(0,0%,0%,.03);
197 box-shadow: 0 1px 2px hsla(0,0%,0%,.02) inset,
198 0 -1px 0 hsla(0,0%,100%,.25);
199 }
201 #launcher:not([session]),
202 body[narrow] #launcher[session] {
203 display: block; /* display separator and restore button on separate lines */
204 text-align: center;
205 white-space: nowrap; /* prevent navigational buttons from wrapping */
206 }
208 .launchButton {
209 display: -moz-box;
210 -moz-box-orient: vertical;
211 margin: 16px 1px;
212 padding: 14px 6px;
213 min-width: 88px;
214 max-width: 176px;
215 max-height: 85px;
216 vertical-align: top;
217 white-space: normal;
218 background: transparent padding-box;
219 border: 1px solid transparent;
220 border-radius: 2.5px;
221 color: #525c66;
222 font-size: 75%;
223 cursor: pointer;
224 transition-property: background-color, border-color, box-shadow;
225 transition-duration: 150ms;
226 }
228 body[narrow] #launcher[session] > .launchButton {
229 margin: 4px 1px;
230 }
232 .launchButton:hover {
233 background-color: hsla(211,79%,6%,.03);
234 border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
235 }
237 .launchButton:hover:active {
238 background-image: linear-gradient(hsla(211,79%,6%,.02), hsla(211,79%,6%,.05));
239 border-color: hsla(210,54%,20%,.2) hsla(210,54%,20%,.23) hsla(210,54%,20%,.25);
240 box-shadow: 0 1px 1px hsla(211,79%,6%,.05) inset,
241 0 0 1px hsla(211,79%,6%,.1) inset;
242 transition-duration: 0ms;
243 }
245 .launchButton[hidden],
246 #launcher:not([session]) > #restorePreviousSessionSeparator,
247 #launcher:not([session]) > #restorePreviousSession {
248 display: none;
249 }
251 #restorePreviousSessionSeparator {
252 width: 3px;
253 height: 116px;
254 margin: 0 10px;
255 background-image: linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
256 linear-gradient(hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
257 linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
258 background-position: left top, center, right bottom;
259 background-size: 1px auto;
260 background-repeat: no-repeat;
261 }
263 body[narrow] #restorePreviousSessionSeparator {
264 margin: 0 auto;
265 width: 512px;
266 height: 3px;
267 background-image: linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0)),
268 linear-gradient(to right, hsla(211,79%,6%,0), hsla(211,79%,6%,.2), hsla(211,79%,6%,0)),
269 linear-gradient(to right, hsla(0,0%,100%,0), hsla(0,0%,100%,.35), hsla(0,0%,100%,0));
270 background-size: auto 1px;
271 }
273 #restorePreviousSession {
274 max-width: none;
275 font-size: 90%;
276 }
278 body[narrow] #restorePreviousSession {
279 font-size: 80%;
280 }
282 .launchButton::before {
283 display: block;
284 width: 32px;
285 height: 32px;
286 margin: 0 auto 6px;
287 line-height: 0; /* remove extra vertical space due to non-zero font-size */
288 }
290 #downloads::before {
291 content: url("chrome://browser/content/abouthome/downloads.png");
292 }
294 #bookmarks::before {
295 content: url("chrome://browser/content/abouthome/bookmarks.png");
296 }
298 #history::before {
299 content: url("chrome://browser/content/abouthome/history.png");
300 }
302 #apps::before {
303 content: url("chrome://browser/content/abouthome/apps.png");
304 }
306 #addons::before {
307 content: url("chrome://browser/content/abouthome/addons.png");
308 }
310 #sync::before {
311 content: url("chrome://browser/content/abouthome/sync.png");
312 }
314 #settings::before {
315 content: url("chrome://browser/content/abouthome/settings.png");
316 }
318 #restorePreviousSession::before {
319 content: url("chrome://browser/content/abouthome/restore-large.png");
320 height: 48px;
321 width: 48px;
322 display: inline-block; /* display on same line as text label */
323 vertical-align: middle;
324 margin-bottom: 0;
325 -moz-margin-end: 8px;
326 }
328 #restorePreviousSession:-moz-dir(rtl)::before {
329 transform: scaleX(-1);
330 }
332 body[narrow] #restorePreviousSession::before {
333 content: url("chrome://browser/content/abouthome/restore.png");
334 height: 32px;
335 width: 32px;
336 }
338 #aboutMozilla {
339 display: block;
340 position: relative; /* pin wordmark to edge of document, not of viewport */
341 -moz-box-ordinal-group: 0;
342 opacity: .5;
343 transition: opacity 150ms;
344 }
346 #aboutMozilla:hover {
347 opacity: 1;
348 }
350 #aboutMozilla::before {
351 content: url("chrome://browser/content/abouthome/mozilla.png");
352 display: block;
353 position: absolute;
354 top: 12px;
355 right: 12px;
356 width: 69px;
357 height: 19px;
358 }
360 /* [HiDPI]
361 * At resolutions above 1dppx, prefer downscaling the 2x Retina graphics
362 * rather than upscaling the original-size ones (bug 818940).
363 */
364 @media not all and (max-resolution: 1dppx) {
365 #brandLogo {
366 background-image: url("chrome://branding/content/about-logo@2x.png");
367 }
369 #defaultSnippet1,
370 #defaultSnippet2,
371 #rightsSnippet {
372 background-size: 40px;
373 }
375 #defaultSnippet1 {
376 background-image: url("chrome://browser/content/abouthome/snippet1@2x.png");
377 }
379 #defaultSnippet2 {
380 background-image: url("chrome://browser/content/abouthome/snippet2@2x.png");
381 }
383 .launchButton::before,
384 #aboutMozilla::before {
385 transform: scale(.5);
386 transform-origin: 0 0;
387 }
389 .launchButton:-moz-dir(rtl)::before,
390 #aboutMozilla:-moz-dir(rtl)::before {
391 transform: scale(.5) translateX(32px);
392 }
394 #downloads::before {
395 content: url("chrome://browser/content/abouthome/downloads@2x.png");
396 }
398 #bookmarks::before {
399 content: url("chrome://browser/content/abouthome/bookmarks@2x.png");
400 }
402 #history::before {
403 content: url("chrome://browser/content/abouthome/history@2x.png");
404 }
406 #apps::before {
407 content: url("chrome://browser/content/abouthome/apps@2x.png");
408 }
410 #addons::before {
411 content: url("chrome://browser/content/abouthome/addons@2x.png");
412 }
414 #sync::before {
415 content: url("chrome://browser/content/abouthome/sync@2x.png");
416 }
418 #settings::before {
419 content: url("chrome://browser/content/abouthome/settings@2x.png");
420 }
422 #restorePreviousSession::before {
423 content: url("chrome://browser/content/abouthome/restore-large@2x.png");
424 }
426 body[narrow] #restorePreviousSession::before {
427 content: url("chrome://browser/content/abouthome/restore@2x.png");
428 }
430 #restorePreviousSession:-moz-dir(rtl)::before {
431 transform: scale(-0.5, 0.5) translateX(24px);
432 transform-origin: top center;
433 }
435 #aboutMozilla::before {
436 content: url("chrome://browser/content/abouthome/mozilla@2x.png");
437 }
438 }
