From c7c640eeff5fbdb22fb651ac7cd93e5fd7485c72 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 02:27:23 +0100
Subject: [PATCH] Improve shadows slightly

---
 showbits-thermal-printer-ui/src/App.vue | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/App.vue b/showbits-thermal-printer-ui/src/App.vue
index 3ee1683..2104671 100644
--- a/showbits-thermal-printer-ui/src/App.vue
+++ b/showbits-thermal-printer-ui/src/App.vue
@@ -26,10 +26,28 @@ import CSegment from "./components/CSegment.vue";
   padding: 32px;
 
   background-color: white;
+  box-shadow: inset 0 0 32px #0003;
+
+  position: relative;
+}
+
+/* This construction makes the outside shadow/glow look like the strip of paper
+ * extends below the screen. Otherwise, the glow at the bottom would look
+ * thinner, which looks weird. */
+.strip::after {
+  content: " ";
+  z-index: -1;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: calc(100% + 500px);
+
   box-shadow:
-    0 0 16px #0006,
-    0 0 500px #ffff,
-    inset 0 0 32px #0003;
+    0 0 16px #0006 /* for contrast */,
+    0 0 500px -10px #fffa;
 }
 </style>