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

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

Issue 8036002: ntp: remove ntp3 resources (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: . Created 9 years, 3 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 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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698