hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Embed: unixoffset: display negative timeoffset when <48h in the seekbar, <12h on the currentTime counter and use the same time formatting for the full seekbar

Browse source
This commit is contained in:
Cat 2023-12-07 14:55:51 +01:00 • committed by Thulinma
parent 720f4b5d05
commit ca5eba2e92
6 changed files with 111 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
embed/min/skins/default.css
View file

@ -80,6 +80,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
.mistvideo-progress .bar{height:inherit;width:0;position:absolute;border-right:inherit;background-color:$accent;z-index:2;transition:width .2s}
.mistvideo-progress .buffer{height:inherit;width:0;position:absolute;background-color:$semiFill}
.mistvideo-progress .bar:after{content:'';border:5px solid $accent;border-radius:5px;position:absolute;right:-5px;top:50%;transform:translateY(-50%)}
.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime{text-align:center;display:block}
.mistvideo-play[data-state=playing] svg.play{display:none}
.mistvideo-play[data-state=paused] svg.pause{display:none}
.mistvideo-main{align-items:center}
@ -95,6 +96,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
.mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
.mistvideo-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mistvideo-currentTime .mistvideo-realtime,.mistvideo-progress .mistvideo-realtime{opacity:.6}
.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}

2
embed/min/skins/dev.css
View file

@ -80,6 +80,7 @@ svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;trans
.mistvideo-progress .bar{height:inherit;width:0;position:absolute;border-right:inherit;background-color:$accent;z-index:2;transition:width .2s}
.mistvideo-progress .buffer{height:inherit;width:0;position:absolute;background-color:$semiFill}
.mistvideo-progress .bar:after{content:'';border:5px solid $accent;border-radius:5px;position:absolute;right:-5px;top:50%;transform:translateY(-50%)}
.mistvideo-progress .mistvideo-tooltip .mistvideo-realtime{text-align:center;display:block}
.mistvideo-play[data-state=playing] svg.play{display:none}
.mistvideo-play[data-state=paused] svg.pause{display:none}
.mistvideo-main{align-items:center}
@ -95,6 +96,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
.mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
.mistvideo-currentTime{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mistvideo-currentTime .mistvideo-realtime,.mistvideo-progress .mistvideo-realtime{opacity:.6}
.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}