jekyll-octopod 0.9.5 → 0.9.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (142) hide show
  1. checksums.yaml +4 -4
  2. data/assets/_includes/post.html +6 -2
  3. data/assets/_includes/sidebar.html +10 -7
  4. data/assets/_layouts/default.html +0 -5
  5. data/assets/_layouts/with_twitter_card.html +0 -5
  6. data/assets/podigee-player/fonts/podigee-podcast-player.eot +0 -0
  7. data/assets/podigee-player/fonts/podigee-podcast-player.json +42711 -0
  8. data/assets/podigee-player/fonts/podigee-podcast-player.svg +32 -0
  9. data/assets/podigee-player/fonts/podigee-podcast-player.ttf +0 -0
  10. data/assets/podigee-player/fonts/podigee-podcast-player.woff +0 -0
  11. data/assets/podigee-player/images/chromcast.png +0 -0
  12. data/assets/podigee-player/javascripts/podigee-podcast-player-embed.js +11 -0
  13. data/assets/podigee-player/javascripts/podigee-podcast-player-embed.js.gz +0 -0
  14. data/assets/podigee-player/javascripts/podigee-podcast-player.js +1 -0
  15. data/assets/podigee-player/javascripts/podigee-podcast-player.js.gz +0 -0
  16. data/assets/podigee-player/podigee-podcast-player.html +329 -0
  17. data/assets/podigee-player/stylesheets/app.css +223 -0
  18. data/assets/podigee-player/stylesheets/app.css.gz +0 -0
  19. data/assets/podigee-player/themes/default-dark/index.css +397 -0
  20. data/assets/podigee-player/themes/default-dark/index.html +31 -0
  21. data/assets/podigee-player/themes/default-dark/variables.css +0 -0
  22. data/assets/podigee-player/themes/default/index.css +383 -0
  23. data/assets/podigee-player/themes/default/index.html +57 -0
  24. data/assets/podigee-player/themes/default/variables.css +0 -0
  25. data/assets/podigee-player/themes/legacy/index.css +248 -0
  26. data/assets/podigee-player/themes/legacy/index.html +28 -0
  27. data/assets/podigee-player/themes/legacy/variables.css +0 -0
  28. data/assets/podigee-player/themes/minimal/index.css +65 -0
  29. data/assets/podigee-player/themes/minimal/index.html +12 -0
  30. data/assets/podigee-player/themes/republica/index.css +352 -0
  31. data/assets/podigee-player/themes/republica/index.html +32 -0
  32. data/assets/subscribe-button/button.html +15 -0
  33. data/assets/subscribe-button/fonts/podlove/Podlove.eot +0 -0
  34. data/assets/subscribe-button/fonts/podlove/Podlove.svg +16 -0
  35. data/assets/subscribe-button/fonts/podlove/Podlove.ttf +0 -0
  36. data/assets/subscribe-button/fonts/podlove/Podlove.woff +0 -0
  37. data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.eot +0 -0
  38. data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.svg +641 -0
  39. data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.ttf +0 -0
  40. data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.woff +0 -0
  41. data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.eot +0 -0
  42. data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.svg +593 -0
  43. data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.ttf +0 -0
  44. data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.woff +0 -0
  45. data/assets/subscribe-button/images/android/acast.png +0 -0
  46. data/assets/subscribe-button/images/android/antennapod.png +0 -0
  47. data/assets/subscribe-button/images/android/beyondpod.png +0 -0
  48. data/assets/subscribe-button/images/android/chakouat.png +0 -0
  49. data/assets/subscribe-button/images/android/doggcatcher.png +0 -0
  50. data/assets/subscribe-button/images/android/playerfm.png +0 -0
  51. data/assets/subscribe-button/images/android/pocketcasts.png +0 -0
  52. data/assets/subscribe-button/images/android/podcastaddict.png +0 -0
  53. data/assets/subscribe-button/images/android/podcastrepublic.png +0 -0
  54. data/assets/subscribe-button/images/android/podcatcher-deluxe.png +0 -0
  55. data/assets/subscribe-button/images/android/podkicker.png +0 -0
  56. data/assets/subscribe-button/images/android/shortorange.png +0 -0
  57. data/assets/subscribe-button/images/android/upod.png +0 -0
  58. data/assets/subscribe-button/images/blackberry/bpod.png +0 -0
  59. data/assets/subscribe-button/images/blackberry/gpodder.png +0 -0
  60. data/assets/subscribe-button/images/cloud/gpoddernet.png +0 -0
  61. data/assets/subscribe-button/images/cloud/instacastcloud.png +0 -0
  62. data/assets/subscribe-button/images/cloud/playerfm.png +0 -0
  63. data/assets/subscribe-button/images/cloud/pocketcasts.png +0 -0
  64. data/assets/subscribe-button/images/cloud/shortorange.png +0 -0
  65. data/assets/subscribe-button/images/generic/android.png +0 -0
  66. data/assets/subscribe-button/images/generic/rss.png +0 -0
  67. data/assets/subscribe-button/images/generic/windows.png +0 -0
  68. data/assets/subscribe-button/images/generic/windows8.png +0 -0
  69. data/assets/subscribe-button/images/generic/windowsphone.png +0 -0
  70. data/assets/subscribe-button/images/icon-big.png +0 -0
  71. data/assets/subscribe-button/images/icon-big@2x.png +0 -0
  72. data/assets/subscribe-button/images/icon-medium.png +0 -0
  73. data/assets/subscribe-button/images/icon-medium@2x.png +0 -0
  74. data/assets/subscribe-button/images/icon-small.png +0 -0
  75. data/assets/subscribe-button/images/icon-small@2x.png +0 -0
  76. data/assets/subscribe-button/images/icon.svg +32 -0
  77. data/assets/subscribe-button/images/ios/castro.png +0 -0
  78. data/assets/subscribe-button/images/ios/downcast.png +0 -0
  79. data/assets/subscribe-button/images/ios/icatcher.png +0 -0
  80. data/assets/subscribe-button/images/ios/instacast.png +0 -0
  81. data/assets/subscribe-button/images/ios/overcast.png +0 -0
  82. data/assets/subscribe-button/images/ios/pocketcasts.png +0 -0
  83. data/assets/subscribe-button/images/ios/podcasts.png +0 -0
  84. data/assets/subscribe-button/images/ios/podcat.png +0 -0
  85. data/assets/subscribe-button/images/ios/podgrasp.png +0 -0
  86. data/assets/subscribe-button/images/ios/podwrangler.png +0 -0
  87. data/assets/subscribe-button/images/ios/rssradio.png +0 -0
  88. data/assets/subscribe-button/images/ios/shortorange.png +0 -0
  89. data/assets/subscribe-button/images/ios/sleekcast.png +0 -0
  90. data/assets/subscribe-button/images/linux/clementine.png +0 -0
  91. data/assets/subscribe-button/images/linux/gpodder.png +0 -0
  92. data/assets/subscribe-button/images/linux/miro.png +0 -0
  93. data/assets/subscribe-button/images/osx/downcast.png +0 -0
  94. data/assets/subscribe-button/images/osx/gpodder.png +0 -0
  95. data/assets/subscribe-button/images/osx/instacast.png +0 -0
  96. data/assets/subscribe-button/images/osx/itunes.png +0 -0
  97. data/assets/subscribe-button/images/osx/miro.png +0 -0
  98. data/assets/subscribe-button/images/osx/podgrasp.png +0 -0
  99. data/assets/subscribe-button/images/osx/podsnatcher.png +0 -0
  100. data/assets/subscribe-button/images/podlove.svg +45 -0
  101. data/assets/subscribe-button/images/stores/android.png +0 -0
  102. data/assets/subscribe-button/images/stores/apple-app-store-en.png +0 -0
  103. data/assets/subscribe-button/images/stores/apple-app-store-en.svg +129 -0
  104. data/assets/subscribe-button/images/stores/blackberry-world-en.png +0 -0
  105. data/assets/subscribe-button/images/stores/google-play-en.png +0 -0
  106. data/assets/subscribe-button/images/stores/google-play-en.svg +126 -0
  107. data/assets/subscribe-button/images/stores/google-play-en@1x.svg +126 -0
  108. data/assets/subscribe-button/images/stores/ios.png +0 -0
  109. data/assets/subscribe-button/images/stores/osx.png +0 -0
  110. data/assets/subscribe-button/images/stores/windows-phone-store-en.png +0 -0
  111. data/assets/subscribe-button/images/stores/windows-phone-store-en.svg +40 -0
  112. data/assets/subscribe-button/images/stores/windows-store-en.png +0 -0
  113. data/assets/subscribe-button/images/stores/windows-store-en.svg +61 -0
  114. data/assets/subscribe-button/images/stores/windows8.png +0 -0
  115. data/assets/subscribe-button/images/stores/windows81.png +0 -0
  116. data/assets/subscribe-button/images/stores/windowsphone.png +0 -0
  117. data/assets/subscribe-button/images/windows/gpodder.png +0 -0
  118. data/assets/subscribe-button/images/windows/itunes.png +0 -0
  119. data/assets/subscribe-button/images/windows/miro.png +0 -0
  120. data/assets/subscribe-button/images/windows/podscout.png +0 -0
  121. data/assets/subscribe-button/images/windowsphone/bringcast.png +0 -0
  122. data/assets/subscribe-button/images/windowsphone/gramocast.png +0 -0
  123. data/assets/subscribe-button/images/windowsphone/ipodcast.png +0 -0
  124. data/assets/subscribe-button/images/windowsphone/pcast.png +0 -0
  125. data/assets/subscribe-button/images/windowsphone/podcastbrain.png +0 -0
  126. data/assets/subscribe-button/images/windowsphone/podcastlounge.png +0 -0
  127. data/assets/subscribe-button/images/windowsphone/podcastpicker.png +0 -0
  128. data/assets/subscribe-button/images/windowsphone/podcasts.png +0 -0
  129. data/assets/subscribe-button/images/windowsphone/podcastspro.png +0 -0
  130. data/assets/subscribe-button/images/windowsphone/wpodder.png +0 -0
  131. data/assets/subscribe-button/javascripts/app.js +6 -0
  132. data/assets/subscribe-button/javascripts/app.js.gz +0 -0
  133. data/assets/subscribe-button/stylesheets/app.css +552 -0
  134. data/assets/subscribe-button/stylesheets/app.css.gz +0 -0
  135. data/assets/subscribe-button/stylesheets/app.css.map +1 -0
  136. data/assets/subscribe-button/stylesheets/app.css.map.gz +0 -0
  137. data/lib/jekyll-octopod.rb +1 -0
  138. data/lib/jekyll/font_awesome.rb +71 -0
  139. data/lib/jekyll/octopod_filters.rb +3 -1
  140. data/lib/jekyll/podigee_player_tag.rb +4 -2
  141. data/lib/octopod/version.rb +1 -1
  142. metadata +134 -2
@@ -0,0 +1,397 @@
1
+ .podcast-player {
2
+ background-color: #1b1b1b;
3
+ color: #222;
4
+ font-family: Helvetica;
5
+ min-width: 100%;
6
+ overflow: hidden;
7
+ position: relative;
8
+ width: 1px; }
9
+ .podcast-player, .podcast-player *, .podcast-player *:before, .podcast-player *:after {
10
+ -moz-box-sizing: border-box;
11
+ -webkit-box-sizing: border-box;
12
+ box-sizing: border-box; }
13
+ .podcast-player a {
14
+ color: #f57150;
15
+ text-decoration: none; }
16
+ .podcast-player a:hover {
17
+ text-decoration: underline; }
18
+ .podcast-player button {
19
+ background: transparent;
20
+ border: none;
21
+ cursor: pointer;
22
+ outline: none; }
23
+ .podcast-player .main-player {
24
+ position: relative; }
25
+ .podcast-player .episode-basic-info {
26
+ max-height: 90px;
27
+ padding: 23px 12px 0;
28
+ position: relative;
29
+ overflow: hidden; }
30
+ .podcast-player .episode-basic-info .episode-title {
31
+ color: #f57150;
32
+ font-size: 18px;
33
+ font-weight: 600;
34
+ line-height: 1.4em;
35
+ margin-bottom: 3px;
36
+ overflow: hidden;
37
+ text-overflow: ellipsis;
38
+ white-space: nowrap; }
39
+ .podcast-player .episode-basic-info .episode-subtitle {
40
+ color: #c8c8c8;
41
+ font-size: 16px;
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ white-space: nowrap; }
45
+ .podcast-player .cover-image {
46
+ float: right;
47
+ height: 90px;
48
+ padding: 5px; }
49
+ .podcast-player .controls {
50
+ float: left;
51
+ height: 90px; }
52
+ .podcast-player .controls .play-button {
53
+ border: 3px solid #e6e6e6;
54
+ border-radius: 100px;
55
+ color: #c8c8c8;
56
+ font-size: 56px;
57
+ height: 70px;
58
+ margin: 10px 0 0 10px;
59
+ padding: 0;
60
+ width: 70px; }
61
+ .podcast-player .controls-advanced {
62
+ bottom: 8px;
63
+ display: none;
64
+ left: 155px;
65
+ position: absolute; }
66
+ .podcast-player .controls-advanced button {
67
+ color: #c8c8c8;
68
+ font-size: 18px; }
69
+ .podcast-player .controls-advanced button:hover {
70
+ color: #f57150; }
71
+ .podcast-player .controls-advanced .speed-toggle {
72
+ cursor: pointer;
73
+ font-size: 14px;
74
+ position: relative;
75
+ top: -3px; }
76
+ .podcast-player.playing .controls-advanced {
77
+ display: block; }
78
+ .podcast-player .progress-bar {
79
+ clear: both;
80
+ overflow: hidden; }
81
+ .podcast-player .progress-bar .progress-bar-time-played {
82
+ color: #c8c8c8;
83
+ cursor: pointer;
84
+ display: none;
85
+ font-size: 14px;
86
+ left: 92px;
87
+ position: absolute;
88
+ text-align: left;
89
+ top: 71px;
90
+ width: 70px; }
91
+ .podcast-player .progress-bar .progress-bar-time-played:hover {
92
+ color: #f57150; }
93
+ .podcast-player .progress-bar .progress-bar-rail {
94
+ background-color: #e6e6e6;
95
+ cursor: ew-resize;
96
+ min-height: 10px;
97
+ overflow: hidden;
98
+ position: relative; }
99
+ .podcast-player.playing .progress-bar .progress-bar-time-played {
100
+ display: block; }
101
+ .podcast-player .progress-bar-played,
102
+ .podcast-player .progress-bar-loaded {
103
+ background-color: #f57150;
104
+ display: block;
105
+ height: 100%;
106
+ position: absolute;
107
+ top: 0;
108
+ width: 0; }
109
+ .podcast-player .progress-bar-loaded {
110
+ background-color: #c8c8c8; }
111
+ .podcast-player .progress-bar-buffering {
112
+ background-color: red; }
113
+ .podcast-player .progress-bar-buffering:after {
114
+ animation: move 2s linear infinite;
115
+ background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
116
+ background-size: 50px 50px;
117
+ border-top-right-radius: 8px;
118
+ border-bottom-right-radius: 8px;
119
+ border-top-left-radius: 20px;
120
+ border-bottom-left-radius: 20px;
121
+ content: "";
122
+ overflow: hidden;
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ bottom: 0;
127
+ right: 0; }
128
+
129
+ @keyframes move {
130
+ 0% {
131
+ background-position: 0 0; }
132
+ 100% {
133
+ background-position: 50px 50px; } }
134
+ .podcast-player .buttons {
135
+ position: absolute;
136
+ right: 90px;
137
+ top: 68px; }
138
+ .podcast-player .buttons button {
139
+ color: #c8c8c8;
140
+ display: inline-block;
141
+ font-size: 16px;
142
+ text-align: center;
143
+ width: 26px; }
144
+ .podcast-player .buttons button:hover,
145
+ .podcast-player .buttons button.button-active {
146
+ color: #f57150; }
147
+ .podcast-player .buttons img {
148
+ height: 14px; }
149
+ .podcast-player .panels {
150
+ color: #c8c8c8;
151
+ font-size: 14px;
152
+ font-weight: 300;
153
+ height: auto;
154
+ line-height: 18px; }
155
+ .podcast-player .panels > div {
156
+ height: 100%;
157
+ overflow: hidden;
158
+ padding: 0 0 0 12px;
159
+ position: relative; }
160
+ .podcast-player .panels h3 {
161
+ margin: 12px 0; }
162
+ .podcast-player .panels .chaptermarks,
163
+ .podcast-player .panels .playlist {
164
+ height: 400px; }
165
+ .podcast-player .panels .chaptermarks ul,
166
+ .podcast-player .panels .playlist ul {
167
+ display: block;
168
+ height: calc(100% - 54px);
169
+ margin: 0;
170
+ padding: 0;
171
+ overflow-y: scroll; }
172
+ .podcast-player .panels .chaptermarks ul li,
173
+ .podcast-player .panels .playlist ul li {
174
+ background-color: none;
175
+ cursor: pointer;
176
+ line-height: 30px;
177
+ list-style: none;
178
+ padding: 0 25px 0 5px;
179
+ position: relative; }
180
+ .podcast-player .panels .chaptermarks ul li + li,
181
+ .podcast-player .panels .playlist ul li + li {
182
+ border-top: 1px solid #e6e6e6; }
183
+ .podcast-player .panels .chaptermarks ul li:hover,
184
+ .podcast-player .panels .playlist ul li:hover {
185
+ background-color: #e6e6e6; }
186
+ .podcast-player .panels .chaptermarks ul li.active,
187
+ .podcast-player .panels .playlist ul li.active {
188
+ background-color: white; }
189
+ .podcast-player .panels .chaptermarks ul li img,
190
+ .podcast-player .panels .playlist ul li img {
191
+ float: left;
192
+ width: 30px; }
193
+ .podcast-player .panels .chaptermarks ul li span,
194
+ .podcast-player .panels .playlist ul li span {
195
+ display: inline;
196
+ height: 100%;
197
+ margin: 0 0 0 10px;
198
+ overflow: hidden; }
199
+ .podcast-player .panels .chaptermarks ul li .chaptermark-start,
200
+ .podcast-player .panels .playlist ul li .chaptermark-start {
201
+ float: left;
202
+ margin-left: 0; }
203
+ .podcast-player .panels .chaptermarks ul li .chaptermark-image + .chaptermark-start,
204
+ .podcast-player .panels .playlist ul li .chaptermark-image + .chaptermark-start {
205
+ margin-left: 10px; }
206
+ .podcast-player .panels .chaptermarks ul li .chaptermark-href
207
+ .episode-link,
208
+ .podcast-player .panels .chaptermarks ul li .playlist-episode-number,
209
+ .podcast-player .panels .playlist ul li .chaptermark-href
210
+ .episode-link,
211
+ .podcast-player .panels .playlist ul li .playlist-episode-number {
212
+ display: none; }
213
+ .podcast-player .panels .chaptermarks ul li .playlist-episode-duration,
214
+ .podcast-player .panels .playlist ul li .playlist-episode-duration {
215
+ float: right; }
216
+ .podcast-player .panels .chaptermarks ul li a,
217
+ .podcast-player .panels .playlist ul li a {
218
+ font-size: 16px;
219
+ height: 13px;
220
+ padding: 0;
221
+ position: absolute;
222
+ right: 5px;
223
+ top: 3px;
224
+ width: 13px; }
225
+ .podcast-player .panels .chaptermarks ul li a svg,
226
+ .podcast-player .panels .playlist ul li a svg {
227
+ color: #c8c8c8;
228
+ fill: currentColor; }
229
+ .podcast-player .panels .playlist ul li span {
230
+ margin-left: 0; }
231
+ .podcast-player .panels .episode-info {
232
+ font-size: 16px;
233
+ height: calc(100% - 12px);
234
+ overflow-y: auto;
235
+ padding: 0 12px; }
236
+ .podcast-player .panels .episode-info .episode-title {
237
+ font-size: 22px; }
238
+ .podcast-player .panels .episode-info .episode-subtitle {
239
+ font-size: 18px;
240
+ font-weight: 300; }
241
+ .podcast-player .panels .share {
242
+ padding: 12px; }
243
+ .podcast-player .panels .share .share-copy-url,
244
+ .podcast-player .panels .share .share-embed-code {
245
+ background: transparent;
246
+ border: 1px solid #ccc;
247
+ border-radius: 3px;
248
+ color: #4d4d4d;
249
+ font-size: 20px;
250
+ outline: none;
251
+ padding: 4px;
252
+ text-align: center;
253
+ width: 100%; }
254
+ .podcast-player .panels .transcript {
255
+ height: 400px; }
256
+ .podcast-player .panels .transcript h3 {
257
+ float: left; }
258
+ .podcast-player .panels .transcript .search,
259
+ .podcast-player .panels .transcript .search-result {
260
+ display: inline-block; }
261
+ .podcast-player .panels .transcript .search {
262
+ float: right;
263
+ padding: 10px 15px; }
264
+ .podcast-player .panels .transcript .search-clear {
265
+ color: inherit;
266
+ font-size: 150%;
267
+ left: calc(100% - 40px);
268
+ position: absolute;
269
+ top: 6px; }
270
+ .podcast-player .panels .transcript .transcript-text {
271
+ height: calc(100% - 54px);
272
+ list-style: none;
273
+ overflow-y: auto;
274
+ padding: 0 12px 0 0;
275
+ width: 100%; }
276
+ .podcast-player .panels .transcript .transcript-text li {
277
+ cursor: pointer;
278
+ font-size: 1.2em;
279
+ line-height: 1.4em;
280
+ margin-bottom: 8px; }
281
+ .podcast-player .panels .transcript .transcript-text li:hover, .podcast-player .panels .transcript .transcript-text li.active {
282
+ color: #222; }
283
+ .podcast-player .panels .transcript .transcript-text li.search-highlight > * {
284
+ background-color: #fff9a9; }
285
+ .podcast-player .footer {
286
+ padding: 12px;
287
+ position: relative;
288
+ width: 100%; }
289
+ .podcast-player .footer .subscribe-button {
290
+ background: transparent;
291
+ border: 1px solid;
292
+ border-radius: 3px;
293
+ font-size: 14px;
294
+ font-weight: bold;
295
+ letter-spacing: .8px;
296
+ outline: none;
297
+ padding: 4px 6px; }
298
+ .podcast-player .footer .podcast-connections-items {
299
+ display: inline-block;
300
+ margin: 0;
301
+ padding: 0; }
302
+ .podcast-player .footer .podcast-connections-item {
303
+ display: inline;
304
+ list-style: none;
305
+ margin-left: 10px; }
306
+ .podcast-player .footer .podcast-connections-item a {
307
+ text-decoration: none; }
308
+ .podcast-player .footer .podcast-connections-item svg {
309
+ fill: currentColor;
310
+ vertical-align: middle; }
311
+ .podcast-player .footer .all-episodes-link {
312
+ float: right;
313
+ font-size: 14px;
314
+ font-weight: bold;
315
+ letter-spacing: .8px;
316
+ padding: 6px 6px;
317
+ text-decoration: none; }
318
+
319
+ @media (max-width: 500px) {
320
+ .podcast-player.mode-script .cover-image {
321
+ border: 12px solid #1b1b1b;
322
+ border-bottom: 0;
323
+ display: none;
324
+ float: none;
325
+ height: auto;
326
+ width: 100%; }
327
+ .podcast-player.mode-script .episode-basic-info .episode-title {
328
+ font-size: 16px; }
329
+ .podcast-player.mode-script .episode-basic-info .episode-subtitle {
330
+ font-size: 14px; }
331
+ .podcast-player.mode-script .controls {
332
+ height: 115px;
333
+ position: relative; }
334
+ .podcast-player.mode-script .controls-advanced {
335
+ bottom: 20px;
336
+ left: 0;
337
+ top: auto; }
338
+ .podcast-player.mode-script .controls-advanced button {
339
+ font-size: 24px;
340
+ padding: 0 8px; }
341
+ .podcast-player.mode-script .buttons {
342
+ margin-top: 25px;
343
+ position: static;
344
+ text-align: right; }
345
+ .podcast-player.mode-script .buttons button {
346
+ font-size: 24px;
347
+ padding: 0 8px;
348
+ width: 35px; }
349
+ .podcast-player.mode-script .progress-bar .progress-bar-rail {
350
+ min-height: 20px; }
351
+ .podcast-player.mode-script.playing .progress-bar .progress-bar-time-played {
352
+ display: none; }
353
+ .podcast-player.mode-script .panels .transcript h3 {
354
+ float: none; }
355
+ .podcast-player.mode-script .panels .transcript .search {
356
+ display: block;
357
+ float: none;
358
+ overflow: hidden;
359
+ padding: 0 24px 0 0;
360
+ position: relative; }
361
+ .podcast-player.mode-script .panels .transcript .search-input {
362
+ float: left;
363
+ padding-right: 100px;
364
+ width: 100%; }
365
+ .podcast-player.mode-script .panels .transcript .search-result {
366
+ float: right;
367
+ position: absolute;
368
+ right: 44px;
369
+ top: 4px; }
370
+ .podcast-player.mode-script .panels .transcript .search-clear {
371
+ color: inherit;
372
+ font-size: 150%;
373
+ left: calc(100% - 44px);
374
+ position: absolute;
375
+ top: -2px; }
376
+ .podcast-player.mode-script .panels .transcript .transcript-text {
377
+ height: calc(100% - 90px); } }
378
+
379
+ @media (max-width: 500px) {
380
+ .podcast-player.mode-iframe .cover-image {
381
+ display: none; }
382
+ .podcast-player.mode-iframe .buttons {
383
+ right: 0; } }
384
+
385
+ .podcast-player .panels .chaptermarks ul li.active,
386
+ .podcast-player .panels .chaptermarks ul li:hover,
387
+ .podcast-player .panels .playlist ul li.active,
388
+ .podcast-player .panels .playlist ul li:hover {
389
+ color: #1b1b1b; }
390
+
391
+ .podcast-player .panels .share .share-copy-url {
392
+ color: #c8c8c8; }
393
+
394
+ .podcast-player .panels .transcript .transcript-text li:hover > *,
395
+ .podcast-player .panels .transcript .transcript-text li.active > *,
396
+ .podcast-player .panels .transcript .transcript-text li.search-highlight > * {
397
+ color: #1b1b1b; }
@@ -0,0 +1,31 @@
1
+ <div class="podcast-player">
2
+ <audio></audio>
3
+
4
+ <div class="main-player">
5
+ <img class="cover-image" pp-src="coverUrl" />
6
+
7
+ <div class="controls">
8
+ <button class="fa fa-play play-button"></button>
9
+ </div>
10
+
11
+ <div class="episode-basic-info">
12
+ <div class="episode-title">
13
+ <a pp-href="url" pp-if="url" pp-html="title" target="_parent"></a>
14
+ <span pp-unless="url" pp-html="title"></span>
15
+ </div>
16
+ <div class="episode-subtitle" pp-html="subtitle"></div>
17
+ </div>
18
+
19
+ <div class="controls-advanced">
20
+ <button class="backward-button"><i class="fa fa-backward" title="Backward 10s"></i></button>
21
+ <button class="forward-button"><i class="fa fa-forward" title="Forward 30s"></i></button>
22
+ <button class="speed-toggle" title="Playback speed">1x</button>
23
+ </div>
24
+
25
+ <div class="buttons"></div>
26
+
27
+ <progressbar/>
28
+ </div>
29
+
30
+ <div class="panels"></div>
31
+ </div>
@@ -0,0 +1,383 @@
1
+ .podcast-player {
2
+ background-color: #f6f6f6;
3
+ color: #222;
4
+ font-family: Helvetica;
5
+ min-width: 100%;
6
+ overflow: hidden;
7
+ position: relative;
8
+ width: 1px; }
9
+ .podcast-player, .podcast-player *, .podcast-player *:before, .podcast-player *:after {
10
+ -moz-box-sizing: border-box;
11
+ -webkit-box-sizing: border-box;
12
+ box-sizing: border-box; }
13
+ .podcast-player a {
14
+ color: #f57150;
15
+ text-decoration: none; }
16
+ .podcast-player a:hover {
17
+ text-decoration: underline; }
18
+ .podcast-player button {
19
+ background: transparent;
20
+ border: none;
21
+ cursor: pointer;
22
+ outline: none; }
23
+ .podcast-player .main-player {
24
+ position: relative; }
25
+ .podcast-player .episode-basic-info {
26
+ max-height: 90px;
27
+ padding: 23px 12px 0;
28
+ position: relative;
29
+ overflow: hidden; }
30
+ .podcast-player .episode-basic-info .episode-title {
31
+ color: #f57150;
32
+ font-size: 18px;
33
+ font-weight: 600;
34
+ line-height: 1.4em;
35
+ margin-bottom: 3px;
36
+ overflow: hidden;
37
+ text-overflow: ellipsis;
38
+ white-space: nowrap; }
39
+ .podcast-player .episode-basic-info .episode-subtitle {
40
+ color: #7a7a7a;
41
+ font-size: 16px;
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ white-space: nowrap; }
45
+ .podcast-player .cover-image {
46
+ float: right;
47
+ height: 90px;
48
+ padding: 5px; }
49
+ .podcast-player .controls {
50
+ float: left;
51
+ height: 90px; }
52
+ .podcast-player .controls .play-button {
53
+ border: 3px solid #e6e6e6;
54
+ border-radius: 100px;
55
+ color: #c8c8c8;
56
+ font-size: 56px;
57
+ height: 70px;
58
+ margin: 10px 0 0 10px;
59
+ padding: 0;
60
+ width: 70px; }
61
+ .podcast-player .controls-advanced {
62
+ bottom: 8px;
63
+ display: none;
64
+ left: 155px;
65
+ position: absolute; }
66
+ .podcast-player .controls-advanced button {
67
+ color: #c8c8c8;
68
+ font-size: 18px; }
69
+ .podcast-player .controls-advanced button:hover {
70
+ color: #f57150; }
71
+ .podcast-player .controls-advanced .speed-toggle {
72
+ cursor: pointer;
73
+ font-size: 14px;
74
+ position: relative;
75
+ top: -3px; }
76
+ .podcast-player.playing .controls-advanced {
77
+ display: block; }
78
+ .podcast-player .progress-bar {
79
+ clear: both;
80
+ overflow: hidden; }
81
+ .podcast-player .progress-bar .progress-bar-time-played {
82
+ color: #c8c8c8;
83
+ cursor: pointer;
84
+ display: none;
85
+ font-size: 14px;
86
+ left: 92px;
87
+ position: absolute;
88
+ text-align: left;
89
+ top: 71px;
90
+ width: 70px; }
91
+ .podcast-player .progress-bar .progress-bar-time-played:hover {
92
+ color: #f57150; }
93
+ .podcast-player .progress-bar .progress-bar-rail {
94
+ background-color: #e6e6e6;
95
+ cursor: ew-resize;
96
+ min-height: 10px;
97
+ overflow: hidden;
98
+ position: relative; }
99
+ .podcast-player.playing .progress-bar .progress-bar-time-played {
100
+ display: block; }
101
+ .podcast-player .progress-bar-played,
102
+ .podcast-player .progress-bar-loaded {
103
+ background-color: #329c92;
104
+ display: block;
105
+ height: 100%;
106
+ position: absolute;
107
+ top: 0;
108
+ width: 0; }
109
+ .podcast-player .progress-bar-loaded {
110
+ background-color: #c8c8c8; }
111
+ .podcast-player .progress-bar-buffering {
112
+ background-color: red; }
113
+ .podcast-player .progress-bar-buffering:after {
114
+ animation: move 2s linear infinite;
115
+ background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
116
+ background-size: 50px 50px;
117
+ border-top-right-radius: 8px;
118
+ border-bottom-right-radius: 8px;
119
+ border-top-left-radius: 20px;
120
+ border-bottom-left-radius: 20px;
121
+ content: "";
122
+ overflow: hidden;
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ bottom: 0;
127
+ right: 0; }
128
+
129
+ @keyframes move {
130
+ 0% {
131
+ background-position: 0 0; }
132
+ 100% {
133
+ background-position: 50px 50px; } }
134
+ .podcast-player .buttons {
135
+ position: absolute;
136
+ right: 90px;
137
+ top: 68px; }
138
+ .podcast-player .buttons button {
139
+ color: #c8c8c8;
140
+ display: inline-block;
141
+ font-size: 16px;
142
+ text-align: center;
143
+ width: 26px; }
144
+ .podcast-player .buttons button:hover,
145
+ .podcast-player .buttons button.button-active {
146
+ color: #f57150; }
147
+ .podcast-player .buttons img {
148
+ height: 14px; }
149
+ .podcast-player .panels {
150
+ color: #7a7a7a;
151
+ font-size: 14px;
152
+ font-weight: 300;
153
+ height: auto;
154
+ line-height: 18px; }
155
+ .podcast-player .panels > div {
156
+ height: 100%;
157
+ overflow: hidden;
158
+ padding: 0 0 0 12px;
159
+ position: relative; }
160
+ .podcast-player .panels h3 {
161
+ margin: 12px 0; }
162
+ .podcast-player .panels .chaptermarks,
163
+ .podcast-player .panels .playlist {
164
+ height: 400px; }
165
+ .podcast-player .panels .chaptermarks ul,
166
+ .podcast-player .panels .playlist ul {
167
+ display: block;
168
+ height: calc(100% - 54px);
169
+ margin: 0;
170
+ padding: 0;
171
+ overflow-y: scroll; }
172
+ .podcast-player .panels .chaptermarks ul li,
173
+ .podcast-player .panels .playlist ul li {
174
+ background-color: none;
175
+ cursor: pointer;
176
+ line-height: 30px;
177
+ list-style: none;
178
+ padding: 0 25px 0 5px;
179
+ position: relative; }
180
+ .podcast-player .panels .chaptermarks ul li + li,
181
+ .podcast-player .panels .playlist ul li + li {
182
+ border-top: 1px solid #e6e6e6; }
183
+ .podcast-player .panels .chaptermarks ul li:hover,
184
+ .podcast-player .panels .playlist ul li:hover {
185
+ background-color: #e6e6e6; }
186
+ .podcast-player .panels .chaptermarks ul li.active,
187
+ .podcast-player .panels .playlist ul li.active {
188
+ background-color: #edf9f8; }
189
+ .podcast-player .panels .chaptermarks ul li img,
190
+ .podcast-player .panels .playlist ul li img {
191
+ float: left;
192
+ width: 30px; }
193
+ .podcast-player .panels .chaptermarks ul li span,
194
+ .podcast-player .panels .playlist ul li span {
195
+ display: inline;
196
+ height: 100%;
197
+ margin: 0 0 0 10px;
198
+ overflow: hidden; }
199
+ .podcast-player .panels .chaptermarks ul li .chaptermark-start,
200
+ .podcast-player .panels .playlist ul li .chaptermark-start {
201
+ float: left;
202
+ margin-left: 0; }
203
+ .podcast-player .panels .chaptermarks ul li .chaptermark-image + .chaptermark-start,
204
+ .podcast-player .panels .playlist ul li .chaptermark-image + .chaptermark-start {
205
+ margin-left: 10px; }
206
+ .podcast-player .panels .chaptermarks ul li .chaptermark-href
207
+ .episode-link,
208
+ .podcast-player .panels .chaptermarks ul li .playlist-episode-number,
209
+ .podcast-player .panels .playlist ul li .chaptermark-href
210
+ .episode-link,
211
+ .podcast-player .panels .playlist ul li .playlist-episode-number {
212
+ display: none; }
213
+ .podcast-player .panels .chaptermarks ul li .playlist-episode-duration,
214
+ .podcast-player .panels .playlist ul li .playlist-episode-duration {
215
+ float: right; }
216
+ .podcast-player .panels .chaptermarks ul li a,
217
+ .podcast-player .panels .playlist ul li a {
218
+ font-size: 16px;
219
+ height: 13px;
220
+ padding: 0;
221
+ position: absolute;
222
+ right: 5px;
223
+ top: 3px;
224
+ width: 13px; }
225
+ .podcast-player .panels .chaptermarks ul li a svg,
226
+ .podcast-player .panels .playlist ul li a svg {
227
+ color: #7a7a7a;
228
+ fill: currentColor; }
229
+ .podcast-player .panels .playlist ul li span {
230
+ margin-left: 0; }
231
+ .podcast-player .panels .episode-info {
232
+ font-size: 16px;
233
+ height: calc(100% - 12px);
234
+ overflow-y: auto;
235
+ padding: 0 12px; }
236
+ .podcast-player .panels .episode-info .episode-title {
237
+ font-size: 22px; }
238
+ .podcast-player .panels .episode-info .episode-subtitle {
239
+ font-size: 18px;
240
+ font-weight: 300; }
241
+ .podcast-player .panels .share {
242
+ padding: 12px; }
243
+ .podcast-player .panels .share .share-copy-url,
244
+ .podcast-player .panels .share .share-embed-code {
245
+ background: transparent;
246
+ border: 1px solid #ccc;
247
+ border-radius: 3px;
248
+ color: #4d4d4d;
249
+ font-size: 20px;
250
+ outline: none;
251
+ padding: 4px;
252
+ text-align: center;
253
+ width: 100%; }
254
+ .podcast-player .panels .transcript {
255
+ height: 400px; }
256
+ .podcast-player .panels .transcript h3 {
257
+ float: left; }
258
+ .podcast-player .panels .transcript .search,
259
+ .podcast-player .panels .transcript .search-result {
260
+ display: inline-block; }
261
+ .podcast-player .panels .transcript .search {
262
+ float: right;
263
+ padding: 10px 15px; }
264
+ .podcast-player .panels .transcript .search-clear {
265
+ color: inherit;
266
+ font-size: 150%;
267
+ left: calc(100% - 40px);
268
+ position: absolute;
269
+ top: 6px; }
270
+ .podcast-player .panels .transcript .transcript-text {
271
+ height: calc(100% - 54px);
272
+ list-style: none;
273
+ overflow-y: auto;
274
+ padding: 0 12px 0 0;
275
+ width: 100%; }
276
+ .podcast-player .panels .transcript .transcript-text li {
277
+ cursor: pointer;
278
+ font-size: 1.2em;
279
+ line-height: 1.4em;
280
+ margin-bottom: 8px; }
281
+ .podcast-player .panels .transcript .transcript-text li:hover, .podcast-player .panels .transcript .transcript-text li.active {
282
+ color: #222; }
283
+ .podcast-player .panels .transcript .transcript-text li.search-highlight > * {
284
+ background-color: #fff9a9; }
285
+ .podcast-player .footer {
286
+ padding: 12px;
287
+ position: relative;
288
+ width: 100%; }
289
+ .podcast-player .footer .subscribe-button {
290
+ background: transparent;
291
+ border: 1px solid;
292
+ border-radius: 3px;
293
+ font-size: 14px;
294
+ font-weight: bold;
295
+ letter-spacing: .8px;
296
+ outline: none;
297
+ padding: 4px 6px; }
298
+ .podcast-player .footer .podcast-connections-items {
299
+ display: inline-block;
300
+ margin: 0;
301
+ padding: 0; }
302
+ .podcast-player .footer .podcast-connections-item {
303
+ display: inline;
304
+ list-style: none;
305
+ margin-left: 10px; }
306
+ .podcast-player .footer .podcast-connections-item a {
307
+ text-decoration: none; }
308
+ .podcast-player .footer .podcast-connections-item svg {
309
+ fill: currentColor;
310
+ vertical-align: middle; }
311
+ .podcast-player .footer .all-episodes-link {
312
+ float: right;
313
+ font-size: 14px;
314
+ font-weight: bold;
315
+ letter-spacing: .8px;
316
+ padding: 6px 6px;
317
+ text-decoration: none; }
318
+
319
+ @media (max-width: 500px) {
320
+ .podcast-player.mode-script .cover-image {
321
+ border: 12px solid #f6f6f6;
322
+ border-bottom: 0;
323
+ display: none;
324
+ float: none;
325
+ height: auto;
326
+ width: 100%; }
327
+ .podcast-player.mode-script .episode-basic-info .episode-title {
328
+ font-size: 16px; }
329
+ .podcast-player.mode-script .episode-basic-info .episode-subtitle {
330
+ font-size: 14px; }
331
+ .podcast-player.mode-script .controls {
332
+ height: 115px;
333
+ position: relative; }
334
+ .podcast-player.mode-script .controls-advanced {
335
+ bottom: 20px;
336
+ left: 0;
337
+ top: auto; }
338
+ .podcast-player.mode-script .controls-advanced button {
339
+ font-size: 24px;
340
+ padding: 0 8px; }
341
+ .podcast-player.mode-script .buttons {
342
+ margin-top: 25px;
343
+ position: static;
344
+ text-align: right; }
345
+ .podcast-player.mode-script .buttons button {
346
+ font-size: 24px;
347
+ padding: 0 8px;
348
+ width: 35px; }
349
+ .podcast-player.mode-script .progress-bar .progress-bar-rail {
350
+ min-height: 20px; }
351
+ .podcast-player.mode-script.playing .progress-bar .progress-bar-time-played {
352
+ display: none; }
353
+ .podcast-player.mode-script .panels .transcript h3 {
354
+ float: none; }
355
+ .podcast-player.mode-script .panels .transcript .search {
356
+ display: block;
357
+ float: none;
358
+ overflow: hidden;
359
+ padding: 0 24px 0 0;
360
+ position: relative; }
361
+ .podcast-player.mode-script .panels .transcript .search-input {
362
+ float: left;
363
+ padding-right: 100px;
364
+ width: 100%; }
365
+ .podcast-player.mode-script .panels .transcript .search-result {
366
+ float: right;
367
+ position: absolute;
368
+ right: 44px;
369
+ top: 4px; }
370
+ .podcast-player.mode-script .panels .transcript .search-clear {
371
+ color: inherit;
372
+ font-size: 150%;
373
+ left: calc(100% - 44px);
374
+ position: absolute;
375
+ top: -2px; }
376
+ .podcast-player.mode-script .panels .transcript .transcript-text {
377
+ height: calc(100% - 90px); } }
378
+
379
+ @media (max-width: 500px) {
380
+ .podcast-player.mode-iframe .cover-image {
381
+ display: none; }
382
+ .podcast-player.mode-iframe .buttons {
383
+ right: 0; } }