formatting

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

@@ -2,51 +2,51 @@
   --video-border-color: burlywood;
   --video-background-color: antiquewhite;
 }
-  .video-box {
+.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){
+.video-box:nth-child(even){
   transform: rotate(-1deg);
-  }
+}
 
-  .video-box:nth-child(odd){
+.video-box:nth-child(odd){
   transform: rotate(1deg);
-  }
+}
 
-  .video-box:nth-child(5){
+.video-box:nth-child(5){
   transform: rotate(3deg);
-  }
+}
 
 
-  .video-box img {
+.video-box img {
-    max-width: 100%;
-  }
-
-  .video-box iframe {
   max-width: 100%;
 }
 
-  .video-box .media {
+.video-box iframe {
+  max-width: 100%;
+}
+
+.video-box .media {
   line-height: 0;
-  }
+}
 
-  .video {
+.video {
   background-color: var(--video-background-color);
-  }
+}
 
-  .video .metadata{
+.video .metadata{
   font-size:0.9rem;
   justify-content: space-between;
   flex-wrap: wrap;
-  }
+}
 
-  .metadata .title{
+.metadata .title{
   margin-top:0;
   border-top: 2px solid var(--video-border-color);
   border-bottom: 2px solid var(--video-border-color);
@@ -54,44 +54,44 @@
   font-weight:700;
   font-size:1.3rem;
   flex-basis: 100%;
-  }
+}
 
-  .video.channel{
+.video.channel{
   border-right: 2px solid var(--video-border-color);
   padding: 0.5em 0.9em 0.5em 0.9em;
   font-size: 0.8rem;
-  }
+}
 
-  .video.date {
+.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 {
+.video.description {
   border-top: 2px solid var(--video-border-color);
   padding: 0.8em 0.8em 0.8em 0.8em;
   
-  }
+}
-  .descr_button a {
+.descr_button a {
   color:inherit;
   text-decoration: inherit;
-  }
+}
 
-  input.descr_button {
+input.descr_button {
   display: none;
-  }
+}
 
-  input + label + .video.date + .description{
+input + label + .video.date + .description{
   display: none;
-  }
+}
 
-  input:checked + label + .video.date +.description {
+input:checked + label + .video.date +.description {
   display: block;
-  }
+}
 
-  .play-icon {
+.play-icon {
   width: 0;
   height: 0;
   position: absolute;
@@ -101,22 +101,22 @@
   border-top: 13px solid transparent;
   border-bottom: 13px solid transparent;
   border-left: 18px solid hsla(0,0%,100%,.95);
-  }
+}
 
-  .video-thumbnail {
+.video-thumbnail {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
-  }
+}
-    .video-thumbnail {
+.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;
@@ -130,9 +130,9 @@
   right: 5px;
   bottom: 5px;
   border: 2px solid var(--video-border-color);
-  }
+}
 
-  .play-overlay {
+.play-overlay {
   transition: all .2s ease;
   position: absolute;
   right: 0;
@@ -142,14 +142,14 @@
   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)
 }