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

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

Issue 29488575: Issue 5384 - Introduced dedicated mobile options page (Closed)
Left Patch Set: Addressed mobile-options.js comments Created July 18, 2017, 5:39 p.m.
Right Patch Set: Added ID constants Created Aug. 28, 2017, 2:51 p.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 | « skin/fonts/Source-Sans-Pro/700.woff2 ('k') | skin/mobile/abp-logo.svg » ('j') | 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-2017 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
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details. 12 * GNU General Public License for more details.
13 * 13 *
14 * You should have received a copy of the GNU General Public License 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/>. 15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */ 16 */
17 @font-face
18 {
19 font-family: "Source Sans Pro";
20 font-weight: 300;
21 font-style: normal;
22 src: url("fonts/Source-Sans-Pro/300.woff2") format("woff2");
23 }
24
25 @font-face
26 {
27 font-family: "Source Sans Pro";
28 font-weight: 400;
29 font-style: normal;
30 src: url("fonts/Source-Sans-Pro/400.woff2") format("woff2");
31 }
32
33 @font-face
34 {
35 font-family: "Source Sans Pro";
36 font-weight: 700;
37 font-style: normal;
38 src: url("fonts/Source-Sans-Pro/700.woff2") format("woff2");
39 ;
40 }
41
42 body,
43 input
44 {
45 font-family: "Source Sans Pro", sans-serif;
46 font-size: 14px;
47 }
17 48
18 body 49 body
19 { 50 {
20 text-align: center; 51 text-align: center;
saroyanm 2017/07/31 15:50:43 Detail: You are overwriting this value in child el
Thomas Greiner 2017/08/01 12:50:05 This is necessary for centering the main content a
21 font-family: sans-serif; 52 color: #494949;
saroyanm 2017/07/31 15:50:42 I think this is "Source Sans Pro". I think we can
Thomas Greiner 2017/08/01 12:50:07 Done. I was just copying it from new-options.css.
22 font-size: 14px;
saroyanm 2017/07/31 15:50:42 We use EMs and PXs all together, this solution is
Thomas Greiner 2017/08/01 12:50:08 Acknowledged.
23 color: #3E4347;
saroyanm 2017/07/31 15:50:43 According to the style guide, I guess this should
Thomas Greiner 2017/08/01 12:50:06 Done.
24 } 53 }
25 54
26 main, 55 main,
27 [role="dialog"] 56 [role="dialog"]
28 { 57 {
29 text-align: start; 58 text-align: start;
30 } 59 }
31 60
32 main 61 main
33 { 62 {
(...skipping 26 matching lines...) Expand all
60 89
61 h2 90 h2
62 { 91 {
63 font-size: 1em; 92 font-size: 1em;
64 } 93 }
65 94
66 a:link, 95 a:link,
67 a:visited 96 a:visited
68 { 97 {
69 text-decoration: none; 98 text-decoration: none;
70 color: #0A9BD0; 99 color: #099DD1;
saroyanm 2017/07/31 15:50:42 I think this should be #5CBCE1 according to the st
Thomas Greiner 2017/08/01 12:50:05 The style guide states that text links should have
71 } 100 }
72 101
73 [hidden] 102 [hidden]
74 { 103 {
75 display: none !important; 104 display: none !important;
76 } 105 }
77 106
78 #acceptableAds-more 107 #acceptableAds-more
79 { 108 {
80 white-space: nowrap; 109 white-space: nowrap;
81 } 110 }
82 111
83 /* Lists */ 112 /* Lists */
84 113
85 ul 114 ul
86 { 115 {
87 margin: 0; 116 margin: 0;
88 padding: 0; 117 padding: 0;
89 } 118 }
90 119
91 ul > li 120 ul > li
92 { 121 {
93 display: flex; 122 display: flex;
94 align-items: center; 123 align-items: center;
95 box-sizing: border-box; 124 box-sizing: border-box;
96 min-height: 36px; 125 min-height: 46px;
97 padding: 5px 10px; 126 padding: 5px 10px;
98 border: 1px solid #BCBCBC; 127 border: 1px solid #BBBBBB;
saroyanm 2017/07/31 15:50:42 Newly added language in style guide, has also diff
saroyanm 2017/07/31 15:50:42 I think the border color should be "#BBBBBB" accor
Thomas Greiner 2017/08/01 12:50:03 This feature doesn't exist in the mobile options p
Thomas Greiner 2017/08/01 12:50:08 Done.
99 border-bottom: none; 128 border-bottom: none;
100 list-style: none; 129 list-style: none;
101 } 130 }
102 131
103 ul > li > span 132 ul > li > span
104 { 133 {
105 flex: 1; 134 flex: auto;
saroyanm 2017/07/31 15:50:41 I have assumption that you want to fill whole free
Thomas Greiner 2017/08/01 12:50:04 All those seem to be equivalent: - `flex: auto` -
106 padding: 10px; 135 padding: 10px;
107 word-wrap: break-word; 136 word-wrap: break-word;
108 overflow: hidden; 137 overflow: hidden;
109 } 138 }
110 139
111 /* Form elements */ 140 /* Form elements */
112 141
113 input[type="text"] 142 input[type="text"]
114 { 143 {
115 min-width: 220px; 144 min-width: 220px;
116 padding: 5px 0; 145 padding: 5px 0;
117 border: 0; 146 border: 0;
118 border-bottom: 1px solid #BCBCBC; 147 border-bottom: 1px solid #BBBBBB;
saroyanm 2017/07/31 15:50:43 The appearance of this element is different in des
Thomas Greiner 2017/08/01 12:50:07 Done. Yeah, I agree that we should prioritize the
119 } 148 }
120 149
121 input[type="text"]::placeholder 150 input[type="text"]::placeholder
122 { 151 {
123 color: #9E9E9E; 152 color: #BBBBBB;
saroyanm 2017/07/31 15:50:41 According to Style guide, this is #4A4A4A.
Thomas Greiner 2017/08/01 12:50:03 It looks like the placeholder text should be `#BBB
153 opacity: 1; /* Firefox sets opacity so we need to override it */
124 } 154 }
125 155
126 input[type="text"]:focus::placeholder 156 input[type="text"]:focus::placeholder
127 { 157 {
128 color: transparent; 158 color: transparent;
129 } 159 }
130 160
131 input[type="text"]:not(:focus):placeholder-shown ~ label, 161 input[type="text"]:not(:focus):placeholder-shown ~ label,
132 input[type="text"]:not(:placeholder-shown) ~ .error 162 input[type="text"]:not(:placeholder-shown) ~ .error
133 { 163 {
134 visibility: hidden 164 visibility: hidden
135 } 165 }
136 166
137 .toggle-container 167 .toggle-container
138 { 168 {
139 display: flex; 169 display: flex;
140 } 170 }
141 171
142 .toggle-container > span 172 .toggle-container > span
143 { 173 {
144 flex-grow: 1; 174 flex: auto;
saroyanm 2017/07/31 15:50:42 I'll suggest to use "flex" instead as it's done fo
Thomas Greiner 2017/08/01 12:50:08 Done.
145 } 175 }
146 176
147 .toggle-container input 177 .toggle-container input
148 { 178 {
149 display: none; 179 display: none;
150 } 180 }
151 181
152 .toggle-image 182 .toggle-image
153 { 183 {
154 display: inline-block; 184 display: inline-block;
155 flex-shrink: 0; 185 flex-shrink: 0;
saroyanm 2017/07/31 15:50:43 Not sure if this is required.
Thomas Greiner 2017/08/01 12:50:04 We don't want the image to shrink below its regula
156 width: 36px; 186 width: 36px;
157 height: 21px; 187 height: 21px;
158 background-image: url(mobile/toggle.png); 188 background-image: url(mobile/toggle.png);
saroyanm 2017/07/31 15:50:41 Detail: while we are using SVGs for other icons, I
Thomas Greiner 2017/08/01 12:50:03 This is what I got from Jeen so I just used it. I
159 } 189 }
160 190
161 input:checked + .toggle-image 191 input:checked + .toggle-image
162 { 192 {
163 background-position: 0 -22px; 193 background-position: 0 -22px;
164 } 194 }
165 195
166 button 196 button
167 { 197 {
168 width: 100%; 198 width: 100%;
169 height: 45px; 199 height: 46px; /* equal to height of list item */
saroyanm 2017/07/31 15:50:40 Suggestion: let's use padding not to be dependent
Thomas Greiner 2017/08/01 12:50:05 I get what you mean but this is a bit tricky in th
170 border: none; 200 border: none;
171 font-weight: 600; 201 font-weight: 600;
172 text-transform: uppercase; 202 text-transform: uppercase;
173 color: #0A9BD0; 203 color: #099DD1;
saroyanm 2017/07/31 15:50:41 I think this should be "#099CD0" according to the
Thomas Greiner 2017/08/01 12:50:04 Done.
174 background: none; 204 background: none;
175 } 205 }
176 206
177 button.primary, 207 button.primary,
178 button.secondary 208 button.secondary
179 { 209 {
180 height: 36px; 210 height: auto;
181 margin: 5px 0; 211 margin: 5px 0;
212 padding: 10px;
182 border: 1px solid; 213 border: 1px solid;
183 border-radius: 2px; 214 border-radius: 2px;
184 } 215 }
185 216
186 button.primary 217 button.primary
187 { 218 {
188 color: #FFF; 219 color: #FFF;
189 border-color: #0A9BD0; 220 border-color: #099DD1;
saroyanm 2017/07/31 15:50:43 "#5CBCE1" -styleguide.
Thomas Greiner 2017/08/01 12:50:08 On page 8 of the style guide it says that we shoul
190 background-color: #0A9BD0; 221 background-color: #099DD1;
191 } 222 }
192 223
193 button.secondary 224 button.secondary
194 { 225 {
195 border-color: #BCBCBC; 226 border-color: #BBBBBB;
saroyanm 2017/07/31 15:50:41 "#0A9DD1" - styleguide.
Thomas Greiner 2017/08/01 12:50:07 That's not what's shown in https://bytebucket.org/
196 } 227 }
197 228
198 button.remove 229 button.remove
199 { 230 {
200 width: 36px; 231 width: 36px;
201 height: 36px; 232 height: 36px;
202 padding: 0; 233 padding: 0;
203 background-color: #0A9BD0; 234 background-color: #099DD1;
saroyanm 2017/07/31 15:50:40 Suggestion "#5CBCE1" for consistency, if the color
Thomas Greiner 2017/08/01 12:50:04 Done. Used `#099DD1` instead again because it's mo
204 mask: url(mobile/trash.svg) center/19px no-repeat; 235 mask: url(mobile/trash.svg) center/19px no-repeat;
205 } 236 }
206 237
207 ul + button 238 ul + button
Thomas Greiner 2017/08/01 12:50:06 Note that I noticed that the content of this butto
208 { 239 {
209 width: 100%; 240 width: 100%;
210 border: 1px solid #BCBCBC; 241 padding: 0 20px; /* based on margin and padding of list item */
saroyanm 2017/07/31 15:50:41 #BBB
Thomas Greiner 2017/08/01 12:50:04 Done.
242 border: 1px solid #BBBBBB;
243 text-align: start;
211 } 244 }
212 245
213 /* Dialogs */ 246 /* Dialogs */
214 247
215 #dialog 248 #dialog
216 { 249 {
217 display: flex; 250 display: flex;
218 align-items: flex-start; 251 align-items: flex-start;
219 justify-content: center; 252 justify-content: center;
220 position: fixed; 253 position: fixed;
221 top: 0; 254 top: 0;
222 right: 0; 255 right: 0;
223 bottom: 0; 256 bottom: 0;
224 left: 0; 257 left: 0;
225 padding-top: 20px; 258 padding: 20px;
226 background: rgba(0, 0, 0, 0.7); 259 background: rgba(0, 0, 0, 0.7);
227 z-index: 101; 260 z-index: 101;
228 } 261 }
229 262
230 [role="dialog"] 263 [role="dialog"]
231 { 264 {
232 max-width: 25em; 265 max-width: 25em;
saroyanm 2017/07/31 15:50:41 Why are we using EMs here ? Other widths are speci
Thomas Greiner 2017/08/01 12:50:05 Because it's specifically mentioned in the spec:
233 padding: 0; 266 padding: 0;
234 border: 1px solid #BCBCBC; 267 border: 1px solid #BBBBBB;
saroyanm 2017/07/31 15:50:42 #BBB
Thomas Greiner 2017/08/01 12:50:04 Done.
235 background-color: #FFF; 268 background-color: #FFF;
236 } 269 }
237 270
238 [role="dialog"] h2 271 [role="dialog"] h2
239 { 272 {
240 margin: 0; 273 margin: 0;
241 } 274 }
242 275
243 [role="dialog"] form 276 [role="dialog"] form
244 { 277 {
245 padding: 20px; 278 padding: 20px;
246 } 279 }
247 280
248 [role="dialog"] p 281 [role="dialog"] p
249 { 282 {
250 display: flex; 283 display: flex;
251 flex-direction: column; 284 flex-direction: column;
252 margin: 5px 0; 285 margin: 5px 0;
253 } 286 }
254 287
255 [role="dialog"] label 288 [role="dialog"] label
256 { 289 {
257 order: 1; 290 order: 1;
258 display: block; 291 display: block;
259 margin: 5px 0; 292 margin: 5px 0;
260 font-size: 10px; 293 font-size: 10px;
261 } 294 }
262 295
263 [role="dialog"] menu
264 {
265 display: flex;
266 margin: 0;
267 padding: 0;
268 border-top: 1px solid #BCBCBC;
saroyanm 2017/07/31 15:50:40 #BBB
Thomas Greiner 2017/08/01 12:50:07 Done.
269 }
270
271 [role="dialog"] input[type="text"] 296 [role="dialog"] input[type="text"]
272 { 297 {
273 order: 2; 298 order: 2;
274 } 299 }
275 300
276 [role="dialog"] .error 301 [role="dialog"] .error
277 { 302 {
278 order: 3; 303 order: 3;
279 margin-top: 5px; 304 margin-top: 5px;
280 font-size: 12px; 305 font-size: 12px;
281 color: #D1142A; 306 color: #C11D26;
saroyanm 2017/07/31 15:50:43 #C11D26 (Note: The visuals are different, but this
Thomas Greiner 2017/08/01 12:50:08 Done.
282 } 307 }
283 308
284 [role="dialog"]:not([data-error]) .error, 309 [role="dialog"]:not([data-error]) .error,
285 #dialog-subscribe:not([data-error="title"]) .error[data-error="title"], 310 #dialog-subscribe:not([data-error="title"]) .error[data-error="title"],
286 #dialog-subscribe:not([data-error="url"]) .error[data-error="url"] 311 #dialog-subscribe:not([data-error="url"]) .error[data-error="url"]
287 { 312 {
288 visibility: hidden; 313 visibility: hidden;
289 } 314 }
290 315
291 #dialog-subscribe[data-error="title"] [name="title"]:placeholder-shown, 316 #dialog-subscribe[data-error="title"] [name="title"]:placeholder-shown,
292 #dialog-subscribe[data-error="url"] [name="url"]:placeholder-shown 317 #dialog-subscribe[data-error="url"] [name="url"]:placeholder-shown
293 { 318 {
294 border-color: #D1142A; 319 border-color: #C11D26;
saroyanm 2017/07/31 15:50:43 #C11D26
Thomas Greiner 2017/08/01 12:50:07 Done.
295 } 320 }
296 321
297 body:not([data-dialog]) #dialog, 322 body:not([data-dialog]) #dialog,
298 body:not([data-dialog="recommended"]) #dialog-recommended, 323 body:not([data-dialog="recommended"]) #dialog-recommended,
299 body:not([data-dialog="subscribe"]) #dialog-subscribe 324 body:not([data-dialog="subscribe"]) #dialog-subscribe
300 { 325 {
301 display: none; 326 display: none;
302 } 327 }
303 328
304 #dialog-recommended 329 #dialog-recommended
305 { 330 {
306 display: flex; 331 display: flex;
307 flex-direction: column; 332 flex-direction: column;
308 top: 20px; 333 max-height: 100%;
309 max-height: calc(100vh - 40px);
saroyanm 2017/07/31 15:50:41 Why Calc is marked as experimental still ? https:/
Thomas Greiner 2017/08/01 12:50:06 Seems likethe CSS Values and Module Level 3 standa
310 } 334 }
311 335
312 #dialog-recommended ul 336 #dialog-recommended ul
313 { 337 {
314 width: auto; 338 width: auto;
315 margin: 0; 339 margin: 0;
316 overflow-y: auto; 340 overflow-y: auto;
317 } 341 }
318 342
319 #dialog-recommended ul li 343 #dialog-recommended ul li
320 { 344 {
321 border: none; 345 border: none;
322 } 346 }
323 347
324 #dialog-recommended ul li.installed 348 #dialog-recommended ul li.installed
325 { 349 {
326 color: #A1A1A1; 350 color: #BBBBBB;
saroyanm 2017/07/31 15:50:42 This is not specified, maybe: #BBB
Thomas Greiner 2017/08/01 12:50:07 Done.
327 } 351 }
328 352
329 #dialog-recommended ul li::before 353 #dialog-recommended ul li::before
330 { 354 {
331 flex-shrink: 0; 355 flex-shrink: 0;
332 width: 13px; 356 width: 13px;
333 height: 11px; 357 height: 11px;
334 margin: 10px; 358 margin: 10px;
335 content: ""; 359 content: "";
336 } 360 }
337 361
338 #dialog-recommended ul li.installed::before 362 #dialog-recommended ul li.installed::before
339 { 363 {
340 background-color: #A1A1A1; 364 background-color: #BBBBBB;
341 mask: url(mobile/checkmark.svg) center/cover no-repeat; 365 mask: url(mobile/checkmark.svg) center/cover no-repeat;
342 } 366 }
343 367
344 #dialog-recommended menu 368 #dialog-recommended > button
345 { 369 {
346 flex-shrink: 0; 370 border-width: 1px 0 0 0;
347 } 371 text-align: center;
372 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld