PluginProbe
PowerPress Podcasting plugin by Blubrry / trunk
PowerPress Podcasting plugin by Blubrry vtrunk
11.17.9 11.17.8 11.17.7 11.17.6 11.17.4 11.17.3 11.17.2 11.17.1 11.17 11.16.11 11.16.10 11.16.9 11.16.8 11.16.7 11.16.6 11.16.5 11.16.4 11.16.3 11.16.2 11.16.1 11.9.13 11.9.14 11.9.15 11.9.16 11.9.17 All 383 releases
powerpress / css / subscribe-widget.css

subscribe-widget.css in PowerPress Podcasting plugin by Blubrry trunk, at css/subscribe-widget.css

530 lines 14.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .pp-ssb-widget {
2 width: 100%;
3 margin: 0 auto;
4 padding-top: 1ch;
5 }
6
7 .pp-ssb-widget-modern {
8 font: Roboto;
9 color: #707070;
10 }
11
12 .pp-ssb-widget.no-pad-top {
13 padding-top: 0;
14 }
15
16 /*Styling for round buttons*/
17 a.pp-ssb-btn {
18 width: 100%;
19 height: 48px;
20 display: inline-block;
21 text-decoration: none;
22 vertical-align: middle;
23 line-height: 48px;
24 overflow: hidden;
25 border-radius: 50px;
26
27 }
28
29 .pp-ssb-widget-include a.pp-ssb-btn {
30 text-align: left;
31 }
32
33 .pp-ssb-widget-modern a.pp-ssb-btn {
34 color: #707070;
35 margin: 6px 0 6px 0;
36 border: 1px solid #C4C4C4;
37 font: 15px arial, sans-serif;
38 padding-right: 20px;
39 background-position: center;
40 transition: background 0.8s;
41 background-color: #fff;
42 font-size: 80%;
43 }
44
45 .pp-ssb-widget-modern.pp-ssb-widget-include a.pp-ssb-btn {
46 font-size: 80% !important;
47 }
48
49 /*Styling for square buttons*/
50 .pp-ssb-btn-sq {
51 width: 100%;
52 height: 48px;
53 display: inline-block;
54 text-decoration: none;
55 vertical-align: middle;
56 line-height: 48px;
57 overflow: hidden;
58 }
59
60 .pp-ssb-btn-include .pp-ssb-btn-sq {
61 text-align: left;
62 }
63
64 body .pp-ssb-widget-modern a.pp-ssb-btn-sq {
65 color: #707070;
66 margin: 6px 0 6px 0;
67 border: 1px solid #C4C4C4;
68 font: 15px arial, sans-serif;
69 background-position: center;
70 transition: background 0.8s;
71 background-color: #fff;
72 font-size: 80%;
73 }
74
75 body .pp-ssb-widget-modern.pp-ssb-widget-include a.pp-ssb-btn-sq {
76 font-size: 80% !important;
77 }
78
79 /*Responsive rules, so that buttons don't wrap and the Subscribe Page button is always displayed*/
80 @media (max-width: 663px) and (min-width: 611px) {
81 a.pp-ssb-btn-sq.horizontal:nth-child(n + 11) {
82 display: none;
83 }
84 }
85
86 @media (max-width: 611px) and (min-width: 559px) {
87 a.pp-ssb-btn-sq.horizontal:nth-child(n + 10) {
88 display: none;
89 }
90 }
91
92 @media (max-width: 559px) and (min-width: 507px) {
93 a.pp-ssb-btn-sq.horizontal:nth-child(n + 9) {
94 display: none;
95 }
96 }
97
98 @media (max-width: 507px) and (min-width: 455px) {
99 a.pp-ssb-btn-sq.horizontal:nth-child(n + 8) {
100 display: none;
101 }
102 }
103
104 @media (max-width: 455px) and (min-width: 403px) {
105 a.pp-ssb-btn-sq.horizontal:nth-child(n + 7) {
106 display: none;
107 }
108 }
109
110 @media (max-width: 403px) and (min-width: 351px) {
111 a.pp-ssb-btn-sq.horizontal:nth-child(n + 6) {
112 display: none;
113 }
114 }
115
116 @media (max-width: 351px) and (min-width: 299px) {
117 a.pp-ssb-btn-sq.horizontal:nth-child(n + 5) {
118 display: none;
119 }
120 }
121
122 @media (max-width: 299px) and (min-width: 247px) {
123 a.pp-ssb-btn-sq.horizontal:nth-child(n + 4) {
124 display: none;
125 }
126 }
127
128 @media (max-width: 247px) and (min-width: 195px) {
129 a.pp-ssb-btn-sq.horizontal:nth-child(n + 3) {
130 display: none;
131 }
132 }
133
134 @media (max-width: 195px) {
135 a.pp-ssb-btn-sq.horizontal:nth-child(n + 2) {
136 display: none;
137 }
138 }
139
140 /*Responsive rules for square buttons*/
141 @media (max-width: 992px) and (min-width: 721px) {
142 a.pp-ssb-btn.horizontal:nth-child(n + 11) {
143 display: none;
144 }
145 }
146
147 @media (max-width: 721px) and (min-width: 659px) {
148 a.pp-ssb-btn.horizontal:nth-child(n + 10) {
149 display: none;
150 }
151 }
152
153 @media (max-width: 659px) and (min-width: 597px) {
154 a.pp-ssb-btn.horizontal:nth-child(n + 9) {
155 display: none;
156 }
157 }
158
159 @media (max-width: 597px) and (min-width: 535px) {
160 a.pp-ssb-btn.horizontal:nth-child(n + 8) {
161 display: none;
162 }
163 }
164
165 @media (max-width: 535px) and (min-width: 473px) {
166 a.pp-ssb-btn.horizontal:nth-child(n + 7) {
167 display: none;
168 }
169 }
170
171 @media (max-width: 473px) and (min-width: 411px) {
172 a.pp-ssb-btn.horizontal:nth-child(n + 6) {
173 display: none;
174 }
175 }
176
177 @media (max-width: 411px) and (min-width: 349px) {
178 a.pp-ssb-btn.horizontal:nth-child(n + 5) {
179 display: none;
180 }
181 }
182
183 @media (max-width: 349px) and (min-width: 287px) {
184 a.pp-ssb-btn.horizontal:nth-child(n + 4) {
185 display: none;
186 }
187 }
188
189 @media (max-width: 287px) and (min-width: 225px) {
190 a.pp-ssb-btn.horizontal:nth-child(n + 3) {
191 display: none;
192 }
193 }
194
195 @media (max-width: 225px) {
196 a.pp-ssb-btn.horizontal:nth-child(n + 2) {
197 display: none;
198 }
199 }
200
201 a.pp-ssb-btn-sq.horizontal:last-child,
202 a.pp-ssb-btn.horizontal:last-child
203 {
204 display:inline-block;
205 }
206
207 .pp-ssb-widget-modern a .pp-ssb-text {
208 position: relative;
209 top: 4px;
210 }
211
212 /*Ripple effect in modern buttons*/
213 .pp-ssb-widget-modern a.pp-ssb-btn:hover, .pp-ssb-widget-modern a.pp-ssb-btn-sq:hover {
214 background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000%;
215 color: #444444;
216 }
217
218 /*Background rules for modern buttons*/
219 .pp-ssb-widget-modern .pp-ssb-itunes.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-itunes.pp-ssb-btn-sq:active {
220 background-color: #AB42DF;
221 background-size: 100%;
222 transition: background 0s;
223 }
224 .pp-ssb-widget-modern .pp-ssb-android.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-android.pp-ssb-btn-sq:active {
225 background-color: #75BA26;
226 background-size: 100%;
227 transition: background 0s;
228 }
229 .pp-ssb-widget-modern .pp-ssb-email.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-email.pp-ssb-btn-sq:active {
230 background-color: #018C8B;
231 background-size: 100%;
232 transition: background 0s;
233 }
234 .pp-ssb-widget-modern .pp-ssb-gp.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-gp.pp-ssb-btn-sq:active {
235 background-color: #F9BA01;
236 background-size: 100%;
237 transition: background 0s;
238 }
239 .pp-ssb-widget-modern .pp-ssb-stitcher.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-stitcher.pp-ssb-btn-sq:active {
240 background-color: #2B91C9;
241 background-size: 100%;
242 transition: background 0s;
243 }
244 .pp-ssb-widget-modern .pp-ssb-tunein.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-tunein.pp-ssb-btn-sq:active {
245 background-color: #1C1F3D;
246 background-size: 100%;
247 transition: background 0s;
248 }
249 .pp-ssb-widget-modern .pp-ssb-spotify.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-spotify.pp-ssb-btn-sq:active {
250 background-color: #3EB559;
251 background-size: 100%;
252 transition: background 0s;
253 }
254 .pp-ssb-widget-modern .pp-ssb-iheartradio.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-iheartradio.pp-ssb-btn-sq:active {
255 background-color: #960d16;
256 background-size: 100%;
257 transition: background 0s;
258 }
259 .pp-ssb-widget-modern .pp-ssb-deezer.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-deezer.pp-ssb-btn-sq:active {
260 background-color: #007feb;
261 background-size: 100%;
262 transition: background 0s;
263 }
264 .pp-ssb-widget-modern .pp-ssb-anghami.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-anghami.pp-ssb-btn-sq:active {
265 background-color: #a316b4;
266 background-size: 100%;
267 transition: background 0s;
268 }
269 .pp-ssb-widget-modern .pp-ssb-pandora.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-pandora.pp-ssb-btn-sq:active {
270 background-color: #3668ff;
271 background-size: 100%;
272 transition: background 0s;
273 }
274 .pp-ssb-widget-modern .pp-ssb-rss.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-rss.pp-ssb-btn-sq:active {
275 background-color: #FF6600;
276 background-size: 100%;
277 transition: background 0s;
278 }
279 .pp-ssb-widget-modern .pp-ssb-amazon.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-amazon.pp-ssb-btn-sq:active {
280 background-color: #4400ff;
281 background-size: 100%;
282 transition: background 0s;
283 }
284 .pp-ssb-widget-modern .pp-ssb-pcindex.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-pcindex.pp-ssb-btn-sq:active {
285 background-color: #AB0000;
286 background-size: 100%;
287 transition: background 0s;
288 }
289 .pp-ssb-widget-modern .pp-ssb-jiosaavn.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-jiosaavn.pp-ssb-btn-sq:active {
290 background-color: #2BC5B4;
291 background-size: 100%;
292 transition: background 0s;
293 }
294 .pp-ssb-widget-modern .pp-ssb-gaana.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-gaana.pp-ssb-btn-sq:active {
295 background-color: #E62C2F;
296 background-size: 100%;
297 transition: background 0s;
298 }
299 .pp-ssb-widget-modern .pp-ssb-podchaser.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-podchaser.pp-ssb-btn-sq:active {
300 background-color: #000000;
301 background-size: 100%;
302 transition: background 0s;
303 }
304 .pp-ssb-widget-modern .pp-ssb-more.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-more.pp-ssb-btn-sq:active {
305 background-color: #333333;
306 background-size: 100%;
307 transition: background 0s;
308 }
309 .pp-ssb-widget-modern .pp-ssb-youtube.pp-ssb-btn:active, .pp-ssb-widget-modern .pp-ssb-youtube.pp-ssb-btn-sq:active {
310 background-color: #E1251B;;
311 background-size: 100%;
312 transition: background 0s;
313 }
314
315 .horizontal .pp-ssb-text {
316 display: none;
317 }
318 a.pp-ssb-btn.horizontal, a.pp-ssb-btn-sq.horizontal {
319 width: auto;
320 }
321 a.pp-ssb-btn.horizontal, a.pp-ssb-btn-sq.horizontal {
322 padding-right: 0;
323 }
324 .pp-ssb-widget-include a.pp-ssb-btn.horizontal, .pp-ssb-widget-include a.pp-ssb-btn-sq.horizontal {
325 padding-right: 0 !important;
326 }
327 a.pp-ssb-btn.horizontal {
328 margin-right: 10px;
329 }
330
331 /*Settings for buttons, including which sprite to use for the icons*/
332 .pp-ssb-ic {
333 display: inline-block;
334 width: 50px;
335 height: 38px;
336 margin-top: 2px;
337 border: 0;
338 vertical-align: middle;
339 padding-left: 15px;
340 background-repeat: no-repeat;
341 background-size: 50px;
342
343 }
344
345 .pp-ssb-widget-modern a .pp-ssb-ic {
346 background-image: url('../images/modern_icon_sprite_2024_2.svg');
347 }
348
349 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
350 /* IE10+ CSS styles go here */
351 .pp-ssb-widget-modern a .pp-ssb-ic {
352 background-image: url('../images/modern_icon_sprite_2024.png');
353 }
354 }
355
356 /*Sprite background positions for modern buttons*/
357 .pp-ssb-widget-modern .pp-ssb-itunes.pp-ssb-btn-sq:not(.horizontal) {
358 border-left: 3px solid #AB42DF;
359 padding-right: 10px;
360 }
361 .pp-ssb-widget-modern .pp-ssb-itunes .pp-ssb-ic {
362 background-position: 0 -5px;
363 }
364 .pp-ssb-widget-modern .pp-ssb-android.pp-ssb-btn-sq:not(.horizontal) {
365 border-left: 3px solid #75BA26;
366 padding-right: 10px;
367 }
368 .pp-ssb-widget-modern .pp-ssb-android .pp-ssb-ic {
369 background-position: 0 -55px;
370 }
371 .pp-ssb-widget-modern .pp-ssb-email.pp-ssb-btn-sq:not(.horizontal) {
372 border-left: 3px solid #018C8B;
373 padding-right: 10px;
374 }
375 .pp-ssb-widget-modern .pp-ssb-email .pp-ssb-ic {
376 background-position: 0 -106px;
377 }
378 .pp-ssb-widget-modern .pp-ssb-gp.pp-ssb-btn-sq:not(.horizontal) {
379 border-left: 3px solid #F9BA01;
380 padding-right: 10px;
381 }
382 .pp-ssb-widget-modern .pp-ssb-gp .pp-ssb-ic {
383 background-position: 0 -155px;
384 }
385
386 .pp-ssb-widget-modern .pp-ssb-stitcher.pp-ssb-btn-sq:not(.horizontal) {
387 border-left: 3px solid #2B91C9;
388 padding-right: 10px;
389 }
390 .pp-ssb-widget-modern .pp-ssb-stitcher .pp-ssb-ic {
391 background-position: 0 -205px;
392 }
393 .pp-ssb-widget-modern .pp-ssb-tunein.pp-ssb-btn-sq:not(.horizontal) {
394 border-left: 3px solid #1C1F3D;
395 padding-right: 10px;
396 }
397 .pp-ssb-widget-modern .pp-ssb-tunein .pp-ssb-ic {
398 background-position: 0 -255px;
399 }
400
401 .pp-ssb-widget-modern .pp-ssb-spotify.pp-ssb-btn-sq:not(.horizontal) {
402 border-left: 3px solid #3EB559;
403 padding-right: 10px;
404 }
405 .pp-ssb-widget-modern .pp-ssb-spotify .pp-ssb-ic {
406 background-position: 0 -307px;
407 }
408
409 .pp-ssb-widget-modern .pp-ssb-iheartradio.pp-ssb-btn-sq:not(.horizontal) {
410 border-left: 3px solid #960d16;
411 padding-right: 10px;
412 }
413 .pp-ssb-widget-modern .pp-ssb-iheartradio .pp-ssb-ic {
414 background-position: 0 -456px;
415 }
416
417 .pp-ssb-widget-modern .pp-ssb-deezer.pp-ssb-btn-sq:not(.horizontal) {
418 border-left: 3px solid #007feb;
419 padding-right: 10px;
420 }
421 .pp-ssb-widget-modern .pp-ssb-deezer .pp-ssb-ic {
422 background-position: 0 -507px;
423 }
424
425 .pp-ssb-widget-modern .pp-ssb-anghami.pp-ssb-btn-sq:not(.horizontal) {
426 border-left: 3px solid #a316b4;
427 padding-right: 10px;
428 }
429 .pp-ssb-widget-modern .pp-ssb-anghami .pp-ssb-ic {
430 background-position: 0 -1254px;
431 }
432
433 .pp-ssb-widget-modern .pp-ssb-pandora.pp-ssb-btn-sq:not(.horizontal) {
434 border-left: 3px solid #3668ff;
435 padding-right: 10px;
436 }
437 .pp-ssb-widget-modern .pp-ssb-pandora .pp-ssb-ic {
438 background-position: 0 -555px;
439 }
440
441 .pp-ssb-widget-modern .pp-ssb-rss.pp-ssb-btn-sq:not(.horizontal) {
442 border-left: 3px solid #FF6600;
443 padding-right: 10px;
444 }
445 .pp-ssb-widget-modern .pp-ssb-rss .pp-ssb-ic {
446 background-position: 0 -355px;
447 }
448
449 .pp-ssb-widget-modern .pp-ssb-amazon.pp-ssb-btn-sq:not(.horizontal) {
450 border-left: 3px solid #4400ff;
451 padding-right: 10px;
452 }
453 .pp-ssb-widget-modern .pp-ssb-amazon .pp-ssb-ic {
454 background-position: 0 -1007px;
455 }
456
457 .pp-ssb-widget-modern .pp-ssb-pcindex.pp-ssb-btn-sq:not(.horizontal) {
458 border-left: 3px solid #AB0000;
459 padding-right: 10px;
460 }
461 .pp-ssb-widget-modern .pp-ssb-pcindex .pp-ssb-ic {
462 background-position: 0 -1057px;
463 }
464
465 .pp-ssb-widget-modern .pp-ssb-jiosaavn.pp-ssb-btn-sq:not(.horizontal) {
466 border-left: 3px solid #2BC5B4;
467 padding-right: 10px;
468 }
469 .pp-ssb-widget-modern .pp-ssb-jiosaavn .pp-ssb-ic {
470 background-position: 0 -1107px;
471 }
472
473 .pp-ssb-widget-modern .pp-ssb-gaana.pp-ssb-btn-sq:not(.horizontal) {
474 border-left: 3px solid #E62C2F;
475 padding-right: 10px;
476 }
477 .pp-ssb-widget-modern .pp-ssb-gaana .pp-ssb-ic {
478 background-position: 0 -1203px;
479 }
480
481 .pp-ssb-widget-modern .pp-ssb-podchaser.pp-ssb-btn-sq:not(.horizontal) {
482 border-left: 3px solid #000000;
483 padding-right: 10px;
484 }
485 .pp-ssb-widget-modern .pp-ssb-podchaser .pp-ssb-ic {
486 background-position: 0 -1153px;
487 }
488
489 .pp-ssb-widget-modern .pp-ssb-more.pp-ssb-btn-sq:not(.horizontal) {
490 border-left: 3px solid #333333;
491 padding-right: 10px;
492 }
493
494 .pp-ssb-widget-modern .pp-ssb-more .pp-ssb-ic {
495 background-position: 0 -405px;
496 }
497
498 .pp-ssb-widget-modern .pp-ssb-youtube.pp-ssb-btn-sq:not(.horizontal) {
499 border-left: 3px solid #E1251B;
500 padding-right: 10px;
501 }
502
503 .pp-ssb-widget-modern .pp-ssb-youtube .pp-ssb-ic {
504 background-position: 0 -1303px;
505 }
506
507 .pp-ssb-widget-modern .pp-ssb-btn::after,
508 .pp-ssb-widget-modern .pp-ssb-btn-sq::after {
509 content: url("../images/arrow.svg");;
510 width: 20px;
511 display: inline-block;
512 float: right;
513 margin-top: 16px;
514 }
515
516 .horizontal.pp-ssb-btn::after, .horizontal.pp-ssb-btn-sq::after {
517 content: none;
518 }
519
520 .pp-ssb-nm {
521 line-height: 46px;
522 padding-left: 10px;
523 }
524 .go img {
525 height: 8px;
526 width: 30px;
527 float: right;
528 margin-top: 20px;
529 margin-right: 10px;
530 }