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

Side by Side Diff: chrome/skin/firstRun.css

Issue 10585038: First-run page (revisited) (Closed)
Patch Set: Created May 14, 2013, 3:12 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
1 /* 1 /*
2 * This file is part of Adblock Plus <http://adblockplus.org/>, 2 * This file is part of Adblock Plus <http://adblockplus.org/>,
3 * Copyright (C) 2006-2013 Eyeo GmbH 3 * Copyright (C) 2006-2013 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 17
18 @namespace url("http://www.w3.org/1999/xhtml"); 18 @namespace url("http://www.w3.org/1999/xhtml");
19 19
20 @media not handheld
21 {
22 body
23 {
24 font-size: 130%;
25 }
26 }
27
28 /** This should be unnecessary in Gecko 2.0 and above. */ 20 /** This should be unnecessary in Gecko 2.0 and above. */
29 *[hidden] 21 *[hidden]
30 { 22 {
31 display: none; 23 display: none;
32 } 24 }
33 25
34 body 26 body
35 { 27 {
36 background-image: url(abp-icon-big.png); 28 font-family: Arial, sans-serif;
29 font-size: 16px;
30 line-height: 140%;
31 color: #000000;
32 background: repeating-linear-gradient(0deg, #F8F6F5, #F6F4F2 50%, #FCFBF9);
33 background: -moz-repeating-linear-gradient(0deg, #F8F6F5, #F6F4F2 50%, #FCFBF9 );
34 background: -webkit-repeating-linear-gradient(0deg, #F5F4F3, #FAF9F8 50%, #F5F 4F3);
35 background-size: 5px 5px;
36 margin: 0 auto;
37 padding: 0;
38 max-width: 900px;
39 }
40
41 a:link, a:visited
42 {
43 color: #7d7d7d;
44 }
45
46 button, .arrow
47 {
48 cursor: pointer;
49 }
50
51 header, p
52 {
53 margin: 15px 0 5px;
54 }
55
56 #content
57 {
58 padding: 0 90px;
59 }
60
61 header
62 {
63 padding-left: 148px;
64 background-image: url(adblockplus_128.png);
65 background-position: 0% 50%;
37 background-repeat: no-repeat; 66 background-repeat: no-repeat;
38 background-position: 95% 5%; 67 min-height: 128px;
39 font-family: Arial,sans-serif; 68 vertical-align: middle;
40 } 69 line-height: 1;
41 70 display: -webkit-box;
42 .sectionTitle 71 display: -moz-box;
43 { 72 display: box;
44 font-weight: bold; 73 box-orient: vertical;
45 } 74 -webkit-box-orient: vertical;
46 75 -moz-box-orient: vertical;
47 #listNameContainer, 76 box-pack: center;
48 #listNone 77 -webkit-box-pack: center;
49 { 78 -moz-box-pack: center;
50 margin: 1em 2em; 79 }
51 } 80
52 81 header h1
53 #listNone 82 {
54 { 83 font-size: 40px;
55 font-style: italic; 84 margin: 0;
56 } 85 }
57 86
58 #acceptableAds 87 h2
59 { 88 {
60 font-size: 80%; 89 font-size: 22px;
61 font-weight: bold; 90 color: #cc0000;
62 } 91 margin: 30px 0px 20px;
63 #acceptableAds > * 92 }
64 { 93
94 #features {
95 padding-bottom: 140px;
96 }
97
98 .feature {
99 position: relative;
100 vertical-align: middle;
101 text-align: center;
102 margin: 0 90px 0 70px;
103 text-align: left;
104 min-height: 70px;
105 }
106
107 .feature h1
108 {
109 padding-right: 0.3em;
110 }
111
112 .feature h1:after
113 {
114 content: ":";
115 }
116
117 .feature h1, .feature p
118 {
119 font-size: 14px;
120 display: inline;
121 }
122
123 .feature img
124 {
125 position: absolute;
126 margin-left: -70px;
127 width: 57px;
128 height: 57px;
129 }
130
131 .feature button
132 {
133 font-size: 14px;
134 position: absolute;
135 top: 0px;
136 right: 0px;
137 margin-right: -90px;
138 width: 80px;
139 height: 30px;
140 color: #fff;
65 font-weight: normal; 141 font-weight: normal;
66 } 142 background: #62c52b;
67 143 background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
68 .sectionContainer 144 background: -moz-linear-gradient(top, #62c52b, #4f9d22);
69 { 145 background: -ms-linear-gradient(top, #62c52b, #4f9d22);
70 margin: 1em 2em; 146 background: linear-gradient(top, #62c52b, #4f9d22);
71 } 147 box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
148 text-shadow: 2px 2px 2px #327d14;
149 border: none;
150 border-radius: 3px;
151 bottom: 7px;
152 -webkit-transition: box-shadow 0.3s ease;
153 -moz-transition: box-shadow 0.3s ease;
154 -ms-transition: box-shadow 0.3s ease;
155 transition: box-shadow 0.3s ease;
156 }
157
158 .feature button:hover
159 {
160 box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
161 }
162
163 .feature button:active
164 {
165 background: #4f9d22;
166 background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
167 background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
168 background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
169 background: linear-gradient(bottom, #62c52b, #4f9d22);
170 box-shadow: 0px 0px 7px #486c15;
171 -webkit-transition: none;
172 -moz-transition: none;
173 -ms-transition: none;
174 transition: none;
175 bottom: 4px;
176 }
177
178 #shade
179 {
180 -webkit-transition: opacity 0.2s ease;
181 -moz-transition: opacity 0.2s ease;
182 -ms-transition: opacity 0.2s ease;
183 transition: opacity 0.2s ease;
184 opacity: 0.0;
185 position: fixed;
186 margin-left: 10px;
187 bottom: 70px;
188 z-index: 100;
189 }
190
191 .arrow
192 {
193 width: 0;
194 height: 0;
195 border: 30px solid transparent;
196 border-top-color: #000;
197 }
198
199 footer
200 {
201 position: fixed;
202 bottom: 0;
203 left: 0;
204 right: 0;
205 padding: 70px 0 0;
206 text-align: center;
207 background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 2 55, 1) 50px);
208 background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
209 background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
210 background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 5 0px);
211 }
212
213 footer h1
214 {
215 margin: 0;
216 font-size: 18px;
217 color: #666;
218 position: fixed;
219 bottom: 70px;
220 left: 0;
221 right: 0;
222 -webkit-transition: opacity .3s ease;
223 -moz-transition: opacity .3s ease;
224 -ms-transition: opacity .3s ease;
225 transition: opacity .3s ease;
226 opacity: 1;
227 }
228
229 #social ul
230 {
231 list-style: none;
232 padding: 0;
233 margin: 0;
234 }
235
236 #social ul:hover + h1
237 {
238 opacity: 0;
239 }
240
241 #social ul:hover li { opacity:0.3; }
242
243
244
245 #social ul li
246 {
247 display: inline-block;
248 margin: 0px 5px;
249 -webkit-transition: opacity .5s ease, bottom .3s ease;
250 -moz-transition: opacity .5s ease, bottom .3s ease;
251 -ms-transition: opacity .5s ease, bottom .3s ease;
252 transition: opacity .5s ease, bottom .3s ease;
253 position: relative;
254 bottom: -30px;
255 }
256
257 #social ul li:hover
258 {
259 opacity: 1.0;
260 bottom: 0px;
261 }
262
263 @media (max-width:640px), (max-height:500px)
264 {
265 body
266 {
267 font-size: 14px;
268 max-width: 810px;
269 }
270
271 #content
272 {
273 padding: 0 45px;
274 }
275 header
276 {
277 background-size: auto 102px;
278 min-height: 102px;
279 padding-left: 110px;
280 }
281
282 header h1
283 {
284 font-size: 26px;
285 }
286
287 h2
288 {
289 font-size: 18px;
290 }
291
292 .feature h1, .feature p
293 {
294 font-size: 12px;
295 }
296
297 #shade
298 {
299 bottom: 80px;
300 margin-left: 5px;
301 }
302
303 .arrow
304 {
305 border-width: 15px;
306 }
307
308 footer
309 {
310 padding-top: 60px;
311 }
312
313 footer h1
314 {
315 font-size: 16px;
316 }
317 }
318
OLDNEW
« chrome/content/ui/firstRun.js ('K') | « chrome/content/ui/firstRun.xhtml ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld