Let's fix terminology. The term overlay is more suitable here, so let's stick to it.
This commit is contained in:
parent
b1b19c7e54
commit
b14a6dbed4
@ -11,7 +11,7 @@
|
||||
--secondary-color: #9f2b68;
|
||||
--text-color: #f5f5f5;
|
||||
--text-indent: 1.6rem;
|
||||
--view-background-color: #f5f5f574;
|
||||
--overlay-background-color: #f5f5f574;
|
||||
scrollbar-color: var(--primary-color) var(--background-color); }
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@ -20,7 +20,7 @@
|
||||
--primary-color: #9f2b68;
|
||||
--secondary-color: #cd2682;
|
||||
--text-color: #0a0a0a;
|
||||
--view-background-color: #0a0a0a74; } }
|
||||
--overlay-background-color: #0a0a0a74; } }
|
||||
|
||||
* { margin: 0; }
|
||||
|
||||
@ -101,9 +101,9 @@ nav h1 {
|
||||
|
||||
section { margin-top: 1rem; }
|
||||
|
||||
#view {
|
||||
#overlay {
|
||||
align-items: center;
|
||||
background-color: var(--view-background-color);
|
||||
background-color: var(--overlay-background-color);
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
height: 100%;
|
||||
@ -113,7 +113,7 @@ section { margin-top: 1rem; }
|
||||
vertical-align: middle;
|
||||
width: 100%; }
|
||||
|
||||
#view * {
|
||||
#overlay * {
|
||||
flex: none;
|
||||
margin: 0 auto;
|
||||
max-height: 100%;
|
||||
|
@ -11,7 +11,7 @@ function mousescroll(e) {
|
||||
e.target.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
document.getElementById("view").addEventListener("click", e => {
|
||||
document.getElementById("overlay").addEventListener("click", e => {
|
||||
e.target.firstChild.remove();
|
||||
e.target.style.visibility = "hidden";
|
||||
scale = 1;
|
||||
@ -27,23 +27,23 @@ file_links.forEach(f => f.addEventListener('click', e => {
|
||||
video.autoplay = true;
|
||||
video.controls = true;
|
||||
video.src = e.target.pathname;
|
||||
document.getElementById("view").appendChild(video);
|
||||
document.getElementById("view").style.visibility = "visible";
|
||||
document.getElementById("overlay").appendChild(video);
|
||||
document.getElementById("overlay").style.visibility = "visible";
|
||||
} else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
||||
e.preventDefault();
|
||||
const audio = document.createElement("audio");
|
||||
audio.autoplay = true;
|
||||
audio.controls = true;
|
||||
audio.src = e.target.pathname;
|
||||
document.getElementById("view").appendChild(audio);
|
||||
document.getElementById("view").style.visibility = "visible";
|
||||
document.getElementById("overlay").appendChild(audio);
|
||||
document.getElementById("overlay").style.visibility = "visible";
|
||||
} else if (image_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
||||
e.preventDefault();
|
||||
const image = document.createElement("img");
|
||||
image.addEventListener('wheel', mousescroll);
|
||||
image.src = e.target.pathname;
|
||||
document.getElementById("view").appendChild(image);
|
||||
document.getElementById("view").style.visibility = "visible";
|
||||
document.getElementById("overlay").appendChild(image);
|
||||
document.getElementById("overlay").style.visibility = "visible";
|
||||
}
|
||||
}));
|
||||
|
||||
|
@ -39,4 +39,4 @@ html(lang='en')
|
||||
h2 Privacy statements
|
||||
p I collect access logs that include access date and time, IP-address, User-Agent, referer URL that tells me where have you came from, request that you sent to me. In addition there are GeoIP information added based on your IP-address that includes country, region, and city for my convenience.
|
||||
p This site makes use of JavaScript purely for convenient functionality, like being able to watch video, listen to music, and look images in an overlay without the need to open a file in a new tab or return back.
|
||||
div#view
|
||||
div#overlay
|
Loading…
Reference in New Issue
Block a user