Improve play button

This commit is contained in:
Zed 2019-08-19 21:27:28 +02:00
parent 59469da857
commit 8b31f58998
2 changed files with 16 additions and 6 deletions

View file

@ -1035,7 +1035,7 @@ video, .video-container img {
opacity: 0.8; opacity: 0.8;
} }
.card-overlay-circle { .overlay-circle {
border-radius: 50%; border-radius: 50%;
background-color: #404040; background-color: #404040;
width: 40px; width: 40px;
@ -1047,7 +1047,7 @@ video, .video-container img {
border-style: solid; border-style: solid;
} }
.card-overlay-triangle { .overlay-triangle {
width: 0; width: 0;
height: 0; height: 0;
border-style: solid; border-style: solid;
@ -1056,6 +1056,16 @@ video, .video-container img {
margin-left: 14px; 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 { .poll-meter {
overflow: hidden; overflow: hidden;
position: relative; position: relative;

View file

@ -78,8 +78,8 @@ proc renderVideo(video: Video; prefs: Prefs): VNode =
of m3u8, vmap: of m3u8, vmap:
video(poster=thumb, data-url=source, data-autoload="false") video(poster=thumb, data-url=source, data-autoload="false")
verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">" verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
verbatim "<div class=\"card-overlay-circle\">" verbatim "<div class=\"overlay-circle\">"
verbatim "<span class=\"card-overlay-triangle\"</span></div></div>" verbatim "<span class=\"overlay-triangle\"</span></div></div>"
else: else:
renderVideoDisabled(video) renderVideoDisabled(video)
@ -114,8 +114,8 @@ proc renderCardImage(card: Card): VNode =
img(src=getSigUrl(get(card.image), "pic")) img(src=getSigUrl(get(card.image), "pic"))
if card.kind == player: if card.kind == player:
tdiv(class="card-overlay"): tdiv(class="card-overlay"):
tdiv(class="card-overlay-circle"): tdiv(class="overlay-circle"):
span(class="card-overlay-triangle") span(class="overlay-triangle")
proc renderCardContent(card: Card): VNode = proc renderCardContent(card: Card): VNode =
buildHtml(tdiv(class="card-content")): buildHtml(tdiv(class="card-content")):