OLD | NEW |
| (Empty) |
1 html { | |
2 /* This is needed because of chrome://theme/css/new_tab.css */ | |
3 height: 100%; | |
4 } | |
5 | |
6 body { | |
7 margin: 0; | |
8 height: 100%; | |
9 overflow: auto; | |
10 -webkit-user-select: none; | |
11 cursor: default; | |
12 } | |
13 | |
14 html[mode=app-launcher] { | |
15 height: auto; | |
16 } | |
17 | |
18 #main { | |
19 box-sizing: border-box; | |
20 -webkit-transition: width .15s; | |
21 margin: 0 auto; | |
22 min-height: 100%; | |
23 } | |
24 | |
25 body.loading #main { | |
26 /* We start out hidden to prevent glitchiness as the app and most visited | |
27 data flows in. */ | |
28 visibility: hidden; | |
29 } | |
30 | |
31 #main, | |
32 .section, | |
33 .maxiview, | |
34 #login-container, | |
35 #notification-container, | |
36 #closed-sections-bar { | |
37 width: 920px; | |
38 } | |
39 | |
40 html[dir=rtl] #main { | |
41 background-position-x: 100%; | |
42 } | |
43 | |
44 html[mode=app-launcher] #main { | |
45 min-height: 50px; | |
46 } | |
47 | |
48 html[anim=false] *, | |
49 .no-anim, .no-anim *, | |
50 .loading * { | |
51 -webkit-transition: none !important; | |
52 -webkit-animation: none !important; | |
53 } | |
54 | |
55 :link, | |
56 :visited, | |
57 .link { | |
58 cursor: pointer; | |
59 text-decoration: underline; | |
60 color: hsla(213, 90%, 24%, 0.33333); | |
61 -webkit-appearance: none; | |
62 border: 0; | |
63 background: none; | |
64 } | |
65 | |
66 .link-color { | |
67 color: hsl(213, 90%, 24%); | |
68 text-decoration: none; | |
69 } | |
70 | |
71 .hide { | |
72 opacity: 0 !important; | |
73 visibility: hidden !important; | |
74 pointer-events: none; | |
75 } | |
76 | |
77 /* Notification */ | |
78 | |
79 #notification-container { | |
80 position: fixed; | |
81 } | |
82 | |
83 #notification { | |
84 -webkit-transition: opacity .15s; | |
85 position: relative; | |
86 background-color: hsl(52, 100%, 80%); | |
87 border: 1px solid rgb(211, 211, 211); | |
88 border-radius: 6px; | |
89 color: black; | |
90 display: -webkit-box; | |
91 font-weight: bold; | |
92 margin: 2px auto; | |
93 opacity: 0; | |
94 padding: 7px 15px; | |
95 pointer-events: none; | |
96 white-space: nowrap; | |
97 width: intrinsic; | |
98 z-index: 2; | |
99 } | |
100 | |
101 #notification.first-run { | |
102 padding: 5px 13px; /* subtract the border width */ | |
103 border: 2px solid hsl(213, 55%, 75%); | |
104 background-color: hsl(213, 63%, 93%); | |
105 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); | |
106 font-weight: normal; | |
107 } | |
108 | |
109 #notification.promo { | |
110 padding: 5px 13px; /* subtract the border width */ | |
111 border: 1px solid hsl(0, 0%, 80%); | |
112 background-color: hsl(120, 93%, 93%); | |
113 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); | |
114 font-weight: normal; | |
115 } | |
116 | |
117 #notification.promo a { | |
118 color: rgb(0, 102, 204); | |
119 } | |
120 | |
121 #notification-close { | |
122 display: inline-block; | |
123 border: 0; | |
124 -webkit-margin-start: 10px; | |
125 -webkit-margin-end: auto; | |
126 vertical-align: middle; | |
127 width: 16px; | |
128 height: 16px; | |
129 background: no-repeat; | |
130 background-color: transparent; | |
131 background-image: url('chrome://theme/IDR_CLOSE_BAR'); | |
132 padding: 0; | |
133 } | |
134 | |
135 #notification-close:hover, | |
136 #notification-close:focus { | |
137 background-image: url('chrome://theme/IDR_CLOSE_BAR_H'); | |
138 } | |
139 | |
140 #notification-close:active { | |
141 background-image: url('chrome://theme/IDR_CLOSE_BAR_P'); | |
142 } | |
143 | |
144 #notification > * { | |
145 max-width: 500px; | |
146 overflow: hidden; | |
147 text-overflow: ellipsis; | |
148 } | |
149 | |
150 #notification.first-run > * { | |
151 white-space: normal; | |
152 } | |
153 | |
154 #notification.show { | |
155 opacity: 1; | |
156 pointer-events: all; | |
157 -webkit-transition: opacity 1s; | |
158 } | |
159 | |
160 #notification .link { | |
161 color: rgba(0, 102, 204, 0.3); | |
162 -webkit-padding-start: 20px; | |
163 } | |
164 | |
165 #notification .link > * { | |
166 outline: none; | |
167 } | |
168 | |
169 #notification .link-color { | |
170 color: rgb(0, 102, 204); | |
171 } | |
172 | |
173 #notification > * > .blacklist-title { | |
174 display: inline-block; | |
175 max-width: 30ex; | |
176 overflow: hidden; | |
177 text-overflow: ellipsis; | |
178 white-space: nowrap; | |
179 } | |
180 | |
181 .item { | |
182 background: no-repeat 0% 50%; | |
183 padding: 2px; | |
184 padding-left: 18px; | |
185 background-size: 16px 16px; | |
186 background-color: hsla(213, 63%, 93%, 0); | |
187 display: block; | |
188 line-height: 20px; | |
189 max-width: 600px; | |
190 box-sizing: border-box; | |
191 white-space: nowrap; | |
192 overflow: hidden; | |
193 text-overflow: ellipsis; | |
194 font-size: 100%; | |
195 } | |
196 | |
197 .item:visited, | |
198 .item:link { | |
199 color: hsl(213, 90%, 24%); | |
200 } | |
201 | |
202 html[dir=rtl] .item { | |
203 background-position-x: 100%; | |
204 padding-right: 18px; | |
205 padding-left: 2px; | |
206 text-align: right; | |
207 } | |
208 | |
209 .window { | |
210 overflow: visible; /* We use visible so that the menu can be a child and shown | |
211 on :hover. To get this to work we have to set visibility | |
212 to visible which unfortunately breaks the ellipsis for t | |
213 he window items */ | |
214 background-image: url('ntp/closed_window.png'); | |
215 } | |
216 | |
217 .window-menu { | |
218 position: absolute; | |
219 display: none; | |
220 border: 1px solid #999; | |
221 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); | |
222 color: black; | |
223 background-color: white; | |
224 left: 0; | |
225 white-space: nowrap; | |
226 z-index: 2; | |
227 padding: 2px; | |
228 cursor: default; | |
229 border-radius: 4px; | |
230 } | |
231 | |
232 /* Made to look like a tooltip using vista/win7 look and feel. | |
233 TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed | |
234 */ | |
235 #window-tooltip { | |
236 color: #555; | |
237 pointer-events: none; | |
238 border: 1px solid rgb(118, 118, 118); | |
239 border-radius: 3px; | |
240 padding: 0 3px; | |
241 background: -webkit-linear-gradient(white, rgb(228, 229, 240)); | |
242 width: auto; | |
243 max-width: 300px; | |
244 } | |
245 | |
246 .foreign-session-client { | |
247 float: left; | |
248 max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ | |
249 font-weight: normal; | |
250 margin: 0; | |
251 position: relative; | |
252 } | |
253 | |
254 html[dir=rtl] .foreign-session-client { | |
255 float: right; | |
256 } | |
257 | |
258 .foreign-session-client > p { | |
259 display: block; | |
260 white-space: nowrap; | |
261 overflow: hidden; | |
262 text-overflow: ellipsis; | |
263 font-size: 100%; | |
264 margin: 0 10px; | |
265 } | |
266 | |
267 #foreign-sessions .nav { | |
268 max-width: none !important; | |
269 } | |
270 | |
271 .nav > a { | |
272 /* no icon */ | |
273 padding: 0; | |
274 } | |
275 | |
276 .nav > a:after { | |
277 content: '\u00bb'; /* raque gets flipped automatically in rtl */ | |
278 font-size: 115%; | |
279 -webkit-padding-start: 2px; | |
280 } | |
281 | |
282 #sync-status > div { | |
283 border-radius: 6px; | |
284 padding: 5px 0; | |
285 margin: 10px 0 20px; | |
286 white-space: nowrap; | |
287 overflow-x: hidden; | |
288 } | |
289 | |
290 #sync-status > div > * { | |
291 display: inline-block; | |
292 max-width: none; | |
293 white-space: nowrap; | |
294 overflow: hidden; | |
295 text-overflow: ellipsis; | |
296 font-size: 106%; | |
297 margin: 0; | |
298 } | |
299 | |
300 .notification.hidden { | |
301 opacity: 0; | |
302 pointer-events: none; | |
303 } | |
304 | |
305 /** | |
306 * Unfortunately, there seems to be a bug in WebKit where this div doesn't | |
307 * immediately get layout. It still doesn't have it in 'load', but gains it | |
308 * sometime after. | |
309 * | |
310 * We detect this in the JS by looking for offsetWidth > 0, and when it occurs, | |
311 * remove the 'nolayout' class. | |
312 */ | |
313 #attribution.nolayout { | |
314 position: static; | |
315 visibility: hidden; | |
316 } | |
317 | |
318 #attribution { | |
319 bottom: 5px; | |
320 left: 8px; | |
321 position: fixed; | |
322 text-align: end; | |
323 } | |
324 | |
325 html[dir=rtl] #attribution { | |
326 left: auto; | |
327 right: 8px; | |
328 } | |
329 | |
330 #attribution.obscured { | |
331 visibility: hidden; | |
332 } | |
333 | |
334 html[hasattribution=false] #attribution > div { | |
335 display: none; | |
336 } | |
337 | |
338 .sync-button { | |
339 font-size: inherit; | |
340 padding: 0; | |
341 margin: 0; | |
342 -webkit-appearance: none; | |
343 border: 0; | |
344 background: none; | |
345 cursor: pointer; | |
346 text-decoration: underline; | |
347 font-family: inherit; | |
348 } | |
349 | |
350 .section { | |
351 position: fixed; | |
352 font-size: 92%; | |
353 } | |
354 | |
355 body.noscroll { | |
356 overflow: hidden; | |
357 } | |
358 | |
359 html[anim=true][enable-section-animations=true] .section { | |
360 -webkit-transition: top .15s; | |
361 } | |
362 | |
363 #login-container { | |
364 display: none; | |
365 margin-top: 5px; | |
366 position: fixed; | |
367 text-align: end; | |
368 } | |
369 | |
370 /* A section in menu mode doesn't display its contents at all. Instead it is | |
371 rendered as a menu along the bottom of the screen. We have a separate class for | |
372 this so that when a hidden section is unhidden it can go back to its previous | |
373 collapsed state. */ | |
374 .section.menu { | |
375 display: none !important; | |
376 } | |
377 | |
378 /* A disabled section is not rendered in the UI in any way. Examples of this | |
379 state include the 'recently closed' section when we have no data for it, or this | |
380 'sync status' section, when there is no status to display. We have a separate | |
381 class for this so that when a section is enabled, it can go back to its previous | |
382 menu and collapsed state. */ | |
383 .section.disabled { | |
384 display: none !important; | |
385 } | |
386 | |
387 .section > h2 { | |
388 font-family: Helvetica, Arial, sans-serif; | |
389 font-size: 133%; | |
390 font-weight: normal; | |
391 margin: 0; | |
392 position: relative; | |
393 } | |
394 | |
395 .section:not([noexpand]) > h2 { | |
396 cursor: pointer; | |
397 } | |
398 | |
399 .section > h2 > .disclosure { | |
400 position: absolute; | |
401 left: -15px; | |
402 margin-top: 50%; | |
403 top: -5px; | |
404 } | |
405 | |
406 html[dir=rtl] .section > h2 > .disclosure { | |
407 left: auto; | |
408 right: -15px; | |
409 -webkit-transform: rotate(180deg); | |
410 } | |
411 | |
412 html[anim=true] .section > h2 > .disclosure { | |
413 -webkit-transition: -webkit-transform .15s; | |
414 } | |
415 | |
416 .section:not(.collapsed) > h2 > .disclosure { | |
417 -webkit-transform: rotate(90deg); | |
418 } | |
419 | |
420 .section > h2 .back { | |
421 position: absolute; | |
422 left: 0; | |
423 top: 0.56em; | |
424 width: 100%; | |
425 height: 1.5em; | |
426 z-index: 1; | |
427 } | |
428 | |
429 .section > h2 span { | |
430 -webkit-padding-end: 0.30em; | |
431 position: relative; | |
432 z-index: 2; | |
433 } | |
434 | |
435 .section-close-button { | |
436 -webkit-appearance: none; | |
437 -webkit-transition: opacity .15s; | |
438 background-color: transparent; | |
439 background-image: url(chrome://theme/IDR_CLOSE_BAR); | |
440 background-position: center center; | |
441 background-repeat no-repeat; | |
442 border: 0; | |
443 height: 21px; | |
444 margin-top: -10px; | |
445 position: absolute; | |
446 right: -21px; | |
447 top: 50%; | |
448 width: 21px; | |
449 opacity: 0; | |
450 z-index: 3; | |
451 } | |
452 | |
453 html[dir=rtl] .section-close-button { | |
454 left: -21px; | |
455 right: auto; | |
456 } | |
457 | |
458 .section > h2:hover .section-close-button, | |
459 .section-close-button:hover { | |
460 opacity: 1; | |
461 } | |
462 | |
463 .section-close-button:hover { | |
464 background-image: url(chrome://theme/IDR_CLOSE_BAR_H); | |
465 } | |
466 | |
467 #closed-sections-bar { | |
468 position: fixed; | |
469 text-align: end; | |
470 } | |
471 | |
472 /* closed-sections-bar is bottom aligned for non-ChromeOS build. On ChromeOS, | |
473 it goes right under the sections. */ | |
474 #closed-sections-bar:not([chromeos]) { | |
475 bottom: 14px; | |
476 } | |
477 | |
478 #closed-sections-bar > button { | |
479 /* We hide all these buttons by default and turn them on when needed. */ | |
480 display: none; | |
481 | |
482 -webkit-appearance: none; | |
483 background: none; | |
484 border: 0; | |
485 cursor: pointer; | |
486 font: inherit; | |
487 margin: 0; | |
488 -webkit-margin-start: 1.5em; | |
489 padding: 2px 0 0 0; | |
490 | |
491 /* Note: The font here should end up the same as .section > h2. A different | |
492 percentage is needed because the parent element here has a different size. */ | |
493 font-family: Helvetica, Arial, sans-serif; | |
494 font-size: 122%; | |
495 font-weight: normal; | |
496 } | |
497 | |
498 #closed-sections-bar > button > img { | |
499 -webkit-transform: rotate(90deg); | |
500 position: relative; | |
501 top: -2px; | |
502 margin-left: 1px; | |
503 } | |
504 | |
505 .maxiview { | |
506 padding: 5px 0 30px; | |
507 position: absolute; | |
508 -webkit-mask-attachment: fixed; | |
509 opacity: 0; | |
510 } | |
511 | |
512 .maxiview.opaque { | |
513 opacity: 1; | |
514 } | |
515 | |
516 .maxiview.collapsing { | |
517 opacity: 0; | |
518 } | |
519 | |
520 .maxiview.collapsed { | |
521 display: none; | |
522 opacity: 0; | |
523 } | |
524 | |
525 html[anim=true][enable-section-animations=true] .maxiview { | |
526 -webkit-transition: opacity .10s, top .15s; | |
527 } | |
528 | |
529 html[anim=true][enable-section-animations=true] .miniview { | |
530 -webkit-transition: opacity .15s; | |
531 } | |
532 | |
533 .section > .miniview { | |
534 display: none; | |
535 margin: 10px 0 30px; | |
536 white-space: nowrap; | |
537 overflow-x: hidden; | |
538 } | |
539 | |
540 .section.collapsed > * { | |
541 display: none; | |
542 } | |
543 | |
544 .section.collapsed > h2 { | |
545 display: block; | |
546 } | |
547 | |
548 .section.collapsed > .miniview { | |
549 display: block; | |
550 opacity: 0; | |
551 } | |
552 | |
553 .section.collapsed > .miniview.opaque { | |
554 opacity: 1; | |
555 } | |
556 | |
557 .section.collapsed > h2 { | |
558 margin-right: 0; | |
559 } | |
560 | |
561 .miniview > span { | |
562 display: inline-block; | |
563 max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ | |
564 white-space: nowrap; | |
565 overflow: hidden; | |
566 text-overflow: ellipsis; | |
567 font-size: 100%; | |
568 margin: 0 10px; | |
569 } | |
570 | |
571 .miniview > span:first-child { | |
572 margin-left: 0; | |
573 } | |
574 | |
575 .miniview > span:last-child { | |
576 margin-right: 0; | |
577 } | |
578 | |
579 /* small */ | |
580 | |
581 .small-layout #main, | |
582 .small-layout .section, | |
583 .small-layout .maxiview, | |
584 .small-layout #login-container, | |
585 .small-layout #notification-container, | |
586 .small-layout #closed-sections-bar { | |
587 width: 692px; | |
588 } | |
589 | |
590 .small-layout #notification > * { | |
591 max-width: 300px; | |
592 } | |
593 | |
594 .small-layout #notification > span > .blacklist-title { | |
595 max-width: 15ex; | |
596 } | |
597 | |
598 /* Ensure we have at least 10px horizontal marging. */ | |
599 @media (max-width: 712px) { | |
600 #main { | |
601 margin-left: 10px; | |
602 margin-right: 10px; | |
603 } | |
604 } | |
OLD | NEW |