Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: skin/options.css

Issue 29333819: Issue 2375 - Implement "Blocking lists" section in new options page (Closed)
Patch Set: Created Jan. 28, 2016, 4:54 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2016 Eyeo GmbH 3 * Copyright (C) 2006-2016 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 184 matching lines...) Expand 10 before | Expand all | Expand 10 after
195 border-color: #CDCDCD transparent; 195 border-color: #CDCDCD transparent;
196 border-style: solid; 196 border-style: solid;
197 border-width: 1px; 197 border-width: 1px;
198 font-size: 16px; 198 font-size: 16px;
199 font-weight: 300; 199 font-weight: 300;
200 line-height: 1em; 200 line-height: 1em;
201 margin-top: -1px; 201 margin-top: -1px;
202 padding: 14px 20px; 202 padding: 14px 20px;
203 } 203 }
204 204
205 body[data-tab="general"] #tab-general, 205 body[data-tab|="general"] #tab-general,
206 body[data-tab="advanced"] #tab-advanced, 206 body[data-tab|="advanced"] #tab-advanced,
207 body[data-tab="help"] #tab-help 207 body[data-tab|="help"] #tab-help
208 { 208 {
209 background-color: #FFFFFF; 209 background-color: #FFFFFF;
210 border-radius: 3px 0px 0px 3px; 210 border-radius: 3px 0px 0px 3px;
211 border-width: 1px; 211 border-width: 1px;
212 font-weight: 600; 212 font-weight: 600;
213 -moz-border-start-color: #CDCDCD; 213 -moz-border-start-color: #CDCDCD;
214 -webkit-border-start-color: #CDCDCD; 214 -webkit-border-start-color: #CDCDCD;
215 -moz-margin-end: -1px; 215 -moz-margin-end: -1px;
216 -webkit-margin-end: -1px; 216 -webkit-margin-end: -1px;
217 -moz-margin-start: -1px; 217 -moz-margin-start: -1px;
218 -webkit-margin-start: -1px; 218 -webkit-margin-start: -1px;
219 -moz-padding-end: 21px; 219 -moz-padding-end: 21px;
220 -webkit-padding-end: 21px; 220 -webkit-padding-end: 21px;
221 -moz-padding-start: 21px; 221 -moz-padding-start: 21px;
222 -webkit-padding-start: 21px; 222 -webkit-padding-start: 21px;
223 } 223 }
224 224
225 html[dir="rtl"] body[data-tab="general"] #tab-general, 225 html[dir="rtl"] body[data-tab|="general"] #tab-general,
226 html[dir="rtl"] body[data-tab="advanced"] #tab-advanced, 226 html[dir="rtl"] body[data-tab|="advanced"] #tab-advanced,
227 html[dir="rtl"] body[data-tab="help"] #tab-help 227 html[dir="rtl"] body[data-tab|="help"] #tab-help
228 { 228 {
229 border-radius: 0px 3px 3px 0px; 229 border-radius: 0px 3px 3px 0px;
230 } 230 }
231 231
232 .tabs.vertical.bottom 232 .tabs.vertical.bottom
233 { 233 {
234 bottom: 0px; 234 bottom: 0px;
235 position: absolute; 235 position: absolute;
236 } 236 }
237 237
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after
322 #content-wrapper 322 #content-wrapper
323 { 323 {
324 position: relative; 324 position: relative;
325 } 325 }
326 326
327 #content-wrapper > div 327 #content-wrapper > div
328 { 328 {
329 display: none; 329 display: none;
330 } 330 }
331 331
332 body[data-tab="general"] #content-general, 332 body[data-tab|="general"] #content-general,
333 body[data-tab="advanced"] #content-advanced, 333 body[data-tab|="advanced"] #content-advanced,
334 body[data-tab="help"] #content-help 334 body[data-tab|="help"] #content-help
335 { 335 {
336 display: block; 336 display: block;
337 } 337 }
338 338
339 div.button 339 div.button
340 { 340 {
341 cursor: pointer; 341 cursor: pointer;
342 display: flex; 342 display: flex;
343 } 343 }
344 344
(...skipping 16 matching lines...) Expand all
361 361
362 .table.list li .display 362 .table.list li .display
363 { 363 {
364 flex: 1; 364 flex: 1;
365 line-height: 16px; 365 line-height: 16px;
366 overflow: hidden; 366 overflow: hidden;
367 text-overflow: ellipsis; 367 text-overflow: ellipsis;
368 white-space: nowrap; 368 white-space: nowrap;
369 } 369 }
370 370
371 .table.list li:nth-child(odd), 371 .table.list li:nth-of-type(odd),
372 .table.cols li:nth-child(even), 372 .table.cols li:nth-of-type(odd),
373 .table li.empty-placeholder 373 .table li.empty-placeholder
374 { 374 {
375 background-color: #F5F5F5; 375 background-color: #F5F5F5;
376 } 376 }
377 377
378 .table label 378 .table label
379 { 379 {
380 vertical-align: top; 380 vertical-align: top;
381 } 381 }
382 382
383 .table.cols span 383 .table.cols
384 { 384 {
385 display: inline-block; 385 border-bottom: 1px solid #CDCDCD;
386 width: 30%; 386 border-top: 1px solid #CDCDCD;
387 } 387 }
388 388
389 .table.cols .col-name 389 button[disabled="true"]
390 { 390 {
391 border-bottom: 1px solid #CDCDCD; 391 background-color: #ccc;
392 } 392 border-radius: 2px;
393
394 .table.cols .col-name span
395 {
396 display: inline-block;
397 width: 30%;
398 }
399
400 .table.cols .col-name span:first-child
401 {
402 -webkit-padding-start: 38px;
403 -moz-padding-start: 38px;
404 }
405
406 .table input[type="checkbox"]
407 {
408 margin-top: 0px;
409 -moz-margin-end: 20px;
410 -webkit-margin-end: 20px;
411 padding: 0px 0px 0px 0px;
412 visibility: hidden;
413 }
414
415 .table input[type="checkbox"]::before
416 {
417 content: "";
418 background-position: -51px 0px;
419 height: 18px;
420 width: 18px;
421 visibility: visible;
422 }
423
424 .table input[type="checkbox"]:checked::before
425 {
426 content: "";
427 background-position: -68px 0px;
428 height: 18px;
429 padding: 0px;
430 width: 18px;
431 visibility: visible;
432 } 393 }
433 394
434 .table button.delete 395 .table button.delete
435 { 396 {
436 background-color: transparent; 397 background-color: transparent;
437 background-position: -9px -32px; 398 background-position: -9px -32px;
438 border: 0px; 399 border: 0px;
439 height: 10px; 400 height: 10px;
440 margin-top: 5px; 401 margin-top: 5px;
441 -moz-margin-end: 20px; 402 -moz-margin-end: 20px;
442 -webkit-margin-end: 20px; 403 -webkit-margin-end: 20px;
443 padding: 0px; 404 padding: 0px;
444 cursor: pointer; 405 cursor: pointer;
445 width: 10px; 406 width: 10px;
446 } 407 }
447 408
448 .table .popular 409 .table .popular
449 { 410 {
450 color: #1E8728; 411 color: #1E8728;
451 font-size: 12px; 412 font-size: 12px;
452 -moz-padding-end: 12px; 413 -moz-padding-end: 12px;
453 -webkit-padding-end: 12px; 414 -webkit-padding-end: 12px;
454 } 415 }
455 416
456 .tabs.horizontal 417 .tabs.horizontal
457 { 418 {
419 display: flex;
458 margin-bottom: 0px; 420 margin-bottom: 0px;
459 padding: 0px; 421 padding: 0px;
460 } 422 }
461 423
462 .tabs.horizontal li 424 .tabs.horizontal li
463 { 425 {
426 display: inline-block;
464 border-bottom: 1px solid #A1A1A1; 427 border-bottom: 1px solid #A1A1A1;
465 display: inline-block;
466 color: #3A7BA6; 428 color: #3A7BA6;
467 padding: 10px 0px 11px 0px; 429 padding: 10px 46px;
468 text-align: center; 430 text-align: center;
469 width: 50%;
470 } 431 }
471 432
472 .tabs.horizontal li.active 433 .icon,
473 { 434 button[role="checkbox"],
474 border-bottom: 2px solid #1E8728; 435 .table button.delete,
475 color: black; 436 #content-help a::before,
476 font-weight: 600; 437 #dialog-close::before,
477 padding-bottom: 10px;
478 }
479
480 .icon, .table button[role="checkbox"], .table button.delete,
481 #content-help a::before, #dialog-close::before,
482 #custom-filters-add button::after, 438 #custom-filters-add button::after,
483 #dialog-body button::before 439 #dialog-body button::before,
440 .date::before,
441 .time::before,
442 #all-filter-lists .arrow,
443 .context-menu .content a::before
484 { 444 {
485 background-image: url(options-sprite.png); 445 background-image: url(options-sprite.png);
486 display: inline-block; 446 display: inline-block;
487 } 447 }
488 448
489 .icon-add 449 .icon-add
490 { 450 {
491 background-position: -0px -0px; 451 background-position: -0px -0px;
492 cursor: pointer; 452 cursor: pointer;
493 height: 18px; 453 height: 18px;
(...skipping 123 matching lines...) Expand 10 before | Expand all | Expand 10 after
617 -webkit-margin-start: 32px; 577 -webkit-margin-start: 32px;
618 } 578 }
619 579
620 #whitelisting-add-button + span 580 #whitelisting-add-button + span
621 { 581 {
622 flex: 1; 582 flex: 1;
623 } 583 }
624 584
625 .icon-enter 585 .icon-enter
626 { 586 {
627 background-position: -18px -85px; 587 background-position: -18px -32px;
628 cursor: pointer; 588 cursor: pointer;
629 height: 10px; 589 height: 10px;
630 position: absolute; 590 position: absolute;
631 top: 10px; 591 top: 10px;
632 -moz-margin-start: -20px; 592 -moz-margin-start: -20px;
633 -webkit-margin-start: -20px; 593 -webkit-margin-start: -20px;
634 width: 10px; 594 width: 10px;
635 } 595 }
636 596
637 .button-add, .cancel-button 597 .button-add, .cancel-button
638 { 598 {
639 background-color: transparent; 599 background-color: transparent;
640 border: 0px; 600 border: 0px;
641 color: #3A7BA6; 601 color: #3A7BA6;
642 cursor: pointer; 602 cursor: pointer;
643 } 603 }
644 604
645 /* 605 /*
646 Advanced tab content 606 Advanced tab content
647 */ 607 */
648 608
609 #filter-lists > div
610 {
611 display: none;
612 }
613
614 body[data-tab="advanced-allFilterLists"] #all-filter-lists,
615 body[data-tab="advanced-customFilters"] #custom-filters
616 {
617 display: block;
618 }
619
620 body[data-tab="advanced-allFilterLists"] #content-advanced [data-tab="advanced-a llFilterLists"],
621 body[data-tab="advanced-customFilters"] #content-advanced [data-tab="advanced-cu stomFilters"]
622 {
623 border-bottom: 2px solid #1E8728;
624 padding-bottom: 10px;
625 color: black;
626 font-weight: 600;
627 }
628
629 #all-filter-lists .table
630 {
631 display: inline-block;
632 }
633
634 #all-filter-lists .table li
635 {
636 padding-left: 16px;
637 padding-right: 16px;
638 }
639
640 #all-filter-lists .table li > span:first-of-type
641 {
642 display: inline-block;
643 width: 330px;
644 }
645
646 .table-header
647 {
648 display: flex;
649 }
650
651 #filter-lists h3
652 {
653 display: inline-block;
654 margin-bottom: 7px;
655 font-size: 14px;
656 }
657
658 .table-header h3:first-child
659 {
660 width: 330px;
661 -webkit-padding-start: 54px;
662 -moz-padding-start: 54px;
663 }
664
665 #all-filter-lists .table li span.display
666 {
667 cursor: pointer;
668 }
669
670 #all-filter-lists .table .head span:first-child
671 {
672 -webkit-padding-start: 38px;
673 -moz-padding-start: 38px;
674 }
675
676 #all-filter-lists .controls
677 {
678 padding-top: 0px;
679 border-top: none;
680 }
681
682 #all-filter-lists .controls button
683 {
684 margin-top: 14px;
685 }
686
687 #all-filter-lists .arrow
688 {
689 border-style: none;
690 padding: 0px;
691 width: 6px;
692 height: 4px;
693 margin: 0px;
694 background-color: transparent;
695 background-position: -1px -54px;
696 cursor: pointer;
697 }
698
699 #all-filter-lists .table li:last-of-type a
700 {
701 color: #3A7BA6;
702 text-decoration: none;
703 cursor: pointer;
704 }
705
706 #all-filter-lists .table li:last-of-type span:last-child
707 {
708 -webkit-margin-start: auto;
709 -moz-margin-start: auto;
710 }
711
712 .date::before
713 {
714 content: "";
715 -webkit-margin-end: 6px;
716 -moz-margin-end: 6px;
717 height: 12px;
718 width: 12px;
719 background-position: -7px -49px;
720 }
721
722 .time::before
723 {
724 content: "";
725 -webkit-margin-end: 6px;
726 -moz-margin-end: 6px;
727 -webkit-margin-start: 12px;
728 -moz-margin-start: 12px;
729 height: 12px;
730 width: 12px;
731 background-position: -20px -49px;
732 }
733
649 #custom-filters-header 734 #custom-filters-header
650 { 735 {
651 padding: 0px 20px; 736 padding: 0px 20px;
652 margin-bottom: 10px; 737 margin-bottom: 10px;
653 } 738 }
654 739
655 #custom-filters-raw-controls 740 #custom-filters-raw-controls
656 { 741 {
657 display: flex; 742 display: flex;
658 } 743 }
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after
761 height: 15px; 846 height: 15px;
762 -webkit-margin-end: 10px; 847 -webkit-margin-end: 10px;
763 -moz-margin-end: 10px; 848 -moz-margin-end: 10px;
764 margin-bottom: -2px; 849 margin-bottom: -2px;
765 width: 1px; 850 width: 1px;
766 } 851 }
767 852
768 #custom-filters-add button::after 853 #custom-filters-add button::after
769 { 854 {
770 content: ""; 855 content: "";
771 background-position: -28px -85px; 856 background-position: -28px -32px;
772 cursor: pointer; 857 cursor: pointer;
773 height: 10px; 858 height: 10px;
774 -webkit-margin-start: 6px; 859 -webkit-margin-start: 6px;
775 -moz-margin-start: 6px; 860 -moz-margin-start: 6px;
776 width: 10px; 861 width: 10px;
777 } 862 }
778 863
779 /* 864 /*
780 Tooltips 865 Tooltips
781 */ 866 */
782 867
783 .tooltip, #block-element-explanation a 868 .tooltip, #block-element-explanation a
784 { 869 {
785 border-bottom: dashed 1px; 870 border-bottom: dashed 1px;
786 color: #3A7BA6; 871 color: #3A7BA6;
787 cursor: default; 872 cursor: default;
788 font-size: 12px; 873 font-size: 12px;
789 height: 15px; 874 height: 15px;
790 line-height: 19px; 875 line-height: 19px;
791 margin: 0px 4px; 876 margin: 0px 4px;
792 position: relative; 877 position: relative;
793 text-decoration: none; 878 text-decoration: none;
794 } 879 }
795 880
881 .context-menu
882 {
883 display: inline-block;
884 position: relative;
885 border-bottom: none;
886 }
887
888 .context-menu a
889 {
890 vertical-align: middle;
891 white-space: nowrap;
892 color: #FFF;
893 }
894
796 #content-advanced .tooltip 895 #content-advanced .tooltip
797 { 896 {
798 -moz-margin-start: 8px; 897 -moz-margin-start: 8px;
799 -webkit-margin-start: 8px; 898 -webkit-margin-start: 8px;
800 } 899 }
801 900
802 #block-element-explanation a 901 #block-element-explanation a
803 { 902 {
804 color: black; 903 color: black;
805 border-bottom-color: #3A7BA6; 904 border-bottom-color: #3A7BA6;
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
839 938
840 .tooltip:not(:hover) > div[role="tooltip"], 939 .tooltip:not(:hover) > div[role="tooltip"],
841 div[role="tooltip"]:hover 940 div[role="tooltip"]:hover
842 { 941 {
843 visibility: hidden; 942 visibility: hidden;
844 opacity: 0; 943 opacity: 0;
845 -webkit-transition-delay: 0ms; 944 -webkit-transition-delay: 0ms;
846 transition-delay: 0ms; 945 transition-delay: 0ms;
847 } 946 }
848 947
849 div[role="tooltip"]::before 948 div[role="tooltip"]::before,
949 div.context-menu-container::before
850 { 950 {
851 background-image: url(options-sprite.png); 951 background-image: url(options-sprite.png);
852 background-position: -8px -42px; 952 background-position: -8px -42px;
853 content: ""; 953 content: "";
854 height: 6px; 954 height: 6px;
855 position: absolute; 955 position: absolute;
856 top: -6px; 956 top: -6px;
857 width: 14px; 957 width: 14px;
858 left: 30px; 958 left: 30px;
859 } 959 }
860 960
961 div.context-menu-container
962 {
963 position: absolute;
964 top: 25px;
965 z-index: 1;
966 visibility: hidden;
967 }
968
969 li.show-context-menu div.context-menu-container
970 {
971 visibility: visible;
972 }
973
974 div.context-menu-container::before
975 {
976 left: -4px;
977 }
978
979 html[dir="rtl"] div.context-menu-container::before
980 {
981 left: inherit;
982 right: -4px;
983 }
984
985 .context-menu div.context-menu-container > div
986 {
987 position: relative;
988 left: calc(-50% + 2px);
989 background-color: rgba(45, 45, 45, 0.95);
990 padding: 4px 10px;
991 border-radius: 3px;
992 }
993
994 html[dir="rtl"] div.context-menu-container > div
995 {
996 left: inherit;
997 right: -50%;
998 }
999
1000 div.context-menu-container > div a::before
1001 {
1002 content: "";
1003 -moz-margin-end: 8px;
1004 -webkit-margin-end: 8px;
1005 }
1006
1007 div.context-menu-container > div a
1008 {
1009 display: block;
1010 text-decoration: none;
1011 padding: 7px 4px;
1012 border-bottom: 1px solid #CDCDCD;
1013 cursor: pointer;
1014 vertical-align: middle;
1015 }
1016
1017 div.context-menu-container > div a:before
1018 {
1019 vertical-align: middle;
1020 height: 16px;
1021 width: 16px;
1022 }
1023
1024 div.context-menu-container > div a:last-child
1025 {
1026 border: none;
1027 }
1028
1029 .context-menu .update-now::before
1030 {
1031 background-position: -38px -31px;
1032 }
1033
1034 .context-menu .website::before
1035 {
1036 background-position: -33px -47px;
1037 }
1038
1039 .context-menu .source::before
1040 {
1041 background-position: -53px -34px;
1042 }
1043
1044 .context-menu .delete::before
1045 {
1046 background-position: -71px -34px;
1047 }
1048
861 html[dir="ltr"] div[role="tooltip"].flip-vertical::before, 1049 html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
862 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before 1050 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
863 { 1051 {
864 left: inherit; 1052 left: inherit;
865 right: 30px; 1053 right: 30px;
866 } 1054 }
867 1055
868 div[role="tooltip"] img 1056 div[role="tooltip"] img
869 { 1057 {
870 float: left; 1058 float: left;
(...skipping 245 matching lines...) Expand 10 before | Expand all | Expand 10 after
1116 #other-language .button-add::before 1304 #other-language .button-add::before
1117 { 1305 {
1118 display: none; 1306 display: none;
1119 } 1307 }
1120 1308
1121 #other-language .display 1309 #other-language .display
1122 { 1310 {
1123 -webkit-margin-start: 10px; 1311 -webkit-margin-start: 10px;
1124 -moz-margin-start: 10px; 1312 -moz-margin-start: 10px;
1125 } 1313 }
OLDNEW
« no previous file with comments | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld