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

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

Issue 29488575: Issue 5384 - Introduced dedicated mobile options page (Closed)
Patch Set: Rebased to master Created Aug. 28, 2017, noon
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/fonts/Source-Sans-Pro/700.woff2 ('k') | skin/mobile/abp-logo.svg » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-present 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 @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 }
48
49 body
50 {
51 text-align: center;
52 color: #494949;
53 }
54
55 main,
56 [role="dialog"]
57 {
58 text-align: start;
59 }
60
61 main
62 {
63 padding: 20px 45px;
64 }
65
66 h1
67 {
68 position: relative;
69 font-size: 1em;
70 line-height: 20px;
71 color: #000;
72 }
73
74 h1::before
75 {
76 position: absolute;
77 left: -25px;
78 width: 20px;
79 height: 20px;
80 background: url(mobile/abp-logo.svg) 0/20px;
81 content: "";
82 }
83
84 html[dir="rtl"] h1::before
85 {
86 left: auto;
87 right: -25px;
88 }
89
90 h2
91 {
92 font-size: 1em;
93 }
94
95 a:link,
96 a:visited
97 {
98 text-decoration: none;
99 color: #099DD1;
100 }
101
102 [hidden]
103 {
104 display: none !important;
105 }
106
107 #acceptableAds-more
108 {
109 white-space: nowrap;
110 }
111
112 /* Lists */
113
114 ul
115 {
116 margin: 0;
117 padding: 0;
118 }
119
120 ul > li
121 {
122 display: flex;
123 align-items: center;
124 box-sizing: border-box;
125 min-height: 46px;
126 padding: 5px 10px;
127 border: 1px solid #BBBBBB;
128 border-bottom: none;
129 list-style: none;
130 }
131
132 ul > li > span
133 {
134 flex: auto;
135 padding: 10px;
136 word-wrap: break-word;
137 overflow: hidden;
138 }
139
140 /* Form elements */
141
142 input[type="text"]
143 {
144 min-width: 220px;
145 padding: 5px 0;
146 border: 0;
147 border-bottom: 1px solid #BBBBBB;
148 }
149
150 input[type="text"]::placeholder
151 {
152 color: #BBBBBB;
153 opacity: 1; /* Firefox sets opacity so we need to override it */
154 }
155
156 input[type="text"]:focus::placeholder
157 {
158 color: transparent;
159 }
160
161 input[type="text"]:not(:focus):placeholder-shown ~ label,
162 input[type="text"]:not(:placeholder-shown) ~ .error
163 {
164 visibility: hidden
165 }
166
167 .toggle-container
168 {
169 display: flex;
170 }
171
172 .toggle-container > span
173 {
174 flex: auto;
175 }
176
177 .toggle-container input
178 {
179 display: none;
180 }
181
182 .toggle-image
183 {
184 display: inline-block;
185 flex-shrink: 0;
186 width: 36px;
187 height: 21px;
188 background-image: url(mobile/toggle.png);
189 }
190
191 input:checked + .toggle-image
192 {
193 background-position: 0 -22px;
194 }
195
196 button
197 {
198 width: 100%;
199 height: 46px; /* equal to height of list item */
200 border: none;
201 font-weight: 600;
202 text-transform: uppercase;
203 color: #099DD1;
204 background: none;
205 }
206
207 button.primary,
208 button.secondary
209 {
210 height: auto;
211 margin: 5px 0;
212 padding: 10px;
213 border: 1px solid;
214 border-radius: 2px;
215 }
216
217 button.primary
218 {
219 color: #FFF;
220 border-color: #099DD1;
221 background-color: #099DD1;
222 }
223
224 button.secondary
225 {
226 border-color: #BBBBBB;
227 }
228
229 button.remove
230 {
231 width: 36px;
232 height: 36px;
233 padding: 0;
234 background-color: #099DD1;
235 mask: url(mobile/trash.svg) center/19px no-repeat;
236 }
237
238 ul + button
239 {
240 width: 100%;
241 padding: 0 20px; /* based on margin and padding of list item */
242 border: 1px solid #BBBBBB;
243 text-align: start;
244 }
245
246 /* Dialogs */
247
248 #dialog
249 {
250 display: flex;
251 align-items: flex-start;
252 justify-content: center;
253 position: fixed;
254 top: 0;
255 right: 0;
256 bottom: 0;
257 left: 0;
258 padding: 20px;
259 background: rgba(0, 0, 0, 0.7);
260 z-index: 101;
261 }
262
263 [role="dialog"]
264 {
265 max-width: 25em;
266 padding: 0;
267 border: 1px solid #BBBBBB;
268 background-color: #FFF;
269 }
270
271 [role="dialog"] h2
272 {
273 margin: 0;
274 }
275
276 [role="dialog"] form
277 {
278 padding: 20px;
279 }
280
281 [role="dialog"] p
282 {
283 display: flex;
284 flex-direction: column;
285 margin: 5px 0;
286 }
287
288 [role="dialog"] label
289 {
290 order: 1;
291 display: block;
292 margin: 5px 0;
293 font-size: 10px;
294 }
295
296 [role="dialog"] menu
297 {
298 display: flex;
299 margin: 0;
300 padding: 0;
301 border-top: 1px solid #BBBBBB;
302 }
303
304 [role="dialog"] input[type="text"]
305 {
306 order: 2;
307 }
308
309 [role="dialog"] .error
310 {
311 order: 3;
312 margin-top: 5px;
313 font-size: 12px;
314 color: #C11D26;
315 }
316
317 [role="dialog"]:not([data-error]) .error,
318 #dialog-subscribe:not([data-error="title"]) .error[data-error="title"],
319 #dialog-subscribe:not([data-error="url"]) .error[data-error="url"]
320 {
321 visibility: hidden;
322 }
323
324 #dialog-subscribe[data-error="title"] [name="title"]:placeholder-shown,
325 #dialog-subscribe[data-error="url"] [name="url"]:placeholder-shown
326 {
327 border-color: #C11D26;
328 }
329
330 body:not([data-dialog]) #dialog,
331 body:not([data-dialog="recommended"]) #dialog-recommended,
332 body:not([data-dialog="subscribe"]) #dialog-subscribe
333 {
334 display: none;
335 }
336
337 #dialog-recommended
338 {
339 display: flex;
340 flex-direction: column;
341 max-height: 100%;
342 }
343
344 #dialog-recommended ul
345 {
346 width: auto;
347 margin: 0;
348 overflow-y: auto;
349 }
350
351 #dialog-recommended ul li
352 {
353 border: none;
354 }
355
356 #dialog-recommended ul li.installed
357 {
358 color: #BBBBBB;
359 }
360
361 #dialog-recommended ul li::before
362 {
363 flex-shrink: 0;
364 width: 13px;
365 height: 11px;
366 margin: 10px;
367 content: "";
368 }
369
370 #dialog-recommended ul li.installed::before
371 {
372 background-color: #BBBBBB;
373 mask: url(mobile/checkmark.svg) center/cover no-repeat;
374 }
375
376 #dialog-recommended menu
377 {
378 flex-shrink: 0;
379 }
OLDNEW
« no previous file with comments | « skin/fonts/Source-Sans-Pro/700.woff2 ('k') | skin/mobile/abp-logo.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld