Left: | ||
Right: |
OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <!-- | 3 <!-- |
4 - This file is part of Adblock Plus <https://adblockplus.org/>, | 4 - This file is part of Adblock Plus <https://adblockplus.org/>, |
5 - Copyright (C) 2006-2016 Eyeo GmbH | 5 - Copyright (C) 2006-2016 Eyeo GmbH |
6 - | 6 - |
7 - Adblock Plus is free software: you can redistribute it and/or modify | 7 - Adblock Plus is free software: you can redistribute it and/or modify |
8 - it under the terms of the GNU General Public License version 3 as | 8 - it under the terms of the GNU General Public License version 3 as |
9 - published by the Free Software Foundation. | 9 - published by the Free Software Foundation. |
10 - | 10 - |
(...skipping 11 matching lines...) Expand all Loading... | |
22 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | 22 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
23 <title>Block element</title> | 23 <title>Block element</title> |
24 <link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css " rel="stylesheet" /> | 24 <link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css " rel="stylesheet" /> |
25 <script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script> | 25 <script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script> |
26 <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.16.custom.min.js" ></script> | 26 <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.16.custom.min.js" ></script> |
27 <script type="text/javascript" src="ext/common.js"></script> | 27 <script type="text/javascript" src="ext/common.js"></script> |
28 <script type="text/javascript" src="ext/content.js"></script> | 28 <script type="text/javascript" src="ext/content.js"></script> |
29 <script type="text/javascript" src="i18n.js" charset="utf-8"></script> | 29 <script type="text/javascript" src="i18n.js" charset="utf-8"></script> |
30 <script type="text/javascript" src="block.js" charset="utf-8"></script> | 30 <script type="text/javascript" src="block.js" charset="utf-8"></script> |
31 <style type="text/css"> | 31 <style type="text/css"> |
32 * | |
33 { | |
34 box-sizing: border-box; | |
35 } | |
36 html | |
37 { | |
38 height: 100%; | |
39 } | |
32 body | 40 body |
33 { | 41 { |
34 font-family: Arial, Helvetica, sans-serif; | 42 font-family: Arial, Helvetica, sans-serif; |
saroyanm
2016/03/03 15:29:25
Detail: Can you please reorder css properties with
Sebastian Noack
2016/03/03 15:40:14
Done, I think.
saroyanm
2016/03/03 16:11:34
Yes only one small note: please move display prope
Sebastian Noack
2016/03/03 17:42:32
I did leave the display property definition below
| |
35 font-size: 13px; | 43 font-size: 13px; |
36 margin: 0px; | 44 margin: 0px; |
37 padding: 5px; | 45 padding: 5px; |
38 display: inline-block; | 46 height: 100%; |
47 display: -webkit-flex; | |
48 display: flex; | |
49 -webkit-flex-direction: column; | |
50 flex-direction: column; | |
39 } | 51 } |
40 #title, | 52 #title, |
41 #filters | 53 #filters |
42 { | 54 { |
43 margin-bottom: 3px; | 55 margin-bottom: 3px; |
44 } | 56 } |
45 #title > * | 57 #title > * |
46 { | 58 { |
47 vertical-align: middle; | 59 vertical-align: middle; |
48 } | 60 } |
49 #title > img | 61 #title > img |
50 { | 62 { |
51 margin-right: 5px; | 63 margin-right: 5px; |
52 } | 64 } |
65 #title, #buttons | |
66 { | |
67 -webkit-flex-shrink: 0; | |
68 flex-shrink: 0; | |
69 } | |
53 #filters | 70 #filters |
54 { | 71 { |
55 width: 400px; | 72 width: 100%; |
56 height: 100px; | 73 height: 100px; |
saroyanm
2016/03/03 15:29:25
while we are using the grow factor I think we can
Sebastian Noack
2016/03/03 15:40:14
Yes, for modern browsers, the height doesn't have
| |
57 resize: none; | 74 resize: none; |
58 white-space: pre; | 75 white-space: pre; |
59 word-wrap: normal; | 76 word-wrap: normal; |
77 -webkit-flex-grow: 1; | |
78 flex-grow: 1; | |
60 } | 79 } |
61 #buttons | 80 #buttons |
62 { | 81 { |
63 text-align: right; | 82 text-align: right; |
64 } | 83 } |
65 button | 84 button |
66 { | 85 { |
67 padding: 3px !important; | 86 padding: 3px !important; |
68 } | 87 } |
69 </style> | 88 </style> |
70 </head> | 89 </head> |
71 <body> | 90 <body> |
72 | 91 |
73 <div id="title"> | 92 <div id="title"> |
74 <img src="icons/detailed/abp-32.png" srcset="icons/detailed/abp-64.png 2x"> | 93 <img src="icons/detailed/abp-32.png" srcset="icons/detailed/abp-64.png 2x"> |
75 <span class="i18n_add_filters_msg"></span> | 94 <span class="i18n_add_filters_msg"></span> |
76 </div> | 95 </div> |
77 | 96 |
78 <textarea id="filters"></textarea> | 97 <textarea id="filters"></textarea> |
79 | 98 |
80 <div id="buttons"> | 99 <div id="buttons"> |
81 <button id="addButton" class="i18n_add"></button> | 100 <button id="addButton" class="i18n_add"></button> |
82 <button id="cancelButton" class="i18n_cancel"></button> | 101 <button id="cancelButton" class="i18n_cancel"></button> |
83 </div> | 102 </div> |
84 | 103 |
85 </body> | 104 </body> |
86 </html> | 105 </html> |
OLD | NEW |