77 lines
No EOL
1.1 KiB
CSS
77 lines
No EOL
1.1 KiB
CSS
/* Responsive iframe */
|
|
|
|
.wrap-element {
|
|
margin-top: 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-top: 56.25%;
|
|
}
|
|
|
|
.wrapped-iframe {
|
|
border-radius: 0.5rem;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.funkwhale {
|
|
padding-top: 28.12%;
|
|
}
|
|
}
|
|
|
|
/* Media figure */
|
|
|
|
figure.media {
|
|
display: grid;
|
|
grid-template-areas: 'player player'
|
|
'caption link';
|
|
grid-template-columns: 2fr 1fr;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
figure.media figcaption {
|
|
margin: 1rem;
|
|
grid-area: caption;
|
|
}
|
|
|
|
figure.media audio {
|
|
border-radius: 0.5rem;
|
|
grid-area: player;
|
|
max-height: 40px;
|
|
width: 100%;
|
|
}
|
|
|
|
figure.media video {
|
|
border-radius: 0.5rem;
|
|
grid-area: player;
|
|
width: 100%;
|
|
}
|
|
|
|
figure.media a {
|
|
margin: 1rem;
|
|
grid-area: link;
|
|
}
|
|
|
|
/* Thumbnail figure */
|
|
|
|
figure.thumbnail {
|
|
width: 200px;
|
|
}
|
|
|
|
/* Colors */
|
|
|
|
:root {
|
|
--primary-hue: 210deg;
|
|
--primary-saturation: 58%;
|
|
--primary-lightness: 39%;
|
|
}
|
|
|
|
.dark {
|
|
--primary-hue: 208deg;
|
|
--primary-saturation: 55%;
|
|
--primary-lightness: 60%;
|
|
} |