mehr layout die zweite

public/css/w0bmcustom.css

@@ -3743,6 +3743,15 @@ button#layout4 {
     color: white;
 }
 
+button#layout5 {
+	background: #161618;
+    width: 100%;
+    border: 2px solid white;
+        font-family: Oswald;
+    margin-bottom: 5px;
+    color: #1fb2b0;
+}
+
 .fickfackfoo.panel-body {
     padding: 5px 5px;
 }

public/mobile/css/w0bmcustom.css

@@ -3579,4 +3579,11 @@ input#collapsible[type='checkbox'] {
 
 div.content-inner {
     color: #fff;
+}
+
+button.layoutbutton {
+    width: 100%;
+    margin-bottom: 5px;
+    background: black;
+    color: white;
 }

public/mobile/js/w0bmscript.js

@@ -1410,3 +1410,19 @@ function draw( video, thecanvas, img ){
     var dataURL = thecanvas.toDataURL();
     img.setAttribute('src', dataURL);
 } */
+
+const infoboxContent = document.querySelector("button#infobox");
+if(infoboxContent)
+  infoboxContent.dataset.content = infoboxContent.dataset.content.replace(/(https?:\/\/[^\s]+)/g, "<a href='$1' target='_blank' rel='extern'>$1</a>");
+
+//This was supposed to work for urls that are not in a correct url-sheme such as z0r.de/1337 but ehm itz out of biz cuz uhm xD https://f0ck.it/uploads/%5B2019%5D_firefox_YapokIcyShoveler.png
+//infoboxContent.dataset.content = infoboxContent.dataset.content.replace(/((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)?/gi, "<a href='$1'>$1</a>");
+
+document.querySelectorAll("#layoutSwitcher [id^=layout]").forEach(el => el.addEventListener("click", async function(e) {
+        e.preventDefault();
+        const response = await fetch("/api/user/layout?layout=" + this.id.replace("layout", ""));
+        if(response.ok)
+                location.reload(); 
+        else
+                console.warn(response.status, await response.text());
+}));

public/z0mb/css/z0mb.css

@@ -13,7 +13,7 @@ a:link,a:visited{
 	font-weight:bold;
 }
 
-a:hover{
+a:hover, .nav-link.dd-button:hover, label.nav-link:hover {
 	color:#999999;
 }
 
@@ -211,18 +211,7 @@ a.nav-link.layout1:after, a.nav-link.layout2:after, a.nav-link.layout3:after {
   white-space: nowrap;
 }
 
-.dd-button:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 15px;
-  transform: translateY(-50%);
-  width: 0; 
-  height: 0; 
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid black;
-}
+
 
 ul.dd-menu {
     background: black;
@@ -234,7 +223,7 @@ ul.dd-menu {
 }
 
 ul.dd-menu > li:hover {
-    background: #999999;
+    background: #2f2d2d;
 }
 
 .dd-menu {
@@ -278,4 +267,24 @@ ul.dd-menu > li:hover {
 ul.navbar-nav.mr-auto {
     flex-direction: row;
     align-items: flex-end;
+}
+
+label {
+  margin-bottom: 0;
+}
+
+.nav-link.dd-button {
+    padding: .5rem 2rem;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+label.nav-link {
+    font-size: 12px;
+}
+
+div#categories {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-self: center;
 }