mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-22 21:37:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

test ignore

Browse source
This commit is contained in:
ashley 2024-05-10 21:22:58 +00:00
parent a897c79243
commit 3bdf5a5254
1 changed files with 41 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
html/poketube.ejs
View file

@ -2177,25 +2177,46 @@ a {
<% } %> <% } %>
<style> <style>
#videoContainer {
position: relative;
}
.player { .player {
border-radius: 6px; border-radius: 6px;
transition: box-shadow 0.2s ease;
} }
.box-shadow-0em { .box-shadow-0em {
box-shadow: 0em; box-shadow: 0em;
} }
<% if (lightOrDark(color) == "dark") { %> <% if (lightOrDark(color) == "dark") { %>
#shadow {
.box-shadow-custom { position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 6px;
box-shadow: 0 13em 14em <%=color2%>; box-shadow: 0 13em 14em <%=color2%>;
filter: blur(5px);
transition: opacity 0.2s ease;
opacity: 0;
} }
<% } %> <% } %>
<% if (lightOrDark(color) == "light") { %> <% if (lightOrDark(color) == "light") { %>
.box-shadow-custom { #shadow {
box-shadow: 0 13em 14em <%=color%>; position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 6px;
box-shadow: 0 13em 14em <%=color2%>;
filter: blur(5px);
transition: opacity 0.2s ease;
opacity: 0;
} }
<% } %> <% } %>
</style> </style>
@ -2263,6 +2284,8 @@ a {
</video> </video>
</div> </div>
<div id="shadow"></div>
<div class="video-info" > <div class="video-info" >
<div style="linear-gradient(135deg,#f97794 10%,#623aa2 100%,#8e6f7e 100%);border-radius: 10px;margin-bottom: 10px;padding-bottom: 1em;padding-top: 0.3em;"> <div style="linear-gradient(135deg,#f97794 10%,#623aa2 100%,#8e6f7e 100%);border-radius: 10px;margin-bottom: 10px;padding-bottom: 1em;padding-top: 0.3em;">
@ -3194,21 +3217,21 @@ function resumeProgress() {
video.currentTime = progress; video.currentTime = progress;
} }
} }
// Define a function to toggle the CSS class for box-shadow
function toggleBoxShadowClass() { // Define a function to toggle the opacity
const videoElement = document.getElementById('video'); function toggleOpacity() {
if (videoElement.classList.contains('box-shadow-0em')) { const element = document.getElementById('shadow');
videoElement.classList.remove('box-shadow-0em'); const currentOpacity = parseFloat(window.getComputedStyle(element).opacity);
videoElement.classList.add('box-shadow-custom');
if (currentOpacity === 1) {
element.style.opacity = 0;
} else { } else {
videoElement.classList.remove('box-shadow-custom'); element.style.opacity = 1;
videoElement.classList.add('box-shadow-0em');
} }
} }
// Call the toggleBoxShadowClass function every 200ms after the page loads
window.onload = function() { window.onload = function() {
setInterval(toggleBoxShadowClass, 200); setInterval(toggleOpacity, 200);
}; };
video.addEventListener('timeupdate', () => { video.addEventListener('timeupdate', () => {