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

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

Issue 29536681: Issue 5628 - Implement main styles (Closed)
Patch Set: Created Sept. 13, 2017, 4:46 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
« no previous file with comments | « skin/icons/trash.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 13 matching lines...) Expand all
24 font-weight: 300; 24 font-weight: 300;
25 font-style: normal; 25 font-style: normal;
26 } 26 }
27 27
28 @font-face 28 @font-face
29 { 29 {
30 font-family: "Source Sans Pro"; 30 font-family: "Source Sans Pro";
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;
35 font-style: normal; 34 font-style: normal;
36 } 35 }
37 36
38 @font-face 37 @font-face
39 { 38 {
40 font-family: "Source Sans Pro"; 39 font-family: "Source Sans Pro";
41 src: url(fonts/SourceSansPro-bold.woff); 40 src: url(fonts/SourceSansPro-bold.woff);
42 /* local("Ø") forces using no local font called Source Sans Pro */ 41 /* local("Ø") forces using no local font called Source Sans Pro */
43 src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff"); 42 src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff");
44 font-weight: 700; 43 font-weight: 700;
45 font-style: normal; 44 font-style: normal;
46 } 45 }
47 46
48 html 47 html
49 { 48 {
50 font-size: 20px; 49 font-size: 16px;
51 } 50 }
52 51
53 body 52 body
54 { 53 {
55 background-color: #F5F5F5; 54 background-color: #F3F3F3;
56 display: flex; 55 display: flex;
57 margin: 1.2rem 0.3rem; 56 margin: 1.2rem 0.3rem;
58 font-family: "Source Sans Pro", sans-serif; 57 font-family: "Source Sans Pro", sans-serif;
59 font-weight: 300; 58 font-size: 1.25rem;
60 font-size: 1rem;
61 color: #494949; 59 color: #494949;
62 } 60 }
63 61
64 h1 62 h1
65 { 63 {
66 font-size: 3rem; 64 font-size: 3rem;
67 font-weight: 300; 65 font-weight: 300;
68 } 66 }
69 67
70 h2 68 h2
71 { 69 {
72 font-size: 1.375rem; 70 font-size: 1.375rem;
73 font-weight: 700; 71 font-weight: 700;
74 } 72 }
75 73
76 p 74 a
77 { 75 {
78 font-weight: 300; 76 color: #099CD0;
77 text-decoration: none;
78 }
79
80 a:hover
81 {
82 color: #5CBCE1;
83 }
84
85 ul
86 {
87 margin: 0rem;
79 } 88 }
80 89
81 [aria-hidden="true"] 90 [aria-hidden="true"]
82 { 91 {
83 display: none !important; 92 display: none !important;
84 } 93 }
85 94
86 input[type="text"], 95 input[type="text"],
87 textarea, 96 textarea,
88 main 97 main
89 { 98 {
90 -webkit-box-sizing: border-box; 99 -webkit-box-sizing: border-box;
91 -moz-box-sizing: border-box; 100 -moz-box-sizing: border-box;
92 box-sizing: border-box; 101 box-sizing: border-box;
93 } 102 }
94 103
95 /* 104 /*
96 Buttons and links 105 Buttons and links
97 */ 106 */
98 107
99 button, 108 button,
100 .button 109 .button
101 { 110 {
111 display: block;
102 padding: 0.8rem 1.2rem; 112 padding: 0.8rem 1.2rem;
113 background-color: transparent;
103 font-size: 1.125rem; 114 font-size: 1.125rem;
104 font-weight: 700; 115 font-weight: 700;
105 text-decoration: none; 116 text-decoration: none;
106 text-transform: uppercase; 117 text-transform: uppercase;
107 cursor: pointer; 118 cursor: pointer;
108 } 119 }
109 120
110 button.primary, 121 button.primary,
111 .button.primary 122 .button.primary
112 { 123 {
113 border: 0px; 124 border: 0px;
114 color: #FFF; 125 color: #FFF;
115 background-color: #0A9DD1; 126 background-color: #099CD0;
116 } 127 }
117 128
118 button.primary:hover, 129 button.primary:not([disabled]):hover,
119 .button.primary:hover 130 .button.primary:hover
120 { 131 {
121 box-shadow: inset 0 0 0 2px #005D80; 132 box-shadow: inset 0 0 0 3px #005D80;
122 } 133 }
123 134
124 button.primary[disabled] 135 button.primary[disabled]
125 { 136 {
126 background-color: #5CBCE1; 137 background-color: #5CBCE1;
127 } 138 }
128 139
129 button.secondary, 140 button.secondary,
130 .button.secondary 141 .button.secondary
131 { 142 {
132 border: 1px solid #0A9DD1; 143 border: 1px solid #099CD0;
133 color: #099CD0; 144 color: #099CD0;
134 } 145 }
135 146
136 button.secondary:hover, 147 button.secondary:hover,
137 .button.secondary:hover 148 .button.secondary:hover
138 { 149 {
139 box-shadow: inset 0 0 0 4px #099CD0; 150 box-shadow: inset 0 0 0 2px #099CD0;
140 } 151 }
141 152
142 button[role="checkbox"], 153 button[role="checkbox"]
143 #dialog-body .table button[role="checkbox"]
144 { 154 {
145 width: 18px; 155 width: 18px;
146 height: 18px; 156 height: 18px;
147 margin-top: 0px;
148 -moz-margin-end: 20px;
149 -webkit-margin-end: 20px;
150 padding: 0px; 157 padding: 0px;
151 border: 0px; 158 border: 0px;
152 background-color: transparent; 159 background-color: transparent;
153 background-position: -51px 0px; 160 background-position: -51px 0px;
154 } 161 }
155 162
156 button[role="checkbox"][aria-checked="true"], 163 button[role="checkbox"][aria-checked="true"]:not(.toggle)
157 #dialog-body .table button[role="checkbox"][aria-checked="true"]
158 { 164 {
159 background-position: -68px 0px; 165 background-position: -68px 0px;
160 } 166 }
161 167
168 button[role="checkbox"][disabled]
169 {
170 border-radius: 2px;
171 background-color: #ccc;
172 }
173
174 button[role="checkbox"].toggle
175 {
176 background: url(icons/toggle.svg#on);
177 }
178
179 button[role="checkbox"][aria-checked="false"].toggle
180 {
181 background: url(icons/toggle.svg#off);
182 }
183
184 button[role="checkbox"][aria-checked="true"].toggle
185 {
186 background: url(icons/toggle.svg#on);
187 }
188
189 button[role="checkbox"].toggle
190 {
191 background-position: initial;
192 width: 2.25rem;
193 height: 1.3rem;
194 }
195
196 button[role="checkbox"][disabled].toggle
197 {
198 background-image: none;
199 }
200
201 button.delete::before
202 {
203 -webkit-mask: url(icons/trash.svg);
204 mask: url(icons/trash.svg);
205 }
206
207 button.gear::before
208 {
209 -webkit-mask: url(icons/gear.svg);
210 mask: url(icons/gear.svg);
211 }
212
213 button.gear,
214 button.delete
215 {
216 border: 0px;
217 padding: 0px;
218 background-color: transparent;
219 }
220
221 button.gear::before,
222 button.delete::before
223 {
224 content: "";
225 display: block;
226 height: 1.9rem;
227 width: 1.9rem;
228 background-color: #099DD1;
229 }
230
231 button.gear:hover::before,
232 button.delete:hover::before
233 {
234 background-color: #5CBCE1;
235 }
236
237 button.gear:hover,
238 button.delete:hover
239 {
240 background-position: -61px -51px;
241 }
242
243 button.link,
244 button.list
245 {
246 color: #099CD0;
247 }
248
162 button.link 249 button.link
163 { 250 {
164 border: 0px; 251 border: 0px;
165 background-color: transparent; 252 background-color: transparent;
166 font-weight: 300; 253 font-weight: 300;
167 font-family: inherit; 254 font-family: inherit;
168 color: #099CD0;
169 text-transform: none; 255 text-transform: none;
170 padding: 0.2rem; 256 padding: 0.2rem;
171 } 257 }
172 258
259 button.link:hover
260 {
261 color: #5CBCE1;
262 }
263
264 button.list
265 {
266 border-style: solid;;
267 border-color: #CDCDCD;
268 border-width: 0px 1px 1px 1px;
269 width: 100%;
270 background-color: #E1F2FA;
271 text-align: initial;
272 }
273
274 button.list:hover
275 {
276 box-shadow: inset 0 0 0 3px #099CD0;
277 border-color: #099CD0;
278 }
279
173 /* 280 /*
174 Sidebar 281 Sidebar
175 */ 282 */
176 283
177 #sidebar, 284 #sidebar,
178 #sidebar .fixed, 285 #sidebar .fixed,
179 [role="tablist"] 286 [role="tablist"]
180 { 287 {
181 width: 13.2rem; 288 width: 13.2rem;
182 } 289 }
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
235 342
236 #sidebar nav, 343 #sidebar nav,
237 #sidebar footer 344 #sidebar footer
238 { 345 {
239 margin: 1.4rem 0rem; 346 margin: 1.4rem 0rem;
240 } 347 }
241 348
242 [role="tablist"] 349 [role="tablist"]
243 { 350 {
244 list-style: none; 351 list-style: none;
245 margin: 0px; 352 margin: 0rem;
353 padding: 0rem;
246 position: relative; 354 position: relative;
247 padding: 0px;
248 font-size: 1.25rem; 355 font-size: 1.25rem;
249 } 356 }
250 357
251 [role="tablist"] li a 358 [role="tablist"] li a
252 { 359 {
253 display: flex; 360 display: flex;
254 margin-top: -1px; 361 margin-top: -1px;
255 padding: 1rem 0.8rem; 362 padding: 1rem 0.8rem;
256 -moz-margin-end: -1px; 363 -moz-margin-end: -1px;
257 -webkit-margin-end: -1px; 364 -webkit-margin-end: -1px;
(...skipping 28 matching lines...) Expand all
286 width: 100%; 393 width: 100%;
287 } 394 }
288 395
289 #sidebar footer p 396 #sidebar footer p
290 { 397 {
291 display: flex; 398 display: flex;
292 justify-content: center; 399 justify-content: center;
293 margin: 1.2rem 0rem; 400 margin: 1.2rem 0rem;
294 } 401 }
295 402
296 main 403 /*
297 { 404 Main content
298 background-color: #FFFFFF; 405 */
299 border: 1px solid #CDCDCD;
300 max-width: 46.3rem;
301 padding: 0px 2rem 1.4rem 2rem;
302 }
303
304 main > div
305 {
306 display: none;
307 }
308
309 main h1
310 {
311 border-bottom: 1px solid #CDCDCD;
312 margin: 0px 0px 24px 0px;
313 padding: 40px 0px 16px 0px;
314 }
315 406
316 body[data-tab|="general"] #content-general, 407 body[data-tab|="general"] #content-general,
317 body[data-tab|="advanced"] #content-advanced, 408 body[data-tab|="advanced"] #content-advanced,
318 body[data-tab|="whitelist"] #content-whitelist, 409 body[data-tab|="whitelist"] #content-whitelist,
319 body[data-tab|="help"] #content-help 410 body[data-tab|="help"] #content-help
320 { 411 {
321 display: block; 412 display: block;
322 } 413 }
323 414
324 div.button 415 main
325 { 416 {
326 cursor: pointer; 417 background-color: #FFFFFF;
418 border: 1px solid #CDCDCD;
419 max-width: 46.3rem;
420 padding: 0px 0rem 1.4rem 0rem;
421 }
422
423 main > div
424 {
425 display: none;
426 }
427
428 main p
429 {
430 margin: 0.8rem 0rem;
431 }
432
433 /*
434 Sections
435 */
436
437 [role="tabpanel"] > section,
438 [role="tabpanel"] > .section
439 {
440 padding: 2rem;
441 border-top: 1px solid #CDCDCD;
442 }
443
444 [role="tabpanel"] > header h1,
445 [role="tabpanel"] > header p
446 {
447 padding: 0rem 2rem;
448 margin: 1.4rem 0rem;
449 }
450
451 section h2,
452 .section h2
453 {
454 margin: 0rem;
455 }
456
457 section,
458 .section
459 {
460 clear: both;
461 }
462
463 section.cols
464 {
327 display: flex; 465 display: flex;
328 } 466 }
329 467
330 .table 468 section.cols > *:first-child
469 {
470 flex: 1;
471 -moz-margin-end: 2rem;
472 -webkit-margin-end: 2rem;
473 }
474
475 section.cols > *:last-child
476 {
477 flex: 3;
478 }
479
480 /*
481 Acceptable ads
482 */
483
484 #acceptable-ads
485 {
486 background-color: #F3F3F3;
487 }
488
489 #acceptable-ads > div
490 {
491 position: relative;
492 padding: 1.5rem;
493 padding-left: 3.3rem;
494 padding-right: 0.9rem;
495 border: 1px solid #CDCDCD;
496 border-width: 0px 1px 1px 1px;
497 }
498
499 #acceptable-ads > div:first-of-type
500 {
501 border-top: 1px solid #CDCDCD;
502 }
503
504 #acceptable-ads > div > p:last-of-type
505 {
506 margin-bottom: 0rem;
507 }
508
509 #acceptable-ads > div input
510 {
511 position: absolute;
512 left: 0rem;
513 margin: 0.25rem 0.9rem;
514 width: 1.3rem;
515 height: 1.3rem;
516 }
517
518 #acceptable-ads > div label
519 {
520 font-weight: 700;
521 font-size: 1.375rem;
522 }
523
524 #dnt
525 {
526 padding: 0.8rem;
527 border: 1px solid #099CD0;
528 }
529
530 /*
531 Tables
532 */
533
534 ul.table,
535 ul.list
331 { 536 {
332 list-style: none; 537 list-style: none;
333 margin: 0px; 538 margin: 0rem;
334 padding: 0px; 539 padding: 0rem;
335 position: relative; 540 }
541
542 .table li,
543 .list li
544 {
545 display: flex;
546 align-items: center;
336 } 547 }
337 548
338 .table li 549 .table li
339 { 550 {
340 display: flex; 551 margin: 0rem;
341 align-items: center; 552 border-style: solid;
342 padding: 12px 16px; 553 border-color: #CDCDCD;
343 border-radius: 3px; 554 border-width: 0px 1px 1px 1px;
344 } 555 }
345 556
346 .table.list 557 .list li
347 { 558 {
348 border-bottom: 1px solid #CDCDCD; 559 padding: 0rem;
560 margin: 0rem 0rem 1.3rem 0rem;
561 }
562
563 .table li:first-of-type
564 {
565 border-top: 1px solid #CDCDCD;
566 }
567
568 .table.list li
569 {
570 padding: 0.5rem 1.1rem;
571 margin: 0rem;
572 }
573
574 li .display
575 {
576 margin: 0rem 1rem;
349 } 577 }
350 578
351 .table.list li .display 579 .table.list li .display
352 { 580 {
353 flex: 1; 581 flex: 1;
354 line-height: 16px; 582 }
355 overflow: hidden; 583
356 text-overflow: ellipsis; 584 .table.list li.empty-placeholder
357 white-space: nowrap; 585 {
586 padding: 1.3em 1.9em;
587 }
588
589 .table.list li.empty-placeholder:not(:last-of-type)
590 {
591 border-bottom: 0px;
592 }
593
594 #blocking-languages-table .display
595 {
596 font-weight: 700;
597 }
598
599 .table.list button.link
600 {
601 font-weight: 700;
602 text-transform: uppercase;
358 } 603 }
359 604
360 .table:not(.list):not(.cols) li 605 .table:not(.list):not(.cols) li
361 { 606 {
362 padding-top: 0px; 607 padding-top: 0px;
363 padding-bottom: 6px; 608 padding-bottom: 6px;
364 } 609 }
365 610
366 .table li.empty-placeholder
367 {
368 background-color: #F5F5F5;
369 }
370
371 .table li [data-single="visible"], 611 .table li [data-single="visible"],
372 .table li:first-of-type:last-of-type [data-single="hidden"] 612 .table li:first-of-type:last-of-type [data-single="hidden"]
373 { 613 {
374 display: none; 614 display: none;
375 } 615 }
376 616
377 .table li:first-of-type:last-of-type [data-single="visible"] 617 .table li:first-of-type:last-of-type [data-single="visible"]
378 { 618 {
379 display: block; 619 display: block;
380 } 620 }
381 621
382 .table label 622 .th
383 { 623 {
384 vertical-align: top; 624 display: flex;
625 }
626
627 .col4 > *
628 {
629 display: inline-block;
630 }
631
632 .col4
633 {
634 margin: 0rem 0.9rem;
635 }
636
637 .th .col4:nth-of-type(1),
638 .table .col4:nth-of-type(1)
639 {
640 flex: 2;
641 }
642
643 .th .col4:nth-of-type(2),
644 .table .col4:nth-of-type(2)
645 {
646 flex: 3;
647 }
648
649 .th .col4:nth-of-type(3),
650 .table .col4:nth-of-type(3)
651 {
652 flex: 2;
653 }
654
655 .th .col4:nth-of-type(4),
656 .table .col4:nth-of-type(4)
657 {
658 flex: 1;
385 } 659 }
386 660
387 .table.cols 661 .table.cols
388 { 662 {
389 border-bottom: 1px solid #CDCDCD; 663 font-size: 1.1rem;
390 border-top: 1px solid #CDCDCD;
391 } 664 }
392 665
393 button[role="checkbox"][disabled] 666 .table.cols .display
394 { 667 {
395 border-radius: 2px; 668 margin: 0rem;
396 background-color: #ccc;
397 } 669 }
398 670
399 .table button.delete 671 .table.cols li
400 { 672 {
401 background-color: transparent; 673 padding: 0.9rem 0rem;
402 background-position: -50px -51px;
403 border: 0px;
404 height: 10px;
405 padding: 0px;
406 cursor: pointer;
407 width: 10px;
408 } 674 }
409 675
410 .table button.delete:hover 676 .table.cols .state
411 { 677 {
412 background-position: -61px -51px; 678 -moz-margin-start: 1.1rem;
679 -webkit-margin-start: 1.1rem;
413 } 680 }
414 681
415 .icon, 682 .table.cols .gear
416 button[role="checkbox"], 683 {
417 #dialog-body .table button[role="checkbox"], 684 margin: 0rem
418 .table button.delete, 685 }
419 #dialog-close::before, 686
420 #all-filter-lists-table .arrow, 687 #dialog .table.list li
421 .context-menu .content a::before 688 {
689 display: block;
690 border-width: 1px 0px 0px 0px;
691 padding: 0rem;
692 }
693
694 #dialog .table.list li:first-of-type
695 {
696 border: 0px;
697 }
698
699 #dialog .table.list li button
700 {
701 display: flex;
702 background-image: none;
703 width: 100%;
704 height: auto;
705 padding: 1.1rem 1rem;
706 }
707
708 #dialog .table.list li button:hover,
709 #dialog .table.list li button:focus
710 {
711 background-color: #E1F2FA;
712 }
713
714 #dialog .table.list li button[aria-checked="true"]
715 {
716 color: #BBB;
717 }
718
719 #dialog .table.list li button[aria-checked="true"]::before
720 {
721 content: "";
722 width: 1.3rem;
723 height: 1.3rem;
724 background-color: #BBB;
725 -webkit-mask: url(icons/checkmark.svg);
726 mask: url(icons/checkmark.svg);
727 margin: 0rem;
728 }
729
730 #dialog .table.list li button .display
731 {
732 flex: none;
733 margin: 0rem 0.8rem;
734 text-transform: none;
735 }
736
737 /*
738 Tooltips
739 */
740
741 .tooltip
742 {
743 display: inline-block;
744 position: relative;
745 margin: 0rem;
746 -moz-margin-end: 1rem;
747 -webkit-margin-end: 1rem;
748
749 line-height: 1.3rem;
750 text-decoration: none;
751 cursor: default;
752 }
753
754 .tooltip::before
755 {
756 content: "";
757 width: 1.3rem;
758 height: 1.3rem;
759 display: block;
760 background-color: #099DD1;
761 -webkit-mask: url(icons/tooltip.svg);
762 mask: url(icons/tooltip.svg);
763 }
764
765 button[role="checkbox"]:not(.toggle)
422 { 766 {
423 background-image: url(options-sprite.png); 767 background-image: url(options-sprite.png);
424 display: inline-block; 768 display: inline-block;
425 } 769 }
426 770
427 .icon-add,
428 .icon-update
429 {
430 height: 16px;
431 width: 16px;
432 cursor: pointer;
433 }
434
435 .icon-add
436 {
437 background-position: -1px -1px;
438 }
439
440 .icon-update
441 {
442 background-position: -35px -1px;
443 }
444
445 .icon-enter
446 {
447 height: 8px;
448 width: 8px;
449 cursor: pointer;
450 }
451
452 #dialog-close::before
453 {
454 content: "";
455 height: 12px;
456 width: 12px;
457 }
458
459 #dialog-body button::before
460 {
461 background-position: 0px -42px;
462 content: "";
463 cursor: pointer;
464 height: 11px;
465 vertical-align: middle;
466 width: 7px;
467 -moz-margin-end: 12px;
468 -webkit-margin-end: 12px;
469 }
470
471 .controls
472 {
473 padding-top: 14px;
474 margin-left: 16px;
475 margin-right: 16px;
476 }
477
478 .controls.mode-edit
479 {
480 -moz-margin-end: 0px;
481 -webkit-margin-end: 0px;
482 }
483
484 .controls > div
485 {
486 display: flex;
487 position: relative;
488 }
489
490 .controls button,
491 #dialog-close
492 {
493 display: flex;
494 border: 0px;
495 padding: 0px;
496 align-items: center;
497 background: none;
498 cursor: pointer;
499 }
500
501 .controls button span:not(.icon)
502 {
503 -moz-margin-start: 16px;
504 -webkit-margin-start: 16px;
505 color: #3A7BA6;
506 vertical-align: top;
507 }
508
509 /* 771 /*
510 Used for translatable screen reader only conten. 772 Used for translatable screen reader only conten.
511 e.g.: Use instead of aria-label to avoid complex attribute value translation 773 e.g.: Use instead of aria-label to avoid complex attribute value translation
512 */ 774 */
513 .sr-only 775 .sr-only
514 { 776 {
515 position: absolute; 777 position: absolute;
516 overflow: hidden; 778 overflow: hidden;
517 clip: rect(0, 0, 0, 0); 779 clip: rect(0, 0, 0, 0);
518 width: 1px; 780 width: 1px;
519 height: 1px; 781 height: 1px;
520 margin: -1px; 782 margin: -1px;
521 padding: 0px; 783 padding: 0px;
522 border: 0px; 784 border: 0px;
523 } 785 }
524 786
525 /* 787 /*
526 General tab content 788 General tab content
527 */ 789 */
528 790
529 #blocking-languages-dialog-table 791 #blocking-languages-dialog-table
530 { 792 {
531 border-bottom: none; 793 border-bottom: none;
532 } 794 }
533 795
534 #blocking-languages,
535 #acceptable-ads
536 {
537 -moz-margin-end: 40px;
538 -webkit-margin-end: 40px;
539 }
540
541 #whitelisting .controls.mode-edit > button,
542 #whitelisting .controls:not(.mode-edit) > div
543 {
544 display: none;
545 }
546
547 #whitelisting .controls input[type="text"]
548 {
549 border: 0px;
550 border-bottom: 1px solid #A1A1A1;
551 -moz-padding-end: 25px;
552 -webkit-padding-end: 25px;
553 -moz-margin-start: 14px;
554 -webkit-margin-start: 14px;
555 outline: 0px;
556 padding-bottom: 5px;
557 vertical-align: text-bottom;
558 width: 100%;
559 }
560
561 #whitelisting .controls .button-add span
562 {
563 -moz-margin-start: 5px;
564 -webkit-margin-start: 5px;
565 }
566
567 #whitelisting .button-add
568 {
569 -moz-margin-start: 32px;
570 -webkit-margin-start: 32px;
571 }
572
573 #whitelisting-add-button + span
574 {
575 flex: 1;
576 }
577
578 .icon-enter
579 {
580 background-position: -19px -33px;
581 position: absolute;
582 bottom: 9px;
583 -moz-margin-start: -20px;
584 -webkit-margin-start: -20px;
585 }
586
587 .button-add, .cancel-button 796 .button-add, .cancel-button
588 { 797 {
589 background-color: transparent; 798 background-color: transparent;
590 border: 0px; 799 border: 0px;
591 color: #3A7BA6; 800 color: #3A7BA6;
592 cursor: pointer; 801 cursor: pointer;
593 } 802 }
594 803
595 /* 804 /*
805 Whitelist tab
806 */
807
808 #content-whitelist form
809 {
810 display: flex;
811 }
812
813 #content-whitelist form input
814 {
815 flex: 1;
816 padding: 0.5rem 1rem;
817 font-size: 1.25rem;
818 border: 2px solid #099CD0;
819 }
820
821 #content-whitelist form button
822 {
823 -moz-margin-start: 0.7rem;
824 -webkit-margin-start: 0.7rem;
825 }
826
827 #whitelisting-table li
828 {
829 border-left: 0rem;
830 border-right: 0rem;
831 }
832
833 /*
596 Advanced tab content 834 Advanced tab content
597 */ 835 */
598 836
599 #all-filter-lists-table li.show-message .last-update, 837 #all-filter-lists-table li.show-message .last-update,
600 #all-filter-lists-table li:not(.show-message) .message, 838 #all-filter-lists-table li:not(.show-message) .message,
601 #custom-filters:not([data-mode="empty"]) #empty-custom-filters, 839 #custom-filters:not([data-mode="empty"]) #empty-custom-filters,
602 #custom-filters[data-mode="empty"] #custom-filters-raw, 840 #custom-filters[data-mode="empty"] #custom-filters-raw,
603 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls, 841 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
604 #custom-filters:not([data-mode="read"]) #custom-filters-edit, 842 #custom-filters:not([data-mode="read"]) #custom-filters-edit,
605 .state span, 843 .state span,
606 #acceptable-ads:not(.show-dnt-notification) #dnt 844 #acceptable-ads:not(.show-dnt-notification) #dnt
607 { 845 {
608 display: none; 846 display: none;
609 } 847 }
610 848
611 #all-filter-lists-table
612 {
613 display: inline-block;
614 }
615
616 #all-filter-lists-table
617 {
618 display: inline-block;
619 }
620
621 #all-filter-lists-table li > div
622 {
623 display: flex;
624 width: 330px;
625 }
626
627 #all-filter-lists-table li span.display
628 {
629 cursor: pointer;
630 }
631
632 #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #s tate-active 849 #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #s tate-active
633 { 850 {
634 display: inline; 851 display: inline;
635 } 852 }
636 853
637 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled 854 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled
638 { 855 {
639 display: inline; 856 display: inline;
640 } 857 }
641 858
642 #all-filter-lists-table .controls 859 #all-filter-lists-table
643 { 860 {
644 padding-top: 0px; 861 margin-bottom: 1.5rem;
645 border-top: none;
646 } 862 }
647 863
648 #all-filter-lists-table .controls button 864 .side-control button
juliandoucette 2017/09/13 17:12:49 NIT/Suggest: .side-controls (plural)
649 { 865 {
650 margin-top: 14px; 866 margin: 0.8rem 0rem;
867 -moz-margin-start: auto;
868 -webkit-margin-start: auto;
651 } 869 }
652 870
653 #all-filter-lists-table .arrow 871 #custom-filters h3
654 { 872 {
655 width: 6px; 873 margin: 0rem;
656 height: 4px;
657 background-position: -1px -54px;
658 cursor: pointer;
659 }
660
661 #all-filter-lists-table li:last-of-type a
662 {
663 color: #3A7BA6;
664 text-decoration: none;
665 cursor: pointer;
666 }
667
668 #all-filter-lists-table li:last-of-type > span:last-child
669 {
670 -webkit-margin-start: auto;
671 -moz-margin-start: auto;
672 }
673
674 #custom-filters-raw-controls
675 {
676 justify-content: space-between;
677 } 874 }
678 875
679 #custom-filters-raw 876 #custom-filters-raw
680 { 877 {
681 width: 100%; 878 width: 100%;
682 height: 100%; 879 height: 23.6rem;
683 padding: 2px 16px; 880 padding: 0.8rem 1.3rem;
881 }
882
883 #custom-filters-raw:focus
884 {
885 outline: none;
886 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 }
900
901 #empty-custom-filters
902 {
903 padding: 1.5rem;
904 border: 1px solid #CDCDCD;
684 } 905 }
685 906
686 /* 907 /*
687 Tooltips 908 Context menu
688 */ 909 */
689
690 .tooltip
691 {
692 display: inline-block;
693 position: relative;
694 margin: 0px 4px;
695 border-bottom: dashed 1px;
696 height: 15px;
697 color: #3A7BA6;
698 font-size: 12px;
699 line-height: 19px;
700 text-decoration: none;
701 font-weight: 400;
702 cursor: default;
703 }
704 910
705 li [role="menubar"] 911 li [role="menubar"]
706 { 912 {
707 position: relative; 913 position: relative;
708 } 914 }
709 915
710 .context-menu 916 [role="tooltip"]
711 { 917 {
712 display: inline-block; 918 right: -1rem;
713 position: relative; 919 margin-top: 1rem;
714 border-bottom: none;
715 }
716
717 .context-menu a
718 {
719 vertical-align: middle;
720 white-space: nowrap;
721 color: #FFF;
722 }
723
724 #content-advanced .tooltip
725 {
726 -moz-margin-start: 8px;
727 -webkit-margin-start: 8px;
728 }
729
730 div[role="tooltip"]
731 {
732 background-color: rgba(45, 45, 45, 0.95);
733 border-radius: 3px;
734 color: #FFF;
735 font-size: 14px;
736 font-weight: 400;
737 left: -20px;
738 line-height: 18px;
739 margin-top: 14px;
740 opacity: 1; 920 opacity: 1;
741 padding: 20px; 921 padding: 1.3rem;
742 position: absolute; 922 position: absolute;
743 -webkit-transition: opacity 200ms ease-in-out 400ms, 923 -webkit-transition: opacity 200ms ease-in-out 400ms,
744 visibility 0ms linear 400ms; 924 visibility 0ms linear 400ms;
745 transition: opacity 200ms ease-in-out 400ms, 925 transition: opacity 200ms ease-in-out 400ms,
746 visibility 0ms linear 400ms; 926 visibility 0ms linear 400ms;
747 visibility: visible; 927 visibility: visible;
748 width: 400px; 928 width: 15rem;
749 z-index: 1; 929 z-index: 1;
750 } 930 }
751 931
752 .tooltip:not(:hover) > div[role="tooltip"], 932 html[dir="rtl"] [role="tooltip"]
753 div[role="tooltip"]:hover 933 {
934 right: auto;
935 left: -1rem;
936 }
937
938 [role="tooltip"],
939 .context-menu .content
940 {
941 border: 1px solid #099CD0;
942 border-radius: 3px;
943 background-color: #FFFFFF;
944 }
945
946
947 .tooltip:not(:hover) > [role="tooltip"],
948 [role="tooltip"]:hover
754 { 949 {
755 visibility: hidden; 950 visibility: hidden;
756 opacity: 0; 951 opacity: 0;
757 -webkit-transition-delay: 0ms; 952 -webkit-transition-delay: 0ms;
758 transition-delay: 0ms; 953 transition-delay: 0ms;
759 } 954 }
760 955
761 div[role="tooltip"]::before, 956 .context-menu
762 div.context-menu::before
763 {
764 background-image: url(options-sprite.png);
765 background-position: -8px -42px;
766 content: "";
767 height: 6px;
768 position: absolute;
769 top: -6px;
770 width: 14px;
771 left: 30px;
772 }
773
774 div.context-menu
775 { 957 {
776 position: absolute; 958 position: absolute;
777 top: 16px; 959 right: 3rem;
960 top: -3rem;
778 z-index: 1; 961 z-index: 1;
779 visibility: hidden; 962 visibility: hidden;
780 } 963 }
781 964
782 div.context-menu::before 965 html[dir="rtl"] .context-menu
783 { 966 {
784 left: -4px; 967 right: auto;
968 left: 3rem;
785 } 969 }
786 970
787 html[dir="rtl"] div.context-menu::before 971 .context-menu .content
788 { 972 {
789 left: inherit; 973 padding: 0rem;
790 right: -4px;
791 }
792
793 div.context-menu .content
794 {
795 position: relative; 974 position: relative;
796 left: calc(-50% + 2px);
797 border-radius: 3px;
798 padding: 4px 10px;
799 background-color: rgba(45, 45, 45, 0.95);
800 cursor: default; 975 cursor: default;
801 } 976 }
802 977
803 html[dir="rtl"] div.context-menu .content 978 li.show-context-menu .context-menu
804 {
805 left: inherit;
806 right: -50%;
807 }
808
809 li.show-context-menu div.context-menu
810 { 979 {
811 visibility: visible; 980 visibility: visible;
812 } 981 }
813 982
814 div.context-menu > div a::before 983 [role="tooltip"]::before,
984 .context-menu::before
815 { 985 {
816 content: ""; 986 content: "";
817 -moz-margin-end: 8px; 987 width: 0rem;
818 -webkit-margin-end: 8px; 988 height: 0rem;
989 position: absolute;
819 } 990 }
820 991
821 div.context-menu > div a 992 [role="tooltip"]::before
822 { 993 {
823 display: block; 994 border-left: 10px solid transparent;
824 padding: 7px 4px; 995 border-right: 10px solid transparent;
825 border-bottom: 1px solid #CDCDCD; 996 border-bottom: 10px solid #099CD0;
826 text-decoration: none; 997 top: -10px;
827 cursor: pointer; 998 right: 15px;
828 vertical-align: middle;
829 } 999 }
830 1000
831 div.context-menu > div a::before 1001 html[dir="rtl"] [role="tooltip"]::before
832 { 1002 {
833 vertical-align: middle; 1003 right: auto;
834 height: 16px; 1004 left: 15px;
835 width: 16px;
836 } 1005 }
837 1006
838 div.context-menu > div a:last-child 1007 .context-menu::before
839 { 1008 {
840 border: 0px; 1009 border-left: 10px solid #099CD0;
1010 border-top: 10px solid transparent;
1011 border-bottom: 10px solid transparent;
1012 top: 22px;
1013 right: -0.5rem;
1014 }
1015
1016 html[dir="rtl"] .context-menu::before
1017 {
1018 border-left: 0rem;
1019 border-right: 10px solid #099CD0;
1020 right: auto;
1021 left: -0.5rem;
1022 }
1023
1024 .context-menu li[role="menuitem"]
1025 {
1026 width: 12.2rem;
1027 border: 0rem;
1028 padding: 0rem;
1029 }
1030
1031 .context-menu li[role="menuitem"] > *
1032 {
1033 width: 100%;
1034 display: flex;
1035 border: 0rem;
1036 padding: 1rem 0rem;
1037 color: #099CD0;
1038 font-size: 1.1rem;
1039 text-transform: none;
1040 }
1041
1042 .context-menu li[role="menuitem"] > *:hover,
1043 .context-menu li[role="menuitem"] > *:focus
1044 {
1045 background-color: #E1F2FA;
1046 cursor: pointer;
1047 }
1048
1049 .context-menu li[role="menuitem"] > *::before
1050 {
1051 content: "";
1052 height: 1.5rem;
1053 width: 1.5rem;
1054 background-color: #099DD1;
1055 margin: 0rem 1.1rem;
841 } 1056 }
842 1057
843 .context-menu .update-subscription::before 1058 .context-menu .update-subscription::before
844 { 1059 {
845 background-position: -38px -31px; 1060 -webkit-mask: url(icons/reload.svg);
1061 mask: url(icons/reload.svg);
846 } 1062 }
847 1063
848 .context-menu .website::before 1064 .context-menu .website::before
849 { 1065 {
850 background-position: -33px -47px; 1066 -webkit-mask: url(icons/globe.svg);
1067 mask: url(icons/globe.svg);
851 } 1068 }
852 1069
853 .context-menu .source::before 1070 .context-menu .source::before
854 { 1071 {
855 background-position: -53px -34px; 1072 -webkit-mask: url(icons/code.svg);
1073 mask: url(icons/code.svg);
856 } 1074 }
857 1075
858 .context-menu .delete::before 1076 .context-menu .delete::before
859 { 1077 {
860 background-position: -71px -34px; 1078 -webkit-mask: url(icons/trash.svg);
861 } 1079 mask: url(icons/trash.svg);
862
863 div[role="tooltip"] img
864 {
865 float: left;
866 height: 64px;
867 margin-top: -2px;
868 margin-bottom: 10px;
869 width: 64px;
870 -moz-margin-end: 10px;
871 -webkit-margin-end: 10px;
872 }
873
874 html[dir="rtl"] div[role="tooltip"] img
875 {
876 float: right;
877 }
878
879 div[role="tooltip"] p
880 {
881 font-weight: 400;
882 margin: 0px;
883 }
884
885 div[role="tooltip"] p:not(:first-of-type)
886 {
887 margin-top: 18px;
888 }
889
890 div[role="tooltip"] .notes
891 {
892 border-top: 1px solid #717171;
893 font-size: 12px;
894 margin-top: 14px;
895 padding-top: 14px;
896 }
897
898 div[role="tooltip"] .notes p
899 {
900 font-weight: 300;
901 } 1080 }
902 1081
903 /* 1082 /*
904 Help tab content 1083 Help tab content
905 */ 1084 */
906 1085
907 html:not([lang="zh"]) #social-chinese, 1086 html:not([lang="zh"]) #social-chinese,
908 html[lang="zh"] #social-general 1087 html[lang="zh"] #social-general
909 { 1088 {
910 display: none; 1089 display: none;
911 } 1090 }
912 1091
913 #social ul 1092 #social ul
914 { 1093 {
915 list-style: none; 1094 list-style: none;
1095 padding: 0px;
916 } 1096 }
917 1097
918 #social ul li 1098 #social ul li
919 { 1099 {
920 display: inline-block; 1100 display: inline-block;
1101 -moz-margin-end: 1rem;
1102 -webkit-margin-end: 1rem;
921 } 1103 }
922 1104
923 #social ul li a 1105 #social ul li a
924 { 1106 {
925 display: block; 1107 display: block;
926 text-align: center; 1108 text-align: center;
927 } 1109 }
928 1110
929 #social ul li a::before 1111 #social ul li a::before
930 { 1112 {
(...skipping 29 matching lines...) Expand all
960 1142
961 #dialog-background 1143 #dialog-background
962 { 1144 {
963 display: none; 1145 display: none;
964 position: fixed; 1146 position: fixed;
965 top: 0px; 1147 top: 0px;
966 right: 0px; 1148 right: 0px;
967 bottom: 0px; 1149 bottom: 0px;
968 left: 0px; 1150 left: 0px;
969 z-index: 2; 1151 z-index: 2;
970 background-color: white; 1152 background-color: #000;
971 opacity: 0.7; 1153 opacity: 0.7;
972 } 1154 }
973 1155
974 body[data-dialog] #dialog-background 1156 body[data-dialog] #dialog-background
975 { 1157 {
976 display: block; 1158 display: block;
977 } 1159 }
978 1160
979 #dialog 1161 #dialog
980 { 1162 {
981 position: fixed; 1163 position: fixed;
982 top: 100px; 1164 top: 100px;
983 left: 0px; 1165 left: 0px;
984 right: 0px; 1166 right: 0px;
985 z-index: 2; 1167 z-index: 2;
986 width: 400px; 1168 width: 50vw;
987 margin: auto; 1169 margin: auto;
988 border-radius: 3px; 1170 border-radius: 3px;
989 border: 2px solid #4D9D4B;
990 background-color: #FFFFFF; 1171 background-color: #FFFFFF;
991 } 1172 }
992 1173
993 #dialog header 1174 #dialog header
994 { 1175 {
995 display: flex; 1176 display: flex;
996 min-height: 25px; 1177 padding: 0.7rem 1.5rem;
997 padding: 10px; 1178 background-color: #099CD0;
998 background-color: #4D9D4B;
999 } 1179 }
1000 1180
1001 #dialog-close 1181 #dialog header h3
1002 { 1182 {
1003 -moz-border-start: 1px solid #25612B; 1183 margin: 0rem;
1004 -webkit-border-start: 1px solid #25612B; 1184 font-size: 1.375rem;
1005 color: #0F660F; 1185 font-weight: 700;
1006 display: inline-block;
1007 height: 20px;
1008 font-size: 15px;
1009 -moz-padding-start: 10px;
1010 -webkit-padding-start: 10px;
1011 } 1186 }
1012 1187
1013 #dialog-close::before 1188 #dialog-close,
1189 #hide-notification
1014 { 1190 {
1015 background-position: -10px -33px; 1191 border: 0rem;
1192 padding: 0rem;
1193 margin: 0rem;
1194 background-color: transparent;
1016 cursor: pointer; 1195 cursor: pointer;
1017 height: 8px; 1196 }
1018 width: 8px; 1197
1019 vertical-align: middle; 1198 #dialog-close::before,
1020 -moz-margin-end: 6px; 1199 #hide-notification::after
1021 -webkit-margin-end: 6px; 1200 {
1201 content: "";
1202 display: block;
1203 height: 1rem;
1204 width: 1rem;
1205 border: 0rem;
1206 background-color: #FFF;
1207 -webkit-mask: url(icons/delete.svg);
1208 mask: url(icons/delete.svg);
1209 }
1210
1211 #dialog-close:hover::before
1212 {
1213 background-color: #000;
1022 } 1214 }
1023 1215
1024 #dialog #dialog-body 1216 #dialog #dialog-body
1025 { 1217 {
1026 margin: 4px 24px; 1218 max-height: 50vh;
1219 overflow: auto;
1027 } 1220 }
1028 1221
1029 #dialog h3, 1222 .dialog-content
1223 {
1224 margin: 1rem 1.8rem;
1225 }
1226
1227 #dialog-body button
1228 {
1229 -moz-margin-start: auto;
1230 -webkit-margin-start: auto;
1231 }
1232
1233 [data-dialog="language-change"] .dialog-content,
1234 [data-dialog="language-add"] .dialog-content
1235 {
1236 margin: 0rem;
1237 }
1238
1239 [data-dialog="about"] .dialog-content
1240 {
1241 text-align: center;
1242 }
1243
1244 [data-dialog="about"] button
1245 {
1246 margin: 1.5rem auto 1.8rem auto;
1247 }
1248
1249 [data-dialog="about"] p
1250 {
1251 margin: 0.5rem 0rem;
1252 }
1253
1254 #abp-version
1255 {
1256 margin-bottom: 2rem;
1257 }
1258
1030 #dialog label 1259 #dialog label
1031 { 1260 {
1032 font-size: 14px; 1261 font-size: 0.9rem;
1033 font-weight: 600;
1034 margin: 0px; 1262 margin: 0px;
1035 } 1263 }
1036 1264
1037 #dialog input[type="text"] 1265 #dialog input[type="text"]
1038 { 1266 {
1039 font-size: 16px; 1267 border-color: #CDCDCD;
1040 margin-top: 10px; 1268 border-width: 0px 0px 1px 0px;
1269 font-size: 1.3rem;
1041 padding: 5px; 1270 padding: 5px;
1042 width: 100%; 1271 width: 100%;
1043 } 1272 }
1044 1273
1045 #dialog .table 1274 #dialog .table
1046 { 1275 {
1047 width: 100%; 1276 width: 100%;
1048 } 1277 }
1049 1278
1050 #dialog .section:not(:first-child) 1279 #dialog .section:not(:first-child)
1051 { 1280 {
1052 margin-top: 24px; 1281 margin-top: 24px;
1053 } 1282 }
1054 1283
1055 #dialog-title 1284 #dialog-title
1056 { 1285 {
1057 -moz-margin-start: 16px;
1058 -webkit-margin-start: 16px;
1059 flex: 1; 1286 flex: 1;
1060 font-size: 16px; 1287 font-size: 16px;
1061 color: #FFFFFF; 1288 color: #FFFFFF;
1062 } 1289 }
1063 1290
1064 #dialog-body .dialog-content-block 1291 #dialog-body .dialog-content-block
1065 { 1292 {
1066 padding: 12px 0px; 1293 padding: 12px 0px;
1067 } 1294 }
1068 1295
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
1109 } 1336 }
1110 1337
1111 #notification strong 1338 #notification strong
1112 { 1339 {
1113 flex: 1; 1340 flex: 1;
1114 text-align: center; 1341 text-align: center;
1115 } 1342 }
1116 1343
1117 #hide-notification 1344 #hide-notification
1118 { 1345 {
1119 border: 0rem;
1120 padding: 0rem;
1121 margin: 0rem 1rem; 1346 margin: 0rem 1rem;
1122 background-color: transparent;
1123 cursor: pointer;
1124 } 1347 }
1125 1348
1126 #hide-notification::after 1349 #hide-notification::after
1127 { 1350 {
1128 content: "";
1129 display: block;
1130 height: 1rem;
1131 width: 1rem;
1132 border: 0rem;
1133 background-color: #099DD1; 1351 background-color: #099DD1;
1134 -webkit-mask: url(delete.svg);
1135 mask: url(delete.svg);
1136 } 1352 }
1137 1353
1138 #hide-notification:hover::after 1354 #hide-notification:hover::after
1139 { 1355 {
1140 background-color: #5CBCE1; 1356 background-color: #5CBCE1;
1141 } 1357 }
OLDNEW
« no previous file with comments | « skin/icons/trash.svg ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld