Improve play button
This commit is contained in:
parent
59469da857
commit
8b31f58998
2 changed files with 16 additions and 6 deletions
|
@ -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;
|
||||
|
|
|
@ -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")):
|
||||
|
|
Loading…
Reference in a new issue