posts: show length of videos and animations in thumbnails.

Show the length of videos and animated posts in the thumbnail. The
length is shown the top left corner in MM:SS format. This replaces the
play button icon.

Show a speaker icon instead of a music note icon for posts with sound.

Doing this requires doing `.includes(:media_asset)` in a bunch of
places to avoid N+1 queries when we access the post's duration.

app/javascript/src/styles/base/000_vars.scss

@@ -1,5 +1,5 @@
 :root {
-  --text-xs: 0.8em;
+  --text-xs: 0.643em; // 9px
   --text-sm: 0.9em;
   --text-md: 1em;
   --text-lg: 1.16667em;
@@ -15,28 +15,6 @@ $h2_padding: 0.8em 0 0.25em 0;
 $h3_padding: 0.8em 0 0.25em 0;
 $h4_padding: 0.8em 0 0.25em 0;
 
-@mixin animated-icon {
-  content: "►";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  color: var(--preview-icon-color);
-  background: var(--preview-icon-background);
-  margin: 2px;
-  text-align: center;
-}
-
-@mixin sound-icon {
-  content: "♪";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  color: var(--preview-icon-color);
-  background: var(--preview-icon-background);
-  margin: 2px;
-  text-align: center;
-}
-
 // https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
 @mixin fa-solid-icon($content) {
   display: inline-block;

app/javascript/src/styles/base/040_colors.css

@@ -160,7 +160,7 @@ html {
   --preview-selected-color: rgba(0, 0, 0, 0.15);
 
   --preview-icon-color: var(--inverse-text-color);
-  --preview-icon-background: rgba(0, 0, 0, 0.5);
+  --preview-icon-background: rgba(0, 0, 0, 0.7);
 
   --modqueue-tag-warning-color: var(--red-1);
 

app/javascript/src/styles/common/utilities.scss

@@ -17,8 +17,18 @@ $spacer: 0.25rem; /* 4px */
 .text-center { text-align: center; }
 .text-muted { color: var(--muted-text-color); }
 
+.text-xs { font-size: var(--text-xs); }
+
+.leading-none { line-height: 1; }
+
+.absolute { position: absolute; }
+
+.top-0\.5 { top: 0.5 * $spacer; }
+.left-0\.5 { left: 0.5 * $spacer; }
+
 .mx-auto { margin-left: auto; margin-right: auto; }
-.mx-2    { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
+.mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
+.mx-2    { margin-left: 2   * $spacer; margin-right: 2   * $spacer; }
 
 .mt-2  { margin-top: 2 * $spacer; }
 .mt-4  { margin-top: 4 * $spacer; }
@@ -30,11 +40,13 @@ $spacer: 0.25rem; /* 4px */
 
 .ml-4  { margin-left: 4 * $spacer; }
 
+.p-0\.5 { padding: 0.5 * $spacer; }
 .p-4  { padding: 4 * $spacer; }
 
 .w-1\/4 { width: 25%; }
 .w-full { width: 100%; }
 
+.h-3  { height: 3  * $spacer; }
 .h-10 { height: 10 * $spacer; }
 
 .space-x-1 > * + * { margin-left: 1 * $spacer; }
@@ -45,6 +57,7 @@ $spacer: 0.25rem; /* 4px */
 .divide-y-1 > * + * { border-top: 1px solid var(--divider-border-color); }
 
 .align-top { vertical-align: top; }
+.align-middle { vertical-align: middle; }
 
 .flex-auto { flex: 1 1 auto; }
 .items-center { align-items: center; }

app/javascript/src/styles/specific/comments.scss

@@ -14,28 +14,6 @@ div#c-comments {
       }
     }
 
-    div.post-preview {
-      &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
-        div.preview {
-          position: relative;
-
-          &::before {
-            @include animated-icon;
-          }
-        }
-      }
-
-      &[data-has-sound=true] {
-        div.preview {
-          position: relative;
-
-          &::before {
-            @include sound-icon;
-          }
-        }
-      }
-    }
-
     div.post {
       display: flex;
       margin-bottom: 4em;