xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Move towards pure HTML5+CSS

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2023-04-04 20:50:04 +02:00
parent 949e6eb4a3
commit ae72177f98
6 changed files with 87 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_sass/_block-media.scss
+29 -50
View File
@@ -1,21 +1,24 @@
// --------------------------------------------------------------------------------
// Block: Media
// --------------------------------------------------------------------------------
media.block {
figure.block-media {
display: block;
position: relative;
overflow: hidden;
}
media.block > a > .content,
media.block > .content {
figure.block-media picture,
figure.block-media picture > img,
figure.block-media video,
figure.block-media audio {
display: block;
width: 100%;
height: 100%;
height: auto;
object-fit: contain;
object-position: center center;
}
media.block > figcaption {
figure.block-media > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
@@ -29,19 +32,19 @@ media.block > figcaption {
// --------------------------------------------------------------------------------
$media-player-button-size: 1.5rem;
media.block.hide {
figure.block-media.hide {
cursor: none;
}
media.block > .top,
media.block > .bottom {
figure.block-media > .top,
figure.block-media > .bottom {
display: block;
margin: 0;
padding: 0.2rem 0.5rem;
z-index: 1;
}
media.block > .top {
figure.block-media > .top {
position: absolute;
top: 0;
left: 0;
@@ -63,17 +66,17 @@ media.block > .top {
user-select: none;
}
media.block.hide > .top {
figure.block-media.hide > .top {
top: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
media.block > .top > .variant {
figure.block-media > .top > .variant {
flex-grow: 1;
}
media.block > .bottom {
figure.block-media > .bottom {
position: absolute;
bottom: 0;
left: 0;
@@ -95,13 +98,13 @@ media.block > .bottom {
user-select: none;
}
media.block.hide > .bottom {
figure.block-media.hide > .bottom {
bottom: -100%;
opacity: 0.0;
transition: top ease-in-out 500ms, opacity ease-in-out 500s;
}
media.block > .bottom > .play {
figure.block-media > .bottom > .play {
display: block;
flex-grow: 0;
margin: 0;
@@ -114,10 +117,10 @@ media.block > .bottom > .play {
text-align: center;
user-select: none;
}
media.block > .bottom > .play.playing {
figure.block-media > .bottom > .play.playing {
}
media.block > .bottom > .time {
figure.block-media > .bottom > .time {
display: block;
margin: 0;
padding: 0;
@@ -132,7 +135,7 @@ media.block > .bottom > .time {
user-select: auto;
}
media.block > .bottom > .progress {
figure.block-media > .bottom > .progress {
margin: 0;
padding: 0;
width: auto;
@@ -144,7 +147,7 @@ media.block > .bottom > .progress {
display: block;
user-select: none;
}
media.block > .bottom > .mute {
figure.block-media > .bottom > .mute {
display: block;
margin: 0;
padding: 0;
@@ -159,10 +162,10 @@ media.block > .bottom > .mute {
text-align: center;
user-select: none;
}
media.block > .bottom > .mute.muted {
figure.block-media > .bottom > .mute.muted {
}
media.block > .bottom > .volume {
figure.block-media > .bottom > .volume {
display: block;
margin: 0;
padding: 0;
@@ -177,7 +180,7 @@ media.block > .bottom > .volume {
user-select: none;
}
media.block > .bottom > .fullscreen {
figure.block-media > .bottom > .fullscreen {
display: block;
margin: 0;
padding: 0;
@@ -194,43 +197,19 @@ media.block > .bottom > .fullscreen {
}
@media (max-width: 500px) {
media.block > .bottom > .time {
figure.block-media > .bottom > .time {
display: none;
}
}
@media (max-width: 350px) {
media.block > .bottom > .volume {
figure.block-media > .bottom > .volume {
display: none;
}
}
@media (max-width: 250px) {
media.block > .bottom > .play,
media.block > .bottom > .mute,
media.block > .bottom > .fullscreen {
figure.block-media > .bottom > .play,
figure.block-media > .bottom > .mute,
figure.block-media > .bottom > .fullscreen {
display: none;
}
}
// --------------------------------------------------------------------------------
// Block: Media > Audio
// --------------------------------------------------------------------------------
// --------------------------------------------------------------------------------
// Block: Media > Video
// --------------------------------------------------------------------------------
media.block > a > video,
media.block > video {
display: block;
width: 100%;
object-fit: contain;
object-position: center;
}
// --------------------------------------------------------------------------------
// Block: Media > Picture
// --------------------------------------------------------------------------------
media.block > a > img,
media.block > img {
display: block;
width: 100%;
}