From 67cca4f3ea4b626b7f17b2676362fd7664187a08 Mon Sep 17 00:00:00 2001
From: Alex Bates <hi@imalex.xyz>
Date: Thu, 7 Jan 2021 18:11:14 +0000
Subject: [PATCH] improve shadow-box

---
 src/ProgressPane.jsx |  4 ++--
 src/index.css        | 23 +++++++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/ProgressPane.jsx b/src/ProgressPane.jsx
index aed50bb..78ad804 100644
--- a/src/ProgressPane.jsx
+++ b/src/ProgressPane.jsx
@@ -102,14 +102,14 @@ function DataView({ data, captionPortal, nonce }) {
         </table>*/}
 
         <div className="shadow-box flex-grow">
-            <div className="shadow-box-inner" style={{ paddingRight: ".7em", paddingTop: ".7em", "--text-outline": "transparent" }}>
+            <div className="shadow-box-inner" style={{ paddingRight: ".7em", paddingTop: ".7em", "--text-outline": "transparent", background: "#e2e1d8" }}>
                 <div className="progress-chart">
                     <ResponsiveContainer>
                         <AreaChart data={data}>
                             <XAxis dataKey="timestamp" type="number" scale={scale} domain={["dataMin", Date.now()/1000]} ticks={monthDates} tickFormatter={formatTimestampMonth} interval={0}/>
                             <YAxis type="number" unit="%" domain={[0, maxPercent]} tickCount={maxPercent / 5 + 1}/>
 
-                            <CartesianGrid stroke="#eee"/>
+                            <CartesianGrid stroke="#d9d0c9"/>
 
                             <Area
                                 type="linear"
diff --git a/src/index.css b/src/index.css
index 47099ee..6f79fc6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -163,27 +163,34 @@ main > * {
 }
 
 .shadow-box {
-    background: #ffffff66;
+    background: #ffffff44;
     padding: 1em;
     margin: .5em;
     margin-bottom: 1em;
 
-    border-radius: 16px;
-    box-shadow: .3em .5em 16px -.2em rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(3px);
 
-    border-top: 4px solid #ffffff33;
+    border-radius: 16px;
+    box-shadow: .4em .4em rgba(0, 0, 0, 0.15);
+
+    border-top: 4px solid #ffffffaa;
     padding-top: calc(1em - 2px);
 
-    border-left: 2px solid #ffffff33;
-    border-right: 2px solid #00000055;
-    border-bottom: 2px solid #00000055;
+    border-left: 4px solid #ffffffaa;
+    border-right: 4px solid #00000055;
+    border-bottom: 4px solid #00000055;
 
     position: relative;
 }
 
 .shadow-box-inner {
     border-radius: 12px;
-    box-shadow: inset .3em .3em 3px #00000033;
+    box-shadow: inset .4em .4em rgba(0, 0, 0, 0.15);
+
+    border-top: 4px solid #00000055;
+    border-left: 4px solid #00000055;
+    border-bottom: 4px solid #ffffffaa;
+    border-right: 4px solid #ffffffaa;
 
     width: 100%;
     height: 100%;