feat: add margin to lightbox

2 files changed, 20 insertions, 7 deletions

diff --git a/src/libo.css b/src/libo.css
index c68dc44..bc85a48 100644
--- a/src/libo.css
+++ b/src/libo.css
@@ -5,9 +5,11 @@
     width: 100%;
     height: 100%;
     padding: 1rem;
-    background-color: #fff;
     transition: opacity 0.2s ease-in-out;
 
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.75);
+
     display: flex;
     justify-content: center;
     align-items: center;
@@ -15,6 +17,12 @@
     cursor: pointer;
 }
 
+@media (prefers-color-scheme: dark) {
+    .libo-overlay {
+        background-color: rgba(0, 0, 0, 0.75);
+    }
+}
+
 .libo-shadow {
     position: absolute;
     transition-duration: 0.2s;
diff --git a/src/shadow.js b/src/shadow.js
index 66d8251..57a5cd6 100644
--- a/src/shadow.js
+++ b/src/shadow.js
@@ -41,23 +41,28 @@ export default class Shadow {
       height: this.element.offsetHeight
     }
 
-    const f = {}
+    const f = {};
+    const margin = 50;
 
     // calculate final size
     const nw = this.element.naturalWidth;
     const nh = this.element.naturalHeight;
     const ratio = nw / nh;
-    f.width = Math.min(nw, window.innerWidth);
+
+    const ww = window.innerWidth - margin*2;
+    const wh = window.innerHeight - margin*2;
+
+    f.width = Math.min(nw, ww);
     f.height = f.width / ratio;
 
-    if (f.height >= window.innerHeight) {
-      f.height = window.innerHeight;
+    if (f.height >= wh) {
+      f.height = wh;
       f.width = f.height * ratio;
     }
 
     // calculate final position
-    f.left = (window.innerWidth - f.width) / 2;
-    f.top = (window.innerHeight - f.height) / 2;
+    f.left = (ww - f.width) / 2 + margin;
+    f.top = (wh - f.height) / 2 + margin;
 
     this.finalState = f;
     this.startingState = s;