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

Side by Side Diff: client/samples/swarm/swarm.css

Issue 9314024: Final CL to kill off client/samples . (Closed) Base URL: http://dart.googlecode.com/svn/branches/bleeding_edge/dart/
Patch Set: Created 8 years, 10 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
« no previous file with comments | « client/samples/swarm/sliderarrow.svg ('k') | client/samples/swarm/swarm.dart » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /* File generated by SCSS from source swarm.scss
2 * Do not edit.
3 */
4
5 /****** @include ../../view/resources/view.css ******/
6
7 .hbox, .vbox {
8 display: -moz-box;
9 display: -webkit-box;
10 -moz-box-align: stretch;
11 -webkit-box-align: stretch;
12 overflow: hidden;
13 }
14
15 .vbox {
16 -moz-box-orient: vertical;
17 -webkit-box-orient: vertical;
18 }
19
20 .hbox {
21 -moz-box-orient: horizontal;
22 -webkit-box-orient: horizontal;
23 }
24
25 .center {
26 -moz-box-pack: center;
27 -webkit-box-pack: center;
28 }
29
30 .paged-content, .fullpage {
31 position: absolute;
32 left: 0;
33 right: 0;
34 top: 0;
35 bottom: 0;
36 overflow: hidden;
37 }
38
39 .flex-item {
40 -webkit-box-flex: 1;
41 -moz-box-flex: 1;
42 box-flex: 1;
43 }
44
45 .flex {
46 -moz-box-flex: 1;
47 -webkit-box-flex: 1;
48 }
49
50 .conveyor-view, .conveyor-item {
51 overflow: hidden;
52 left: 0;
53 right: 0;
54 top: 0;
55 bottom: 0;
56 }
57
58 .conveyor-view-container {
59 overflow: visible;
60 position: absolute;
61 width: 100%;
62 height: 100%;
63 }
64
65 .paged-column-container {
66 overflow: visible;
67 position: absolute;
68 left: 0;
69 right: 0;
70 top: 0;
71 bottom: 0;
72 }
73
74 .paged-column {
75 overflow: hidden;
76 }
77
78 .page-number-left, .page-number-label, .page-number-right {
79 display: inline-block;
80 }
81
82 .page-number-left, .page-number-right {
83 cursor: pointer;
84 }
85
86 .sm-item {
87 font-size: 16px;
88 text-transform: uppercase;
89 text-align: center;
90 color: #c8c8c8;
91 padding-left: 20px;
92 padding-right: 20px;
93 }
94
95 .sm-item-box {
96 display: -moz-box;
97 display: -webkit-box;
98 padding-top: 5px;
99 -moz-box-orient: horizontal;
100 -webkit-box-orient: horizontal;
101 -webkit-box-pack: center;
102 }
103
104 .sm-root {
105 background-color: #191919;
106 position: relative;
107 z-index: 1;
108 height: 32px;
109 border-bottom: 3px solid #73c6f5;
110 -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, .6);
111 -webkit-transition-property: -webkit-transform;
112 -webkit-transition-duration: 0.4s;
113 }
114
115 .sm-root.hidden {
116 -webkit-transform: translate3d(0px, -46px, 0px);
117 }
118
119 .sm-item.sel {
120 color: #74c6f5;
121 }
122
123 .sm-slider-box {
124 padding-bottom: 0;
125 display: -moz-box;
126 display: -webkit-box;
127 -moz-box-orient: horizontal;
128 -webkit-box-orient: horizontal;
129 }
130
131 .sm-triangle {
132 border-color: transparent transparent #73c6f5 transparent;
133 border-style: solid;
134 border-width: 9px;
135 margin-top: -9px;
136 position: relative;
137 top: 1px;
138 }
139
140 .invisible {
141 opacity: 0;
142 visibility: hidden;
143 }
144 /****** End of ../../view/resources/view.css ******/
145
146 /****** @include ../../touch/resources/touch.css ******/
147
148 .touch-scrollbar {
149 position: absolute;
150 background: rgba(127, 127, 127, 0.4);
151 -webkit-transition: opacity 300ms;
152 z-index: 1000;
153 }
154
155 .touch-scrollbar.drag, .touch-scrollbar:hover {
156 background: rgba(127, 127, 127, 0.8);
157 }
158
159 .touch-scrollbar-vertical {
160 height: 30px;
161 width: 7px;
162 right: 1px;
163 }
164
165 .touch-scrollbar-horizontal {
166 width: 30px;
167 height: 7px;
168 bottom: 1px;
169 }
170 /****** End of ../../touch/resources/touch.css ******/
171
172
173 html {
174 height: 100%;
175 width: 100%;
176 }
177
178 body {
179 background: #ffffff;
180 font-weight: normal;
181 font-family: arial, sans-serif;
182 font-size: 13px;
183 margin: 0 0 0 0;
184 height: 100%;
185 width: 100%;
186 color: #222;
187 overflow: hidden;
188 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
189 }
190
191 h1 {
192 font-family: arial, sans-serif;
193 font-size: 36px;
194 color: #72c3f2;
195 text-align: center;
196 margin-bottom: 0;
197 }
198
199 h2 {
200 font-size: 16px;
201 font-weight: normal;
202 text-overflow: ellipsis;
203 text-wrap: none;
204 white-space: nowrap;
205 }
206
207 button {
208 vertical-align: top;
209 }
210
211 div {
212 outline: none;
213 }
214
215 input {
216 resize: none;
217 border: inset #aaa 1px;
218 margin: 2px;
219 padding: 1px 2px 2px 2px;
220 overflow: hidden;
221 white-space: nowrap;
222 }
223
224 .sm-root.hidden {
225 -webkit-transform: translate3d(0, 40px, 0);
226 }
227
228 input:focus {
229 border: solid #88f 2px;
230 outline: none;
231 margin: 1px;
232 }
233
234 .front-view {
235 background: #ffffff;
236 overflow: hidden;
237 }
238
239 .bottom-view {
240 position: absolute;
241 left: 0;
242 top: 51px;
243 bottom: 0;
244 }
245
246 .top-view {
247 position: absolute;
248 left: 0;
249 right: 0;
250 z-index: 30;
251 overflow: hidden;
252 -webkit-transition-duration: 0.45s;
253 }
254
255 .query {
256 position: absolute;
257 -webkit-transition-duration: 0.45s;
258 top: 0;
259 width: 257px;
260 bottom: 0;
261 background: #ffffff;
262 border-left: 1px solid #F5F5F5;
263 border-right: 1px solid #F5F5F5;
264 }
265
266 .query.sel {
267 z-index: 29 !important;
268 border-left: 1px solid #D2D2D2;
269 border-right: 1px solid #D2D2D2;
270 visibility: visible !important;
271 opacity: 1 !important;
272 }
273
274 .query h2 {
275 color: #1155CC;
276 padding: 20px 16px 16px 16px;
277 left: 0;
278 right: 0;
279 overflow: hidden;
280 text-overflow: ellipsis;
281 margin: 0;
282 box-sizing: border-box;
283 ms-box-sizing: border-box;
284 -webkit-box-sizing: border-box;
285 z-index: 10;
286 position: absolute;
287 font: bold 14px Arial, sans-serif;
288 }
289
290 .query-name-shadow {
291 position: absolute;
292 left: 0;
293 right: 0;
294 height: 15px;
295 top: 39px;
296 background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255 , 255, 0)), to(rgba(255, 255, 255, 1)));
297 overflow: hidden;
298 z-index: 3;
299 }
300
301 .section-view {
302 -webkit-transition-property: -webkit-transform, opacity;
303 -webkit-transition-duration: 0.45s;
304 opacity: 0.6;
305 position: absolute;
306 left: 0;
307 right: 0;
308 top: 51px;
309 bottom: 0;
310 overflow: hidden;
311 }
312
313 .loading-section {
314 position: absolute;
315 left: 0;
316 right: 0;
317 top: 0;
318 bottom: 0;
319 }
320
321 .touch-scrollbar {
322 position: absolute;
323 background: #888;
324 opacity: 0.4;
325 -webkit-transition-property: opacity;
326 -webkit-transition-duration: 0.3s;
327 z-index: 1000;
328 }
329
330 .touch-scrollbar.drag, .touch-scrollbar:hover {
331 opacity: 0.8;
332 }
333
334 .story-section {
335 margin-left: 0;
336 margin-right: 0;
337 left: 0;
338 right: 0;
339 top: 39px;
340 bottom: 0;
341 overflow: hidden;
342 position: absolute;
343 }
344
345 .story {
346 position: absolute;
347 left: 0;
348 right: 0;
349 box-sizing: border-box;
350 ms-box-sizing: border-box;
351 -webkit-box-sizing: border-box;
352 margin: 0;
353 border: 1px solid #F5F5F5;
354 line-height: 18px;
355 min-height: 92px;
356 }
357
358 .story:active, .story.sel {
359 box-shadow: inset 4px 0 4px -2px #4d90f0;
360 -webkit-box-shadow: inset 4px 0 4px -2px #4d90f0;
361 }
362
363 .story img {
364 position: absolute;
365 width: 57px;
366 height: 57px;
367 z-index: 20;
368 -webkit-transition-property: opacity;
369 -webkit-transition-duration: 0.45s;
370 opacity: 0.6;
371 }
372
373 .snippet, .story .title {
374 white-space: nowrap;
375 text-overflow: ellipsis;
376 overflow: hidden;
377 }
378
379 .snippet {
380 margin-top: -5px;
381 font: normal 13px arial, sans-serif;
382 line-height: 18px;
383 opacity: 0.6;
384 }
385
386 .story .title {
387 font-weight: bold;
388 margin-left: 75px;
389 line-height: 18px;
390 height: 38px;
391 opacity: 0.6;
392 }
393
394 .story.no-thumb .title, .story.no-thumb .byline {
395 left: 16px;
396 }
397
398 .story-shadow {
399 position: absolute;
400 left: 2px;
401 right: 2px;
402 height: 31px;
403 top: -32px;
404 overflow: hidden;
405 z-index: 2;
406 }
407
408 .story .byline, .story .dateline {
409 color: #999;
410 font-size: 12px;
411 line-height: 18px;
412 }
413
414 .story .dateline {
415 position: relative;
416 top: -18px;
417 }
418
419 .story .dateline {
420 text-align: right;
421 opacity: 0.6;
422 line-height: 18px;
423 }
424
425 .story .byline {
426 margin-left: 75px;
427 text-overflow: ellipsis;
428 white-space: nowrap;
429 opacity: 0.6;
430 display: inline-box;
431 }
432
433 .story.story-unread .dateline, .story.story-unread .text, .story.story-unread .t itle, .story.story-unread .byline, .story.story-unread img, .story.story-unread .caption {
434 opacity: 1;
435 }
436
437 .story .text {
438 top: 3px;
439 height: 90px;
440 opacity: 0.6;
441 }
442
443 .story {
444 position: absolute;
445 left: 0;
446 right: 0;
447 padding: 16px;
448 overflow: hidden;
449 }
450
451 .story-view {
452 position: absolute;
453 left: 260px;
454 right: 0;
455 top: 51px;
456 bottom: 0;
457 line-height: 18px;
458 overflow: hidden;
459 -webkit-animation-timing-function: ease-in;
460 -webkit-transition-duration: 0.45s;
461 -webkit-text-size-adjust: none;
462 }
463
464 .paged-column {
465 position: absolute;
466 top: 100px;
467 left: 20px;
468 bottom: 45px;
469 right: 20px;
470 }
471
472 .page-number {
473 position: absolute;
474 z-index: 1;
475 right: -40px;
476 bottom: -40px;
477 padding-left: 0px;
478 padding-top: 0px;
479 padding-right: 50px;
480 padding-bottom: 50px;
481 background: #ffffff;
482 box-shadow: -16px -16px 24px #ffffff;
483 -webkit-box-shadow: -16px -16px 24px #ffffff;
484 font-size: 16px;
485 color: rgba(0, 0, 0, 0.5);
486 text-align: center;
487 -webkit-user-select: none;
488 }
489
490 .page-number-left, .page-number-right {
491 min-width: 25px;
492 font-size: 22px;
493 font-weight: bold;
494 }
495
496 .page-number-label {
497 min-width: 60px;
498 }
499
500 .story-content {
501 -webkit-column-width: 300px;
502 -webkit-column-gap: 26px;
503 }
504
505 .story-content img {
506 max-width: 100% !important;
507 max-height: 70% !important;
508 width: auto !important;
509 height: auto !important;
510 }
511
512 .story-content a {
513 color: #15C;
514 }
515
516 .story-content a:visited {
517 color: #61c;
518 }
519
520 .story-image {
521 margin: 10px;
522 width: 200px;
523 }
524
525 .story-text-view {
526 padding: 20px;
527 left: 0;
528 right: 0;
529 top: 0;
530 bottom: 0;
531 position: absolute;
532 overflow: hidden;
533 }
534
535 .story-text-view {
536 box-sizing: border-box;
537 ms-box-sizing: border-box;
538 -webkit-box-sizing: border-box;
539 -moz-box-sizing: border-box;
540 }
541
542 .story-text-view .story-header {
543 margin-bottom: 10px;
544 padding-bottom: 2px;
545 border-bottom: 1px solid #d2d2d2;
546 font-weight: bold;
547 }
548
549 .story-text-view .story-header .story-title {
550 font-weight: bold;
551 color: #15C;
552 font-size: 18px;
553 margin-bottom: 5px;
554 text-overflow: ellipsis;
555 text-wrap: none;
556 white-space: nowrap;
557 width: 100%;
558 display: block;
559 overflow: hidden;
560 }
561
562 .story-title:link, .story-title:visited {
563 text-decoration: none;
564 }
565
566 .story-title:hover {
567 text-decoration: underline;
568 }
569
570 .story-text-view .story-header .story-byline {
571 font-weight: bold;
572 color: #333;
573 font-size: 15px;
574 padding-top: 3px;
575 padding-bottom: 3px;
576 text-overflow: ellipsis;
577 text-wrap: none;
578 white-space: nowrap;
579 }
580
581 .story-text-view .story-header .story-dateline {
582 font-weight: normal;
583 color: #999;
584 font-size: 12px;
585 padding-top: 3px;
586 padding-bottom: 3px;
587 text-overflow: ellipsis;
588 text-wrap: none;
589 white-space: nowrap;
590 }
591
592 .header-view {
593 height: 54px;
594 z-index: 2;
595 overflow: hidden;
596 position: relative;
597 background-color: #F5F5F5;
598 border-bottom: 1px solid #d2d2d2;
599 }
600
601 .app-title {
602 font-size: 20px;
603 color: #484848;
604 padding-left: 22px;
605 padding-top: 0;
606 padding-bottom: 10px;
607 position: absolute;
608 left: 0;
609 top: 17px;
610 cursor: pointer;
611 -webkit-transition-property: left;
612 -webkit-transition-duration: 0.45s;
613 }
614
615 .app-title.in-story {
616 left: 50px;
617 }
618
619 .back-arrow {
620 background-image: url(back-21.png);
621 width: 10px;
622 height: 15px;
623 margin: 10px 15px;
624 position: absolute;
625 left: -100px;
626 -webkit-transition-property: left;
627 -webkit-transition-duration: 0.45s;
628 }
629
630 .back-arrow.in-story {
631 left: 0;
632 }
633
634 .config {
635 background-image: url(settings-21.png);
636 position: absolute;
637 right: 120px;
638 -webkit-transition-property: right;
639 -webkit-transition-duration: 0.45s;
640 }
641
642 .config.in-story {
643 right: -60px;
644 }
645
646 .refresh {
647 background-image: url(refresh-21.png);
648 right: 60px;
649 position: absolute;
650 -webkit-transition-property: right;
651 -webkit-transition-duration: 0.45s;
652 }
653
654 .refresh.in-story {
655 right: -160px;
656 }
657
658 #dart-logo {
659 height: 21px;
660 padding-left: 25px;
661 background: url(Dart_Logo_21.png) no-repeat;
662 }
663
664 .info-button {
665 background: url(info.svg);
666 background-size: 55%;
667 margin: 13px;
668 position: absolute;
669 right: 0;
670 -webkit-transition-property: right;
671 -webkit-transition-duration: 0.45s;
672 }
673
674 .info-button.in-story {
675 right: -260px;
676 }
677
678 .new-window-button {
679 background-image: url(externallink.svg);
680 background-size: 100% 100%;
681 width: 24px;
682 height: 24px;
683 top: 43px;
684 right: 220px;
685 position: absolute;
686 }
687
688 .web-back-button, .web-forward-button {
689 width: 24px;
690 height: 24px;
691 top: 43px;
692 position: absolute;
693 }
694
695 .web-back-button {
696 background-image: url(lefttriangle.svg);
697 right: 302px;
698 }
699
700 .web-forward-button {
701 background-image: url(righttriangle.svg);
702 right: 260px;
703 }
704
705 .web-view-button, .text-view-button {
706 width: 80px;
707 height: 24px;
708 top: 45px;
709 border: solid 1px #D9D9D9;
710 background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to( #F1F1F1));
711 font-size: 13px;
712 position: absolute;
713 text-align: center;
714 }
715
716 .web-view-button {
717 right: 40px;
718 }
719
720 .text-view-button {
721 right: 120px;
722 }
723
724 .web-view-button.active, .text-view-button.active {
725 background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#E0 E0E0));
726 border-color: #BBB;
727 box-shadow: inset 0 1px 5px #ccc;
728 -moz-box-shadow: inset 0 1px 5px #ccc;
729 -webkit-box-shadow: inset 0 1px 5px #ccc;
730 }
731
732 .config, .refresh, .info-button, .back-arrow {
733 opacity: 0.5;
734 border: 1px solid #C8C8C8;
735 color: #444;
736 border-radius: 2px;
737 width: 47px;
738 height: 29px;
739 margin: 12px;
740 background-position: center;
741 background-repeat: no-repeat;
742 }
743
744 .config:hover, .refresh:hover, .info-button:hover, .back-arrow:hover {
745 opacity: 1;
746 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
747 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
748 }
749
750 button, .button, .sm-item {
751 cursor: pointer;
752 }
753
754 .sm-root {
755 border-bottom: none;
756 background-color: transparent;
757 -webkit-box-shadow: none;
758 height: 44px;
759 overflow: hidden;
760 position: absolute;
761 top: 16px;
762 left: 120px;
763 z-index: 3;
764 }
765
766 .data-source-view {
767 left: 0;
768 right: 0;
769 top: 0;
770 bottom: 0;
771 position: absolute;
772 }
773
774 .data-source-view>div {
775 height: 100%;
776 position: relative;
777 }
778
779 .sm-item-box {
780 -webkit-box-pack: start;
781 }
782
783 .sm-triangle {
784 width: 22px;
785 border: none;
786 top: 14px;
787 height: 15px;
788 background-image: url(sliderarrow.svg);
789 }
790
791 .sm-item.sel {
792 color: #d14836;
793 }
794
795 .sm-item {
796 font: 16px arial, sans-serif;
797 text-transform: none;
798 color: #484848;
799 }
800
801 .button:active, .sm-item:active {
802 opacity: 0.5;
803 }
804
805 .dialog-modal {
806 width: 100%;
807 height: 100%;
808 display: -webkit-box;
809 -webkit-box-align: center;
810 -webkit-box-pack: center;
811 background-color: rgba(200, 200, 200, 0.6);
812 z-index: 40;
813 position: absolute;
814 }
815
816 .dialog {
817 border: 1px solid #CCC;
818 width: 250px;
819 padding: 20px;
820 background-color: #ffffff;
821 box-shadow: -1px 3px 3px rgba(0, 0, 0, 0.1);
822 -webkit-box-shadow: -1px 3px 3px rgba(0, 0, 0, 0.1);
823 }
824
825 .dialog-title-area {
826 font-size: 19px;
827 padding: 0 0 10px 0;
828 }
829
830 .dialog-title {
831 vertical-align: middle;
832 }
833
834 .dialog-body {
835 color: #0;
836 padding: 10px 0 0 0;
837 }
838
839 .done-button {
840 float: right;
841 }
842
843 .hidden-story {
844 -webkit-animation-timing-function: ease-in;
845 opacity: 0;
846 }
847
848 .header-background {
849 background: #0;
850 width: 100%;
851 }
852
853 #appSplash .header {
854 height: 54px;
855 z-index: 2;
856 overflow: hidden;
857 position: relative;
858 background-color: #F5F5F5;
859 border-bottom: 1px solid #d2d2d2;
860 }
861
862 #appSplash .title {
863 font-size: 20px;
864 color: #484848;
865 padding-left: 22px;
866 padding-top: 0;
867 padding-bottom: 10px;
868 position: absolute;
869 left: 0;
870 top: 15px;
871 }
872
873 #appSplash .splash {
874 font-size: 24px;
875 position: absolute;
876 top: 173px;
877 bottom: 0;
878 left: 0;
879 right: 0;
880 text-align: center;
881 }
882
883 #appSplash .footer {
884 font-size: 10px;
885 color: rgba(0, 0, 0, 0.6);
886 position: absolute;
887 left: 5px;
888 bottom: 5px;
889 }
890
891 #appSplash .footer A:link, A:visited {
892 text-decoration: none;
893 color: rgba(0, 0, 0, 0.6);
894 }
895
896 #appSplash .footer A:hover {
897 text-decoration: underline;
898 color: rgba(0, 0, 0, 0.6);
899 }
900
901 #appSplash {
902 position: absolute;
903 left: 0;
904 right: 0;
905 top: 0;
906 bottom: 0;
907 z-index: 50;
908 background: #fff;
909 }
910 @-webkit-keyframes pulsate {
911 0% {
912 -webkit-transform: translate3d(0, 0, 0) scale(1.0);
913 }
914 50% {
915 -webkit-transform: scale(1.5) translate3d(0, 20px, 0);
916 }
917 100% {
918 -webkit-transform: translate3d(0, 0, 0) translate3d(0, 0, 0);
919 }
920 }
921
922 #appSplash .splashImg {
923 position: absolute;
924 left: 140px;
925 width: 640px;
926 height: 480px;
927 background-image: url(pigeons-jumpinjimmyjava-white90pct-q70.jpg);
928 -webkit-animation-name: pulsate;
929 -webkit-animation-iteration-count: infinite;
930 -webkit-animation-timing-function: ease-in-out;
931 -webkit-animation-duration: 5s;
932 }
933
934 .section-view.hide-all-queries .data-source-view .query, .section-view.hide-all- queries .page-number {
935 opacity: 0;
936 }
937
938 .transparent {
939 opacity: 0;
940 }
941
942 .query {
943 width: 297px;
944 }
945
946 .story-view {
947 left: 300px;
948 }
949
950 .story-shadow {
951 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255 , 255, 0)), to(rgba(255, 255, 255, 1)), color-stop(0.7, rgba(255, 255, 255, 1))) ;
952 }
OLDNEW
« no previous file with comments | « client/samples/swarm/sliderarrow.svg ('k') | client/samples/swarm/swarm.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698