ruangrupa/lumbung.space
ruangrupa/lumbung.space
1
0
Fork 1
Code Issues 11 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-background-color: antiquewhite;
}
.video-box {
border:2px solid var(--video-border-color);
max-width:560px;
margin:auto;
box-shadow:1em 1em 0 #d2d1c8;
margin-bottom: 2em;
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 {
border:2px solid var(--video-border-color);
max-width:560px;
margin:auto;
box-shadow:1em 1em 0 #d2d1c8;
margin-bottom: 2em;
color: chocolate;
}
.video-box .media {
line-height: 0;
}
.video-box:nth-child(even){
transform: rotate(-1deg);
}
.video {
background-color: var(--video-background-color);
}
.video-box:nth-child(odd){
transform: rotate(1deg);
}
.video .metadata{
font-size:0.9rem;
justify-content: space-between;
flex-wrap: wrap;
}
.video-box:nth-child(5){
transform: rotate(3deg);
}
.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{
border-right: 2px solid var(--video-border-color);
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video-box img {
max-width: 100%;
}
.video.date {
float:right;
border-left: 2px solid var(--video-border-color);
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video-box iframe {
max-width: 100%;
}
.video.description {
border-top: 2px solid var(--video-border-color);
padding: 0.8em 0.8em 0.8em 0.8em;
.video-box .media {
line-height: 0;
}
}
.descr_button a {
color:inherit;
text-decoration: inherit;
}
.video {
background-color: var(--video-background-color);
}
input.descr_button {
display: none;
}
.video .metadata{
font-size:0.9rem;
justify-content: space-between;
flex-wrap: wrap;
}
input + label + .video.date + .description{
display: none;
}
.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%;
}
input:checked + label + .video.date +.description {
display: block;
}
.video.channel{
border-right: 2px solid var(--video-border-color);
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.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.date {
float:right;
border-left: 2px solid var(--video-border-color);
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video.description {
border-top: 2px solid var(--video-border-color);
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 {
display: inline-block;
background-color: var(--video-background-color);
@ -130,26 +130,26 @@
right: 5px;
bottom: 5px;
border: 2px solid var(--video-border-color);
}
}
.play-overlay {
transition: all .2s ease;
position: absolute;
right: 0;
bottom: 0;
width: inherit;
height: inherit;
opacity: 0;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.play-overlay {
transition: all .2s ease;
position: absolute;
right: 0;
bottom: 0;
width: inherit;
height: inherit;
opacity: 0;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.video-thumbnail:hover {
text-decoration:none!important
}
.video-thumbnail:hover .play-overlay {
opacity:1
opacity:1
}
.video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1)
transform:translate(-50%,-50%) scale(1)
}