lumbung.space/themes/lumbung-theme/static/css/video-box.css

182 lines
3.0 KiB
CSS
Raw Normal View History

2021-12-15 10:29:58 +00:00
:root {
--tv-dark: #237D0F;
--tv-light: #E2FAD7;
2021-12-15 10:29:58 +00:00
}
2021-12-17 09:22:40 +00:00
.video-box {
border-top: 1px solid var(--tv-dark);
max-width: 560px;
margin: auto;
2021-12-17 09:22:40 +00:00
margin-bottom: 2em;
color: var(--tv-dark);
2021-12-17 09:22:40 +00:00
}
2022-01-06 10:58:19 +00:00
.video-box a {
color: var(--tv-dark);
}
2021-12-17 09:22:40 +00:00
.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 {
line-height: 0;
}
.video {
background-color: var(--tv-light);
2021-12-17 09:22:40 +00:00
}
.video .metadata{
font-size:0.9rem;
justify-content: space-between;
flex-wrap: wrap;
}
.metadata .title{
margin-top:0;
border-top: 2px solid var(--tv-dark);
border-bottom: 2px solid var(--tv-dark);
2021-12-17 09:22:40 +00:00
padding:0.5em;
font-weight:700;
font-size:1.3rem;
flex-basis: 100%;
2022-01-06 12:42:04 +00:00
padding-bottom: 100px;
2021-12-17 09:22:40 +00:00
}
.video.channel{
border-right: 2px solid var(--tv-dark);
2021-12-17 09:22:40 +00:00
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video.date {
float:right;
border-left: 2px solid var(--tv-dark);
2021-12-17 09:22:40 +00:00
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video.description {
border-top: 2px solid var(--tv-dark);
2021-12-17 09:22:40 +00:00
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;
}
2021-12-15 10:29:58 +00:00
.video-thumbnail-duration-overlay {
display: inline-block;
background-color: var(--tv-dark);
color: white;
2021-12-15 10:29:58 +00:00
font-size: 14px;
line-height: 1.1;
z-index: 10;
position: absolute;
padding: 1px 3px 1px 3px;
right: 5px;
bottom: 5px;
border: 2px solid var(--tv-dark);
2021-12-17 09:22:40 +00:00
}
.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;
}
2021-12-15 10:29:58 +00:00
.video-thumbnail:hover {
2021-12-17 09:23:49 +00:00
text-decoration:none !important;
2021-12-15 10:29:58 +00:00
}
.video-thumbnail:hover .play-overlay {
2021-12-17 09:23:49 +00:00
opacity: 1;
2021-12-15 10:29:58 +00:00
}
.video-thumbnail:hover .play-overlay .play-icon {
2021-12-17 09:23:49 +00:00
transform:translate(-50%,-50%) scale(1);
2021-12-15 10:29:58 +00:00
}
.video-box .dot {
fill: var(--tv-dark);
}
.video.channel a {
width: max-content;
background: var(--tv-dark);
padding: 0.5em;
position: relative;
bottom: 19px;
z-index: 1;
transform: rotate(2deg);
color: white;
}
.video.channel {
background: var(--tv-light);
display: flex;
justify-content: center;
border: none;
}