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

Side by Side Diff: skin/new-options.css

Issue 29478597: Issue 5326 - General tab (HTML, strings and functionality) (Closed)
Patch Set: Created Aug. 16, 2017, 2:12 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-2017 eyeo GmbH 3 * Copyright (C) 2006-2017 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 82 matching lines...) Expand 10 before | Expand all | Expand 10 after
93 93
94 input[type="text"], 94 input[type="text"],
95 input[type="search"], 95 input[type="search"],
96 textarea 96 textarea
97 { 97 {
98 -webkit-box-sizing: border-box; 98 -webkit-box-sizing: border-box;
99 -moz-box-sizing: border-box; 99 -moz-box-sizing: border-box;
100 box-sizing: border-box; 100 box-sizing: border-box;
101 } 101 }
102 102
103 button[role="checkbox"] 103 button[role="checkbox"],
104 #dialog-body .table button[role="checkbox"]
104 { 105 {
105 width: 18px; 106 width: 18px;
106 height: 18px; 107 height: 18px;
107 margin-top: 0px; 108 margin-top: 0px;
108 -moz-margin-end: 20px; 109 -moz-margin-end: 20px;
109 -webkit-margin-end: 20px; 110 -webkit-margin-end: 20px;
110 padding: 0px; 111 padding: 0px;
111 border: none; 112 border: none;
112 background-color: transparent; 113 background-color: transparent;
113 background-position: -51px 0px; 114 background-position: -51px 0px;
114 } 115 }
115 116
116 button[role="checkbox"][aria-checked="true"] 117 button[role="checkbox"][aria-checked="true"],
118 #dialog-body .table button[role="checkbox"][aria-checked="true"]
117 { 119 {
118 background-position: -68px 0px; 120 background-position: -68px 0px;
119 } 121 }
120 122
121 .option-name
122 {
123 display: flex;
124 margin-bottom: 16px;
125 }
126
127 .option-name > :first-child
128 {
129 flex: 1;
130 overflow: hidden;
131 text-overflow: ellipsis;
132 white-space: nowrap;
133 }
134
135 #nav-sidebar 123 #nav-sidebar
136 { 124 {
137 min-width: 198px; 125 min-width: 198px;
138 } 126 }
139 127
140 #nav-sidebar .fixed 128 #nav-sidebar .fixed
141 { 129 {
142 top: 40px; 130 top: 40px;
143 bottom: 2px; 131 bottom: 2px;
144 height: auto; 132 height: auto;
(...skipping 11 matching lines...) Expand all
156 font-size: 16px; 144 font-size: 16px;
157 line-height: 1em; 145 line-height: 1em;
158 } 146 }
159 147
160 #page-title h1 148 #page-title h1
161 { 149 {
162 margin: 0px; 150 margin: 0px;
163 padding: 8px 0px 16px 0px; 151 padding: 8px 0px 16px 0px;
164 } 152 }
165 153
166 .hbox
167 {
168 display: flex;
169 flex-direction: row;
170 }
171
172 .hbox > div
173 {
174 width: 400px;
175 }
176
177 .tabs li 154 .tabs li
178 { 155 {
179 cursor: pointer; 156 cursor: pointer;
180 display: flex; 157 display: flex;
181 } 158 }
182 159
183 .tabs li a 160 .tabs li a
184 { 161 {
185 flex: 1; 162 flex: 1;
186 color: inherit; 163 color: inherit;
(...skipping 181 matching lines...) Expand 10 before | Expand all | Expand 10 after
368 } 345 }
369 346
370 .table li 347 .table li
371 { 348 {
372 display: flex; 349 display: flex;
373 align-items: center; 350 align-items: center;
374 padding: 12px 16px; 351 padding: 12px 16px;
375 border-radius: 3px; 352 border-radius: 3px;
376 } 353 }
377 354
378 .table.list, 355 .table.list
379 #custom-wrapper
380 { 356 {
381 border-bottom: 1px solid #CDCDCD; 357 border-bottom: 1px solid #CDCDCD;
382 } 358 }
383 359
384 .table.list li .display, 360 .table.list li .display
385 .fill
386 { 361 {
387 flex: 1; 362 flex: 1;
388 line-height: 16px; 363 line-height: 16px;
389 overflow: hidden; 364 overflow: hidden;
390 text-overflow: ellipsis; 365 text-overflow: ellipsis;
391 white-space: nowrap; 366 white-space: nowrap;
392 } 367 }
393 368
394 .table:not(.list):not(.cols) li 369 .table:not(.list):not(.cols) li
395 { 370 {
396 padding-top: 0px; 371 padding-top: 0px;
397 padding-bottom: 6px; 372 padding-bottom: 6px;
398 } 373 }
399 374
400 .table.list li:nth-of-type(odd), 375 .table li.empty-placeholder
401 .table.cols li:nth-of-type(odd):not([role="menuitem"]),
402 .table li.empty-placeholder
403 { 376 {
404 background-color: #F5F5F5; 377 background-color: #F5F5F5;
405 } 378 }
406 379
380 .table li [data-single="visible"],
381 .table li:first-of-type:last-of-type [data-single="hidden"]
382 {
383 display: none;
384 }
385
386 .table li:first-of-type:last-of-type [data-single="visible"]
387 {
388 display: block;
389 }
390
407 .table label 391 .table label
408 { 392 {
409 vertical-align: top; 393 vertical-align: top;
410 } 394 }
411 395
412 .table.cols 396 .table.cols
413 { 397 {
414 border-bottom: 1px solid #CDCDCD; 398 border-bottom: 1px solid #CDCDCD;
415 border-top: 1px solid #CDCDCD; 399 border-top: 1px solid #CDCDCD;
416 } 400 }
(...skipping 15 matching lines...) Expand all
432 width: 10px; 416 width: 10px;
433 } 417 }
434 418
435 .table button.delete:hover 419 .table button.delete:hover
436 { 420 {
437 background-position: -61px -51px; 421 background-position: -61px -51px;
438 } 422 }
439 423
440 .icon, 424 .icon,
441 button[role="checkbox"], 425 button[role="checkbox"],
426 #dialog-body .table button[role="checkbox"],
442 .table button.delete, 427 .table button.delete,
443 #content-help a::before, 428 #content-help a::before,
444 #dialog-close::before, 429 #dialog-close::before,
445 #dialog-body button::before,
446 #all-filter-lists-table .arrow, 430 #all-filter-lists-table .arrow,
447 .context-menu .content a::before 431 .context-menu .content a::before
448 { 432 {
449 background-image: url(options-sprite.png); 433 background-image: url(options-sprite.png);
450 display: inline-block; 434 display: inline-block;
451 } 435 }
452 436
453 .icon-add, 437 .icon-add,
454 .icon-update 438 .icon-update
455 { 439 {
(...skipping 19 matching lines...) Expand all
475 cursor: pointer; 459 cursor: pointer;
476 } 460 }
477 461
478 #dialog-close::before 462 #dialog-close::before
479 { 463 {
480 content: ""; 464 content: "";
481 height: 12px; 465 height: 12px;
482 width: 12px; 466 width: 12px;
483 } 467 }
484 468
485 #content-help a::before, 469 #content-help a::before
486 #dialog-body button::before
487 { 470 {
488 background-position: 0px -42px; 471 background-position: 0px -42px;
489 content: ""; 472 content: "";
490 cursor: pointer; 473 cursor: pointer;
491 height: 11px; 474 height: 11px;
492 vertical-align: middle; 475 vertical-align: middle;
493 width: 7px; 476 width: 7px;
494 -moz-margin-end: 12px; 477 -moz-margin-end: 12px;
495 -webkit-margin-end: 12px; 478 -webkit-margin-end: 12px;
496 } 479 }
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
530 -moz-margin-start: 16px; 513 -moz-margin-start: 16px;
531 -webkit-margin-start: 16px; 514 -webkit-margin-start: 16px;
532 color: #3A7BA6; 515 color: #3A7BA6;
533 vertical-align: top; 516 vertical-align: top;
534 } 517 }
535 518
536 /* 519 /*
537 General tab content 520 General tab content
538 */ 521 */
539 522
540 #acceptableads-table, 523 #blocking-languages-dialog-table
541 #recommend-list-table,
542 #blocking-languages-dialog-table,
543 #custom-wrapper .table,
544 #all-lang-table
545 { 524 {
546 border-bottom: none; 525 border-bottom: none;
547 } 526 }
548 527
549 #blocking-languages, 528 #blocking-languages,
550 #acceptable-ads 529 #acceptable-ads
551 { 530 {
552 -moz-margin-end: 40px; 531 -moz-margin-end: 40px;
553 -webkit-margin-end: 40px; 532 -webkit-margin-end: 40px;
554 } 533 }
555 534
556 #custom-wrapper 535 #whitelisting .controls.mode-edit > button,
536 #whitelisting .controls:not(.mode-edit) > div
557 { 537 {
558 height: 290px; 538 display: none;
559 overflow: auto;
560 } 539 }
561 540
562 #custom-wrapper .table 541 #whitelisting .controls input[type="text"]
563 { 542 {
543 border: 0px;
544 border-bottom: 1px solid #A1A1A1;
545 -moz-padding-end: 25px;
546 -webkit-padding-end: 25px;
547 -moz-margin-start: 14px;
548 -webkit-margin-start: 14px;
549 outline: 0px;
550 padding-bottom: 5px;
551 vertical-align: text-bottom;
564 width: 100%; 552 width: 100%;
565 } 553 }
566 554
567 .button-add 555 #whitelisting .controls .button-add span
556 {
557 -moz-margin-start: 5px;
558 -webkit-margin-start: 5px;
559 }
560
561 #whitelisting .button-add
562 {
563 -moz-margin-start: 32px;
564 -webkit-margin-start: 32px;
565 }
566
567 #whitelisting-add-button + span
568 {
569 flex: 1;
570 }
571
572 .icon-enter
573 {
574 background-position: -19px -33px;
575 position: absolute;
576 bottom: 9px;
577 -moz-margin-start: -20px;
578 -webkit-margin-start: -20px;
579 }
580
581 .button-add, .cancel-button
568 { 582 {
569 background-color: transparent; 583 background-color: transparent;
570 border: 0px; 584 border: 0px;
571 color: #3A7BA6; 585 color: #3A7BA6;
572 cursor: pointer; 586 cursor: pointer;
573 } 587 }
574 588
575 /* 589 /*
576 Advanced tab content 590 Advanced tab content
577 */ 591 */
578 592
579 #all-filter-lists-table li.show-message .last-update, 593 #all-filter-lists-table li.show-message .last-update,
580 #all-filter-lists-table li:not(.show-message) .message, 594 #all-filter-lists-table li:not(.show-message) .message,
581 #custom-filters:not([data-mode="empty"]) #empty-custom-filters, 595 #custom-filters:not([data-mode="empty"]) #empty-custom-filters,
582 #custom-filters[data-mode="empty"] #custom-filters-raw, 596 #custom-filters[data-mode="empty"] #custom-filters-raw,
583 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls, 597 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
584 #custom-filters:not([data-mode="read"]) #custom-filters-edit, 598 #custom-filters:not([data-mode="read"]) #custom-filters-edit,
585 .state span 599 .state span,
600 #acceptable-ads:not(.show-dnt-notification) #dnt
586 { 601 {
587 display: none; 602 display: none;
588 } 603 }
589 604
590 #all-filter-lists-table 605 #all-filter-lists-table
591 { 606 {
592 display: inline-block; 607 display: inline-block;
593 } 608 }
594 609
595 #all-filter-lists-table 610 #all-filter-lists-table
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
721 position: absolute; 736 position: absolute;
722 -webkit-transition: opacity 200ms ease-in-out 400ms, 737 -webkit-transition: opacity 200ms ease-in-out 400ms,
723 visibility 0ms linear 400ms; 738 visibility 0ms linear 400ms;
724 transition: opacity 200ms ease-in-out 400ms, 739 transition: opacity 200ms ease-in-out 400ms,
725 visibility 0ms linear 400ms; 740 visibility 0ms linear 400ms;
726 visibility: visible; 741 visibility: visible;
727 width: 400px; 742 width: 400px;
728 z-index: 1; 743 z-index: 1;
729 } 744 }
730 745
731 html[dir="ltr"] div[role="tooltip"].flip-horizontal,
732 html[dir="rtl"] div[role="tooltip"]:not(.flip-horizontal)
733 {
734 left: inherit;
735 right: -20px;
736 }
737
738 .tooltip:not(:hover) > div[role="tooltip"], 746 .tooltip:not(:hover) > div[role="tooltip"],
739 div[role="tooltip"]:hover 747 div[role="tooltip"]:hover
740 { 748 {
741 visibility: hidden; 749 visibility: hidden;
742 opacity: 0; 750 opacity: 0;
743 -webkit-transition-delay: 0ms; 751 -webkit-transition-delay: 0ms;
744 transition-delay: 0ms; 752 transition-delay: 0ms;
745 } 753 }
746 754
747 div[role="tooltip"]::before, 755 div[role="tooltip"]::before,
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after
839 .context-menu .source::before 847 .context-menu .source::before
840 { 848 {
841 background-position: -53px -34px; 849 background-position: -53px -34px;
842 } 850 }
843 851
844 .context-menu .delete::before 852 .context-menu .delete::before
845 { 853 {
846 background-position: -71px -34px; 854 background-position: -71px -34px;
847 } 855 }
848 856
849 html[dir="ltr"] div[role="tooltip"].flip-horizontal::before,
850 html[dir="rtl"] div[role="tooltip"]:not(.flip-horizontal)::before
851 {
852 left: inherit;
853 right: 30px;
854 }
855
856 div[role="tooltip"] img 857 div[role="tooltip"] img
857 { 858 {
858 float: left; 859 float: left;
859 height: 64px; 860 height: 64px;
860 margin-top: -2px; 861 margin-top: -2px;
861 margin-bottom: 10px; 862 margin-bottom: 10px;
862 width: 64px; 863 width: 64px;
863 -moz-margin-end: 10px; 864 -moz-margin-end: 10px;
864 -webkit-margin-end: 10px; 865 -webkit-margin-end: 10px;
865 } 866 }
(...skipping 151 matching lines...) Expand 10 before | Expand all | Expand 10 after
1017 margin-top: 10px; 1018 margin-top: 10px;
1018 padding: 5px; 1019 padding: 5px;
1019 width: 100%; 1020 width: 100%;
1020 } 1021 }
1021 1022
1022 #dialog .table 1023 #dialog .table
1023 { 1024 {
1024 width: 100%; 1025 width: 100%;
1025 } 1026 }
1026 1027
1027 #dialog #dialog-content-language .table
1028 {
1029 overflow: auto;
1030 }
1031
1032 #dialog .section:not(:first-child) 1028 #dialog .section:not(:first-child)
1033 { 1029 {
1034 margin-top: 24px; 1030 margin-top: 24px;
1035 } 1031 }
1036 1032
1037 #dialog-title 1033 #dialog-title
1038 { 1034 {
1039 -moz-margin-start: 16px; 1035 -moz-margin-start: 16px;
1040 -webkit-margin-start: 16px; 1036 -webkit-margin-start: 16px;
1041 flex: 1; 1037 flex: 1;
(...skipping 22 matching lines...) Expand all
1064 1060
1065 #dialog .url 1061 #dialog .url
1066 { 1062 {
1067 margin-top: 10px; 1063 margin-top: 10px;
1068 margin-bottom: 20px; 1064 margin-bottom: 20px;
1069 word-wrap: break-word; 1065 word-wrap: break-word;
1070 } 1066 }
1071 1067
1072 body:not([data-dialog="custom"]) #dialog-title-custom, 1068 body:not([data-dialog="custom"]) #dialog-title-custom,
1073 body:not([data-dialog="custom"]) #dialog-content-custom, 1069 body:not([data-dialog="custom"]) #dialog-content-custom,
1074 body:not([data-dialog="language"]) #dialog-title-language, 1070 body:not([data-dialog="language-add"]) #dialog-title-language-add,
1075 body:not([data-dialog="language"]) #dialog-content-language, 1071 body:not([data-dialog="language-change"]) #dialog-title-language-change,
1072 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add,
1073 body:not([data-dialog="language-add"]) #dialog-body button.add,
1074 body:not([data-dialog="language-change"]) #dialog-body button.change,
1076 body:not([data-dialog="predefined"]) #dialog-title-predefined, 1075 body:not([data-dialog="predefined"]) #dialog-title-predefined,
1077 body:not([data-dialog="predefined"]) #dialog-content-predefined, 1076 body:not([data-dialog="predefined"]) #dialog-content-predefined,
1078 body:not([data-dialog]) #dialog 1077 body:not([data-dialog]) #dialog
1079 { 1078 {
1080 display: none; 1079 display: none;
1081 } 1080 }
1082
1083 #dialog-content-language .dialog-content-block
1084 {
1085 display: flex;
1086 flex-direction: column;
1087 height: 120px;
1088 }
1089
1090 #dialog-content-language #other-language
1091 {
1092 height: 200px;
1093 }
1094
1095 #other-language .button-add
1096 {
1097 background-color: transparent;
1098 margin: 0px;
1099 padding: 0px;
1100 width: auto;
1101 -webkit-border-end: 1px solid #CDCDCD;
1102 -moz-border-end: 1px solid #CDCDCD;
1103 -webkit-padding-end: 10px;
1104 -moz-padding-end: 10px;
1105 -webkit-padding-start: 0px;
1106 -moz-padding-start: 0px;
1107 }
1108
1109 #other-language .button-add::before
1110 {
1111 display: none;
1112 }
1113
1114 #other-language .display
1115 {
1116 -webkit-margin-start: 10px;
1117 -moz-margin-start: 10px;
1118 }
OLDNEW
« new-options.js ('K') | « new-options.js ('k') | skin/tooltips/acceptable-ads.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld