misc

public/s/css/f0ck.css

@@ -319,7 +319,6 @@ html, body {
   color: var(--white);
   margin: 0;
   font-family: var(--font);
-  text-align: center;
   line-height: 2;
   scrollbar-color: var(--scrollbar-color) transparent;
   scrollbar-width: thin;
@@ -430,7 +429,6 @@ div#posts > a:hover::after {
   flex-wrap: wrap;
   justify-content: space-between;
   border-bottom: 1px solid var(--nav-border-color);
-  transition: .5s ease-in-out;
 }
 
 .navbar-brand {
@@ -606,6 +604,9 @@ span.placeholder {
     line-height: 1;
     margin: 0;
   }
+  html, body {
+    text-align: center;
+  }
 }
 
 .media-object {
@@ -1200,6 +1201,7 @@ div#posts > a[data-mode="null"] > p:before {
 div#footbar {
   width: 100%;
   background-color: var(--nav-bg);
+  text-align: center;
   color: #f00;
   margin-top: -30px;
   transition: .5s ease-in-out;
@@ -1245,3 +1247,118 @@ table.table tbody tr:nth-of-type(even) {
 #tags .badge > a:first-child {
   color: inherit !important;
 }
+
+/* tooltips */
+[tooltip] {
+  position: relative;
+}
+[tooltip]::before,
+[tooltip]::after {
+  text-transform: none;
+  font-size: .9em;
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  display: none;
+  opacity: 0;
+}
+[tooltip]::before {
+  content: '';
+  border: 5px solid transparent;
+  z-index: 1001;
+}
+[tooltip]::after {
+  content: attr(tooltip);
+  font-family: Helvetica, sans-serif;
+  text-align: center;
+  min-width: 3em;
+  max-width: 70em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 1ch 1.5ch;
+  border-radius: .3ch;
+  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
+  background: #333;
+  color: #fff;
+  z-index: 1000;
+}
+[tooltip]:hover::before,
+[tooltip]:hover::after {
+  display: block;
+}
+[tooltip='']::before,
+[tooltip='']::after {
+  display: none !important;
+}
+[tooltip]:not([flow])::before,
+[tooltip][flow^="up"]::before {
+  bottom: 100%;
+  border-bottom-width: 0;
+  border-top-color: #333;
+}
+[tooltip]:not([flow])::after,
+[tooltip][flow^="up"]::after {
+  bottom: calc(100% + 5px);
+}
+[tooltip]:not([flow])::before,
+[tooltip]:not([flow])::after,
+[tooltip][flow^="up"]::before,
+[tooltip][flow^="up"]::after {
+  left: 50%;
+  transform: translate(-50%, -.5em);
+}
+[tooltip][flow^="down"]::before {
+  top: 100%;
+  border-top-width: 0;
+  border-bottom-color: #333;
+}
+[tooltip][flow^="down"]::after {
+  top: calc(100% + 5px);
+}
+[tooltip][flow^="down"]::before,
+[tooltip][flow^="down"]::after {
+  left: 50%;
+  transform: translate(-50%, .5em);
+}
+[tooltip][flow^="left"]::before {
+  top: 50%;
+  border-right-width: 0;
+  border-left-color: #333;
+  left: calc(0em - 5px);
+  transform: translate(-.5em, -50%);
+}
+[tooltip][flow^="left"]::after {
+  top: 50%;
+  right: calc(100% + 5px);
+  transform: translate(-.5em, -50%);
+}
+[tooltip][flow^="right"]::before {
+  top: 50%;
+  border-left-width: 0;
+  border-right-color: #333;
+  right: calc(0em - 5px);
+  transform: translate(.5em, -50%);
+}
+[tooltip][flow^="right"]::after {
+  top: 50%;
+  left: calc(100% + 5px);
+  transform: translate(.5em, -50%);
+}
+[tooltip]:not([flow]):hover::before,
+[tooltip]:not([flow]):hover::after,
+[tooltip][flow^="up"]:hover::before,
+[tooltip][flow^="up"]:hover::after,
+[tooltip][flow^="down"]:hover::before,
+[tooltip][flow^="down"]:hover::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+[tooltip][flow^="left"]:hover::before,
+[tooltip][flow^="left"]:hover::after,
+[tooltip][flow^="right"]:hover::before,
+[tooltip][flow^="right"]:hover::after {
+  opacity: 1;
+  transform: translate(0, -50%);
+}

public/s/js/f0ck.js

@@ -62,11 +62,12 @@
 
   // <scroller>
   let tts = 0;
+  const scroll_treshold = 1;
   if(document.querySelector("div#posts")) {
     document.addEventListener("wheel", e => {
       if((window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) { // down
         if(elem = document.querySelector(".pagination > .next:not(.disabled)")) {
-          if(tts < 2) {
+          if(tts < scroll_treshold) {
             document.querySelector("div#footbar").style.backgroundColor = "var(--scroller-bg)";
             tts++;
           }
@@ -76,7 +77,7 @@
       }
       else if(window.scrollY <= 0 && e.deltaY < 0) { // up
         if(elem = document.querySelector(".pagination > .prev:not(.disabled)")) {
-          if(tts < 2) {
+          if(tts < scroll_treshold) {
             document.querySelector("nav.navbar").style.backgroundColor = "var(--scroller-bg)";
             tts++;
           }
@@ -85,6 +86,7 @@
         }
       }
       else {
+        tts = 0;
         document.querySelector("div#footbar").style.backgroundColor = "var(--nav-bg)";
         document.querySelector("nav.navbar").style.backgroundColor = "var(--nav-bg)";
       }

src/inc/routes/index.mjs

@@ -101,7 +101,10 @@ export default (router, tpl) => {
           dest: `${cfg.websrv.paths.images}/${actitem.dest}`,
           mime: actitem.mime,
           size: lib.formatSize(actitem.size),
-          timestamp: lib.timeAgo(new Date(actitem.stamp * 1e3).toISOString()),
+          timestamp: {
+            timeago: lib.timeAgo(new Date(actitem.stamp * 1e3).toISOString()),
+            timefull: new Date(actitem.stamp * 1e3).toISOString()
+          },
           tags: tags
         },
         title: `${actitem.id} - f0ck.me`,
@@ -116,6 +119,7 @@ export default (router, tpl) => {
           uff: true
         },
         link: link,
+        phrase: cfg.websrv.phrases[~~(Math.random() * cfg.websrv.phrases.length)],
         tmp: output
       };
     }

src/inc/trigger/parser.mjs

@@ -81,11 +81,11 @@ export default async bot => {
         let source;
         if(meta.ext === "mp4") {
           source = (await exec(`yt-dlp -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize}k --merge-output-format mp4 -o ./tmp/${filename}`)).stdout.trim();
-          //change yt-dlp to youtube-dl if problem ^
+          //change 720 to any other available resolution, higher = better quality but bigger filesize
         }
         else {
           source = (await exec(`yt-dlp -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize}k -o ./tmp/${filename}`)).stdout.trim();
-          //change yt-dlp to youtube-dl if problem ^
+          //change 720 to any other available resolution, higher = better quality but bigger filesize
         }
 
         if(source.match(/larger than/))

views/ranking.html

@@ -1,5 +1,5 @@
 @include(main/header)
-<h1 style="text-align: left; margin-left: 5px">Ranking lol</h1>
+<h1>Ranking lol</h1>
 <table class="table">
   <thead>
     <tr>