working on display of images

css/base.css

@@ -400,6 +400,10 @@ div.trusted-badge {
   color: #388e3c; /* green 700 */
 }
 
+.white {
+  color: #FFF!important; /* 100% white */
+}
+
 .red {
   color: #D32F2F!important; /* red 700 */
 }
@@ -1986,6 +1990,7 @@ video {
 
 /* Inline and preview image styles */
 .inline-image, .image-preview {
+  display: flex;
   position: relative;
   overflow: hidden;
   border-radius: 0.1rem;
@@ -2023,7 +2028,7 @@ img.inline-image::before, img.image-preview::before {
 
 img.inline-image::before {
   content: attr(alt);
-  background-size: 2rem 2rem;
+  background-size: 3rem 3rem;
 }
 
 img.image-preview::before {
@@ -2031,6 +2036,41 @@ img.image-preview::before {
   background-size: 10rem 10rem;
 }
 
+.inline-image.video {
+  align-items: center;
+  justify-content: center;
+}
+
+.inline-image.video > img.inline-image::before, img.image-preview.video::before {
+  background: center no-repeat #ccc url("../img/broken_video.png");
+}
+
+.inline-image.video > img.inline-image::before {
+  background-size: 3rem 3rem;
+}
+
+.inline-image.video .duration {
+  padding: 0.25rem 0.5rem;
+  color: #333;
+  background-color: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  bottom: 0.25rem;
+  left: 0.25rem;
+  font-size: 80%;
+  border-radius: 0.3rem;
+}
+
+.inline-image.video .play-control {
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+}
+
 /* Attachment styles */
 .attachment {
   display: flex;
@@ -2471,6 +2511,9 @@ ul.tabbar li.active > a {
 .material-icons.big {
   font-size: 2.2rem;
 }
+.material-icons.bigger {
+  font-size: 3rem;
+}
 .material-icons.huge {
   font-size: 4rem;
 }