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

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

Issue 29519669: Issue 5539 - Implement "Acceptable Ads notification" (Closed)
Left Patch Set: Created Sept. 15, 2017, 6:34 p.m.
Right Patch Set: Addressed Thomas comment from patchset 6 Created Sept. 22, 2017, 10:28 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 | « new-options.js ('k') | no next file » | 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 75 matching lines...) Expand 10 before | Expand all | Expand 10 after
86 { 86 {
87 margin: 0rem; 87 margin: 0rem;
88 } 88 }
89 89
90 [aria-hidden="true"] 90 [aria-hidden="true"]
91 { 91 {
92 display: none !important; 92 display: none !important;
93 } 93 }
94 94
95 input[type="text"], 95 input[type="text"],
96 input[type="url"],
96 textarea, 97 textarea,
97 main 98 main
98 { 99 {
99 -webkit-box-sizing: border-box; 100 -webkit-box-sizing: border-box;
100 -moz-box-sizing: border-box; 101 -moz-box-sizing: border-box;
101 box-sizing: border-box; 102 box-sizing: border-box;
102 } 103 }
103 104
104 /* 105 /*
105 Buttons and links 106 Buttons and links
(...skipping 162 matching lines...) Expand 10 before | Expand all | Expand 10 after
268 border-width: 0px 1px 1px 1px; 269 border-width: 0px 1px 1px 1px;
269 width: 100%; 270 width: 100%;
270 background-color: #E1F2FA; 271 background-color: #E1F2FA;
271 text-align: initial; 272 text-align: initial;
272 } 273 }
273 274
274 button.list:hover 275 button.list:hover
275 { 276 {
276 box-shadow: inset 0 0 0 3px #099CD0; 277 box-shadow: inset 0 0 0 3px #099CD0;
277 border-color: #099CD0; 278 border-color: #099CD0;
279 }
280
281 .side-controls:not(.wrap)
282 {
283 margin: 0.8rem 0rem;
284 display: flex;
285 justify-content: flex-end;
286 }
287
288 .side-controls button
289 {
290 margin: 0rem;
291 -moz-margin-start: 1rem;
292 -webkit-margin-start: 1rem;
293 }
294
295 .side-controls.wrap button
296 {
297 margin: 0.8rem 0rem;
298 -moz-margin-start: auto;
299 -webkit-margin-start: auto;
300 }
301
302 /*
303 Forms
304 */
305
306 .floating-input
307 {
308 position: relative;
309 padding-top: 0.7rem;
310 margin: 1.8rem 0rem 0.5rem 0rem;
311 }
312
313 .floating-input input
314 {
315 border-color: #CDCDCD;
316 border-width: 0px 0px 1px 0px;
317 outline: none;
318 font-size: 1.3rem;
319 padding: 5px;
320 width: 100%;
321 }
322
323 .floating-input input:placeholder-shown ~ label,
324 .floating-input input + label,
325 .floating-input input:focus + label
326 {
327 position: absolute;
328 top: 0.9rem;
329 left: 0.3rem;
330 font-size: 1.3rem;
331 }
332
333 .floating-input input + label,
334 .floating-input input:focus + label
335 {
336 top: -0.5rem;
337 font-size: 0.9rem;
338 }
339
340 html[dir="rtl"] .floating-input input:placeholder-shown ~ label,
341 html[dir="rtl"] .floating-input input ~ label,
342 html[dir="rtl"] .floating-input input:focus ~ label
343 {
344 right: 0.3rem;
345 left: auto;
346 }
347
348 [data-validation] .floating-input input:focus:invalid
349 {
350 border-color: #C11D27;
351 }
352
353 [data-validation] .floating-input input:focus:invalid ~ .attention::before,
354 [data-validation] .floating-input input:focus:valid ~ .attention::before
355 {
356 content: "";
357 position: absolute;
358 display: block;
359 margin: 0.5rem;
360 height: 1.5rem;
361 width: 1.5rem;
362 border: 0rem;
363 top: 0.5rem;
364 right: 0rem;
365 }
366
367 html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attenti on::before,
368 html[dir="rtl"] [data-validation] .floating-input input:focus:valid ~ .attention ::before
369 {
370 left: 0rem;
371 right: auto;
372 }
373
374 [data-validation] .floating-input input:focus:invalid ~ .attention::before
375 {
376 background-color: #C11D27;
377 -webkit-mask: url(icons/attention.svg);
378 mask: url(icons/attention.svg);
379 }
380
381 [data-validation] .floating-input input:focus:valid ~ .attention::before
382 {
383 top: 0.8rem;
384 background-color: green;
385 -webkit-mask: url(icons/checkmark.svg);
386 mask: url(icons/checkmark.svg);
387 }
388
389 [data-validation] .floating-input input ~ .error-msg
390 {
391 margin-top: 0.5rem;
392 color: #C11D27;
393 display: block;
394 visibility: hidden;
395 }
396
397 [data-validation] .floating-input input:focus:invalid ~ .error-msg
398 {
399 visibility: visible;
278 } 400 }
279 401
280 /* 402 /*
281 Sidebar 403 Sidebar
282 */ 404 */
283 405
284 #sidebar, 406 #sidebar,
285 #sidebar .fixed, 407 #sidebar .fixed,
286 [role="tablist"] 408 [role="tablist"]
287 { 409 {
(...skipping 566 matching lines...) Expand 10 before | Expand all | Expand 10 after
854 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled 976 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled
855 { 977 {
856 display: inline; 978 display: inline;
857 } 979 }
858 980
859 #all-filter-lists-table 981 #all-filter-lists-table
860 { 982 {
861 margin-bottom: 1.5rem; 983 margin-bottom: 1.5rem;
862 } 984 }
863 985
864 .side-controls button
865 {
866 margin: 0.8rem 0rem;
867 -moz-margin-start: auto;
868 -webkit-margin-start: auto;
869 }
870
871 #custom-filters h3 986 #custom-filters h3
872 { 987 {
873 margin: 0rem; 988 margin: 0rem;
874 } 989 }
875 990
876 #custom-filters-raw 991 #custom-filters-raw
877 { 992 {
878 width: 100%; 993 width: 100%;
879 height: 23.6rem; 994 height: 23.6rem;
880 padding: 0.8rem 1.3rem; 995 padding: 0.8rem 1.3rem;
881 } 996 }
882 997
883 #custom-filters-raw:focus 998 #custom-filters-raw:focus
884 { 999 {
885 outline: none; 1000 outline: none;
886 border: 2px solid #099CD0; 1001 border: 2px solid #099CD0;
887 }
888
889 #custom-filters-raw-controls
890 {
891 display: flex;
892 justify-content: flex-end;
893 }
894
895 #custom-filters-raw-controls button
896 {
897 -moz-margin-start: 1rem;
898 -webkit-margin-start: 1rem;
899 } 1002 }
900 1003
901 #empty-custom-filters 1004 #empty-custom-filters
902 { 1005 {
903 padding: 1.5rem; 1006 padding: 1.5rem;
904 border: 1px solid #CDCDCD; 1007 border: 1px solid #CDCDCD;
905 } 1008 }
906 1009
907 /* 1010 /*
908 Context menu 1011 Context menu
(...skipping 308 matching lines...) Expand 10 before | Expand all | Expand 10 after
1217 { 1320 {
1218 max-height: 60vh; 1321 max-height: 60vh;
1219 overflow: auto; 1322 overflow: auto;
1220 } 1323 }
1221 1324
1222 .dialog-content 1325 .dialog-content
1223 { 1326 {
1224 margin: 1rem 1.8rem; 1327 margin: 1rem 1.8rem;
1225 } 1328 }
1226 1329
1227 #dialog-body button
1228 {
1229 -moz-margin-start: auto;
1230 -webkit-margin-start: auto;
1231 }
1232
1233 [data-dialog="language-change"] .dialog-content, 1330 [data-dialog="language-change"] .dialog-content,
1234 [data-dialog="language-add"] .dialog-content 1331 [data-dialog="language-add"] .dialog-content
1235 { 1332 {
1236 margin: 0rem; 1333 margin: 0rem;
1237 } 1334 }
1238 1335
1239 [data-dialog="about"] .dialog-content 1336 [data-dialog="about"] .dialog-content
1240 { 1337 {
1241 text-align: center; 1338 text-align: center;
1242 } 1339 }
1243 1340
1244 [data-dialog="about"] button 1341 [data-dialog="about"] button
1245 { 1342 {
1246 margin: 1.5rem auto 1.8rem auto; 1343 margin: 1.5rem auto 1.8rem auto;
1247 } 1344 }
1248 1345
1249 [data-dialog="about"] p, 1346 [data-dialog="about"] p,
1250 #tracking-notification p 1347 #tracking-notification p
1251 { 1348 {
1252 margin: 0.5rem 0rem; 1349 margin: 0.5rem 0rem;
1253 } 1350 }
1254 1351
1255 #abp-version 1352 #abp-version
1256 { 1353 {
1257 margin-bottom: 2rem; 1354 margin-bottom: 2rem;
1258 } 1355 }
1259 1356
1260 #dialog label 1357 [data-dialog="import"] .side-controls
1261 { 1358 {
1262 font-size: 0.9rem; 1359 margin-top: 2.45rem;
1263 margin: 0px;
1264 }
1265
1266 #dialog input[type="text"]
1267 {
1268 border-color: #CDCDCD;
1269 border-width: 0px 0px 1px 0px;
1270 font-size: 1.3rem;
1271 padding: 5px;
1272 width: 100%;
1273 } 1360 }
1274 1361
1275 #dialog .table 1362 #dialog .table
1276 { 1363 {
1277 width: 100%; 1364 width: 100%;
1278 } 1365 }
1279 1366
1280 #dialog .section:not(:first-child) 1367 #dialog .section:not(:first-child)
1281 { 1368 {
1282 margin-top: 24px; 1369 margin-top: 24px;
(...skipping 13 matching lines...) Expand all
1296 1383
1297 #dialog .url 1384 #dialog .url
1298 { 1385 {
1299 margin-top: 10px; 1386 margin-top: 10px;
1300 margin-bottom: 20px; 1387 margin-bottom: 20px;
1301 word-wrap: break-word; 1388 word-wrap: break-word;
1302 } 1389 }
1303 1390
1304 body:not([data-dialog="about"]) #dialog-title-about, 1391 body:not([data-dialog="about"]) #dialog-title-about,
1305 body:not([data-dialog="about"]) #dialog-content-about, 1392 body:not([data-dialog="about"]) #dialog-content-about,
1306 body:not([data-dialog="custom"]) #dialog-title-custom, 1393 body:not([data-dialog="import"]) #dialog-title-import,
1307 body:not([data-dialog="custom"]) #dialog-content-custom, 1394 body:not([data-dialog="import"]) #dialog-content-import,
1308 body:not([data-dialog="language-add"]) #dialog-title-language-add, 1395 body:not([data-dialog="language-add"]) #dialog-title-language-add,
1309 body:not([data-dialog="language-change"]) #dialog-title-language-change, 1396 body:not([data-dialog="language-change"]) #dialog-title-language-change,
1310 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add, 1397 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add,
1311 body:not([data-dialog="language-add"]) #dialog-body button.add, 1398 body:not([data-dialog="language-add"]) #dialog-body button.add,
1312 body:not([data-dialog="language-change"]) #dialog-body button.change, 1399 body:not([data-dialog="language-change"]) #dialog-body button.change,
1313 body:not([data-dialog="predefined"]) #dialog-title-predefined, 1400 body:not([data-dialog="predefined"]) #dialog-title-predefined,
1314 body:not([data-dialog="predefined"]) #dialog-content-predefined, 1401 body:not([data-dialog="predefined"]) #dialog-content-predefined,
1315 body:not([data-dialog="tracking"]) #dialog-title-tracking, 1402 body:not([data-dialog="tracking"]) #dialog-title-tracking,
1316 body:not([data-dialog="tracking"]) #dialog-content-tracking, 1403 body:not([data-dialog="tracking"]) #dialog-content-tracking,
1317 body:not([data-dialog]) #dialog 1404 body:not([data-dialog]) #dialog
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
1351 1438
1352 #hide-notification::after 1439 #hide-notification::after
1353 { 1440 {
1354 background-color: #099DD1; 1441 background-color: #099DD1;
1355 } 1442 }
1356 1443
1357 #hide-notification:hover::after 1444 #hide-notification:hover::after
1358 { 1445 {
1359 background-color: #5CBCE1; 1446 background-color: #5CBCE1;
1360 } 1447 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld