Improve play button

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;

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")):