Reduce flashing of preview cards on page loads

asciinema · Mar 18, 2024 · 63a17c9 · 63a17c9
1 parent 6aabaa2
commit 63a17c9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/assets/css/_recording_card.scss b/assets/css/_recording_card.scss
@@ -55,22 +55,15 @@ div.asciicast-card {
   }
 
   .thumbnail {
+    min-height: calc(1.333333 * 16em);
+    font-size: 14px;
+    font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
     overflow: hidden;
     padding: 0;
     background-color: #000;
     border-radius: 3px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-
-    .ap-terminal {
-      .ap-line {
-        height: 1.3333333333em;
-
-        span {
-          position: inherit;
-        }
-      }
-    }
   }
 
   .info {

diff --git a/lib/asciinema_web/controllers/recording/thumbnail.html.heex b/lib/asciinema_web/controllers/recording/thumbnail.html.heex
@@ -1,3 +1,6 @@
-<div class="thumbnail" style={"border-right: 1ch solid #{theme(@asciicast).bg}"}>
+<div
+  class="thumbnail"
+  style={"background-color: #{theme(@asciicast).bg}; border-right: 1ch solid #{theme(@asciicast).bg}"}
+>
   <img src={~p"/a/#{@asciicast}" <> ".svg?v=t"} />
 </div>