docs: shadow effect for images

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/noco-docs/docusaurus.config.js

@@ -145,13 +145,13 @@ const config = {
         selector: ".markdown img",
         // Optional medium-zoom options
         // see: https://www.npmjs.com/package/medium-zoom#options
-        // options: {
-        //   margin: 24,
-        //   background: "#BADA55",
-        //   scrollOffset: 0,
+        options: {
+          margin: 96,
+          background: "rgba(0,0,0,0.25)",
+          scrollOffset: 0,
           // container: "#zoom-container",
           // template: "#zoom-template",
-        // },
+        },
       },
     }),
   clientModules: [require.resolve("./src/modules/tele.js")],

packages/noco-docs/src/css/custom.scss

@@ -31,3 +31,9 @@
   --ifm-color-primary-lightest: #4fcbe9;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.markdown img {
+  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.75);
+  box-shadow: 0 0 10px rgba(0,0,0,0.75);
+}