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: Encapsulated mobile-options.js script Created July 18, 2017, 5:38 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 | « mobile-options.js ('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-2017 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 text-align: center;
21 font-family: sans-serif;
22 font-size: 14px;
23 color: #3E4347;
24 }
25
26 main,
27 [role="dialog"]
28 {
29 text-align: start;
30 }
31
32 main
33 {
34 padding: 20px 45px;
35 }
36
37 h1
38 {
39 position: relative;
40 font-size: 1em;
41 line-height: 20px;
42 color: #000;
43 }
44
45 h1::before
46 {
47 position: absolute;
48 left: -25px;
49 width: 20px;
50 height: 20px;
51 background: url(mobile/abp-logo.svg) 0/20px;
52 content: "";
53 }
54
55 html[dir="rtl"] h1::before
56 {
57 left: auto;
58 right: -25px;
59 }
60
61 h2
62 {
63 font-size: 1em;
64 }
65
66 a:link,
67 a:visited
68 {
69 text-decoration: none;
70 color: #0A9BD0;
71 }
72
73 [hidden]
74 {
75 display: none !important;
76 }
77
78 #acceptableAds-more
79 {
80 white-space: nowrap;
81 }
82
83 /* Lists */
84
85 ul
86 {
87 margin: 0;
88 padding: 0;
89 }
90
91 ul > li
92 {
93 display: flex;
94 align-items: center;
95 box-sizing: border-box;
96 min-height: 36px;
97 padding: 5px 10px;
98 border: 1px solid #BCBCBC;
99 border-bottom: none;
100 list-style: none;
101 }
102
103 ul > li > span
104 {
105 flex: 1;
106 padding: 10px;
107 word-wrap: break-word;
108 overflow: hidden;
109 }
110
111 /* Form elements */
112
113 input[type="text"]
114 {
115 min-width: 220px;
116 padding: 5px 0;
117 border: 0;
118 border-bottom: 1px solid #BCBCBC;
119 }
120
121 input[type="text"]::placeholder
122 {
123 color: #9E9E9E;
124 }
125
126 input[type="text"]:focus::placeholder
127 {
128 color: transparent;
129 }
130
131 input[type="text"]:not(:focus):placeholder-shown ~ label,
132 input[type="text"]:not(:placeholder-shown) ~ .error
133 {
134 visibility: hidden
135 }
136
137 .toggle-container
138 {
139 display: flex;
140 }
141
142 .toggle-container > span
143 {
144 flex-grow: 1;
145 }
146
147 .toggle-container input
148 {
149 display: none;
150 }
151
152 .toggle-image
153 {
154 display: inline-block;
155 flex-shrink: 0;
156 width: 36px;
157 height: 21px;
158 background-image: url(mobile/toggle.png);
159 }
160
161 input:checked + .toggle-image
162 {
163 background-position: 0 -22px;
164 }
165
166 button
167 {
168 width: 100%;
169 height: 45px;
170 border: none;
171 font-weight: 600;
172 text-transform: uppercase;
173 color: #0A9BD0;
174 background: none;
175 }
176
177 button.primary,
178 button.secondary
179 {
180 height: 36px;
181 margin: 5px 0;
182 border: 1px solid;
183 border-radius: 2px;
184 }
185
186 button.primary
187 {
188 color: #FFF;
189 border-color: #0A9BD0;
190 background-color: #0A9BD0;
191 }
192
193 button.secondary
194 {
195 border-color: #BCBCBC;
196 }
197
198 button.remove
199 {
200 width: 36px;
201 height: 36px;
202 padding: 0;
203 background-color: #0A9BD0;
204 mask: url(mobile/trash.svg) center/19px no-repeat;
205 }
206
207 ul + button
208 {
209 width: 100%;
210 border: 1px solid #BCBCBC;
211 }
212
213 /* Dialogs */
214
215 #dialog
216 {
217 display: flex;
218 align-items: flex-start;
219 justify-content: center;
220 position: fixed;
221 top: 0;
222 right: 0;
223 bottom: 0;
224 left: 0;
225 padding-top: 20px;
226 background: rgba(0, 0, 0, 0.7);
227 z-index: 101;
228 }
229
230 [role="dialog"]
231 {
232 max-width: 25em;
233 padding: 0;
234 border: 1px solid #BCBCBC;
235 background-color: #FFF;
236 }
237
238 [role="dialog"] h2
239 {
240 margin: 0;
241 }
242
243 [role="dialog"] form
244 {
245 padding: 20px;
246 }
247
248 [role="dialog"] p
249 {
250 display: flex;
251 flex-direction: column;
252 margin: 5px 0;
253 }
254
255 [role="dialog"] label
256 {
257 order: 1;
258 display: block;
259 margin: 5px 0;
260 font-size: 10px;
261 }
262
263 [role="dialog"] menu
264 {
265 display: flex;
266 margin: 0;
267 padding: 0;
268 border-top: 1px solid #BCBCBC;
269 }
270
271 [role="dialog"] input[type="text"]
272 {
273 order: 2;
274 }
275
276 [role="dialog"] .error
277 {
278 order: 3;
279 margin-top: 5px;
280 font-size: 12px;
281 color: #D1142A;
282 }
283
284 [role="dialog"]:not([data-error]) .error,
285 #dialog-subscribe:not([data-error="title"]) .error[data-error="title"],
286 #dialog-subscribe:not([data-error="url"]) .error[data-error="url"]
287 {
288 visibility: hidden;
289 }
290
291 #dialog-subscribe[data-error="title"] [name="title"]:placeholder-shown,
292 #dialog-subscribe[data-error="url"] [name="url"]:placeholder-shown
293 {
294 border-color: #D1142A;
295 }
296
297 body:not([data-dialog]) #dialog,
298 body:not([data-dialog="recommended"]) #dialog-recommended,
299 body:not([data-dialog="subscribe"]) #dialog-subscribe
300 {
301 display: none;
302 }
303
304 #dialog-recommended
305 {
306 display: flex;
307 flex-direction: column;
308 top: 20px;
309 max-height: calc(100vh - 40px);
310 }
311
312 #dialog-recommended ul
313 {
314 width: auto;
315 margin: 0;
316 overflow-y: auto;
317 }
318
319 #dialog-recommended ul li
320 {
321 border: none;
322 }
323
324 #dialog-recommended ul li.installed
325 {
326 color: #A1A1A1;
327 }
328
329 #dialog-recommended ul li::before
330 {
331 flex-shrink: 0;
332 width: 13px;
333 height: 11px;
334 margin: 10px;
335 content: "";
336 }
337
338 #dialog-recommended ul li.installed::before
339 {
340 background-color: #A1A1A1;
341 mask: url(mobile/checkmark.svg) center/cover no-repeat;
342 }
343
344 #dialog-recommended menu
345 {
346 flex-shrink: 0;
347 }
OLDNEW
« no previous file with comments | « mobile-options.js ('k') | skin/mobile/abp-logo.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld