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

Delta Between Two Patch Sets: skin/new-options.css

Issue 29502647: Issue 5482 - Sidebar and about ABP dialog (Closed)
Left Patch Set: Rebased Created Aug. 23, 2017, 1:29 p.m.
Right Patch Set: Fixed nit Created Aug. 28, 2017, 11:38 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « skin/fonts/SourceSansPro-bold.woff ('k') | skin/options-sprite.png » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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-present eyeo GmbH 3 * Copyright (C) 2006-present 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 20 matching lines...) Expand all
31 src: url(fonts/SourceSansPro-Regular.woff); 31 src: url(fonts/SourceSansPro-Regular.woff);
32 /* local("Ø") forces using no local font called Source Sans Pro */ 32 /* local("Ø") forces using no local font called Source Sans Pro */
33 src: local("Ø"), url(fonts/SourceSansPro-Regular.woff) format("woff"); 33 src: local("Ø"), url(fonts/SourceSansPro-Regular.woff) format("woff");
34 font-weight: 400; 34 font-weight: 400;
35 font-style: normal; 35 font-style: normal;
36 } 36 }
37 37
38 @font-face 38 @font-face
39 { 39 {
40 font-family: "Source Sans Pro"; 40 font-family: "Source Sans Pro";
41 src: url(fonts/SourceSansPro-Semibold.woff); 41 src: url(fonts/SourceSansPro-bold.woff);
42 /* local("Ø") forces using no local font called Source Sans Pro */ 42 /* local("Ø") forces using no local font called Source Sans Pro */
43 src: local("Ø"), url(fonts/SourceSansPro-Semibold.woff) format("woff"); 43 src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff");
44 font-weight: 600; 44 font-weight: 700;
45 font-style: normal; 45 font-style: normal;
46 } 46 }
47 47
48 html 48 html
49 { 49 {
50 font-size: 20px; 50 font-size: 20px;
51 } 51 }
52 52
53 body 53 body
54 { 54 {
55 background-color: #F5F5F5; 55 background-color: #F5F5F5;
56 display: flex; 56 display: flex;
57 margin: 1.2rem 0.3rem; 57 margin: 1.2rem 0.3rem;
58 font-family: "Source Sans Pro", sans-serif; 58 font-family: "Source Sans Pro", sans-serif;
59 font-weight: 300; 59 font-weight: 300;
60 font-size: 1rem; 60 font-size: 1rem;
61 color: #494949; 61 color: #494949;
62 } 62 }
63 63
64 h1 64 h1
65 { 65 {
66 font-size: 3rem; 66 font-size: 3rem;
67 font-weight: 300; 67 font-weight: 300;
68 } 68 }
69 69
70 h2 70 h2
71 { 71 {
72 font-size: 1.375rem; 72 font-size: 1.375rem;
73 font-weight: 600; 73 font-weight: 700;
74 } 74 }
75 75
76 p 76 p
77 { 77 {
78 font-weight: 300; 78 font-weight: 300;
79 } 79 }
80 80
81 [aria-hidden="true"] 81 [aria-hidden="true"]
82 { 82 {
83 display: none !important; 83 display: none !important;
(...skipping 10 matching lines...) Expand all
94 94
95 /* 95 /*
96 Buttons and links 96 Buttons and links
97 */ 97 */
98 98
99 button, 99 button,
100 .button 100 .button
101 { 101 {
102 padding: 0.8rem 1.2rem; 102 padding: 0.8rem 1.2rem;
103 font-size: 1.125rem; 103 font-size: 1.125rem;
104 font-weight: 600; 104 font-weight: 700;
105 text-decoration: none; 105 text-decoration: none;
106 text-transform: uppercase; 106 text-transform: uppercase;
107 cursor: pointer; 107 cursor: pointer;
108 } 108 }
109 109
110 button.primary, 110 button.primary,
111 .button.primary 111 .button.primary
112 { 112 {
113 border: 0px; 113 border: 0px;
114 color: #FFF; 114 color: #FFF;
(...skipping 14 matching lines...) Expand all
129 button.secondary, 129 button.secondary,
130 .button.secondary 130 .button.secondary
131 { 131 {
132 border: 1px solid #0A9DD1; 132 border: 1px solid #0A9DD1;
133 color: #099CD0; 133 color: #099CD0;
134 } 134 }
135 135
136 button.secondary:hover, 136 button.secondary:hover,
137 .button.secondary:hover 137 .button.secondary:hover
138 { 138 {
139 box-shadow: inset 0 0 0 1px #099CD0; 139 box-shadow: inset 0 0 0 4px #099CD0;
140 } 140 }
141 141
142 button[role="checkbox"], 142 button[role="checkbox"],
143 #dialog-body .table button[role="checkbox"] 143 #dialog-body .table button[role="checkbox"]
144 { 144 {
145 width: 18px; 145 width: 18px;
146 height: 18px; 146 height: 18px;
147 margin-top: 0px; 147 margin-top: 0px;
148 -moz-margin-end: 20px; 148 -moz-margin-end: 20px;
149 -webkit-margin-end: 20px; 149 -webkit-margin-end: 20px;
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
202 202
203 html[dir="rtl"] #sidebar header 203 html[dir="rtl"] #sidebar header
204 { 204 {
205 margin-left: 2rem; 205 margin-left: 2rem;
206 } 206 }
207 207
208 #sidebar header h1 208 #sidebar header h1
209 { 209 {
210 margin: 0rem; 210 margin: 0rem;
211 font-size: 1.5rem; 211 font-size: 1.5rem;
212 }
213
214 #sidebar header h1 strong
215 {
216 font-weight: 700;
212 } 217 }
213 218
214 #sidebar header p 219 #sidebar header p
215 { 220 {
216 margin: 0rem; 221 margin: 0rem;
217 font-size: 2.4rem; 222 font-size: 2.4rem;
218 } 223 }
219 224
220 html[dir="rtl"] #sidebar header 225 html[dir="rtl"] #sidebar header
221 { 226 {
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
263 [role="tablist"] a[role="tab"]:focus 268 [role="tablist"] a[role="tab"]:focus
264 { 269 {
265 outline: none; 270 outline: none;
266 text-shadow: 0px 0px 1px #888; 271 text-shadow: 0px 0px 1px #888;
267 } 272 }
268 273
269 li a[role="tab"][aria-selected] 274 li a[role="tab"][aria-selected]
270 { 275 {
271 -moz-border-start-color: #CDCDCD; 276 -moz-border-start-color: #CDCDCD;
272 -webkit-border-start-color: #CDCDCD; 277 -webkit-border-start-color: #CDCDCD;
273 font-weight: 600; 278 font-weight: 700;
274 background-color: #FFF; 279 background-color: #FFF;
275 } 280 }
276 281
277 #sidebar footer 282 #sidebar footer
juliandoucette 2017/08/23 18:11:08 This overlaps the above nav at heights below ~700.
278 { 283 {
279 bottom: 0px; 284 bottom: 0px;
280 position: absolute; 285 position: absolute;
281 width: 100%; 286 width: 100%;
282 } 287 }
283 288
284 #sidebar footer p 289 #sidebar footer p
285 { 290 {
286 display: flex; 291 display: flex;
287 justify-content: center; 292 justify-content: center;
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after
404 409
405 .table button.delete:hover 410 .table button.delete:hover
406 { 411 {
407 background-position: -61px -51px; 412 background-position: -61px -51px;
408 } 413 }
409 414
410 .icon, 415 .icon,
411 button[role="checkbox"], 416 button[role="checkbox"],
412 #dialog-body .table button[role="checkbox"], 417 #dialog-body .table button[role="checkbox"],
413 .table button.delete, 418 .table button.delete,
414 #content-help a::before,
415 #dialog-close::before, 419 #dialog-close::before,
416 #all-filter-lists-table .arrow, 420 #all-filter-lists-table .arrow,
417 .context-menu .content a::before 421 .context-menu .content a::before
418 { 422 {
419 background-image: url(options-sprite.png); 423 background-image: url(options-sprite.png);
420 display: inline-block; 424 display: inline-block;
421 } 425 }
422 426
423 .icon-add, 427 .icon-add,
424 .icon-update 428 .icon-update
(...skipping 20 matching lines...) Expand all
445 cursor: pointer; 449 cursor: pointer;
446 } 450 }
447 451
448 #dialog-close::before 452 #dialog-close::before
449 { 453 {
450 content: ""; 454 content: "";
451 height: 12px; 455 height: 12px;
452 width: 12px; 456 width: 12px;
453 } 457 }
454 458
455 #content-help a::before 459 #dialog-body button::before
456 { 460 {
457 background-position: 0px -42px; 461 background-position: 0px -42px;
458 content: ""; 462 content: "";
459 cursor: pointer; 463 cursor: pointer;
460 height: 11px; 464 height: 11px;
461 vertical-align: middle; 465 vertical-align: middle;
462 width: 7px; 466 width: 7px;
463 -moz-margin-end: 12px; 467 -moz-margin-end: 12px;
464 -webkit-margin-end: 12px; 468 -webkit-margin-end: 12px;
465 } 469 }
(...skipping 27 matching lines...) Expand all
493 background: none; 497 background: none;
494 cursor: pointer; 498 cursor: pointer;
495 } 499 }
496 500
497 .controls button span:not(.icon) 501 .controls button span:not(.icon)
498 { 502 {
499 -moz-margin-start: 16px; 503 -moz-margin-start: 16px;
500 -webkit-margin-start: 16px; 504 -webkit-margin-start: 16px;
501 color: #3A7BA6; 505 color: #3A7BA6;
502 vertical-align: top; 506 vertical-align: top;
507 }
508
509 /*
510 Used for translatable screen reader only conten.
511 e.g.: Use instead of aria-label to avoid complex attribute value translation
512 */
513 .sr-only
514 {
515 position: absolute;
516 overflow: hidden;
517 clip: rect(0, 0, 0, 0);
518 width: 1px;
519 height: 1px;
520 margin: -1px;
521 padding: 0px;
522 border: 0px;
503 } 523 }
504 524
505 /* 525 /*
506 General tab content 526 General tab content
507 */ 527 */
508 528
509 #blocking-languages-dialog-table 529 #blocking-languages-dialog-table
510 { 530 {
511 border-bottom: none; 531 border-bottom: none;
512 } 532 }
(...skipping 364 matching lines...) Expand 10 before | Expand all | Expand 10 after
877 897
878 div[role="tooltip"] .notes p 898 div[role="tooltip"] .notes p
879 { 899 {
880 font-weight: 300; 900 font-weight: 300;
881 } 901 }
882 902
883 /* 903 /*
884 Help tab content 904 Help tab content
885 */ 905 */
886 906
887 #content-help 907 html:not([lang="zh"]) #social-chinese,
888 { 908 html[lang="zh"] #social-general
889 counter-reset: section; 909 {
890 } 910 display: none;
891 911 }
892 #content-help h1::before 912
893 { 913 #social ul
894 counter-increment: section; 914 {
895 content: counter(section) ". "; 915 list-style: none;
896 } 916 }
897 917
898 #content-help a 918 #social ul li
899 { 919 {
900 color: #3A7BA6;
901 display: inline-block; 920 display: inline-block;
902 text-decoration: none; 921 }
903 -moz-margin-end: 16px; 922
904 -webkit-margin-end: 16px; 923 #social ul li a
905 vertical-align: top; 924 {
906 } 925 display: block;
907 926 text-align: center;
908 #content-help a::before 927 }
909 { 928
910 -moz-margin-end: 6px; 929 #social ul li a::before
911 -webkit-margin-end: 6px; 930 {
912 } 931 display: block;
913 932 margin: 0em auto;
914 #share-general:lang(zh), 933 width: 2.5rem;
915 #share-chinese:not(zh) 934 height: 2.5rem;
916 { 935 content: "";
917 display: none; 936 background-color: #099DD1;
937 }
938
939 #twitter::before
940 {
941 -webkit-mask: url("social/twitter.svg");
942 mask: url("social/twitter.svg");
943 }
944
945 #facebook::before
946 {
947 -webkit-mask: url("social/facebook.svg");
948 mask: url("social/facebook.svg");
949 }
950
951 #google-plus::before
952 {
953 -webkit-mask: url("social/googleplus.svg");
954 mask: url("social/googleplus.svg");
918 } 955 }
919 956
920 /* 957 /*
921 Dialog 958 Dialog
922 */ 959 */
923 960
924 #dialog-background 961 #dialog-background
925 { 962 {
926 display: none; 963 display: none;
927 position: fixed; 964 position: fixed;
(...skipping 116 matching lines...) Expand 10 before | Expand all | Expand 10 after
1044 body:not([data-dialog="language-change"]) #dialog-title-language-change, 1081 body:not([data-dialog="language-change"]) #dialog-title-language-change,
1045 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add, 1082 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add,
1046 body:not([data-dialog="language-add"]) #dialog-body button.add, 1083 body:not([data-dialog="language-add"]) #dialog-body button.add,
1047 body:not([data-dialog="language-change"]) #dialog-body button.change, 1084 body:not([data-dialog="language-change"]) #dialog-body button.change,
1048 body:not([data-dialog="predefined"]) #dialog-title-predefined, 1085 body:not([data-dialog="predefined"]) #dialog-title-predefined,
1049 body:not([data-dialog="predefined"]) #dialog-content-predefined, 1086 body:not([data-dialog="predefined"]) #dialog-content-predefined,
1050 body:not([data-dialog]) #dialog 1087 body:not([data-dialog]) #dialog
1051 { 1088 {
1052 display: none; 1089 display: none;
1053 } 1090 }
1091
1092 /*
1093 Notification
1094 */
1095
1096 #notification
1097 {
1098 position: fixed;
1099 top: 0rem;
1100 left: 0rem;
1101 display: flex;
1102 padding: 1rem 1.9rem;
1103 width: 100%;
1104 box-sizing: border-box;
1105 opacity: 0.8;
1106 font-size: 1rem;
1107 color: #099CD0;
1108 background-color: #E1F2FA;
1109 }
1110
1111 #notification strong
1112 {
1113 flex: 1;
1114 text-align: center;
1115 }
1116
1117 #hide-notification
1118 {
1119 border: 0rem;
1120 padding: 0rem;
1121 margin: 0rem 1rem;
1122 background-color: transparent;
1123 cursor: pointer;
1124 }
1125
1126 #hide-notification::after
1127 {
1128 content: "";
1129 display: block;
1130 height: 1rem;
1131 width: 1rem;
1132 border: 0rem;
1133 background-color: #099DD1;
1134 -webkit-mask: url(delete.svg);
1135 mask: url(delete.svg);
1136 }
1137
1138 #hide-notification:hover::after
1139 {
1140 background-color: #5CBCE1;
1141 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld