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: Small fixes and improved download messages for filter lists Created Feb. 3, 2016, 5:41 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
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 border-radius: 2px;
392 } 392 background-color: #ccc;
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; 428 padding: 10px 46px;
466 color: #3A7BA6; 429 color: #3A7BA6;
467 padding: 10px 0px 11px 0px;
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 > div
641 {
642 display: flex;
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 position: relative;
690 margin: auto 6px;
691 border-style: none;
692 padding: 0px;
693 width: 6px;
694 height: 4px;
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 #all-filter-lists li > span
713 {
714 display: none;
715 }
716
717 #all-filter-lists li:not(.error):not(.progress) .date,
718 #all-filter-lists li:not(.error):not(.progress) .time,
719 #all-filter-lists li.progress .progress,
720 #all-filter-lists li.error .error
Thomas Greiner 2016/02/04 15:28:17 `.error` and `.progress` are not very descriptive
saroyanm 2016/02/04 17:50:07 Done.
721 {
722 display: inline;
Thomas Greiner 2016/02/04 15:28:17 Detail: You can simplify this a bit by merging the
saroyanm 2016/02/04 17:50:07 Done.
723 }
724
725 .date::before
726 {
727 content: "";
728 -webkit-margin-end: 6px;
729 -moz-margin-end: 6px;
730 height: 12px;
731 width: 12px;
732 background-position: -7px -49px;
733 }
734
735 .time::before
736 {
737 content: "";
738 -webkit-margin-end: 6px;
739 -moz-margin-end: 6px;
740 -webkit-margin-start: 12px;
741 -moz-margin-start: 12px;
742 height: 12px;
743 width: 12px;
744 background-position: -20px -49px;
745 }
746
649 #custom-filters-header 747 #custom-filters-header
650 { 748 {
651 padding: 0px 20px; 749 padding: 0px 20px;
652 margin-bottom: 10px; 750 margin-bottom: 10px;
653 } 751 }
654 752
655 #custom-filters-raw-controls 753 #custom-filters-raw-controls
656 { 754 {
657 display: flex; 755 display: flex;
658 } 756 }
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after
761 height: 15px; 859 height: 15px;
762 -webkit-margin-end: 10px; 860 -webkit-margin-end: 10px;
763 -moz-margin-end: 10px; 861 -moz-margin-end: 10px;
764 margin-bottom: -2px; 862 margin-bottom: -2px;
765 width: 1px; 863 width: 1px;
766 } 864 }
767 865
768 #custom-filters-add button::after 866 #custom-filters-add button::after
769 { 867 {
770 content: ""; 868 content: "";
771 background-position: -28px -85px; 869 background-position: -28px -32px;
772 cursor: pointer; 870 cursor: pointer;
773 height: 10px; 871 height: 10px;
774 -webkit-margin-start: 6px; 872 -webkit-margin-start: 6px;
775 -moz-margin-start: 6px; 873 -moz-margin-start: 6px;
776 width: 10px; 874 width: 10px;
777 } 875 }
778 876
779 /* 877 /*
780 Tooltips 878 Tooltips
781 */ 879 */
782 880
783 .tooltip, #block-element-explanation a 881 .tooltip, #block-element-explanation a
784 { 882 {
785 border-bottom: dashed 1px; 883 border-bottom: dashed 1px;
786 color: #3A7BA6; 884 color: #3A7BA6;
787 cursor: default; 885 cursor: default;
788 font-size: 12px; 886 font-size: 12px;
789 height: 15px; 887 height: 15px;
790 line-height: 19px; 888 line-height: 19px;
791 margin: 0px 4px; 889 margin: 0px 4px;
792 position: relative; 890 position: relative;
793 text-decoration: none; 891 text-decoration: none;
794 } 892 }
795 893
894 .context-menu
895 {
896 display: inline-block;
897 position: relative;
898 border-bottom: none;
899 }
900
901 .context-menu a
902 {
903 vertical-align: middle;
904 white-space: nowrap;
905 color: #FFF;
906 }
907
796 #content-advanced .tooltip 908 #content-advanced .tooltip
797 { 909 {
798 -moz-margin-start: 8px; 910 -moz-margin-start: 8px;
799 -webkit-margin-start: 8px; 911 -webkit-margin-start: 8px;
800 } 912 }
801 913
802 #block-element-explanation a 914 #block-element-explanation a
803 { 915 {
804 color: black; 916 color: black;
805 border-bottom-color: #3A7BA6; 917 border-bottom-color: #3A7BA6;
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
839 951
840 .tooltip:not(:hover) > div[role="tooltip"], 952 .tooltip:not(:hover) > div[role="tooltip"],
841 div[role="tooltip"]:hover 953 div[role="tooltip"]:hover
842 { 954 {
843 visibility: hidden; 955 visibility: hidden;
844 opacity: 0; 956 opacity: 0;
845 -webkit-transition-delay: 0ms; 957 -webkit-transition-delay: 0ms;
846 transition-delay: 0ms; 958 transition-delay: 0ms;
847 } 959 }
848 960
849 div[role="tooltip"]::before 961 div[role="tooltip"]::before,
962 div.context-menu::before
850 { 963 {
851 background-image: url(options-sprite.png); 964 background-image: url(options-sprite.png);
852 background-position: -8px -42px; 965 background-position: -8px -42px;
853 content: ""; 966 content: "";
854 height: 6px; 967 height: 6px;
855 position: absolute; 968 position: absolute;
856 top: -6px; 969 top: -6px;
857 width: 14px; 970 width: 14px;
858 left: 30px; 971 left: 30px;
859 } 972 }
860 973
974 div.context-menu
975 {
976 position: absolute;
977 top: 16px;
978 z-index: 1;
979 visibility: hidden;
980 }
981
982 div.context-menu::before
983 {
984 left: -4px;
985 }
986
987 html[dir="rtl"] div.context-menu::before
988 {
989 left: inherit;
990 right: -4px;
991 }
992
993 div.context-menu .content
994 {
995 position: relative;
996 left: calc(-50% + 2px);
997 border-radius: 3px;
998 padding: 4px 10px;
999 background-color: rgba(45, 45, 45, 0.95);
1000 cursor: default;
1001 }
1002
1003 html[dir="rtl"] div.context-menu .content
1004 {
1005 left: inherit;
1006 right: -50%;
1007 }
1008
1009 li.show-context-menu div.context-menu
1010 {
1011 visibility: visible;
1012 }
1013
1014 div.context-menu > div a::before
1015 {
1016 content: "";
1017 -moz-margin-end: 8px;
1018 -webkit-margin-end: 8px;
1019 }
1020
1021 div.context-menu > div a
1022 {
1023 display: block;
1024 padding: 7px 4px;
1025 border-bottom: 1px solid #CDCDCD;
1026 text-decoration: none;
1027 cursor: pointer;
1028 vertical-align: middle;
1029 }
1030
1031 div.context-menu > div a::before
1032 {
1033 vertical-align: middle;
1034 height: 16px;
1035 width: 16px;
1036 }
1037
1038 div.context-menu > div a:last-child
1039 {
1040 border: none;
1041 }
1042
1043 .context-menu .update-subscription::before
1044 {
1045 background-position: -38px -31px;
1046 }
1047
1048 .context-menu .website::before
1049 {
1050 background-position: -33px -47px;
1051 }
1052
1053 .context-menu .source::before
1054 {
1055 background-position: -53px -34px;
1056 }
1057
1058 .context-menu .delete::before
1059 {
1060 background-position: -71px -34px;
1061 }
1062
861 html[dir="ltr"] div[role="tooltip"].flip-vertical::before, 1063 html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
862 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before 1064 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
863 { 1065 {
864 left: inherit; 1066 left: inherit;
865 right: 30px; 1067 right: 30px;
866 } 1068 }
867 1069
868 div[role="tooltip"] img 1070 div[role="tooltip"] img
869 { 1071 {
870 float: left; 1072 float: left;
(...skipping 245 matching lines...) Expand 10 before | Expand all | Expand 10 after
1116 #other-language .button-add::before 1318 #other-language .button-add::before
1117 { 1319 {
1118 display: none; 1320 display: none;
1119 } 1321 }
1120 1322
1121 #other-language .display 1323 #other-language .display
1122 { 1324 {
1123 -webkit-margin-start: 10px; 1325 -webkit-margin-start: 10px;
1124 -moz-margin-start: 10px; 1326 -moz-margin-start: 10px;
1125 } 1327 }
OLDNEW
« options.js ('K') | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld