einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-14 16:56:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

🛠 Podcast categories and player

Browse Source
This commit is contained in:
Dennis Reimann
2020-10-05 16:34:52 +02:00
parent 7507cd5249
commit 11a56902cb
13 changed files with 228 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/css/sections/podcast.css
View File

@@ -1,12 +1,42 @@
#podcast {
& .categories {
display: inline-flex;
flex-wrap: wrap;
list-style: none;
margin: 0 0 var(--space-xxl) 0;
& li {
margin: 0 var(--space-m) var(--space-m) 0;
}
& a {
display: inline-block;
text-align: center;
padding: var(--space-s) var(--space-l);
color: var(--color-neutral-0);
text-decoration: none;
border-radius: var(--space-xl);
border: 1px solid var(--color-secondary);
&:hover {
@media not all and (hover: none) {
color: var(--color-neutral-0);
background-color: var(--color-secondary);
text-decoration: none;
}
}
}
}
& .current {
margin-bottom: 4rem;
}
}
.episodes {
display: grid;
grid-gap: var(--space-xl);
grid-template-columns: 1fr;
margin: 0;
list-style: none;
@media (--up_to_L) {
grid-template-columns: 1fr;
@@ -28,7 +58,6 @@
padding: var(--space-xl);
}
& a {
display: flex;
}
@@ -76,3 +105,82 @@
line-height: 1.2;
}
}
.player {
margin: 0 auto;
border-radius: var(--space-m);
overflow: hidden;
min-width: 300px;
max-width: 480px;
}
.player__cover{
display:block;
width:100%
}
.player__bottom {
color: var(--color-body-text);
background-color: var(--color-card-bg);
padding-bottom: var(--space-l);
}
.player__progress{
display: block;
background-color: rgba(255,255,255,.25);
appearance:none;
width: 100%;
height: var(--space-m);
margin-bottom: var(--space-m);
cursor:pointer;
border:none
}
.player__progress[value] {
-webkit-appearance: none;
}
.player__progress::-webkit-progress-bar{
background-color: var(--color-secondary);
}
.player__progress::-moz-progress-bar,
.player__progress::-webkit-progress-value {
background-color: var(--color-accent);
}
.player__time{
display:flex;
justify-content:space-between;
margin:.5em 0 .75em;
padding:0 .5em;
opacity:.5;
font-size: var(--font-size-s);
}
.player__current-time{
margin-left:var(--space-m);
}
.player__duration{
margin-right:var(--space-m);
}
.player__controls{
display:flex;
align-items: center;
margin-top: var(--space-m);
padding: 0 var(--space-l);
}
.player__button{
width:70px;
height:70px;
margin-right:var(--space-l);
background-size:cover;
background-repeat:no-repeat;
cursor:pointer
}
.player__button.amplitude-paused{
background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0iIzQyNDM1RiIgY3g9IjM2LjUiIGN5PSIzNi41IiByPSIzNi41Ii8+PHBhdGggZD0iTTQ3LjYzIDM1LjhMMjcuNjQgMjMuNDNjLTEuNDYtLjk2LTIuNjUtLjI2LTIuNjUgMS41NlY0OWMwIDEuODEgMS4xOSAyLjUyIDIuNjUgMS41Nkw0Ny42MyAzOC4ycy43LS41LjctMS4yLS43LTEuMi0uNy0xLjJ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+)
}
.player__button.amplitude-playing{
background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0iIzQyNDM1RiIgY3g9IjM2LjUiIGN5PSIzNi41IiByPSIzNi41Ii8+PHBhdGggZD0iTTMwLjUyIDIzSDI2LjJBMi4yIDIuMiAwIDAgMCAyNCAyNS4ydjIzLjZjMCAxLjIxLjk4IDIuMiAyLjIgMi4yaDQuMzJhMi4yIDIuMiAwIDAgMCAyLjE5LTIuMlYyNS4yYTIuMiAyLjIgMCAwIDAtMi4xOS0yLjJ6TTQ2LjkgMjNoLTQuMzJhMi4yIDIuMiAwIDAgMC0yLjE5IDIuMnYyMy42YzAgMS4yMS45OCAyLjIgMi4xOSAyLjJoNC4zM2EyLjIgMi4yIDAgMCAwIDIuMTktMi4yVjI1LjJjMC0xLjIxLS45OC0yLjItMi4yLTIuMnoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)
}
.player__info{
flex:1;
text-align: left;
}
.player__album{
color:var(--color-secondary);
}