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;
|
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;
|
||||||
|
|
|
@ -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")):
|
||||||
|
|
Loading…
Reference in a new issue