From 14c6816c47236ee89182576a7cb1a4b7bd0fc84a Mon Sep 17 00:00:00 2001
From: schrumpel <git@f0ck.it>
Date: Wed, 18 May 2022 21:05:13 +0200
Subject: [PATCH] fixing image zoom

---
 public/s/css/f0ck.css | 44 ++++++++++++++++++++++++++++++++++---------
 public/s/js/f0ck.js   |  2 +-
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index ca6e028..3452628 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -40,6 +40,8 @@ html[theme='f0ck'] {
   --scroller-bg: #424242;
   --footbar-color: #9f0;
   --loading-indicator-color: #9f0;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="f0ck"] .admin-search button {
@@ -94,6 +96,8 @@ html[theme='p1nk'] {
   --scroller-bg: #424242;
   --footbar-color: #ff00d0;
   --loading-indicator-color: #ff00d0;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="p1nk"] .pagination > a, .pagination > span  {
@@ -144,6 +148,8 @@ html[theme='orange'] {
   --scroller-bg: #424242;
   --footbar-color: #ff6f00;
   --loading-indicator-color: #ff6f00;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="orange"] .pagination > a, .pagination > span  {
@@ -195,6 +201,8 @@ html[theme='amoled'] {
   --scroller-bg: #424242;
   --footbar-color: #fff;
   --loading-indicator-color: #fff;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="amoled"] .metadata {
@@ -267,6 +275,8 @@ html[theme="paper"] {
   --scroller-bg: #424242;
   --footbar-color: #000;
   --loading-indicator-color: #000;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="paper"] ._204863 {
@@ -443,6 +453,8 @@ html[theme="atmos"] {
   --scrollbar-color: #2b2b2b;
   --footbar-color: #1fb2b0;
   --loading-indicator-color: #1fb2b0;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="atmos"] .pagination > a, .pagination > span  {
@@ -495,6 +507,8 @@ html[theme="term"] {
   --tooltip-bg: #131212;
   --footbar-color: #00DF00;
   --loading-indicator-color: #00DF00;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="term"] .pagination > a, .pagination > span  {
@@ -562,6 +576,8 @@ html[theme="iced"] {
   --tooltip-bg: #0a3f53;
   --footbar-color: #0084ff;
   --loading-indicator-color: #0084ff;
+  --img-border-width: 0px;
+  --img-border-color: #363636;
 }
 
 html[theme="iced"] ._204863 {
@@ -630,6 +646,8 @@ html[theme='f0ck95'] {
   --scroller-bg: #424242;
   --footbar-color: #000;
   --loading-indicator-color: #000;
+  --img-border-width: 2px;
+  --img-border-color: #808080;
 }
 
 html[theme="f0ck95"] html, body {
@@ -644,6 +662,10 @@ html[theme="f0ck95"] span#favs {
   border: inset 1px gray;
 }
 
+html[theme="f0ck95"] .embed-responsive-image {
+  border: none;
+}
+
 html[theme="f0ck95"] .nav-link, .pagination > a, .pagination > span {
     border-radius: 0;
     border-left: inset 1px silver;
@@ -678,10 +700,6 @@ html[theme="f0ck95"] .embed-responsive-image {
   background: #0000;
 }
 
-html[theme="f0ck95"] #f0ck-image {
-  padding: 5px;
-}
-
 html[theme="f0ck95"] span.placeholder {
   border-left: 1px solid var(--black);
 }
@@ -851,6 +869,8 @@ html[theme='f0ck95d'] {
   --scroller-bg: #424242;
   --footbar-color: #fff;
   --loading-indicator-color: #fff;
+  --img-border-width: 2px;
+  --img-border-color: #808080;
 }
 
 html[theme="f0ck95d"] ._204863 {
@@ -882,16 +902,18 @@ html[theme="f0ck95d"] .media-object {
 
 html[theme="f0ck95d"] .embed-responsive.embed-responsive-16by9 {
   background: black;
+  border-left: inset 1px silver;
+  border-right: outset 1px silver;
+}
+
+html[theme="f0ck95d"] .embed-responsive-image {
+  border: none;
 }
 
 html[theme="f0ck95d"] .embed-responsive-image {
   background: #0000;
 }
 
-html[theme="f0ck95d"] #f0ck-image {
-  padding: 5px;
-}
-
 html[theme="f0ck95d"] html, body {
   color: var(--white);
 }
@@ -919,6 +941,7 @@ html[theme="f0ck95d"] .metadata {
   border-left: inset 1px silver;
   border-bottom: outset 1px silver;
   border-right: outset 1px silver;
+  border-top: inset 2px silver;
   color: var(--accent);
 }
 
@@ -1684,12 +1707,14 @@ span.placeholder {
   top: 0;
   left: 0;
   right: 0;
-  width: 100%;
+  width: auto;
   height: 100%;
   box-sizing: content-box;
   scrollbar-color: var(--scrollbar-color) transparent;
   scrollbar-width: thin;
   background: var(--black);
+  border: 1px solid #363636;
+  border-top: none;
 }
   
 .previous-post, .next-post {
@@ -1771,6 +1796,7 @@ a#elfe {
   background-color: var(--metadata-bg);
   padding-bottom: 5px;
   border: 1px solid #363636;
+  border-top: none;
 }
 
 #themeselector {
diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js
index 059a324..e5b6b96 100644
--- a/public/s/js/f0ck.js
+++ b/public/s/js/f0ck.js
@@ -58,7 +58,7 @@
         : f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
       f0ckimage.hasAttribute("style")
         ? f0ckimage.removeAttribute("style")
-        : f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0; padding: 5px;");
+        : f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0; border: var(--img-border-width) solid var(--img-border-color); border-top: none; border-bottom: none;");
     });
   }
   // </image-responsive>