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

Side by Side Diff: chrome/browser/resources/new_new_tab.css

Issue 147226: Make the new new tab page the default new tab page.... (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 11 years, 6 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
(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 }
9
10 #main {
11 background: url(chrome://theme/product_logo) no-repeat 0 0px;
12 position: relative;
13 margin: 0 auto;
14 width: 940px;
15 -webkit-transition: width .5s;
16 }
17
18 html[dir='rtl'] #main {
19 background-position-x: 100%;
20 }
21
22 .small #main {
23 width: 692px;
24 }
25
26 html[anim='false'] *,
27 .no-anim, .no-anim *,
28 .loading * {
29 -webkit-transition: none !important;
30 -webkit-animation: none !important;
31 }
32
33 /* Most Visited */
34
35 #most-visited {
36 position: relative;
37 padding: 0;
38 margin-bottom: 34px;
39 -webkit-user-select: none;
40 -webkit-transition: height .5s, opacity .5s;
41 }
42
43 @-webkit-keyframes 'thumbnail-enter' {
44 /* 2.5s */
45 0%, 20% {
46 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
47 -webkit-border-radius: 4px;
48 }
49
50 100% {
51 -webkit-border-top-left-radius: 0;
52 -webkit-border-top-right-radius: 0;
53 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
54 }
55 }
56
57 @-webkit-keyframes 'edit-mode-border-enter' {
58 /* 2.5s */
59 0%, 20% {
60 background-color: hsla(213, 66%, 57%, 0);
61 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
62 }
63
64 100% {
65 background-color: hsla(213, 66%, 57%, 1);
66 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
67 }
68 }
69
70 @-webkit-keyframes 'edit-bar-enter' {
71 /* 2.5s */
72 0%, 20% {
73 opacity: 0;
74 pointer-events: none;
75 }
76
77 100% {
78 opacity: 1;
79 pointer-events: inherit;
80 }
81 }
82
83 .thumbnail-container {
84 position: absolute;
85 -webkit-transition: top .5s, left .5s;
86 color: black;
87 text-decoration: none;
88 -webkit-transition: left .5s, top .5s;
89 }
90
91 .thumbnail,
92 .thumbnail-container .title {
93 width: 212px; /* natural size is 196 */
94 height: 132px; /* 136 */
95 -webkit-transition: width .5s, height .5s;
96 }
97
98 .small .thumbnail,
99 .small .thumbnail-container .title {
100 width: 150px;
101 height: 93px;
102 }
103
104 .thumbnail-wrapper {
105 display: block;
106 -webkit-background-size: 212px 132px;
107 background: no-repeat 4px 4px;
108 background-color: white;
109 -webkit-border-radius: 5px;
110 -webkit-transition: -webkit-background-size .5s;
111 }
112
113 .small .thumbnail-wrapper {
114 -webkit-background-size: 150px 93px;
115 }
116
117 .filler * {
118 visibility: hidden;
119 }
120
121 .filler {
122 pointer-events: none;
123 }
124
125 .filler .thumbnail-wrapper {
126 visibility: inherit;
127 border: 1px solid hsl(0, 0%, 90%);
128 background-color: hsl(0, 0%, 95%);
129 -webkit-border-radius: 2px;
130 display: block;
131 }
132
133 .filler .thumbnail-wrapper .thumbnail {
134 visibility: visible;
135 border-color: hsl(0, 0%, 90%);
136 background-color: hsl(0, 0%, 95%);
137 }
138
139 .edit-bar {
140 opacity: 0;
141 pointer-events: none;
142 display: -webkit-box;
143 -webkit-box-orient: horizontal;
144 -webkit-box-align: stretch;
145 padding: 3px;
146 padding-bottom: 0;
147 height: 17px; /* 23 - 2 * 3 */
148 -webkit-transition: opacity .5s;
149 cursor: move;
150 font-size: 100%;
151 line-height: 17px;
152 background-image: -webkit-gradient(linear, left top, left bottom,
153 from(hsl(213, 87%, 67%)),
154 to(hsl(213, 66%, 57%)));
155 -webkit-border-top-left-radius: 4px;
156 -webkit-border-top-right-radius: 4px;
157 }
158
159 .edit-bar > * {
160 display: block;
161 position: relative;
162 }
163
164 .thumbnail-container:hover .edit-bar {
165 -webkit-animation: 'edit-bar-enter' 2.5s;
166 opacity: 1;
167 pointer-events: inherit;
168 }
169
170 .edit-bar > .spacer {
171 -webkit-box-flex: 1;
172 }
173
174 .edit-bar > .pin,
175 .edit-bar > .remove {
176 width: 16px;
177 height: 16px;
178 cursor: pointer;
179 background-image: no-repeat 50% 50%;
180 }
181
182 .edit-bar > .pin {
183 background-image: url(chrome://theme/newtab_pin_off);
184 }
185
186 .edit-bar > .pin:hover {
187 background-image: url(chrome://theme/newtab_pin_off_h);
188 }
189
190 .edit-bar > .pin:active {
191 background-image: url(chrome://theme/newtab_pin_off_p);
192 }
193
194 .pinned .edit-bar > .pin {
195 background-image: url(chrome://theme/newtab_pin_on);
196 }
197
198 .pinned .edit-bar > .pin:hover {
199 background-image: url(chrome://theme/newtab_pin_on_h);
200 }
201
202 .pinned .edit-bar > .pin:active {
203 background-image: url(chrome://theme/newtab_pin_on_p);
204 }
205
206 .edit-bar > .remove {
207 background-image: url(chrome://theme/newtab_close);
208 }
209
210 .edit-bar > .remove:hover {
211 background-image: url(chrome://theme/newtab_close_h);
212 }
213
214 .edit-bar > .remove:active {
215 background-image: url(chrome://theme/newtab_close_p);
216 }
217
218 :link,
219 :visited,
220 .link,
221 .thumbnail-container a {
222 cursor: pointer;
223 text-decoration: underline;
224 color: hsl(213, 90%, 24%);
225 }
226
227 .thumbnail-container .title,
228 .small .thumbnail-container .title {
229 line-height: 16px;
230 height: 16px;
231 margin: 0;
232 margin-top: 4px;
233 font-size: 100%;
234 font-weight:normal;
235 padding: 0 3px;
236 opacity: 1;
237 -webkit-transition: opacity .5s;
238 color: black;
239 }
240
241 .thumbnail-container .title div {
242 white-space: nowrap;
243 overflow: hidden;
244 text-overflow: ellipsis;
245
246 background: no-repeat 0 50%;
247 -webkit-background-size: 16px;
248 padding-left: 20px; /* we cannot use padding start here because even if we set
249 the direction we always want the icon on the same side
250 */
251 padding-right: 0;
252 }
253
254 html[dir=rtl] .thumbnail-container .title div {
255 background-position-x: 100%;
256 padding-left: 0;
257 padding-right: 20px;
258 text-align: right;
259 }
260
261 .thumbnail {
262 border: 3px solid hsla(213, 63%, 93%, 1);
263 padding: 1px;
264 -webkit-border-radius: 5px;
265 display: block;
266 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
267 -webkit-transition: width .5s, height .5s, border-color .5s,
268 -webkit-border-radius .5s, -webkit-box-shadow .5s;
269 }
270
271 .edit-mode-border {
272 -webkit-border-radius: 4px;
273 background-color: hsla(213, 54%, 95%, 0);
274 }
275
276 .thumbnail-container:hover .thumbnail {
277 -webkit-animation: 'thumbnail-enter' 2.5s;
278 border-color: hsla(213, 66%, 57%, 1);
279 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0);
280 -webkit-border-top-left-radius: 0;
281 -webkit-border-top-right-radius: 0;
282
283 background-image: -webkit-gradient(linear, left top, left bottom,
284 from(hsla(0, 0%, 0%, 0)),
285 color-stop(0.85, hsla(0, 0%, 47%, 0)),
286 to(hsla(0, 0%, 47%, 0.2))
287 );
288 }
289
290 .thumbnail-container:hover .edit-mode-border {
291 -webkit-animation: 'edit-mode-border-enter' 2.5s;
292 background-color: hsla(213, 66%, 57%, 1);
293 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
294 }
295
296 .dragging {
297 -webkit-transition: none;
298 }
299
300 .dragging .title {
301 opacity: 0;
302 }
303
304 .list .dragging .title {
305 opacity: 1;
306 }
307
308 .hide {
309 opacity: 0 !important;
310 visibility: hidden !important;
311 }
312
313 @-webkit-keyframes 'fade-in' {
314 0% {
315 opacity: 0;
316 }
317
318 100% {
319 opacity: 1;
320 }
321 }
322
323 .fade-in {
324 -webkit-animation: 'fade-in' 2.5s;
325 }
326
327 /* Notification */
328
329 #notification {
330 position: relative;
331 background-color: hsl(52, 100%, 80%);
332 -webkit-border-radius: 4px;
333 padding: 8px 16px;
334 white-space: nowrap;
335 display: table;
336 margin: 10px auto;
337 font-weight: bold;
338 opacity: 0;
339 visibility: hidden;
340 -webkit-transition: opacity 1s;
341 z-index: 1;
342 }
343
344 #notification > * {
345 display: table-cell;
346 max-width: 500px;
347 overflow: hidden;
348 text-overflow: ellipsis;
349 }
350
351 .small #notification > * {
352 max-width: 300px;
353 }
354
355 #notification:hover,
356 #notification.show {
357 opacity: 1;
358 visibility: inherit;
359 }
360
361 #notification .link {
362 -webkit-margin-start: 20px;
363 }
364
365 /* List mode */
366
367 .list .thumbnail,
368 .list .edit-bar {
369 display: none;
370 }
371
372 .list .title,
373 .small .list .title {
374 width: auto;
375 }
376
377 .list .thumbnail-container {
378 -webkit-box-sizing: border-box;
379 }
380
381 .list .title,
382 .small .list .title {
383 font-size: 140%;
384 line-height: 40px;
385 height: 40px;
386 color: hsl(213, 27%, 68%);
387 text-decoration: underline;
388 }
389
390 .list .title div {
391 color: rgb(6, 45, 117);
392 }
393
394 .section {
395 background: white;
396 -webkit-border-radius: 4px;
397 white-space: nowrap;
398 text-overflow: ellipsis;
399 border: 1px solid hsl(213, 65%, 92%);
400 padding-bottom: 5px;
401 overflow: hidden;
402 min-height: 198px; /* height of 6 items plus the header */
403 vertical-align: top;
404 margin: 0;
405 }
406
407 .section > h2 {
408 background-image: -webkit-gradient(linear, left top, left bottom,
409 from(hsl(213, 87%, 67%)),
410 to(hsl(213, 66%, 57%)));
411 -webkit-border-top-left-radius: 2px;
412 -webkit-border-top-right-radius: 2px;
413 padding: 4px 8px;
414 color: white;
415 font-size: 100%;
416 margin: 0px;
417 }
418
419 .item {
420 background: no-repeat 0% 50%;
421 padding: 2px;
422 padding-left: 18px;
423 -webkit-background-size: 16px;
424 background-color: hsla(213, 63%, 93%, 0);
425 display: block;
426 line-height: 20px;
427 -webkit-box-sizing: border-box;
428 white-space: nowrap;
429 overflow: hidden;
430 text-overflow: ellipsis;
431 text-decoration: none;
432 font-size: 100%;
433 }
434
435 html[dir='rtl'] .item {
436 background-position-x: 100%;
437 padding-right: 18px;
438 padding-left: 2px;
439 text-align: right;
440 }
441
442 .window {
443 position: relative;
444 overflow: visible; /* We use visible so that the menu can be a child and shown
445 on :hover. To get this to work we have to set visibility
446 to visible which unfortunately breaks the ellipsis for t
447 he window items */
448 background-image: url(chrome://theme/newtab_closed_window);
449 }
450
451 .window-menu {
452 position: absolute;
453 display: none;
454 border: 1px solid #999;
455 -webkit-box-shadow: 5px 5px 10px hsla(0, 0%, 0%, .3);
456 background-color: white;
457 width: 157px;
458 left: 0;
459 white-space: nowrap;
460 opacity: .9;
461 z-index: 1;
462 pointer-events: none;
463 padding: 1px;
464 }
465
466 .hbox {
467 display: -webkit-box;
468 -webkit-box-orient: horizontal;
469 }
470
471 #recent-tabs,
472 #downloads {
473 -webkit-box-flex: 1;
474 width: 50%;
475 }
476
477 .section h3 {
478 padding: 8px 5px;
479 padding-bottom: 0;
480 font-size: 80%;
481 font-weight: normal;
482 margin: 0;
483 -webkit-margin-start: 2px;
484 overflow: hidden;
485 text-overflow: ellipsis;
486 }
487
488 .item-container {
489 margin: 0 5px;
490 text-decoration: underline;
491 color: hsl(213, 27%, 68%);
492 }
493
494 .item.nav:after {
495 content: '\00bb'; /* raque gets flipped automatically in rtl */
496 font-size: 120%;
497 -webkit-padding-start: 2px;
498 }
499
500 #recent-activities {
501 -webkit-transition: width .5s, opacity .5s;
502 }
503
504 .section {
505 -webkit-box-flex: 1;
506 width: 50%;
507 display: inline-block;
508 }
509
510 #view-toolbar {
511 -webkit-user-select: none;
512 text-align: right;
513 position: relative;
514 top: 35px;
515 }
516
517 html[dir='rtl'] #view-toolbar {
518 text-align: left;
519 }
520
521 #view-toolbar input {
522 -webkit-appearance: none;
523 background-color: transparent;
524 width: 19px;
525 height: 17px;
526 margin: 0;
527 border: 0;
528 padding: 0;
529 vertical-align: top;
530 -webkit-margin-start: 5px;
531 }
532
533 #lower-sections {
534 position: relative;
535 overflow: hidden;
536 -webkit-transition: height .5s, width .5s, opacity .5s;
537 white-space: nowrap;
538 }
539
540 #lower-sections .section {
541 -webkit-transition: width .5s, opacity .5s, left .5s;
542 -webkit-box-sizing: border-box;
543 }
544
545 #lower-sections .spacer {
546 width: 20px;
547 -webkit-transition: width .5s;
548 display: inline-block;
549 }
550
551 .loading * {
552 -webkit-transition: none;
553 }
554
555 #thumb-checkbox {
556 background-image: url(chrome://theme/newtab_thumb_off);
557 }
558
559 #thumb-checkbox:hover {
560 background-image: url(chrome://theme/newtab_thumb_off_h);
561 }
562
563 #thumb-checkbox:active {
564 background-image: url(chrome://theme/newtab_thumb_off_p);
565 }
566
567 #thumb-checkbox:checked {
568 background-image: url(chrome://theme/newtab_thumb_on);
569 }
570
571 #thumb-checkbox:checked:hover {
572 background-image: url(chrome://theme/newtab_thumb_on_h);
573 }
574
575 #thumb-checkbox:checked:active {
576 background-image: url(chrome://theme/newtab_thumb_on_p);
577 }
578
579 #list-checkbox {
580 background-image: url(chrome://theme/newtab_list_off);
581 }
582
583 #list-checkbox:hover {
584 background-image: url(chrome://theme/newtab_list_off_h);
585 }
586
587 #list-checkbox:active {
588 background-image: url(chrome://theme/newtab_list_off_p);
589 }
590
591 #list-checkbox:checked {
592 background-image: url(chrome://theme/newtab_list_on);
593 }
594
595 #list-checkbox:checked:hover {
596 background-image: url(chrome://theme/newtab_list_on_h);
597 }
598
599 #list-checkbox:checked:active {
600 background-image: url(chrome://theme/newtab_list_on_p);
601 }
602
603 #option-button {
604 background-image: url(chrome://theme/newtab_option);
605 }
606
607 #option-button:hover {
608 background-image: url(chrome://theme/newtab_option_h);
609 }
610
611 #option-button:active {
612 background-image: url(chrome://theme/newtab_option_p);
613 }
614
615 #option-menu {
616 -webkit-user-select: none;
617 position: absolute;
618 right: 0;
619 left: auto;
620 top: 53px; /* Position this below the option button. The option button
621 is positioned 35px from the top and has a height of 17px. We add
622 one to get some spacing there as well: 35 + 17 + 1 = 53 */
623 cursor: default;
624 pointer-events: all;
625 min-width: 175px;
626 }
627
628 html[dir='rtl'] #option-menu {
629 right: auto;
630 left: 0;
631 }
632
633 #option-menu > div {
634 padding: 3px 8px;
635 overflow: hidden;
636 text-overflow: ellipsis;
637 }
638
639 #option-menu > [selected] {
640 background-color: hsla(213, 66%, 57%, 1);
641 color: white;
642 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698