some css tweaks and other minor improvements/fixes

public/njum/css/cstms.css

@@ -1125,4 +1125,227 @@ div#categories {
 
 .caption {
     padding: 5px;
-}
+}
+
+.dropdown-menu.show {
+    top: 80%;
+    left: 5%;
+    border-radius: 0;
+    border: 1px solid black;
+}
+
+.dropdown-item {
+    padding: 5px 0.5rem;
+}
+
+.dropdown-item:hover, .dropdown-item:focus {
+    background-color: #525252;
+}
+
+.grid-menu {
+    display: grid;
+    grid-template-columns: auto 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+.thumbnail {
+    margin: 5px;
+}
+
+.thumbnail img {
+    border: 1px solid black;
+}
+
+small > b {
+    text-shadow: 1px 1px 1px black;
+}
+
+a.dropdown-item.logout {
+    text-align: center;
+    font-weight: bold;
+    text-shadow: 1px 1px red;
+}
+
+/* Modal */
+.modal-content {
+    background: #282828;
+    border-radius: 0px;
+    border: 1px solid black;
+}
+
+.modal-head {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+}
+
+img.icon {
+    max-height: 20px;
+}
+
+span.dlwebm.badge.badge-secondary {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-top-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
+.bs-popover-bottom>.arrow::after, .bs-popover-auto[x-placement^=bottom]>.arrow::after {
+    border-bottom-color: #191919;
+}
+
+.bs-popover-left>.arrow::after, .bs-popover-auto[x-placement^=left]>.arrow::after {
+    border-left-color: #191919;
+}
+
+a {
+    transition: .1s;
+}
+
+a:hover {
+    text-shadow: 1px 1px 1px black;
+    transition: all .1s ease;
+    text-decoration: none;
+}
+
+.uploader > a:hover {
+    color: #007053 !important;
+}
+
+span.badge.badge-sfw {
+    background: #095809;
+}
+
+span.badge.badge-nsfw {
+    background: #bb0d0d;
+}
+
+a.badge.nsfw-text > span {
+    color: black !important;
+    font-weight: bold;
+}
+
+div#tag-display {
+    font-size: 1.3rem;
+}
+
+i.fa.fa-lg.fa-heart {
+    color: #ff0076;
+}
+
+i.fa.fa-lg.fa-heart-o {
+    color: #ff0076;
+}
+
+button.copylink {
+    border-radius: 5px;
+    padding: 5px;
+    transition: 0s ease;
+    border: 0;
+    color: white;
+}
+
+button.copylink:focus:after {
+    content: "✔";
+    position: relative;
+    color: lime;
+    left: 3px;
+    top: -2px;
+    transition: all .5s ease;
+    font-size: 14px;
+}
+
+button.copylink:not(:focus) {
+    transition: all .5s ease-out;
+}
+
+button#togglebg, button.bg-toggle, button#fav, button#webm_edit, button#webm_report, button.copylink {
+    background: #28282800;
+    margin: 0;
+}
+
+button#togglebg:hover, button.bg-toggle:hover, button#fav:hover, button#webm_edit:hover, button#webm_report:hover, button.copylink:hover {
+    transition: .2s ease-in-out;
+    background: #3e3d3d00;
+    text-shadow: 1px 1px 0px #000;
+    color: #007053;
+}
+
+.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show>.btn-dark.dropdown-toggle {
+    color: #fff;
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.toggo.tag-panel-body {
+    max-width: min-content;
+    overflow-y: hidden;
+}
+
+.toggo.tag-panel-body {
+    max-width: 350px;
+    overflow-y: auto;
+    max-height: 50px;
+}
+
+.popover-metadata {
+    min-width: 220px;
+}
+
+.monchichi {
+    display: inherit;
+    background: #1e1c1c;
+    border-radius: 5px;
+    border: 1px solid black;
+    margin: 5px;
+}
+
+.frontendedittags .toggo {
+    max-width: 100% !important;
+    max-height: unset;
+}
+
+.form-control:focus {
+    -webkit-box-shadow: unset;
+    box-shadow: unset;
+}
+
+/* Damit der Filesize Button besser aussieht, auch bei längerem Artist Text */
+.popover-body {
+    padding: 1rem .75rem;
+}
+
+img#indexthumb {
+    max-width: 50px;
+}
+.dropdown-menu.LinksGrid.show {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 800px;
+    }
+}
+
+@media (min-width: 1500px) {
+    .container {
+        max-width: 1000px;
+    }
+}
+
+span.yesmg {
+    color: #65ff04;
+    text-shadow: 0px 0px 10px #00ff1f;
+}
+
+span.nomsg {
+    color: #39393a;
+    text-shadow: 1px 0px 1px #313030;
+    margin-right: 1px;
+}
+

public/njum/js/newscript.js

@@ -214,6 +214,15 @@ if (typeof video !== 'undefined') {
         }
 
         videoElem.addEventListener('play', animationLoop);
+
+        $(window).keypress(function(e) {
+            if (e.which == 32) {
+                if (videoElem.paused)
+                    videoElem.play();
+                else
+                videoElem.pause();
+                }
+        });
     }
 };
 
@@ -235,6 +244,16 @@ $("[data-toggle=popover]").popover({
         }
 });
 
+$('body').on('click', function (e) {
+    $('[data-toggle="popover"]').each(function () {
+        //the 'is' for buttons that trigger popups
+        //the 'has' for icons within a button that triggers a popup
+        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
+            $(this).popover('hide');
+        }
+    });
+});
+
 (function ($) {
     function updaterow(ctx, video) {
         if($('video').length) {
@@ -1286,3 +1305,12 @@ document.querySelectorAll("#layoutSwitcher [id^=layout]").forEach(el => el.addEv
         else
                 console.warn(response.status, await response.text());
 }));
+
+// Copy Link
+function Copy() {
+  var Url = document.getElementById("url");
+  Url.innerHTML = window.location.href;
+  console.log(Url.innerHTML)
+  Url.select();
+  document.execCommand("copy");
+}