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

Side by Side Diff: static/poland/css/index.css

Issue 29800606: Fixes #91 - Homepage duplicate in Polish for SEM (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Created June 6, 2018, 5:37 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
(Empty)
1 /******************************************************************************
2 * Temparary styles
3 *****************************************************************************/
4
5 .avoid-wrap {display: inline-block;}
6 .small {font-size: smaller;}
7
8 /******************************************************************************
9 * Browser-based styles
10 *****************************************************************************/
11
12 .show-on-msie { display: none; }
13 .msie .show-on-msie { display: inherit; }
14 .msie .hide-on-msie { display: none; }
15
16 .show-on-maxthon { display: none; }
17 .maxthon .show-on-maxthon { display: inherit; }
18 .maxthon .hide-on-maxthon { display: none; }
19
20 /******************************************************************************
21 * #hero-download
22 *****************************************************************************/
23
24 #hero-download
25 {
26 padding: 3em 1em;
27 }
28
29 @media (min-width: 576px) and (max-width: 1023px)
30 {
31 /* add spacing left/right on tablets */
32 #hero-download
33 {
34 padding-left: 3em;
35 padding-right: 3em;
36 }
37 }
38
39 @media (max-width: 575px)
40 {
41 /* disable avoid-wrap inside h1 on mobile */
42 #hero-download h1 .avoid-wrap
43 {
44 display: inline;
45 }
46 }
47
48 @media (max-width: 1023px)
49 {
50 /* force hero unit columns to break on large tablets */
51 #hero-download .column
52 {
53 width: 100%;
54 }
55 }
56
57 @media (min-width: 1024px)
58 {
59 #hero-download
60 {
61 padding-top: 6em;
62 padding-bottom: 6em;
63 }
64 }
65
66 #hero-download h1
67 {
68 /* Spacing is provided by the hero-download section */
69 margin-top: 0;
70 }
71
72 @media (min-width: 576px)
73 {
74 /* force break without <br> on large screens */
75 #hero-download h1 .avoid-wrap:first-of-type
76 {
77 display: block;
78 }
79 }
80
81 #hero-download-tos
82 {
83 margin-bottom: 0.5em;
84 }
85
86 #hero-download-alternate
87 {
88 font-size: smaller;
89 }
90
91 #hero-download-button
92 {
93 display: inline-block;
94 min-width: 250px;
95 /* stretch full-width <= small tablets */
96 width: 100%;
97 /* 0.2em taller than normal buttons */
98 padding-top: 0.8em;
99 padding-bottom: 0.8em;
100 }
101
102 @media (min-width: 576px)
103 {
104 #hero-download-button
105 {
106 /* force auto-width >= small tablets */
107 width: auto;
108 }
109 }
110
111 #hero-download-video
112 {
113 /* add space above on phones & tablets */
114 margin-top: 2em;
115 /* prevent default full-width on small tablets */
116 max-width: 550px;
117 }
118
119 #hero-download-video
120 {
121 /* provide a little space between thumbnail and border + shadow */
122 padding: 1em 1em 0 1em;
123 }
124
125 @media (min-width: 1024px)
126 {
127 #hero-download-video
128 {
129 /* keep aligned-top despite padding below */
130 margin-top: -1em;
131 }
132 }
133
134 #hero-download-video.has-iframe
135 {
136 /* remove space around thumbnail when thumbnail is replaced by video */
137 padding: 0;
138 }
139
140 /** Hide the video border + shadow only when the thumbnail alone is showing */
141 #hero-download-video.hide-disclaimer:not(.has-iframe)
142 {
143 border-color: transparent;
144 /* there is no box-shadow-color property :( */
145 box-shadow: 1px 1px 0 0 transparent;
146 }
147
148 /* The thumbnail is taller than the video. But it's hard to see because of the
149 * reflection and whitespace at the bottom. As a result, I am cutting out the
150 * whitespace and reflection when I show the disclaimer so that the section
151 * doesn't visibly resize when the thumbnail is replaced by the a iframe.
152 */
153
154
155 /******************************************************************************
156 * #media
157 *****************************************************************************/
158
159 #media-section
160 {
161 clear: both;
162 text-align: center;
163 }
164
165 #media-header
166 {
167 margin-bottom: 1em;
168 }
169
170 #media-header h2
171 {
172 font-size: 1em;
173 font-weight: normal;
174 text-transform: uppercase;
175 }
176
177 #media-header h2,
178 #media-list
179 {
180 margin: 0;
181 }
182
183 #media-list li
184 {
185 display: inline-block;
186 }
187
188 #media-list img
189 {
190 max-width: 10em;
191 max-height: 3em;
192 margin: 0 1em 1em;
193 }
194
195 #media-list a
196 {
197 position: relative;
198 display: block;
199 }
200
201 #media-list a:hover img
202 {
203 opacity: 0.3;
204 }
205
206 #media-list a:hover:after
207 {
208 content: "";
209 position: absolute;
210 top: 50%;
211 left: 50%;
212 height: 1em;
213 width: 1em;
214 padding: 1em;
215 margin-left: -1em;
216 margin-top: -1em;
217 border-radius: 50%;
218 background-color: #000;
219 background-image: url(../img/external-icon.png);
220 background-image: linear-gradient(transparent, transparent),
221 url(../img/external-icon.svg);
222 background-repeat: no-repeat;
223 background-position: center;
224 background-size: 1em;
225 }
226
227 @media (min-width: 1024px)
228 {
229 #media
230 {
231 display: table;
232 width: 100%;
233 }
234
235 #media-header,
236 #media-list
237 {
238 display: table-cell;
239 vertical-align: middle;
240 width: auto;
241 }
242
243 #media-header
244 {
245 margin-bottom: 0;
246 }
247
248 #media-header small
249 {
250 display: none;
251 }
252
253 #media-list { direction: rtl; }
254 [dir="rtl"] #media-list { direction: ltr; }
255
256 @supports (display: flex)
257 {
258 #media-list
259 {
260 display: flex;
261 justify-content: space-between;
262 align-items: center;
263 }
264 }
265
266 #media-list
267 {
268 display: table;
269 width: 100%;
270 }
271
272 #media-list li
273 {
274 display: table-cell;
275 vertical-align: middle;
276 }
277
278 #media-list img
279 {
280 margin: 0 2em;
281 }
282 }
283
284 /******************************************************************************
285 * #abb-cross-promotion
286 *****************************************************************************/
287
288 #abb-cross-promotion
289 {
290 padding: 3em 0;
291 }
292
293 #abb-cross-promotion h2
294 {
295 margin-top: 0;
296 margin-bottom: 1.5em;
297 }
298
299 #abb-cross-promotion h2,
300 #abb-cross-promotion h3
301 {
302 text-transform: uppercase;
303 }
304
305 #abb-logo
306 {
307 max-width: 10em;
308 }
309
310 #abb-app-store-badges
311 {
312 margin-top: 2em;
313 }
314
315 #abb-app-store-badges img
316 {
317 height: 60px;
318 }
319
320 @media (max-width: 575px)
321 {
322 #abb-app-store-badges a:first-of-type
323 {
324 margin-bottom: 0.5em;
325 }
326 }
327
328 @media (min-width: 576px)
329 {
330 #abb-app-store-badges .one-half
331 {
332 width: 50%;
333 }
334
335 #abb-cross-promotion figure,
336 #abb-app-store-badges
337 {
338 padding-left: 2em;
339 padding-right: 2em;
340 }
341 }
342
343 /******************************************************************************
344 * #footnote
345 *****************************************************************************/
346
347 #footnote
348 {
349 padding-top: 3em;
350 padding-bottom: 2em;
351 font-size: 13px;
352 color: #7d7d7d;
353 }
OLDNEW

Powered by Google App Engine
This is Rietveld