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.
- checksums.yaml +4 -4
- data/assets/_includes/post.html +6 -2
- data/assets/_includes/sidebar.html +10 -7
- data/assets/_layouts/default.html +0 -5
- data/assets/_layouts/with_twitter_card.html +0 -5
- data/assets/podigee-player/fonts/podigee-podcast-player.eot +0 -0
- data/assets/podigee-player/fonts/podigee-podcast-player.json +42711 -0
- data/assets/podigee-player/fonts/podigee-podcast-player.svg +32 -0
- data/assets/podigee-player/fonts/podigee-podcast-player.ttf +0 -0
- data/assets/podigee-player/fonts/podigee-podcast-player.woff +0 -0
- data/assets/podigee-player/images/chromcast.png +0 -0
- data/assets/podigee-player/javascripts/podigee-podcast-player-embed.js +11 -0
- data/assets/podigee-player/javascripts/podigee-podcast-player-embed.js.gz +0 -0
- data/assets/podigee-player/javascripts/podigee-podcast-player.js +1 -0
- data/assets/podigee-player/javascripts/podigee-podcast-player.js.gz +0 -0
- data/assets/podigee-player/podigee-podcast-player.html +329 -0
- data/assets/podigee-player/stylesheets/app.css +223 -0
- data/assets/podigee-player/stylesheets/app.css.gz +0 -0
- data/assets/podigee-player/themes/default-dark/index.css +397 -0
- data/assets/podigee-player/themes/default-dark/index.html +31 -0
- data/assets/podigee-player/themes/default-dark/variables.css +0 -0
- data/assets/podigee-player/themes/default/index.css +383 -0
- data/assets/podigee-player/themes/default/index.html +57 -0
- data/assets/podigee-player/themes/default/variables.css +0 -0
- data/assets/podigee-player/themes/legacy/index.css +248 -0
- data/assets/podigee-player/themes/legacy/index.html +28 -0
- data/assets/podigee-player/themes/legacy/variables.css +0 -0
- data/assets/podigee-player/themes/minimal/index.css +65 -0
- data/assets/podigee-player/themes/minimal/index.html +12 -0
- data/assets/podigee-player/themes/republica/index.css +352 -0
- data/assets/podigee-player/themes/republica/index.html +32 -0
- data/assets/subscribe-button/button.html +15 -0
- data/assets/subscribe-button/fonts/podlove/Podlove.eot +0 -0
- data/assets/subscribe-button/fonts/podlove/Podlove.svg +16 -0
- data/assets/subscribe-button/fonts/podlove/Podlove.ttf +0 -0
- data/assets/subscribe-button/fonts/podlove/Podlove.woff +0 -0
- data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.eot +0 -0
- data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.svg +641 -0
- data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.ttf +0 -0
- data/assets/subscribe-button/fonts/roboto_light/Roboto-Light-webfont.woff +0 -0
- data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.eot +0 -0
- data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.svg +593 -0
- data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.ttf +0 -0
- data/assets/subscribe-button/fonts/roboto_medium/Roboto-Medium-webfont.woff +0 -0
- data/assets/subscribe-button/images/android/acast.png +0 -0
- data/assets/subscribe-button/images/android/antennapod.png +0 -0
- data/assets/subscribe-button/images/android/beyondpod.png +0 -0
- data/assets/subscribe-button/images/android/chakouat.png +0 -0
- data/assets/subscribe-button/images/android/doggcatcher.png +0 -0
- data/assets/subscribe-button/images/android/playerfm.png +0 -0
- data/assets/subscribe-button/images/android/pocketcasts.png +0 -0
- data/assets/subscribe-button/images/android/podcastaddict.png +0 -0
- data/assets/subscribe-button/images/android/podcastrepublic.png +0 -0
- data/assets/subscribe-button/images/android/podcatcher-deluxe.png +0 -0
- data/assets/subscribe-button/images/android/podkicker.png +0 -0
- data/assets/subscribe-button/images/android/shortorange.png +0 -0
- data/assets/subscribe-button/images/android/upod.png +0 -0
- data/assets/subscribe-button/images/blackberry/bpod.png +0 -0
- data/assets/subscribe-button/images/blackberry/gpodder.png +0 -0
- data/assets/subscribe-button/images/cloud/gpoddernet.png +0 -0
- data/assets/subscribe-button/images/cloud/instacastcloud.png +0 -0
- data/assets/subscribe-button/images/cloud/playerfm.png +0 -0
- data/assets/subscribe-button/images/cloud/pocketcasts.png +0 -0
- data/assets/subscribe-button/images/cloud/shortorange.png +0 -0
- data/assets/subscribe-button/images/generic/android.png +0 -0
- data/assets/subscribe-button/images/generic/rss.png +0 -0
- data/assets/subscribe-button/images/generic/windows.png +0 -0
- data/assets/subscribe-button/images/generic/windows8.png +0 -0
- data/assets/subscribe-button/images/generic/windowsphone.png +0 -0
- data/assets/subscribe-button/images/icon-big.png +0 -0
- data/assets/subscribe-button/images/icon-big@2x.png +0 -0
- data/assets/subscribe-button/images/icon-medium.png +0 -0
- data/assets/subscribe-button/images/icon-medium@2x.png +0 -0
- data/assets/subscribe-button/images/icon-small.png +0 -0
- data/assets/subscribe-button/images/icon-small@2x.png +0 -0
- data/assets/subscribe-button/images/icon.svg +32 -0
- data/assets/subscribe-button/images/ios/castro.png +0 -0
- data/assets/subscribe-button/images/ios/downcast.png +0 -0
- data/assets/subscribe-button/images/ios/icatcher.png +0 -0
- data/assets/subscribe-button/images/ios/instacast.png +0 -0
- data/assets/subscribe-button/images/ios/overcast.png +0 -0
- data/assets/subscribe-button/images/ios/pocketcasts.png +0 -0
- data/assets/subscribe-button/images/ios/podcasts.png +0 -0
- data/assets/subscribe-button/images/ios/podcat.png +0 -0
- data/assets/subscribe-button/images/ios/podgrasp.png +0 -0
- data/assets/subscribe-button/images/ios/podwrangler.png +0 -0
- data/assets/subscribe-button/images/ios/rssradio.png +0 -0
- data/assets/subscribe-button/images/ios/shortorange.png +0 -0
- data/assets/subscribe-button/images/ios/sleekcast.png +0 -0
- data/assets/subscribe-button/images/linux/clementine.png +0 -0
- data/assets/subscribe-button/images/linux/gpodder.png +0 -0
- data/assets/subscribe-button/images/linux/miro.png +0 -0
- data/assets/subscribe-button/images/osx/downcast.png +0 -0
- data/assets/subscribe-button/images/osx/gpodder.png +0 -0
- data/assets/subscribe-button/images/osx/instacast.png +0 -0
- data/assets/subscribe-button/images/osx/itunes.png +0 -0
- data/assets/subscribe-button/images/osx/miro.png +0 -0
- data/assets/subscribe-button/images/osx/podgrasp.png +0 -0
- data/assets/subscribe-button/images/osx/podsnatcher.png +0 -0
- data/assets/subscribe-button/images/podlove.svg +45 -0
- data/assets/subscribe-button/images/stores/android.png +0 -0
- data/assets/subscribe-button/images/stores/apple-app-store-en.png +0 -0
- data/assets/subscribe-button/images/stores/apple-app-store-en.svg +129 -0
- data/assets/subscribe-button/images/stores/blackberry-world-en.png +0 -0
- data/assets/subscribe-button/images/stores/google-play-en.png +0 -0
- data/assets/subscribe-button/images/stores/google-play-en.svg +126 -0
- data/assets/subscribe-button/images/stores/google-play-en@1x.svg +126 -0
- data/assets/subscribe-button/images/stores/ios.png +0 -0
- data/assets/subscribe-button/images/stores/osx.png +0 -0
- data/assets/subscribe-button/images/stores/windows-phone-store-en.png +0 -0
- data/assets/subscribe-button/images/stores/windows-phone-store-en.svg +40 -0
- data/assets/subscribe-button/images/stores/windows-store-en.png +0 -0
- data/assets/subscribe-button/images/stores/windows-store-en.svg +61 -0
- data/assets/subscribe-button/images/stores/windows8.png +0 -0
- data/assets/subscribe-button/images/stores/windows81.png +0 -0
- data/assets/subscribe-button/images/stores/windowsphone.png +0 -0
- data/assets/subscribe-button/images/windows/gpodder.png +0 -0
- data/assets/subscribe-button/images/windows/itunes.png +0 -0
- data/assets/subscribe-button/images/windows/miro.png +0 -0
- data/assets/subscribe-button/images/windows/podscout.png +0 -0
- data/assets/subscribe-button/images/windowsphone/bringcast.png +0 -0
- data/assets/subscribe-button/images/windowsphone/gramocast.png +0 -0
- data/assets/subscribe-button/images/windowsphone/ipodcast.png +0 -0
- data/assets/subscribe-button/images/windowsphone/pcast.png +0 -0
- data/assets/subscribe-button/images/windowsphone/podcastbrain.png +0 -0
- data/assets/subscribe-button/images/windowsphone/podcastlounge.png +0 -0
- data/assets/subscribe-button/images/windowsphone/podcastpicker.png +0 -0
- data/assets/subscribe-button/images/windowsphone/podcasts.png +0 -0
- data/assets/subscribe-button/images/windowsphone/podcastspro.png +0 -0
- data/assets/subscribe-button/images/windowsphone/wpodder.png +0 -0
- data/assets/subscribe-button/javascripts/app.js +6 -0
- data/assets/subscribe-button/javascripts/app.js.gz +0 -0
- data/assets/subscribe-button/stylesheets/app.css +552 -0
- data/assets/subscribe-button/stylesheets/app.css.gz +0 -0
- data/assets/subscribe-button/stylesheets/app.css.map +1 -0
- data/assets/subscribe-button/stylesheets/app.css.map.gz +0 -0
- data/lib/jekyll-octopod.rb +1 -0
- data/lib/jekyll/font_awesome.rb +71 -0
- data/lib/jekyll/octopod_filters.rb +3 -1
- data/lib/jekyll/podigee_player_tag.rb +4 -2
- data/lib/octopod/version.rb +1 -1
- metadata +134 -2
@@ -0,0 +1,57 @@
|
|
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="play-button" pp-aria-label="translations.playPause" pp-title="translations.playPause"></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" pp-title="translations.backward" pp-aria-label="translations.backward"></button>
|
21
|
+
<button class="forward-button" pp-title="translations.forward" pp-aria-label="translations.forward"></button>
|
22
|
+
<button class="speed-toggle" pp-title="translations.changePlaybackSpeed" pp-aria-label="translations.changePlaybackSpeed"></button>
|
23
|
+
</div>
|
24
|
+
|
25
|
+
<div class="buttons"></div>
|
26
|
+
|
27
|
+
<progressbar/>
|
28
|
+
</div>
|
29
|
+
|
30
|
+
<div class="panels"></div>
|
31
|
+
|
32
|
+
<div class="footer" pp-if="showSubscribeBar">
|
33
|
+
<button class="subscribe-button" pp-html="translations.subscribe" pp-aria-label="translations.subscribe"></button>
|
34
|
+
|
35
|
+
<ul class="podcast-connections-items">
|
36
|
+
<li class="podcast-connections-item" pp-if="podcastConnections.itunes">
|
37
|
+
<a pp-href="podcastConnections.itunes" pp-title="translations.podcastOnItunes" pp-aria-label="translations.podcastOnItunes" target="_parent">
|
38
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="16" viewBox="0 0 13 16" preserveAspectRatio="xMinYMin meet" role="img" ><path d="M12.993 12.288c.103 1.362-.932 2.6-2.317 2.769-1.383.17-2.593-.797-2.699-2.158-.106-1.358.935-2.599 2.317-2.768.438-.053.856.006 1.23.156v-6.68L5.027 4.8v8.348c-.01.023-.004.046-.004.069.106 1.361-.931 2.598-2.317 2.768-1.386.17-2.592-.796-2.699-2.155-.106-1.36.932-2.602 2.318-2.768.437-.056.855.006 1.23.157V1.593L12.98.003l.01 12.214c0 .03.003.049.003.071z" fill-rule="nonzero"></path></svg>
|
39
|
+
</a>
|
40
|
+
</li>
|
41
|
+
<li class="podcast-connections-item" pp-if="podcastConnections.spotify">
|
42
|
+
<a pp-href="podcastConnections.spotify" pp-title="translations.podcastOnSpotify" pp-aria-label="translations.podcastOnSpotify" target="_parent">
|
43
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" preserveAspectRatio="xMinYMin meet" role="img"><path d="M12.472 11.975c0-.236-.11-.425-.33-.564-1.425-.848-3.075-1.273-4.948-1.273-.982 0-2.04.124-3.176.376-.311.066-.465.258-.465.576 0 .147.05.274.149.382.099.107.23.16.392.16.036 0 .173-.029.41-.088.972-.2 1.87-.298 2.688-.298 1.667 0 3.133.38 4.394 1.14.14.081.262.121.366.121.14 0 .262-.05.366-.149a.507.507 0 0 0 .154-.383zm1.064-2.379a.74.74 0 0 0-.387-.674C11.4 7.88 9.378 7.36 7.084 7.36c-1.129 0-2.246.155-3.353.465-.354.096-.53.332-.53.708 0 .184.064.342.194.47a.643.643 0 0 0 .47.194c.052 0 .187-.03.41-.088.9-.243 1.826-.366 2.777-.366 2.059 0 3.86.458 5.401 1.372.177.095.318.144.42.144a.636.636 0 0 0 .47-.194.638.638 0 0 0 .193-.469zM14.73 6.85a.837.837 0 0 0-.442-.775c-.93-.54-2.01-.947-3.242-1.223a17.219 17.219 0 0 0-3.796-.415c-1.506 0-2.848.174-4.028.52a.88.88 0 0 0-.427.284c-.114.137-.171.315-.171.536 0 .229.076.42.227.575.15.155.342.233.57.233.082 0 .23-.03.443-.089.982-.272 2.114-.409 3.398-.409 1.173 0 2.316.125 3.426.376 1.11.252 2.045.602 2.805 1.052a.894.894 0 0 0 .443.133c.213 0 .4-.076.558-.227a.763.763 0 0 0 .236-.57zM17 8.5a8.32 8.32 0 0 1-1.14 4.267 8.476 8.476 0 0 1-3.093 3.093A8.32 8.32 0 0 1 8.5 17a8.32 8.32 0 0 1-4.267-1.14 8.476 8.476 0 0 1-3.093-3.093A8.32 8.32 0 0 1 0 8.5a8.32 8.32 0 0 1 1.14-4.267A8.476 8.476 0 0 1 4.233 1.14 8.32 8.32 0 0 1 8.5 0a8.32 8.32 0 0 1 4.267 1.14 8.476 8.476 0 0 1 3.093 3.093A8.32 8.32 0 0 1 17 8.5z" fill-rule="nonzero"></path></svg>
|
44
|
+
</a>
|
45
|
+
</li>
|
46
|
+
<li class="podcast-connections-item" pp-if="podcastConnections.deezer">
|
47
|
+
<a pp-href="podcastConnections.deezer" pp-title="translations.podcastOnDeezer" pp-aria-label="translations.podcastOnDeezer" target="_parent">
|
48
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet" role="img"><path d="M19.623 24.927h5.833v-1.767h-5.836v1.767h0.003zM6.543 24.927h5.831v-1.767h-5.832v1.767h0.005zM0 24.927h5.833v-1.767h-5.833v1.767zM13.080 24.927h5.84v-1.767h-5.84v1.767zM26.167 24.927h5.833v-1.767h-5.833v1.767zM26.167 22.628h5.833v-1.76h-5.833v1.773zM13.081 22.628h5.853v-1.76h-5.855v1.773zM0.001 22.628h5.84v-1.76h-5.841v1.773zM6.548 22.628h5.84v-1.76h-5.841v1.787l0.003-0.013zM19.655 22.628h5.84v-1.76h-5.867v1.787l0.023-0.013zM19.655 20.335h5.84v-1.76h-5.867v1.773h0.023zM6.581 20.335h5.813v-1.76h-5.848v1.773h0.021zM0.040 20.335h5.813v-1.76h-5.853v1.773h0.021zM13.12 20.335h5.84v-1.76h-5.867v1.773h0.021zM26.22 20.335h5.78v-1.76h-5.833v1.773h0.036zM26.22 18.041h5.78v-1.775h-5.833v1.768h0.036zM13.14 18.041h5.817v-1.775h-5.867v1.768h0.044zM0.060 18.041h5.807v-1.775h-5.867v1.768h0.040zM19.7 18.041h5.84v-1.775h-5.907v1.768h0.059zM19.7 15.748h5.84v-1.773h-5.907v1.76h0.059zM0.060 15.748h5.807v-1.76h-5.867v1.76h0.040zM13.14 15.748h5.84v-1.76h-5.9v1.76h0.043zM26.22 15.748h5.78v-1.773h-5.833v1.771l0.036-0.003zM13.080 13.44h5.84v-1.768h-5.84v1.768zM26.167 13.437h5.833v-1.767h-5.833v1.767zM13.080 11.14h5.84v-1.769h-5.84v1.769zM26.167 11.14h5.833v-1.769h-5.833v1.769zM26.167 8.84h5.833v-1.768h-5.833v1.768z"></path></svg>
|
49
|
+
</a>
|
50
|
+
</li>
|
51
|
+
</ul>
|
52
|
+
<a class="all-episodes-link" pp-href="podcastUrl" target="_blank" pp-if="podcastUrl" pp-title="translations.allEpisodes" pp-aria-label="translations.allEpisodes">
|
53
|
+
{ translations.allEpisodes }
|
54
|
+
›
|
55
|
+
</a>
|
56
|
+
</div>
|
57
|
+
</div>
|
File without changes
|
@@ -0,0 +1,248 @@
|
|
1
|
+
.podcast-player {
|
2
|
+
background: linear-gradient(to bottom, #545454 0%, #262626 100%);
|
3
|
+
color: #fff;
|
4
|
+
font-family: Helvetica, Arial, sans-serif;
|
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: #fff;
|
15
|
+
text-decoration: none; }
|
16
|
+
.podcast-player a:hover {
|
17
|
+
color: #589cef;
|
18
|
+
text-decoration: underline; }
|
19
|
+
.podcast-player button {
|
20
|
+
background: transparent;
|
21
|
+
border: none;
|
22
|
+
cursor: pointer;
|
23
|
+
outline: none; }
|
24
|
+
.podcast-player .controls {
|
25
|
+
float: left;
|
26
|
+
height: 90px; }
|
27
|
+
.podcast-player .controls .play-button {
|
28
|
+
border: 3px solid #e6e6e6;
|
29
|
+
border-radius: 100px;
|
30
|
+
color: #c8c8c8;
|
31
|
+
font-size: 56px;
|
32
|
+
height: 70px;
|
33
|
+
margin: 10px 0 0 10px;
|
34
|
+
padding: 0;
|
35
|
+
width: 70px; }
|
36
|
+
.podcast-player .controls .play-button:hover {
|
37
|
+
color: #fff;
|
38
|
+
border-color: #fff; }
|
39
|
+
.podcast-player .controls .controls-advanced {
|
40
|
+
display: none;
|
41
|
+
left: 155px;
|
42
|
+
position: absolute;
|
43
|
+
top: 66px; }
|
44
|
+
.podcast-player .controls .controls-advanced button {
|
45
|
+
color: #c8c8c8;
|
46
|
+
font-size: 14px; }
|
47
|
+
.podcast-player .controls .controls-advanced button:hover {
|
48
|
+
color: #f57150; }
|
49
|
+
.podcast-player .controls .controls-advanced .speed-toggle {
|
50
|
+
cursor: pointer; }
|
51
|
+
.podcast-player .cover-image {
|
52
|
+
float: left;
|
53
|
+
height: 90px;
|
54
|
+
padding: 5px; }
|
55
|
+
.podcast-player .episode-basic-info {
|
56
|
+
float: left;
|
57
|
+
max-height: 90px;
|
58
|
+
padding: 5px 12px 0;
|
59
|
+
position: relative;
|
60
|
+
overflow: hidden;
|
61
|
+
width: calc(100% - 170px); }
|
62
|
+
.podcast-player .episode-basic-info .episode-title {
|
63
|
+
font-size: 18px;
|
64
|
+
font-weight: 600;
|
65
|
+
line-height: 1.4em;
|
66
|
+
margin-bottom: 3px;
|
67
|
+
overflow: hidden;
|
68
|
+
text-overflow: ellipsis;
|
69
|
+
white-space: nowrap; }
|
70
|
+
.podcast-player .episode-basic-info .episode-subtitle {
|
71
|
+
font-size: 16px;
|
72
|
+
overflow: hidden;
|
73
|
+
text-overflow: ellipsis;
|
74
|
+
white-space: nowrap; }
|
75
|
+
.podcast-player .progress-bar {
|
76
|
+
clear: both;
|
77
|
+
overflow: hidden;
|
78
|
+
margin-bottom: 5px;
|
79
|
+
padding: 0 5px; }
|
80
|
+
.podcast-player .progress-bar .progress-bar-time-played {
|
81
|
+
color: #c8c8c8;
|
82
|
+
cursor: pointer;
|
83
|
+
float: left;
|
84
|
+
font-size: 12px;
|
85
|
+
line-height: 10px;
|
86
|
+
text-align: center;
|
87
|
+
width: 80px; }
|
88
|
+
.podcast-player .progress-bar .progress-bar-time-played:hover {
|
89
|
+
color: #fff; }
|
90
|
+
.podcast-player .progress-bar .progress-bar-rail {
|
91
|
+
background-color: #e6e6e6;
|
92
|
+
cursor: ew-resize;
|
93
|
+
min-height: 10px;
|
94
|
+
overflow: hidden;
|
95
|
+
position: relative;
|
96
|
+
width: calc(100% - 80px); }
|
97
|
+
.podcast-player .progress-bar-played,
|
98
|
+
.podcast-player .progress-bar-loaded {
|
99
|
+
background-color: #589cef;
|
100
|
+
display: block;
|
101
|
+
height: 100%;
|
102
|
+
position: absolute;
|
103
|
+
top: 0;
|
104
|
+
width: 0; }
|
105
|
+
.podcast-player .progress-bar-loaded {
|
106
|
+
background-color: #c8c8c8; }
|
107
|
+
.podcast-player .progress-bar-buffering:after {
|
108
|
+
animation: move 2s linear infinite;
|
109
|
+
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);
|
110
|
+
background-size: 50px 50px;
|
111
|
+
border-top-right-radius: 8px;
|
112
|
+
border-bottom-right-radius: 8px;
|
113
|
+
border-top-left-radius: 20px;
|
114
|
+
border-bottom-left-radius: 20px;
|
115
|
+
content: "";
|
116
|
+
overflow: hidden;
|
117
|
+
position: absolute;
|
118
|
+
top: 0;
|
119
|
+
left: 0;
|
120
|
+
bottom: 0;
|
121
|
+
right: 0; }
|
122
|
+
|
123
|
+
@keyframes move {
|
124
|
+
0% {
|
125
|
+
background-position: 0 0; }
|
126
|
+
100% {
|
127
|
+
background-position: 50px 50px; } }
|
128
|
+
.podcast-player .buttons {
|
129
|
+
position: absolute;
|
130
|
+
right: 3px;
|
131
|
+
top: 68px; }
|
132
|
+
.podcast-player .buttons button {
|
133
|
+
color: #c8c8c8;
|
134
|
+
display: inline-block;
|
135
|
+
font-size: 16px;
|
136
|
+
text-align: center;
|
137
|
+
width: 26px; }
|
138
|
+
.podcast-player .buttons button:hover,
|
139
|
+
.podcast-player .buttons button.button-active {
|
140
|
+
color: #fff; }
|
141
|
+
.podcast-player .buttons img {
|
142
|
+
height: 14px; }
|
143
|
+
.podcast-player .panels {
|
144
|
+
color: #fff;
|
145
|
+
font-size: 14px;
|
146
|
+
font-weight: 300;
|
147
|
+
height: 400px;
|
148
|
+
line-height: 18px; }
|
149
|
+
.podcast-player .panels > div {
|
150
|
+
height: 100%;
|
151
|
+
overflow: hidden;
|
152
|
+
padding: 0 0 0 12px;
|
153
|
+
position: relative; }
|
154
|
+
.podcast-player .panels h3 {
|
155
|
+
margin: 12px 0; }
|
156
|
+
.podcast-player .panels .chaptermarks ul,
|
157
|
+
.podcast-player .panels .playlist ul {
|
158
|
+
display: block;
|
159
|
+
height: calc(100% - 54px);
|
160
|
+
margin: 0;
|
161
|
+
padding: 0;
|
162
|
+
overflow-y: scroll; }
|
163
|
+
.podcast-player .panels .chaptermarks ul li,
|
164
|
+
.podcast-player .panels .playlist ul li {
|
165
|
+
background-color: none;
|
166
|
+
cursor: pointer;
|
167
|
+
line-height: 30px;
|
168
|
+
list-style: none;
|
169
|
+
padding: 0 5px;
|
170
|
+
position: relative; }
|
171
|
+
.podcast-player .panels .chaptermarks ul li + li,
|
172
|
+
.podcast-player .panels .playlist ul li + li {
|
173
|
+
border-top: 1px solid #e6e6e6; }
|
174
|
+
.podcast-player .panels .chaptermarks ul li:hover,
|
175
|
+
.podcast-player .panels .playlist ul li:hover {
|
176
|
+
background-color: #e6e6e6;
|
177
|
+
color: #262626; }
|
178
|
+
.podcast-player .panels .chaptermarks ul li.active,
|
179
|
+
.podcast-player .panels .playlist ul li.active {
|
180
|
+
background-color: white;
|
181
|
+
color: #262626; }
|
182
|
+
.podcast-player .panels .chaptermarks ul li img,
|
183
|
+
.podcast-player .panels .playlist ul li img {
|
184
|
+
float: left;
|
185
|
+
width: 30px; }
|
186
|
+
.podcast-player .panels .chaptermarks ul li span,
|
187
|
+
.podcast-player .panels .playlist ul li span {
|
188
|
+
display: inline;
|
189
|
+
height: 100%;
|
190
|
+
margin: 0 0 0 10px;
|
191
|
+
overflow: hidden; }
|
192
|
+
.podcast-player .panels .chaptermarks ul li .chaptermark-start,
|
193
|
+
.podcast-player .panels .playlist ul li .chaptermark-start {
|
194
|
+
float: left;
|
195
|
+
margin-left: 0; }
|
196
|
+
.podcast-player .panels .chaptermarks ul li .chaptermark-image + .chaptermark-start,
|
197
|
+
.podcast-player .panels .playlist ul li .chaptermark-image + .chaptermark-start {
|
198
|
+
margin-left: 10px; }
|
199
|
+
.podcast-player .panels .chaptermarks ul li a,
|
200
|
+
.podcast-player .panels .playlist ul li a {
|
201
|
+
color: #589cef;
|
202
|
+
font-size: 16px;
|
203
|
+
right: 5px;
|
204
|
+
position: absolute;
|
205
|
+
top: 5px; }
|
206
|
+
.podcast-player .panels .playlist ul li span {
|
207
|
+
margin-left: 0; }
|
208
|
+
.podcast-player .panels .playlist ul li a {
|
209
|
+
padding: 0 5px;
|
210
|
+
position: static; }
|
211
|
+
.podcast-player .panels .episode-info {
|
212
|
+
font-size: 16px;
|
213
|
+
height: calc(100% - 12px);
|
214
|
+
overflow-y: scroll;
|
215
|
+
padding: 0 12px; }
|
216
|
+
.podcast-player .panels .episode-info .episode-title {
|
217
|
+
font-size: 22px; }
|
218
|
+
.podcast-player .panels .episode-info .episode-subtitle {
|
219
|
+
font-size: 18px;
|
220
|
+
font-weight: 300; }
|
221
|
+
.podcast-player .panels .share {
|
222
|
+
padding: 12px; }
|
223
|
+
.podcast-player .panels .share .share-copy-url,
|
224
|
+
.podcast-player .panels .share .share-embed-code {
|
225
|
+
background: transparent;
|
226
|
+
border: 1px solid #ccc;
|
227
|
+
border-radius: 3px;
|
228
|
+
color: #fff;
|
229
|
+
font-size: 20px;
|
230
|
+
outline: none;
|
231
|
+
padding: 4px;
|
232
|
+
text-align: center;
|
233
|
+
width: 100%; }
|
234
|
+
.podcast-player .panels .transcript .transcript-text {
|
235
|
+
height: calc(100% - 54px);
|
236
|
+
list-style: none;
|
237
|
+
overflow-y: scroll;
|
238
|
+
padding: 0 12px 0 0;
|
239
|
+
width: 100%; }
|
240
|
+
.podcast-player .panels .transcript .transcript-text li {
|
241
|
+
cursor: pointer;
|
242
|
+
font-size: 1.2em;
|
243
|
+
line-height: 1.4em;
|
244
|
+
margin-bottom: 8px; }
|
245
|
+
.podcast-player .panels .transcript .transcript-text li:hover > *,
|
246
|
+
.podcast-player .panels .transcript .transcript-text li.active > * {
|
247
|
+
background-color: #fff9a9;
|
248
|
+
color: #262626; }
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<div class="podcast-player">
|
2
|
+
<audio></audio>
|
3
|
+
|
4
|
+
<div class="controls">
|
5
|
+
<button class="play-button"></button>
|
6
|
+
|
7
|
+
<div class="controls-advanced">
|
8
|
+
<button class="backward-button"><i class="fa fa-backward" title="Backward 10s"></i></button>
|
9
|
+
<button class="forward-button"><i class="fa fa-forward" title="Forward 30s"></i></button>
|
10
|
+
<button class="speed-toggle" title="Playback speed">1x</button>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<img class="cover-image" pp-src="coverUrl" />
|
15
|
+
|
16
|
+
<div class="episode-basic-info">
|
17
|
+
<div class="episode-title">
|
18
|
+
<a pp-if="url" pp-href="url" target="_parent" pp-html="title"></a>
|
19
|
+
<span pp-unless="url" pp-html="title"></a>
|
20
|
+
</div>
|
21
|
+
<div class="episode-subtitle" pp-html="subtitle"></div>
|
22
|
+
</div>
|
23
|
+
<div class="buttons"></div>
|
24
|
+
|
25
|
+
<progressbar/>
|
26
|
+
|
27
|
+
<div class="panels"></div>
|
28
|
+
</div>
|
File without changes
|
@@ -0,0 +1,65 @@
|
|
1
|
+
.custom-podcast-player {
|
2
|
+
background-color: #ccc;
|
3
|
+
font-family: Helvetica Neue, sans-serif;
|
4
|
+
font-size: 12px;
|
5
|
+
height: 50px;
|
6
|
+
min-width: 100%;
|
7
|
+
position: relative;
|
8
|
+
width: 1px; }
|
9
|
+
|
10
|
+
.custom-podcast-player .info,
|
11
|
+
.custom-podcast-player .controls {
|
12
|
+
position: relative;
|
13
|
+
z-index: 1; }
|
14
|
+
|
15
|
+
.custom-podcast-player .info {
|
16
|
+
font-size: 16px;
|
17
|
+
font-weight: 200;
|
18
|
+
height: 20px;
|
19
|
+
left: 60px;
|
20
|
+
overflow: hidden;
|
21
|
+
position: absolute;
|
22
|
+
top: 15px; }
|
23
|
+
|
24
|
+
.custom-podcast-player .controls {
|
25
|
+
height: 50px;
|
26
|
+
position: absolute;
|
27
|
+
top: 0;
|
28
|
+
width: 50px; }
|
29
|
+
|
30
|
+
.custom-podcast-player .controls .play-button {
|
31
|
+
font-size: 34px;
|
32
|
+
line-height: 50px;
|
33
|
+
padding: 0 10px; }
|
34
|
+
|
35
|
+
.custom-podcast-player .progress-bar {
|
36
|
+
height: 100%;
|
37
|
+
overflow: hidden;
|
38
|
+
position: absolute;
|
39
|
+
top: 0;
|
40
|
+
width: 100%;
|
41
|
+
z-index: 0; }
|
42
|
+
|
43
|
+
.custom-podcast-player .progress-bar .progress-bar-time-player {
|
44
|
+
display: none;
|
45
|
+
width: 0; }
|
46
|
+
|
47
|
+
.custom-podcast-player .progress-bar .progress-bar-rail {
|
48
|
+
background-color: #ddd;
|
49
|
+
height: 100%;
|
50
|
+
position: absolute;
|
51
|
+
top: 0;
|
52
|
+
width: 100%; }
|
53
|
+
|
54
|
+
.custom-podcast-player .progress-bar .progress-bar-played,
|
55
|
+
.custom-podcast-player .progress-bar .progress-bar-loaded {
|
56
|
+
background-color: rgba(100, 149, 237, 0.5);
|
57
|
+
display: block;
|
58
|
+
height: 100%;
|
59
|
+
position: absolute;
|
60
|
+
top: 0;
|
61
|
+
width: 0; }
|
62
|
+
|
63
|
+
.custom-podcast-player .progress-bar .progress-bar-loaded {
|
64
|
+
background-color: #aaa;
|
65
|
+
display: none; }
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<div class="custom-podcast-player">
|
2
|
+
<audio></audio>
|
3
|
+
<progressbar/>
|
4
|
+
<div class="info">
|
5
|
+
<span class="title" pp-html="title">{ title }</span>
|
6
|
+
<span pp-if="subtitle" > - </span>
|
7
|
+
<span class="subtitle" pp-if="subtitle" pp-html="subtitle"></span>
|
8
|
+
</div>
|
9
|
+
<div class="controls">
|
10
|
+
<i class="play-button"></i>
|
11
|
+
</div>
|
12
|
+
</div>
|
@@ -0,0 +1,352 @@
|
|
1
|
+
.podcast-player {
|
2
|
+
background-color: #fff;
|
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: #00a9fc;
|
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: #00a9fc;
|
32
|
+
font-size: 18px;
|
33
|
+
font-weight: 600;
|
34
|
+
margin-bottom: 3px;
|
35
|
+
overflow: hidden;
|
36
|
+
text-overflow: ellipsis;
|
37
|
+
white-space: nowrap; }
|
38
|
+
.podcast-player .episode-basic-info .episode-subtitle {
|
39
|
+
color: #fc637e;
|
40
|
+
font-size: 16px;
|
41
|
+
overflow: hidden;
|
42
|
+
text-overflow: ellipsis;
|
43
|
+
white-space: nowrap; }
|
44
|
+
.podcast-player .cover-image {
|
45
|
+
float: right;
|
46
|
+
height: 90px; }
|
47
|
+
.podcast-player .controls {
|
48
|
+
float: left;
|
49
|
+
height: 90px; }
|
50
|
+
.podcast-player .controls .play-button {
|
51
|
+
border: 3px solid #8dadc5;
|
52
|
+
border-radius: 100px;
|
53
|
+
color: #00a9fc;
|
54
|
+
font-size: 56px;
|
55
|
+
height: 70px;
|
56
|
+
margin: 10px 0 0 10px;
|
57
|
+
padding: 0;
|
58
|
+
width: 70px; }
|
59
|
+
.podcast-player .controls-advanced {
|
60
|
+
bottom: 8px;
|
61
|
+
display: none;
|
62
|
+
left: 155px;
|
63
|
+
position: absolute; }
|
64
|
+
.podcast-player .controls-advanced button {
|
65
|
+
color: #507b9c;
|
66
|
+
font-size: 18px; }
|
67
|
+
.podcast-player .controls-advanced button:hover {
|
68
|
+
color: #00a9fc; }
|
69
|
+
.podcast-player .controls-advanced .speed-toggle {
|
70
|
+
cursor: pointer;
|
71
|
+
font-size: 14px;
|
72
|
+
position: relative;
|
73
|
+
top: -3px; }
|
74
|
+
.podcast-player.playing .controls-advanced {
|
75
|
+
display: block; }
|
76
|
+
.podcast-player .progress-bar {
|
77
|
+
clear: both;
|
78
|
+
overflow: hidden; }
|
79
|
+
.podcast-player .progress-bar .progress-bar-time-played {
|
80
|
+
color: #507b9c;
|
81
|
+
cursor: pointer;
|
82
|
+
display: none;
|
83
|
+
font-size: 14px;
|
84
|
+
left: 92px;
|
85
|
+
position: absolute;
|
86
|
+
text-align: left;
|
87
|
+
top: 71px;
|
88
|
+
width: 70px; }
|
89
|
+
.podcast-player .progress-bar .progress-bar-time-played:hover {
|
90
|
+
color: #00a9fc; }
|
91
|
+
.podcast-player .progress-bar .progress-bar-rail {
|
92
|
+
background-color: #8dadc5;
|
93
|
+
cursor: ew-resize;
|
94
|
+
min-height: 10px;
|
95
|
+
overflow: hidden;
|
96
|
+
position: relative; }
|
97
|
+
.podcast-player.playing .progress-bar .progress-bar-time-played {
|
98
|
+
display: block; }
|
99
|
+
.podcast-player .progress-bar-played,
|
100
|
+
.podcast-player .progress-bar-loaded {
|
101
|
+
background-color: #fc637e;
|
102
|
+
display: block;
|
103
|
+
height: 100%;
|
104
|
+
position: absolute;
|
105
|
+
top: 0;
|
106
|
+
width: 0; }
|
107
|
+
.podcast-player .progress-bar-loaded {
|
108
|
+
background-color: #507b9c; }
|
109
|
+
.podcast-player .progress-bar-buffering {
|
110
|
+
background-color: red; }
|
111
|
+
.podcast-player .progress-bar-buffering:after {
|
112
|
+
animation: move 2s linear infinite;
|
113
|
+
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);
|
114
|
+
background-size: 50px 50px;
|
115
|
+
border-top-right-radius: 8px;
|
116
|
+
border-bottom-right-radius: 8px;
|
117
|
+
border-top-left-radius: 20px;
|
118
|
+
border-bottom-left-radius: 20px;
|
119
|
+
content: "";
|
120
|
+
overflow: hidden;
|
121
|
+
position: absolute;
|
122
|
+
top: 0;
|
123
|
+
left: 0;
|
124
|
+
bottom: 0;
|
125
|
+
right: 0; }
|
126
|
+
|
127
|
+
@keyframes move {
|
128
|
+
0% {
|
129
|
+
background-position: 0 0; }
|
130
|
+
100% {
|
131
|
+
background-position: 50px 50px; } }
|
132
|
+
.podcast-player .buttons {
|
133
|
+
position: absolute;
|
134
|
+
right: 90px;
|
135
|
+
top: 68px; }
|
136
|
+
.podcast-player .buttons button {
|
137
|
+
color: #507b9c;
|
138
|
+
display: inline-block;
|
139
|
+
font-size: 16px;
|
140
|
+
text-align: center;
|
141
|
+
width: 26px; }
|
142
|
+
.podcast-player .buttons button:hover,
|
143
|
+
.podcast-player .buttons button.button-active {
|
144
|
+
color: #00a9fc; }
|
145
|
+
.podcast-player .buttons img {
|
146
|
+
height: 14px; }
|
147
|
+
.podcast-player .panels {
|
148
|
+
color: #507b9c;
|
149
|
+
font-size: 14px;
|
150
|
+
font-weight: 300;
|
151
|
+
height: auto;
|
152
|
+
line-height: 18px; }
|
153
|
+
.podcast-player .panels > div {
|
154
|
+
height: 100%;
|
155
|
+
overflow: hidden;
|
156
|
+
padding: 0 0 0 12px;
|
157
|
+
position: relative; }
|
158
|
+
.podcast-player .panels h3 {
|
159
|
+
margin: 12px 0; }
|
160
|
+
.podcast-player .panels .chaptermarks,
|
161
|
+
.podcast-player .panels .playlist {
|
162
|
+
height: 400px; }
|
163
|
+
.podcast-player .panels .chaptermarks ul,
|
164
|
+
.podcast-player .panels .playlist ul {
|
165
|
+
display: block;
|
166
|
+
height: calc(100% - 54px);
|
167
|
+
margin: 0;
|
168
|
+
padding: 0;
|
169
|
+
overflow-y: scroll; }
|
170
|
+
.podcast-player .panels .chaptermarks ul li,
|
171
|
+
.podcast-player .panels .playlist ul li {
|
172
|
+
background-color: none;
|
173
|
+
cursor: pointer;
|
174
|
+
line-height: 30px;
|
175
|
+
list-style: none;
|
176
|
+
padding: 0 5px;
|
177
|
+
position: relative; }
|
178
|
+
.podcast-player .panels .chaptermarks ul li + li,
|
179
|
+
.podcast-player .panels .playlist ul li + li {
|
180
|
+
border-top: 1px solid #8dadc5; }
|
181
|
+
.podcast-player .panels .chaptermarks ul li:hover,
|
182
|
+
.podcast-player .panels .playlist ul li:hover {
|
183
|
+
background-color: #8dadc5; }
|
184
|
+
.podcast-player .panels .chaptermarks ul li.active,
|
185
|
+
.podcast-player .panels .playlist ul li.active {
|
186
|
+
background-color: white; }
|
187
|
+
.podcast-player .panels .chaptermarks ul li img,
|
188
|
+
.podcast-player .panels .playlist ul li img {
|
189
|
+
float: left;
|
190
|
+
width: 30px; }
|
191
|
+
.podcast-player .panels .chaptermarks ul li span,
|
192
|
+
.podcast-player .panels .playlist ul li span {
|
193
|
+
display: inline;
|
194
|
+
height: 100%;
|
195
|
+
margin: 0 0 0 10px;
|
196
|
+
overflow: hidden; }
|
197
|
+
.podcast-player .panels .chaptermarks ul li .chaptermark-start,
|
198
|
+
.podcast-player .panels .playlist ul li .chaptermark-start {
|
199
|
+
float: left;
|
200
|
+
margin-left: 0; }
|
201
|
+
.podcast-player .panels .chaptermarks ul li .chaptermark-image + .chaptermark-start,
|
202
|
+
.podcast-player .panels .playlist ul li .chaptermark-image + .chaptermark-start {
|
203
|
+
margin-left: 10px; }
|
204
|
+
.podcast-player .panels .chaptermarks ul li .episode-link,
|
205
|
+
.podcast-player .panels .chaptermarks ul li .playlist-episode-number,
|
206
|
+
.podcast-player .panels .playlist ul li .episode-link,
|
207
|
+
.podcast-player .panels .playlist ul li .playlist-episode-number {
|
208
|
+
display: none; }
|
209
|
+
.podcast-player .panels .chaptermarks ul li .playlist-episode-duration,
|
210
|
+
.podcast-player .panels .playlist ul li .playlist-episode-duration {
|
211
|
+
float: right; }
|
212
|
+
.podcast-player .panels .chaptermarks ul li a,
|
213
|
+
.podcast-player .panels .playlist ul li a {
|
214
|
+
color: #fc637e;
|
215
|
+
font-size: 16px;
|
216
|
+
right: 5px;
|
217
|
+
position: absolute;
|
218
|
+
top: 5px; }
|
219
|
+
.podcast-player .panels .playlist ul li span {
|
220
|
+
margin-left: 0; }
|
221
|
+
.podcast-player .panels .playlist ul li a {
|
222
|
+
padding: 0 5px;
|
223
|
+
position: static; }
|
224
|
+
.podcast-player .panels .episode-info {
|
225
|
+
font-size: 16px;
|
226
|
+
height: calc(100% - 12px);
|
227
|
+
overflow-y: auto;
|
228
|
+
padding: 0 12px; }
|
229
|
+
.podcast-player .panels .episode-info .episode-title {
|
230
|
+
font-size: 22px; }
|
231
|
+
.podcast-player .panels .episode-info .episode-subtitle {
|
232
|
+
font-size: 18px;
|
233
|
+
font-weight: 300; }
|
234
|
+
.podcast-player .panels .share {
|
235
|
+
padding: 12px; }
|
236
|
+
.podcast-player .panels .share .share-copy-url,
|
237
|
+
.podcast-player .panels .share .share-embed-code {
|
238
|
+
background: transparent;
|
239
|
+
border: 1px solid #ccc;
|
240
|
+
border-radius: 3px;
|
241
|
+
color: #4d4d4d;
|
242
|
+
font-size: 20px;
|
243
|
+
outline: none;
|
244
|
+
padding: 4px;
|
245
|
+
text-align: center;
|
246
|
+
width: 100%; }
|
247
|
+
.podcast-player .panels .transcript {
|
248
|
+
height: 400px; }
|
249
|
+
.podcast-player .panels .transcript h3 {
|
250
|
+
float: left; }
|
251
|
+
.podcast-player .panels .transcript .search,
|
252
|
+
.podcast-player .panels .transcript .search-result {
|
253
|
+
display: inline-block; }
|
254
|
+
.podcast-player .panels .transcript .search {
|
255
|
+
float: right;
|
256
|
+
padding: 10px 15px; }
|
257
|
+
.podcast-player .panels .transcript .search-clear {
|
258
|
+
color: inherit;
|
259
|
+
font-size: 150%;
|
260
|
+
left: calc(100% - 40px);
|
261
|
+
position: absolute;
|
262
|
+
top: 6px; }
|
263
|
+
.podcast-player .panels .transcript .transcript-text {
|
264
|
+
height: calc(100% - 54px);
|
265
|
+
list-style: none;
|
266
|
+
overflow-y: auto;
|
267
|
+
padding: 0 12px 0 0;
|
268
|
+
width: 100%; }
|
269
|
+
.podcast-player .panels .transcript .transcript-text li {
|
270
|
+
cursor: pointer;
|
271
|
+
font-size: 1.2em;
|
272
|
+
line-height: 1.4em;
|
273
|
+
margin-bottom: 8px; }
|
274
|
+
.podcast-player .panels .transcript .transcript-text li:hover, .podcast-player .panels .transcript .transcript-text li.active {
|
275
|
+
color: #222; }
|
276
|
+
.podcast-player .panels .transcript .transcript-text li.search-highlight > * {
|
277
|
+
background-color: #fff9a9; }
|
278
|
+
|
279
|
+
@media (max-width: 500px) {
|
280
|
+
.podcast-player.mode-script .cover-image {
|
281
|
+
border: 12px solid #fff;
|
282
|
+
border-bottom: 0;
|
283
|
+
display: none;
|
284
|
+
float: none;
|
285
|
+
height: auto;
|
286
|
+
width: 100%; }
|
287
|
+
.podcast-player.mode-script .episode-basic-info .episode-title {
|
288
|
+
font-size: 16px; }
|
289
|
+
.podcast-player.mode-script .episode-basic-info .episode-subtitle {
|
290
|
+
font-size: 14px; }
|
291
|
+
.podcast-player.mode-script .controls {
|
292
|
+
height: 115px;
|
293
|
+
position: relative; }
|
294
|
+
.podcast-player.mode-script .controls-advanced {
|
295
|
+
bottom: 20px;
|
296
|
+
left: 0;
|
297
|
+
top: auto; }
|
298
|
+
.podcast-player.mode-script .controls-advanced button {
|
299
|
+
font-size: 24px;
|
300
|
+
padding: 0 8px; }
|
301
|
+
.podcast-player.mode-script .buttons {
|
302
|
+
margin-top: 25px;
|
303
|
+
position: static;
|
304
|
+
text-align: right; }
|
305
|
+
.podcast-player.mode-script .buttons button {
|
306
|
+
font-size: 24px;
|
307
|
+
padding: 0 8px;
|
308
|
+
width: 35px; }
|
309
|
+
.podcast-player.mode-script .progress-bar .progress-bar-rail {
|
310
|
+
min-height: 20px; }
|
311
|
+
.podcast-player.mode-script.playing .progress-bar .progress-bar-time-played {
|
312
|
+
display: none; }
|
313
|
+
.podcast-player.mode-script .panels .transcript h3 {
|
314
|
+
float: none; }
|
315
|
+
.podcast-player.mode-script .panels .transcript .search {
|
316
|
+
display: block;
|
317
|
+
float: none;
|
318
|
+
overflow: hidden;
|
319
|
+
padding: 0 24px 0 0;
|
320
|
+
position: relative; }
|
321
|
+
.podcast-player.mode-script .panels .transcript .search-input {
|
322
|
+
float: left;
|
323
|
+
padding-right: 100px;
|
324
|
+
width: 100%; }
|
325
|
+
.podcast-player.mode-script .panels .transcript .search-result {
|
326
|
+
float: right;
|
327
|
+
position: absolute;
|
328
|
+
right: 44px;
|
329
|
+
top: 4px; }
|
330
|
+
.podcast-player.mode-script .panels .transcript .search-clear {
|
331
|
+
color: inherit;
|
332
|
+
font-size: 150%;
|
333
|
+
left: calc(100% - 44px);
|
334
|
+
position: absolute;
|
335
|
+
top: -2px; }
|
336
|
+
.podcast-player.mode-script .panels .transcript .transcript-text {
|
337
|
+
height: calc(100% - 90px); } }
|
338
|
+
|
339
|
+
.podcast-player.mode-script .podigee-logo {
|
340
|
+
background-image: url("data:image/png;base64,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");
|
341
|
+
background-size: cover;
|
342
|
+
height: 60px;
|
343
|
+
position: absolute;
|
344
|
+
right: 100px;
|
345
|
+
top: 5px;
|
346
|
+
width: 60px; }
|
347
|
+
|
348
|
+
@media (max-width: 500px) {
|
349
|
+
.podcast-player.mode-iframe .cover-image {
|
350
|
+
display: none; }
|
351
|
+
.podcast-player.mode-iframe .buttons {
|
352
|
+
right: 0; } }
|