From 8b31f58998b5d42b935d2cc20ae46d4018b5d7b1 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Mon, 19 Aug 2019 21:27:28 +0200
Subject: [PATCH] Improve play button

---
 public/css/style.css | 14 ++++++++++++--
 src/views/tweet.nim  |  8 ++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index aa33b0c..e826cc3 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1035,7 +1035,7 @@ video, .video-container img {
     opacity: 0.8;
 }
 
-.card-overlay-circle {
+.overlay-circle {
     border-radius: 50%;
     background-color: #404040;
     width: 40px;
@@ -1047,7 +1047,7 @@ video, .video-container img {
     border-style: solid;
 }
 
-.card-overlay-triangle {
+.overlay-triangle {
     width: 0;
     height: 0;
     border-style: solid;
@@ -1056,6 +1056,16 @@ video, .video-container img {
     margin-left: 14px;
 }
 
+.card-overlay:hover .overlay-circle,
+.video-overlay:hover .overlay-circle {
+    border-color: #ff6c60;
+}
+
+.card-overlay:hover .overlay-triangle,
+.video-overlay:hover .overlay-triangle {
+    border-color: transparent transparent transparent #ff6c60;
+}
+
 .poll-meter {
     overflow: hidden;
     position: relative;
diff --git a/src/views/tweet.nim b/src/views/tweet.nim
index efe690d..265b55e 100644
--- a/src/views/tweet.nim
+++ b/src/views/tweet.nim
@@ -78,8 +78,8 @@ proc renderVideo(video: Video; prefs: Prefs): VNode =
           of m3u8, vmap:
             video(poster=thumb, data-url=source, data-autoload="false")
             verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
-            verbatim "<div class=\"card-overlay-circle\">"
-            verbatim "<span class=\"card-overlay-triangle\"</span></div></div>"
+            verbatim "<div class=\"overlay-circle\">"
+            verbatim "<span class=\"overlay-triangle\"</span></div></div>"
         else:
           renderVideoDisabled(video)
 
@@ -114,8 +114,8 @@ proc renderCardImage(card: Card): VNode =
       img(src=getSigUrl(get(card.image), "pic"))
       if card.kind == player:
         tdiv(class="card-overlay"):
-          tdiv(class="card-overlay-circle"):
-            span(class="card-overlay-triangle")
+          tdiv(class="overlay-circle"):
+            span(class="overlay-triangle")
 
 proc renderCardContent(card: Card): VNode =
   buildHtml(tdiv(class="card-content")):