From af5cd83cd7b2d114ac51ba4aea2de00750d00814 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Mon, 25 Oct 2021 20:34:09 -0500
Subject: [PATCH] posts: adjust css of thumbnail video length indicator.

Switch the font to 11px bold Arial. This is more compact and more
readable than 9px Tahoma. Also add a slight border radius and margins
around the indicator to make it stand out from the edge of the image.
---
 .../post_preview_component.html.erb                |  2 +-
 app/javascript/src/styles/base/000_vars.scss       | 14 ++++++++------
 app/javascript/src/styles/common/utilities.scss    | 12 ++++++++++--
 app/javascript/src/styles/specific/forum.scss      |  2 +-
 app/javascript/src/styles/specific/posts.scss      |  2 +-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/components/post_preview_component/post_preview_component.html.erb b/app/components/post_preview_component/post_preview_component.html.erb
index 06042b802..da2c7f1b9 100644
--- a/app/components/post_preview_component/post_preview_component.html.erb
+++ b/app/components/post_preview_component/post_preview_component.html.erb
@@ -1,7 +1,7 @@
 <%= tag.article id: "post_#{post.id}", **article_attrs do -%>
   <%= link_to polymorphic_path(link_target, q: tags) do -%>
     <% if is_animated? || has_sound? %>
-      <div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 leading-none text-xs">
+      <div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
         <% if is_animated? %>
           <span class="post-duration align-middle">
             <%= duration_to_hhmmss(duration) %>
diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss
index 46043e63a..9daa1fc4e 100644
--- a/app/javascript/src/styles/base/000_vars.scss
+++ b/app/javascript/src/styles/base/000_vars.scss
@@ -1,13 +1,15 @@
 :root {
-  --text-xs: 0.5625rem; // 9px
-  --text-sm: 0.75rem;   // 12px
-  --text-md: 0.875rem;  // 14px
-  --text-lg: 1rem;      // 16px
-  --text-xl: 1.3125rem; // 21px
-  --text-xxl: 1.75rem;  // 28px
+  --text-xxs: 0.5625rem; // 9px
+  --text-xs: 0.6875rem;  // 11px
+  --text-sm: 0.75rem;    // 12px
+  --text-md: 0.875rem;   // 14px
+  --text-lg: 1rem;       // 16px
+  --text-xl: 1.3125rem;  // 21px
+  --text-xxl: 1.75rem;   // 28px
   --header-font: Tahoma, Verdana, Helvetica, sans-serif;
   --body-font: Verdana, Helvetica, sans-serif;
   --monospace-font: 0.875rem monospace; // 14px
+  --arial-font: Arial, Helvetica, sans-serif;
 }
 
 $h1_padding: 0.8em 0 0.25em 0;
diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index 3c9913f3f..fc9485a33 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -8,6 +8,7 @@ $spacer: 0.25rem; /* 4px */
 .invisible { visibility: hidden; }
 .visible { visibility: visible; }
 
+.font-arial { font-family: var(--arial-font); }
 .font-monospace { font: var(--monospace-font); }
 .font-bold { font-weight: bold; }
 
@@ -17,8 +18,9 @@ $spacer: 0.25rem; /* 4px */
 .text-center { text-align: center; }
 .text-muted { color: var(--muted-text-color); }
 
-.text-xs { font-size: var(--text-xs); }
-.text-sm { font-size: var(--text-sm); }
+.text-xxs { font-size: var(--text-xxs); }
+.text-xs  { font-size: var(--text-xs); }
+.text-sm  { font-size: var(--text-sm); }
 
 .leading-none { line-height: 1; }
 
@@ -27,6 +29,12 @@ $spacer: 0.25rem; /* 4px */
 .top-0\.5 { top: 0.5 * $spacer; }
 .left-0\.5 { left: 0.5 * $spacer; }
 
+.rounded-sm { border-radius: 0.5 * $spacer; }
+.rounded    { border-radius: 1.0 * $spacer; }
+
+.m-px   { margin: 1px; }
+.m-0\.5 { margin: 0.5 * $spacer; }
+
 .mx-auto { margin-left: auto; margin-right: auto; }
 .mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
 .mx-2    { margin-left: 2   * $spacer; margin-right: 2   * $spacer; }
diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss
index 44a6edccc..b1fd9b2ed 100644
--- a/app/javascript/src/styles/specific/forum.scss
+++ b/app/javascript/src/styles/specific/forum.scss
@@ -13,7 +13,7 @@ div#c-forum-topics {
 
     &.label {
       display: inline-block;
-      font-size: var(--text-xs);
+      font-size: var(--text-xxs);
       text-transform: uppercase;
       border: 1px solid;
       border-radius: 0.25rem;
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index c04a27191..a8eb4a795 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -244,7 +244,7 @@ div#c-post-versions, div#c-artist-versions {
     }
 
     i#open-edit-dialog {
-      font-size: var(--text-xs);
+      font-size: var(--text-xxs);
     }
 
     span[data-tag-counter] {