r/lumbung.space
0
0
Fork 0
forked from ruangrupa/lumbung.space
Code Issues Pull Requests Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Aadil Ayub 2021-12-17 14:22:40 +05:00
parent aa49ddaa9e
commit 37c0fbe94f
1 changed files with 116 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
themes/lumbung-theme/static/css/video-box.css
View File

@ -2,122 +2,122 @@
--video-border-color: burlywood; --video-border-color: burlywood;
--video-background-color: antiquewhite; --video-background-color: antiquewhite;
} }
.video-box { .video-box {
border:2px solid var(--video-border-color); border:2px solid var(--video-border-color);
max-width:560px; max-width:560px;
margin:auto; margin:auto;
box-shadow:1em 1em 0 #d2d1c8; box-shadow:1em 1em 0 #d2d1c8;
margin-bottom: 2em; margin-bottom: 2em;
color: chocolate; color: chocolate;
}
.video-box:nth-child(even){
transform: rotate(-1deg);
}
.video-box:nth-child(odd){
transform: rotate(1deg);
}
.video-box:nth-child(5){
transform: rotate(3deg);
}
.video-box img {
max-width: 100%;
}
.video-box iframe {
max-width: 100%;
} }
.video-box .media { .video-box:nth-child(even){
line-height: 0; transform: rotate(-1deg);
} }
.video { .video-box:nth-child(odd){
background-color: var(--video-background-color); transform: rotate(1deg);
} }
.video .metadata{ .video-box:nth-child(5){
font-size:0.9rem; transform: rotate(3deg);
justify-content: space-between; }
flex-wrap: wrap;
}
.metadata .title{
margin-top:0;
border-top: 2px solid var(--video-border-color);
border-bottom: 2px solid var(--video-border-color);
padding:0.5em;
font-weight:700;
font-size:1.3rem;
flex-basis: 100%;
}
.video.channel{ .video-box img {
border-right: 2px solid var(--video-border-color); max-width: 100%;
padding: 0.5em 0.9em 0.5em 0.9em; }
font-size: 0.8rem;
}
.video.date { .video-box iframe {
float:right; max-width: 100%;
border-left: 2px solid var(--video-border-color); }
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video.description { .video-box .media {
border-top: 2px solid var(--video-border-color); line-height: 0;
padding: 0.8em 0.8em 0.8em 0.8em; }
} .video {
.descr_button a { background-color: var(--video-background-color);
color:inherit; }
text-decoration: inherit;
}
input.descr_button { .video .metadata{
display: none; font-size:0.9rem;
} justify-content: space-between;
flex-wrap: wrap;
}
input + label + .video.date + .description{ .metadata .title{
display: none; margin-top:0;
} border-top: 2px solid var(--video-border-color);
border-bottom: 2px solid var(--video-border-color);
padding:0.5em;
font-weight:700;
font-size:1.3rem;
flex-basis: 100%;
}
input:checked + label + .video.date +.description { .video.channel{
display: block; border-right: 2px solid var(--video-border-color);
} padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.play-icon { .video.date {
width: 0; float:right;
height: 0; border-left: 2px solid var(--video-border-color);
position: absolute; padding: 0.5em 0.9em 0.5em 0.9em;
left: 50%; font-size: 0.8rem;
top: 50%; }
transform: translate(-50%,-50%) scale(.5);
border-top: 13px solid transparent; .video.description {
border-bottom: 13px solid transparent; border-top: 2px solid var(--video-border-color);
border-left: 18px solid hsla(0,0%,100%,.95); padding: 0.8em 0.8em 0.8em 0.8em;
}
}
.descr_button a {
color:inherit;
text-decoration: inherit;
}
input.descr_button {
display: none;
}
input + label + .video.date + .description{
display: none;
}
input:checked + label + .video.date +.description {
display: block;
}
.play-icon {
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(.5);
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 18px solid hsla(0,0%,100%,.95);
}
.video-thumbnail {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.video-thumbnail {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background-color: #ececec;
transition: filter .2s ease;
}
.video-thumbnail {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.video-thumbnail {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background-color: #ececec;
transition: filter .2s ease;
}
.video-thumbnail-duration-overlay { .video-thumbnail-duration-overlay {
display: inline-block; display: inline-block;
background-color: var(--video-background-color); background-color: var(--video-background-color);
@ -130,26 +130,26 @@
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
border: 2px solid var(--video-border-color); border: 2px solid var(--video-border-color);
} }
.play-overlay { .play-overlay {
transition: all .2s ease; transition: all .2s ease;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: inherit; width: inherit;
height: inherit; height: inherit;
opacity: 0; opacity: 0;
background-color: rgba(0,0,0,.3); background-color: rgba(0,0,0,.3);
cursor: pointer; cursor: pointer;
} }
.video-thumbnail:hover { .video-thumbnail:hover {
text-decoration:none!important text-decoration:none!important
} }
.video-thumbnail:hover .play-overlay { .video-thumbnail:hover .play-overlay {
opacity:1 opacity:1
} }
.video-thumbnail:hover .play-overlay .play-icon { .video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1) transform:translate(-50%,-50%) scale(1)
} }