diff --git a/themes/lumbung-theme/static/css/video-box.css b/themes/lumbung-theme/static/css/video-box.css index 051cd70..9cae13a 100644 --- a/themes/lumbung-theme/static/css/video-box.css +++ b/themes/lumbung-theme/static/css/video-box.css @@ -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) }