From 6f932b53b0c8872bdb405a508f32fc917cfe38f7 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Mon, 24 Jun 2019 18:19:43 +0200
Subject: [PATCH] Improve quote video badge

---
 public/style.css    | 18 ++++++++++--------
 src/views/tweet.nim |  4 +++-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/public/style.css b/public/style.css
index 05d74fe..df8e21a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -659,14 +659,16 @@ video {
 }
 
 .quote-badge {
-    background: rgba(0,0,0,0.25);
-    border-radius: 4px;
-    bottom: 8px;
-    box-sizing: border-box;
-    color: #fffffff0;
-    left: 8px;
+    left: 0px;
     position: absolute;
     z-index: 1;
-    line-height: 16px;
-    padding: 2px;
+    align-self: flex-end;
+}
+
+.quote-badge-text {
+    margin: 4px;
+    background: rgba(0, 0, 0, 0.66);
+    border-radius: 4px;
+    color: #fffffff0;
+    padding: 0px 2px;
 }
diff --git a/src/views/tweet.nim b/src/views/tweet.nim
index 5ee1f3e..47c564f 100644
--- a/src/views/tweet.nim
+++ b/src/views/tweet.nim
@@ -39,7 +39,9 @@
       <div class="quote-media">
         <img src=${quote.thumb.get().getSigUrl("pic")}>
         #if quote.badge.isSome:
-        <div class="quote-badge">${quote.badge.get()}</div>
+        <div class="quote-badge">
+          <div class="quote-badge-text">${quote.badge.get()}</div>
+        </div>
         #end if
       </div>
     </div>