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

Side by Side Diff: skin/options.css

Issue 6088024630755328: issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Patch Set: Created Feb. 19, 2015, 4:52 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
(Empty)
1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2015 Eyeo GmbH
4 *
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
7 * published by the Free Software Foundation.
8 *
9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */
17
18 body
19 {
20 background-color: #F5F5F5;
21 display: flex;
22 font-family: 'Source Sans Pro', sans-serif;
23 font-size: 14px;
24 white-space: nowrap;
25 }
26
27 h1
28 {
29 font-size: 24px;
30 font-weight: 100;
31 }
32
33 h2
34 {
35 font-size: 16px;
36 font-weight: 500;
37 }
38
39 p
40 {
41 font-weight: 100;
42 }
43 hr
44 {
45 background-color: #CDCDCD;
46 border: 0px;
47 height: 1px;
48 margin: 0px;
49 }
50
51 .option-name
52 {
53 display: flex;
54 }
55
56 .option-name > *
57 {
58 -moz-margin-end: 6px;
59 -webkit-margin-end: 6px;
60 }
61
62 #nav-sidebar
63 {
64 position: relative;
65 padding: 0px 0px 16px 0px;
66 -moz-padding-start: 10px;
67 -webkit-padding-start: 10px;
68 min-width: 198px;
69 }
70
71 #nav-sidebar .fixed
72 {
73 height: 100%;
74 position: fixed;
75 }
76
77 #blocking-languages,
78 #acceptable-ads
79 {
80 -moz-padding-end: 40px;
81 -webkit-padding-end: 40px;
82 }
83
84 #page-title
85 {
86 -webkit-margin-start: 10px;
87 -moz-margin-start: 10px;
88 }
89
90 #page-title p
91 {
92 margin: 0px;
93 padding: 40px 0px 0px 0px;
94 font-size: 16px;
95 }
96
97 #page-title h1
98 {
99 margin: 0px;
100 padding: 8px 0px 16px 0px;
101 }
102
103 .flex-container
104 {
105 display: flex;
106 flex-flow: row wrap;
107 }
108
109 .tabs li
110 {
111 cursor: pointer;
112 display: flex;
113 }
114
115 .tabs li span:first-child
116 {
117 flex: 1;
118 }
119
120 .tabs.vertical
121 {
122 list-style: none;
123 margin: 0px;
124 position: relative;
125 padding: 0px;
126 width: 198px;
127 }
128
129 .tabs.vertical li
130 {
131 border-color: #CDCDCD;
132 border-style: solid;
133 border-width: 1px 0px 0px 0px;
134 font-size: 16px;
135 font-weight: 100;
136 padding: 16px 0px;
137 -moz-padding-end: 20px;
138 -webkit-padding-end: 20px;
139 -moz-padding-start: 11px;
140 -webkit-padding-start: 11px;
141 }
142
143 body[data-tab="general"] #tab-general + li,
144 body[data-tab="advanced"] #tab-advanced + li,
145 body[data-tab="help"] #tab-help + li
146 {
147 border-width: 0px;
148 }
149
150 .tabs.vertical li:last-child
151 {
152 border-bottom-width: 1px !important;
153 }
154
155 body[data-tab="general"] #tab-general,
156 body[data-tab="advanced"] #tab-advanced,
157 body[data-tab="help"] #tab-help
158 {
159 background-color: #FFFFFF;
160 border-radius: 3px 0px 0px 3px;
161 border-width: 1px;
162 -moz-border-end: 0px;
163 -webkit-border-end: 0px;
164 font-weight: 900;
165 -moz-margin-end: -1px;
166 -webkit-margin-end: -1px;
167 -moz-padding-start: 10px;
168 -webkit-padding-start: 10px;
169 position: relative;
170 }
171
172 .tabs.vertical.bottom
173 {
174 bottom: 0px;
175 position: absolute;
176 }
177
178 .tabs.vertical.bottom li:first-child
179 {
180 border-top: 0px;
181 }
182
183 .tabs.vertical .icon
184 {
185 margin: 2px 0px 0px 0px;
186 }
187
188 #tab-general .icon
189 {
190 background-position: -15px -17px;
191 height: 16px;
192 width: 16px;
193 }
194
195 #tab-advanced .icon
196 {
197 background-position: -45px -18px;
198 height: 16px;
199 width: 16px;
200 }
201
202 #tab-help .icon
203 {
204 background-position: 0px -17px;
205 height: 16px;
206 width: 16px;
207 }
208
209 #tab-share .icon
210 {
211 background-position: -60px -17px;
212 height: 16px;
213 width: 16px;
214 }
215
216 #tab-donate .icon
217 {
218 background-position: -30px -17px;
219 height: 16px;
220 width: 16px;
221 }
222
223 #tab-content
224 {
225 background-color: #FFFFFF;
226 border: 1px solid #CDCDCD;
227 border-radius: 8px;
228 padding: 0px 60px 40px 60px;
229 width: 960px;
230 }
231
232 #tab-content h1
233 {
234 border-bottom: 1px solid #CDCDCD;
235 margin: 0px;
236 padding: 40px 0px 16px 0px;
237 }
238
239 #modal-background
240 {
241 display: none;
242 background-color: white;
243 position: absolute;
244 opacity: 0.7;
245 top: 0px;
246 right: 0px;
247 bottom: 0px;
248 left: 0px;
249 z-index: 2;
250 }
251
252 body[data-modal] #modal-background
253 {
254 display: block;
255 }
256
257 #content-wrapper
258 {
259 position: relative;
260 }
261
262 #content-wrapper > div
263 {
264 display: none;
265 }
266
267 body[data-tab="general"] #content-general,
268 body[data-tab="advanced"] #content-advanced,
269 body[data-tab="help"] #content-help
270 {
271 display: block;
272 }
273
274 div.button
275 {
276 cursor: pointer;
277 display: flex;
278 }
279
280 .table
281 {
282 list-style: none;
283 margin: 0px;
284 padding: 0px;
285 position: relative;
286 width: 400px;
287 }
288
289 .table li
290 {
291 display: flex;
292 padding: 14px 0px;
293 -webkit-padding-start: 16px;
294 -moz-padding-start: 16px;
295 }
296
297 .table.list li:nth-child(odd)
298 {
299 background-color: #F5F5F5;
300 }
301
302 .table.list li .display
303 {
304 flex: 1;
305 }
306
307 .table.cols li:nth-child(even)
308 {
309 background-color: #F5F5F5;
310 }
311
312 #blocking-list-own .table
313 {
314 height: 290px;
315 overflow: auto;
316 width: auto;
317 }
318
319 .table label
320 {
321 vertical-align: top;
322 }
323
324 .table.cols span
325 {
326 display: inline-block;
327 width: 30%;
328 }
329
330 .table.cols .col-name
331 {
332 border-bottom: 1px solid #CDCDCD;
333 }
334
335 .table.cols .col-name span
336 {
337 display: inline-block;
338 width: 30%;
339 }
340
341 .table.cols .col-name span:first-child
342 {
343 -webkit-padding-start: 38px;
344 -moz-padding-start: 38px;
345 }
346
347 #custom-wrapper
348 {
349 width: 400px;
350 height: 290px;
351 overflow: auto;
352 }
353
354 #custom-wrapper .table
355 {
356 width: 395px;
357 }
358
359 .table::-webkit-scrollbar,
360 #custom-wrapper::-webkit-scrollbar
361 {
362 -webkit-padding-end: 10px;
363 -moz-padding-end: 10px;
364 width: 5px;
365 }
366
367 .table::-webkit-scrollbar-thumb,
368 #custom-wrapper::-webkit-scrollbar-thumb
369 {
370 background-color: #CDCDCD;
371 border-radius: 5px;
372 padding: 0px 40px;
373 }
374
375 .table::-webkit-scrollbar-thumb:hover,
376 #custom-wrapper::-webkit-scrollbar-thumb:hover
377 {
378 background-color: #A1A1A1;
379 }
380
381 .table input[type=checkbox]
382 {
383 margin-top: 0px;
384 -moz-margin-end: 20px;
385 -webkit-margin-end: 20px;
386 padding: 0px 0px 0px 0px;
387 visibility: hidden;
388 }
389
390 .table input[type=checkbox]:before
391 {
392 content:"";
393 background-position: -51px 0px;
394 height: 18px;
395 width: 18px;
396 visibility: visible;
397 }
398
399 .table input[type=checkbox]:checked:before
400 {
401 content:"";
402 background-position: -68px 0px;
403 height: 18px;
404 padding: 0px;
405 width: 18px;
406 visibility: visible;
407 }
408
409 .table button.delete
410 {
411 background-color: transparent;
412 background-position: -9px -32px;
413 border: 0px;
414 height: 10px;
415 margin-top: 5px;
416 -moz-margin-end: 20px;
417 -webkit-margin-end: 20px;
418 padding: 0px;
419 cursor: pointer;
420 width: 10px;
421 }
422
423 .table .popular
424 {
425 color: #1E8728;
426 font-size: 12px;
427 -moz-padding-end: 12px;
428 -webkit-padding-end: 12px;
429 }
430
431 .tabs.horizontal
432 {
433 margin-bottom: 0px;
434 padding: 0px;
435 }
436
437 .tabs.horizontal li
438 {
439 border-bottom: 1px solid #A1A1A1;
440 display: inline-block;
441 color: #3A7BA6;
442 padding: 10px 0px 11px 0px;
443 text-align: center;
444 width: 50%;
445 }
446
447 .tabs.horizontal li.active
448 {
449 border-bottom: 2px solid #1E8728;
450 color: black;
451 font-weight: bold;
452 padding-bottom: 10px;
453 }
454
455 .icon, .table input[type=checkbox]:before, .table button.delete,
456 #content-help a:before, #modal-close:before
457 {
458 background-image: url(options-sprite.png);
459 display: inline-block;
460 }
461
462 .icon-add
463 {
464 background-position: -0px -0px;
465 cursor: pointer;
466 height: 18px;
467 width: 18px;
468 }
469
470 .icon-update
471 {
472 background-position: -34px -0px;
473 cursor: pointer;
474 height: 18px;
475 width: 18px;
476 }
477
478 .icon-edit
479 {
480 background-position: -17px -0px;
481 cursor: pointer;
482 height: 18px;
483 width: 18px;
484 }
485
486 .icon-arrow,
487 #content-help a:before
488 {
489 background-position: 0px -42px;
490 content: "";
491 cursor: pointer;
492 height: 11px;
493 vertical-align: middle;
494 width: 7px;
495 }
496
497 .controls
498 {
499 border-top: 1px solid #CDCDCD;
500 padding-top: 8px;
501 -moz-padding-start: 16px;
502 -webkit-padding-start: 16px;
503 position: relative;
504 }
505
506 .controls > div
507 {
508 display: flex;
509 }
510
511 #whitelisting .controls
512 {
513 -moz-padding-start: 12px;
514 -webkit-padding-start: 12px;
515 }
516
517 #whitelisting .controls input[type=text],
518 #whitelisting .controls input[type=text]:focus
519 {
520 border: 0px;
521 border-bottom: 1px solid #A1A1A1;
522 -moz-padding-end: 25px;
523 -webkit-padding-end: 25px;
524 -moz-margin-start: 14px;
525 -webkit-margin-start: 14px;
526 outline: 0px;
527 padding-bottom: 5px;
528 vertical-align: text-bottom;
529 width: 330px;
530 }
531
532 .controls button,
533 #modal-close
534 {
535 background: none;
536 border: none;
537 cursor: pointer;
538 display: block;
539 padding: 0;
540 }
541
542 .controls button span:not(.icon)
543 {
544 color: #3A7BA6;
545 display: inline-block;
546 -moz-margin-start: 15px;
547 -webkit-margin-start: 15px;
548 padding-top: 1px;
549 vertical-align: top;
550 }
551
552 #blocking-list-own .controls
553 {
554 display: flex;
555 padding: 0px;
556 border: none;
557 }
558
559 #modal .btn-wrapper span:not(.icon)
560 {
561 color: #3A7BA6;
562 display: inline-block;
563 -moz-margin-start: 15px;
564 -webkit-margin-start: 15px;
565 vertical-align: top;
566 }
567
568 #content-help
569 {
570 counter-reset: section;
571 }
572
573 #content-help h1:before
574 {
575 counter-increment: section;
576 content: counter(section) ". ";
577 }
578
579 #content-help a
580 {
581 color: #3A7BA6;
582 display: inline-block;
583 text-decoration: none;
584 -moz-margin-end: 16px;
585 -webkit-margin-end: 16px;
586 vertical-align: top;
587 }
588
589 #content-help a:before
590 {
591 -moz-margin-end: 6px;
592 -webkit-margin-end: 6px;
593 }
594
595 .nav-link
596 {
597 -moz-margin-start: 12px;
598 -webkit-margin-start: 12px;
599 color: #3A7BA6;
600 }
601
602 #blocking-list-own input[type=text],
603 #blocking-list-own input[type=text]:focus
604 {
605 border: 0px;
606 border-bottom: 1px solid;
607 border-top: 1px solid;
608 border-color: #1E8728;
609 box-sizing: border-box;
610 height: 25px;
611 outline: 0px;
612 -moz-padding-start: 10px;
613 -webkit-padding-start: 10px;
614 width: 100%;
615 }
616
617 .icon-enter-blue
618 {
619 background-position: -28px -85px;
620 cursor: pointer;
621 height: 10px;
622 margin: 0px 0px -2px 2px;
623 width: 10px;
624 }
625
626 #blocking-list-own .input-control
627 {
628 position: absolute;
629 -webkit-margin-start: -50px;
630 -moz-margin-start: -50px;
631 bottom: 5px;
632 }
633
634 #blocking-list-own .input-separator
635 {
636 display: inline-block;
637 -moz-border-end: 1px solid #CDCDCD;
638 -webkit-border-end: 1px solid #CDCDCD;
639 height: 15px;
640 margin: 0px 4px -4px 0px;
641 width: 1px;
642 }
643
644 #blocking-list-own .input-btn-text
645 {
646 font-size: 12px;
647 }
648
649 .icon-enter
650 {
651 background-position: -18px -85px;
652 cursor: pointer;
653 height: 10px;
654 position: absolute;
655 top: 10px;
656 -moz-margin-start: -20px;
657 -webkit-margin-start: -20px;
658 width: 10px;
659 }
660
661 .button-add, .cancelbtn
662 {
663 background-color: transparent;
664 border: 0px;
665 color: #3A7BA6;
666 cursor: pointer;
667 }
668
669 .controls .button-add span
670 {
671 -moz-margin-start: 5px !important;
672 -webkit-margin-start: 5px !important;
673 }
674
675 #other-language .button-add
676 {
677 -webkit-border-end: 1px solid #CDCDCD;
678 -moz-border-end: 1px solid #CDCDCD;
679 -webkit-padding-end: 10px;
680 -moz-padding-end: 10px;
681 -webkit-padding-start: 0px;
682 -moz-padding-start: 0px;
683 }
684
685 #other-language .display
686 {
687 -webkit-margin-start: 10px;
688 -moz-margin-start: 10px;
689 }
690
691 #whitelisting .button-add
692 {
693 -moz-margin-start: 32px;
694 -webkit-margin-start: 32px;
695 }
696
697 #whitelisting-add-btn + span
698 {
699 flex: 1;
700 }
701
702 .tooltip, #block-element-explanation a
703 {
704 border-bottom: dotted 2px;
705 color: #3A7BA6;
706 font-size: 12px;
707 text-decoration: none;
708 }
709
710 #content-advanced .tooltip
711 {
712 -moz-margin-start: 8px;
713 -webkit-margin-start: 8px;
714 }
715
716 #block-element-explanation a
717 {
718 color: black;
719 border-bottom-color: #3A7BA6;
720 font-weight: bold;
721 -moz-padding-start: 0px !important;
722 -webkit-padding-start: 0px !important;
723 }
724
725 #modal
726 {
727 background-color: #FFFFFF;
728 border: 2px solid #4D9D4B;
729 border-radius: 3px;
730 display: none;
731 margin: auto;
732 position:absolute;
733 top:100px;
734 left: 0px;
735 right: 0px;
736 z-index: 2;
737 width: 400px;
738 }
739
740 #modal header
741 {
742 background-color: #4D9D4B;
743 display: flex;
744 height: 25px;
745 padding: 10px;
746 }
747
748 #modal-close
749 {
750 -moz-border-start: 1px solid #25612B;
751 -webkit-border-start: 1px solid #25612B;
752 color: #0F660F;
753 display: inline-block;
754 height: 20px;
755 font-size: 15px;
756 -moz-padding-start: 10px;
757 -webkit-padding-start: 10px;
758 }
759
760 #modal-close:before
761 {
762 background-position: -9px -32px;
763 content: "";
764 cursor: pointer;
765 height: 12px;
766 width: 12px;
767 vertical-align: middle;
768 -moz-margin-end: 6px;
769 -webkit-margin-end: 6px;
770 }
771
772 #modal .content
773 {
774 margin: 4px 24px;
775 }
776
777 #modal h3
778 {
779 font-size: 14px;
780 margin: 0px;
781 }
782
783 #modal .content input[type=text]
784 {
785 -webkit-box-sizing: border-box;
786 -moz-box-sizing: border-box;
787 box-sizing: border-box;
788 font-size: 16px;
789 margin-top: 10px;
790 padding: 5px;
791 width: 100%;
792 }
793
794 #modal .table
795 {
796 width: 100%;
797 }
798
799 #modal #other-language .table
800 {
801 height: 200px;
802 overflow: auto;
803 }
804
805 #modal .section:not(:first-child)
806 {
807 margin-top: 24px;
808 }
809
810 #modal .close-wrapper
811 {
812 -moz-margin-end: 16px !important;
813 -webkit-margin-end: 16px !important;
814 }
815
816 #modal-title
817 {
818 -moz-margin-start: 16px;
819 -webkit-margin-start: 16px;
820 flex: 1;
821 font-size: 16px;
822 color: #FFFFFF;
823 }
824
825 #modal .content > div > div
826 {
827 padding: 12px 0px;
828 }
829
830 #modal-content > div
831 {
832 display: none;
833 }
834
835 #modal-content > div.active
836 {
837 display: block;
838 }
839
840 #modal .btn-wrapper
841 {
842 background-color: #F5F5F5;
843 margin-top: 8px;
844 padding: 10px 16px;
845 cursor: pointer;
846 width: auto;
847 }
848
849 body[data-modal="customlist"] #modal-content-customlist,
850 body[data-modal="language"] #modal-content-language,
851 body[data-modal] #modal
852 {
853 display: block;
854 }
OLDNEW
« options.js ('K') | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld