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

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

Issue 29502647: Issue 5482 - Sidebar and about ABP dialog (Closed)
Patch Set: Styleguide changes Created Aug. 27, 2017, 3:55 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-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
49 {
50 font-size: 20px;
51 }
52
48 body 53 body
49 { 54 {
50 background-color: #F5F5F5; 55 background-color: #F5F5F5;
51 display: flex; 56 display: flex;
52 margin: 20px 10px; 57 margin: 1.2rem 0.3rem;
53 font-family: "Source Sans Pro", sans-serif; 58 font-family: "Source Sans Pro", sans-serif;
54 font-size: 14px; 59 font-weight: 300;
60 font-size: 1rem;
55 color: #494949; 61 color: #494949;
56 } 62 }
57 63
58 h1 64 h1
59 { 65 {
60 font-size: 24px; 66 font-size: 3rem;
61 line-height: 1em;
62 font-weight: 300; 67 font-weight: 300;
63 } 68 }
64 69
65 h2 70 h2
66 { 71 {
67 font-size: 16px; 72 font-size: 1.375rem;
68 font-weight: 600; 73 font-weight: 700;
69 } 74 }
70 75
71 p 76 p
72 { 77 {
73 font-weight: 300; 78 font-weight: 300;
74 } 79 }
75 80
76 hr
77 {
78 background-color: #CDCDCD;
79 border: 0px;
80 height: 1px;
81 margin: 0px;
82 }
83
84 [aria-hidden="true"] 81 [aria-hidden="true"]
85 { 82 {
86 display: none !important; 83 display: none !important;
87 } 84 }
88 85
89 input[type="search"]::-webkit-search-cancel-button
90 {
91 display: none;
92 }
93
94 input[type="text"], 86 input[type="text"],
95 input[type="search"], 87 textarea,
96 textarea 88 main
97 { 89 {
98 -webkit-box-sizing: border-box; 90 -webkit-box-sizing: border-box;
99 -moz-box-sizing: border-box; 91 -moz-box-sizing: border-box;
100 box-sizing: border-box; 92 box-sizing: border-box;
101 } 93 }
102 94
95 /*
96 Buttons and links
97 */
98
99 button,
100 .button
101 {
102 padding: 0.8rem 1.2rem;
103 font-size: 1.125rem;
104 font-weight: 700;
105 text-decoration: none;
106 text-transform: uppercase;
107 cursor: pointer;
108 }
109
110 button.primary,
111 .button.primary
112 {
113 border: 0px;
114 color: #FFF;
115 background-color: #0A9DD1;
116 }
117
118 button.primary:hover,
119 .button.primary:hover
120 {
121 box-shadow: inset 0 0 0 2px #005D80;
122 }
123
124 button.primary[disabled]
125 {
126 background-color: #5CBCE1;
127 }
128
129 button.secondary,
130 .button.secondary
131 {
132 border: 1px solid #0A9DD1;
133 color: #099CD0;
134 }
135
136 button.secondary:hover,
137 .button.secondary:hover
138 {
139 box-shadow: inset 0 0 0 4px #099CD0;
140 }
141
103 button[role="checkbox"], 142 button[role="checkbox"],
104 #dialog-body .table button[role="checkbox"] 143 #dialog-body .table button[role="checkbox"]
105 { 144 {
106 width: 18px; 145 width: 18px;
107 height: 18px; 146 height: 18px;
108 margin-top: 0px; 147 margin-top: 0px;
109 -moz-margin-end: 20px; 148 -moz-margin-end: 20px;
110 -webkit-margin-end: 20px; 149 -webkit-margin-end: 20px;
111 padding: 0px; 150 padding: 0px;
112 border: none; 151 border: 0px;
113 background-color: transparent; 152 background-color: transparent;
114 background-position: -51px 0px; 153 background-position: -51px 0px;
115 } 154 }
116 155
117 button[role="checkbox"][aria-checked="true"], 156 button[role="checkbox"][aria-checked="true"],
118 #dialog-body .table button[role="checkbox"][aria-checked="true"] 157 #dialog-body .table button[role="checkbox"][aria-checked="true"]
119 { 158 {
120 background-position: -68px 0px; 159 background-position: -68px 0px;
121 } 160 }
122 161
123 #nav-sidebar 162 button.link
124 { 163 {
125 min-width: 198px; 164 border: 0px;
165 background-color: transparent;
166 font-weight: 300;
167 font-family: inherit;
168 color: #099CD0;
169 text-transform: none;
170 padding: 0.2rem;
126 } 171 }
127 172
128 #nav-sidebar .fixed 173 /*
174 Sidebar
175 */
176
177 #sidebar,
178 #sidebar .fixed,
179 [role="tablist"]
129 { 180 {
130 top: 40px; 181 width: 13.2rem;
131 bottom: 2px; 182 }
183
184 #sidebar
185 {
186 flex-shrink: 0;
187 }
188
189 #sidebar .fixed
190 {
191 top: 1.2rem;
192 bottom: 0rem;
132 height: auto; 193 height: auto;
133 position: fixed; 194 position: fixed;
134 } 195 }
135 196
136 #page-title 197 #sidebar header
137 { 198 {
138 padding: 0px 20px; 199 text-align: right;
200 margin-right: 2rem;
139 } 201 }
140 202
141 #page-title p 203 html[dir="rtl"] #sidebar header
142 { 204 {
143 margin: 0px; 205 margin-left: 2rem;
144 font-size: 16px;
145 line-height: 1em;
146 } 206 }
147 207
148 #page-title h1 208 #sidebar header h1
149 { 209 {
150 margin: 0px; 210 margin: 0rem;
151 padding: 8px 0px 16px 0px; 211 font-size: 1.5rem;
152 } 212 }
153 213
154 .tabs li 214 #sidebar header p
155 { 215 {
156 cursor: pointer; 216 margin: 0rem;
157 display: flex; 217 font-size: 2.4rem;
158 } 218 }
159 219
160 .tabs li a 220 html[dir="rtl"] #sidebar header
161 { 221 {
162 flex: 1; 222 text-align: left;
163 color: inherit;
164 text-decoration: none;
165 } 223 }
166 224
167 .tabs.vertical 225 #sidebar-logo
226 {
227 width: 3rem;
228 margin-bottom: 0.7rem;
229 }
230
231 #sidebar nav,
232 #sidebar footer
233 {
234 margin: 1.4rem 0rem;
235 }
236
237 [role="tablist"]
168 { 238 {
169 list-style: none; 239 list-style: none;
170 margin: 0px; 240 margin: 0px;
171 position: relative; 241 position: relative;
172 padding: 0px; 242 padding: 0px;
173 width: 198px; 243 font-size: 1.25rem;
174 } 244 }
175 245
176 .tabs.vertical li 246 [role="tablist"] li a
177 { 247 {
178 height: 46px; 248 display: flex;
179 margin-top: -1px; 249 margin-top: -1px;
250 padding: 1rem 0.8rem;
180 -moz-margin-end: -1px; 251 -moz-margin-end: -1px;
181 -webkit-margin-end: -1px; 252 -webkit-margin-end: -1px;
182 -moz-margin-start: -1px; 253 -moz-margin-start: -1px;
183 -webkit-margin-start: -1px; 254 -webkit-margin-start: -1px;
184 border-color: #CDCDCD transparent; 255 border-color: #CDCDCD transparent;
185 border-style: solid; 256 border-style: solid;
186 border-width: 1px; 257 border-width: 1px;
187 font-size: 16px; 258 text-decoration: none;
188 font-weight: 300; 259 color: inherit;
189 line-height: 1em; 260 cursor: pointer;
190 } 261 }
191 262
192 .tabs.vertical li a, 263 [role="tablist"] a[role="tab"]:focus
193 .tabs.vertical li span,
194 .tabs.vertical li::after
195 {
196 margin: auto 20px;
197 }
198
199 .tabs li[role="tab"]:focus
200 { 264 {
201 outline: none; 265 outline: none;
202 text-shadow: 0px 0px 1px #888; 266 text-shadow: 0px 0px 1px #888;
203 } 267 }
204 268
205 .tabs li[role="tab"][aria-selected] 269 li a[role="tab"][aria-selected]
206 { 270 {
207 border-radius: 3px 0px 0px 3px;
208 -moz-border-start-color: #CDCDCD; 271 -moz-border-start-color: #CDCDCD;
209 -webkit-border-start-color: #CDCDCD; 272 -webkit-border-start-color: #CDCDCD;
210 font-weight: 600; 273 font-weight: 700;
211 background-color: #FFF; 274 background-color: #FFF;
212 } 275 }
213 276
214 html[dir="rtl"] .tabs li[role="tab"][aria-selected] 277 #sidebar footer
215 {
216 border-radius: 0px 3px 3px 0px;
217 }
218
219 .tabs.vertical.bottom
220 { 278 {
221 bottom: 0px; 279 bottom: 0px;
222 position: absolute; 280 position: absolute;
223 }
224
225 .tabs.vertical.bottom li:first-child
226 {
227 border-top: 0px;
228 }
229
230 #tab-contribute
231 {
232 border-bottom: none;
233 }
234
235 #nav-sidebar ul li span
236 {
237 width: 100%; 281 width: 100%;
238 } 282 }
239 283
240 #nav-sidebar ul li::after 284 #sidebar footer p
241 { 285 {
242 content: ""; 286 display: flex;
243 min-width: 14px; 287 justify-content: center;
244 height: 14px; 288 margin: 1.2rem 0rem;
245 background-image: url(options-sprite.png);
246 } 289 }
247 290
248 #tab-general::after 291 main
249 { 292 {
250 background-position: -16px -18px; 293 background-color: #FFFFFF;
294 border: 1px solid #CDCDCD;
295 max-width: 46.3rem;
296 padding: 0px 2rem 1.4rem 2rem;
251 } 297 }
252 298
253 #tab-advanced::after 299 main > div
254 {
255 background-position: -46px -18px;
256 }
257
258 #tab-help::after
259 {
260 background-position: -1px -18px;
261 }
262
263 #tab-share::after
264 {
265 background-position: -61px -18px;
266 }
267
268 #tab-contribute::after
269 {
270 background-position: -31px -18px;
271 }
272
273 #tab-share:lang(zh),
274 #tab-share[hidden]
275 { 300 {
276 display: none; 301 display: none;
277 } 302 }
278 303
279 #tab-share:lang(zh) + li, 304 main h1
280 #tab-share[hidden] + li
281 {
282 border-top: none;
283 }
284
285 #content
286 {
287 background-color: #FFFFFF;
288 border: 1px solid #CDCDCD;
289 border-radius: 8px;
290 width: 840px;
291 padding: 0px 60px 40px 60px;
292 }
293
294 #content h1
295 { 305 {
296 border-bottom: 1px solid #CDCDCD; 306 border-bottom: 1px solid #CDCDCD;
297 margin: 0px 0px 24px 0px; 307 margin: 0px 0px 24px 0px;
298 padding: 40px 0px 16px 0px; 308 padding: 40px 0px 16px 0px;
299 } 309 }
300 310
301 #link-version
302 {
303 display: flex;
304 margin: 12px 20px;
305 color: #3A7BA6;
306 text-decoration: none;
307 }
308
309 #abp-version
310 {
311 -moz-margin-start: 5px;
312 -webkit-margin-start: 5px;
313 }
314
315 #content-wrapper
316 {
317 position: relative;
318 }
319
320 #content-wrapper > div
321 {
322 display: none;
323 }
324
325 body[data-tab|="general"] #content-general, 311 body[data-tab|="general"] #content-general,
326 body[data-tab|="advanced"] #content-advanced, 312 body[data-tab|="advanced"] #content-advanced,
327 body[data-tab|="whitelist"] #content-whitelist, 313 body[data-tab|="whitelist"] #content-whitelist,
328 body[data-tab|="help"] #content-help 314 body[data-tab|="help"] #content-help
329 { 315 {
330 display: block; 316 display: block;
331 } 317 }
332 318
333 div.button 319 div.button
334 { 320 {
(...skipping 158 matching lines...) Expand 10 before | Expand all | Expand 10 after
493 .controls > div 479 .controls > div
494 { 480 {
495 display: flex; 481 display: flex;
496 position: relative; 482 position: relative;
497 } 483 }
498 484
499 .controls button, 485 .controls button,
500 #dialog-close 486 #dialog-close
501 { 487 {
502 display: flex; 488 display: flex;
503 border: none; 489 border: 0px;
504 padding: 0px; 490 padding: 0px;
505 align-items: center; 491 align-items: center;
506 background: none; 492 background: none;
507 cursor: pointer; 493 cursor: pointer;
508 } 494 }
509 495
510 .controls button span:not(.icon) 496 .controls button span:not(.icon)
511 { 497 {
512 -moz-margin-start: 16px; 498 -moz-margin-start: 16px;
513 -webkit-margin-start: 16px; 499 -webkit-margin-start: 16px;
(...skipping 325 matching lines...) Expand 10 before | Expand all | Expand 10 after
839 825
840 div.context-menu > div a::before 826 div.context-menu > div a::before
841 { 827 {
842 vertical-align: middle; 828 vertical-align: middle;
843 height: 16px; 829 height: 16px;
844 width: 16px; 830 width: 16px;
845 } 831 }
846 832
847 div.context-menu > div a:last-child 833 div.context-menu > div a:last-child
848 { 834 {
849 border: none; 835 border: 0px;
850 } 836 }
851 837
852 .context-menu .update-subscription::before 838 .context-menu .update-subscription::before
853 { 839 {
854 background-position: -38px -31px; 840 background-position: -38px -31px;
855 } 841 }
856 842
857 .context-menu .website::before 843 .context-menu .website::before
858 { 844 {
859 background-position: -33px -47px; 845 background-position: -33px -47px;
(...skipping 176 matching lines...) Expand 10 before | Expand all | Expand 10 after
1036 } 1022 }
1037 1023
1038 #dialog h3, 1024 #dialog h3,
1039 #dialog label 1025 #dialog label
1040 { 1026 {
1041 font-size: 14px; 1027 font-size: 14px;
1042 font-weight: 600; 1028 font-weight: 600;
1043 margin: 0px; 1029 margin: 0px;
1044 } 1030 }
1045 1031
1046 #dialog input[type="text"], 1032 #dialog input[type="text"]
1047 #dialog input[type="search"]
1048 { 1033 {
1049 font-size: 16px; 1034 font-size: 16px;
1050 margin-top: 10px; 1035 margin-top: 10px;
1051 padding: 5px; 1036 padding: 5px;
1052 width: 100%; 1037 width: 100%;
1053 } 1038 }
1054 1039
1055 #dialog .table 1040 #dialog .table
1056 { 1041 {
1057 width: 100%; 1042 width: 100%;
(...skipping 11 matching lines...) Expand all
1069 flex: 1; 1054 flex: 1;
1070 font-size: 16px; 1055 font-size: 16px;
1071 color: #FFFFFF; 1056 color: #FFFFFF;
1072 } 1057 }
1073 1058
1074 #dialog-body .dialog-content-block 1059 #dialog-body .dialog-content-block
1075 { 1060 {
1076 padding: 12px 0px; 1061 padding: 12px 0px;
1077 } 1062 }
1078 1063
1079 #dialog-body button
1080 {
1081 background-color: #F5F5F5;
1082 border: none;
1083 color: #3A7BA6;
1084 cursor: pointer;
1085 display: block;
1086 font-family: inherit;
1087 margin-top: 8px;
1088 padding: 10px 16px;
1089 text-align: initial;
1090 width: 100%;
1091 }
1092
1093 #dialog .url 1064 #dialog .url
1094 { 1065 {
1095 margin-top: 10px; 1066 margin-top: 10px;
1096 margin-bottom: 20px; 1067 margin-bottom: 20px;
1097 word-wrap: break-word; 1068 word-wrap: break-word;
1098 } 1069 }
1099 1070
1071 body:not([data-dialog="about"]) #dialog-title-about,
1072 body:not([data-dialog="about"]) #dialog-content-about,
1100 body:not([data-dialog="custom"]) #dialog-title-custom, 1073 body:not([data-dialog="custom"]) #dialog-title-custom,
1101 body:not([data-dialog="custom"]) #dialog-content-custom, 1074 body:not([data-dialog="custom"]) #dialog-content-custom,
1102 body:not([data-dialog="language-add"]) #dialog-title-language-add, 1075 body:not([data-dialog="language-add"]) #dialog-title-language-add,
1103 body:not([data-dialog="language-change"]) #dialog-title-language-change, 1076 body:not([data-dialog="language-change"]) #dialog-title-language-change,
1104 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add, 1077 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add,
1105 body:not([data-dialog="language-add"]) #dialog-body button.add, 1078 body:not([data-dialog="language-add"]) #dialog-body button.add,
1106 body:not([data-dialog="language-change"]) #dialog-body button.change, 1079 body:not([data-dialog="language-change"]) #dialog-body button.change,
1107 body:not([data-dialog="predefined"]) #dialog-title-predefined, 1080 body:not([data-dialog="predefined"]) #dialog-title-predefined,
1108 body:not([data-dialog="predefined"]) #dialog-content-predefined, 1081 body:not([data-dialog="predefined"]) #dialog-content-predefined,
1109 body:not([data-dialog]) #dialog 1082 body:not([data-dialog]) #dialog
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
1154 border: 0rem; 1127 border: 0rem;
1155 background-color: #099DD1; 1128 background-color: #099DD1;
1156 -webkit-mask: url(delete.svg); 1129 -webkit-mask: url(delete.svg);
1157 mask: url(delete.svg); 1130 mask: url(delete.svg);
1158 } 1131 }
1159 1132
1160 #hide-notification:hover::after 1133 #hide-notification:hover::after
1161 { 1134 {
1162 background-color: #5CBCE1; 1135 background-color: #5CBCE1;
1163 } 1136 }
OLDNEW

Powered by Google App Engine
This is Rietveld