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

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

Issue 29549891: Issue 5706 - Finish custom filter list dialog (Closed)
Patch Set: Created Sept. 19, 2017, 6:43 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
« new-options.js ('K') | « skin/icons/attention.svg ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 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 164 matching lines...) Expand 10 before | Expand all | Expand 10 after
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;
278 } 279 }
279 280
281 .side-controls button
saroyanm 2017/09/19 18:53:02 Note: Now we have controls that are pushed to the
ire 2017/09/20 14:53:13 Acknowledged.
282 {
283 margin: 0.8rem 0rem;
284 -moz-margin-start: auto;
285 -webkit-margin-start: auto;
286 }
287
288 .side-controls.nowrap
289 {
290 margin: 0.8rem 0rem;
291 display: flex;
292 justify-content: flex-end;
293 }
294
295 .side-controls.nowrap button
296 {
297 margin: 0rem;
298 -moz-margin-start: 1rem;
299 -webkit-margin-start: 1rem;
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;
saroyanm 2017/09/19 18:53:02 We don't have green color yet, see -> https://bitb
ire 2017/09/20 14:53:13 Acknowledged.
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;
400 }
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 {
288 width: 13.2rem; 410 width: 13.2rem;
289 } 411 }
(...skipping 564 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 } 1002 }
888 1003
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 }
900
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
909 */ 1012 */
910 1013
(...skipping 306 matching lines...) Expand 10 before | Expand all | Expand 10 after
1217 { 1320 {
1218 max-height: 50vh; 1321 max-height: 50vh;
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 { 1347 {
1251 margin: 0.5rem 0rem; 1348 margin: 0.5rem 0rem;
1252 } 1349 }
1253 1350
1254 #abp-version 1351 #abp-version
1255 { 1352 {
1256 margin-bottom: 2rem; 1353 margin-bottom: 2rem;
1257 } 1354 }
1258 1355
1259 #dialog label 1356 [data-dialog="import"] .side-controls
1260 { 1357 {
1261 font-size: 0.9rem; 1358 margin-top: 2.45rem;
1262 margin: 0px;
1263 }
1264
1265 #dialog input[type="text"]
1266 {
1267 border-color: #CDCDCD;
1268 border-width: 0px 0px 1px 0px;
1269 font-size: 1.3rem;
1270 padding: 5px;
1271 width: 100%;
1272 } 1359 }
1273 1360
1274 #dialog .table 1361 #dialog .table
1275 { 1362 {
1276 width: 100%; 1363 width: 100%;
1277 } 1364 }
1278 1365
1279 #dialog .section:not(:first-child) 1366 #dialog .section:not(:first-child)
1280 { 1367 {
1281 margin-top: 24px; 1368 margin-top: 24px;
(...skipping 13 matching lines...) Expand all
1295 1382
1296 #dialog .url 1383 #dialog .url
1297 { 1384 {
1298 margin-top: 10px; 1385 margin-top: 10px;
1299 margin-bottom: 20px; 1386 margin-bottom: 20px;
1300 word-wrap: break-word; 1387 word-wrap: break-word;
1301 } 1388 }
1302 1389
1303 body:not([data-dialog="about"]) #dialog-title-about, 1390 body:not([data-dialog="about"]) #dialog-title-about,
1304 body:not([data-dialog="about"]) #dialog-content-about, 1391 body:not([data-dialog="about"]) #dialog-content-about,
1305 body:not([data-dialog="custom"]) #dialog-title-custom, 1392 body:not([data-dialog="import"]) #dialog-title-import,
1306 body:not([data-dialog="custom"]) #dialog-content-custom, 1393 body:not([data-dialog="import"]) #dialog-content-import,
1307 body:not([data-dialog="language-add"]) #dialog-title-language-add, 1394 body:not([data-dialog="language-add"]) #dialog-title-language-add,
1308 body:not([data-dialog="language-change"]) #dialog-title-language-change, 1395 body:not([data-dialog="language-change"]) #dialog-title-language-change,
1309 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add, 1396 body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dia log-content-language-add,
1310 body:not([data-dialog="language-add"]) #dialog-body button.add, 1397 body:not([data-dialog="language-add"]) #dialog-body button.add,
1311 body:not([data-dialog="language-change"]) #dialog-body button.change, 1398 body:not([data-dialog="language-change"]) #dialog-body button.change,
1312 body:not([data-dialog="predefined"]) #dialog-title-predefined, 1399 body:not([data-dialog="predefined"]) #dialog-title-predefined,
1313 body:not([data-dialog="predefined"]) #dialog-content-predefined, 1400 body:not([data-dialog="predefined"]) #dialog-content-predefined,
1314 body:not([data-dialog]) #dialog 1401 body:not([data-dialog]) #dialog
1315 { 1402 {
1316 display: none; 1403 display: none;
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
1348 1435
1349 #hide-notification::after 1436 #hide-notification::after
1350 { 1437 {
1351 background-color: #099DD1; 1438 background-color: #099DD1;
1352 } 1439 }
1353 1440
1354 #hide-notification:hover::after 1441 #hide-notification:hover::after
1355 { 1442 {
1356 background-color: #5CBCE1; 1443 background-color: #5CBCE1;
1357 } 1444 }
OLDNEW
« new-options.js ('K') | « skin/icons/attention.svg ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld