it looks better with a background rather than a border

catdad-experiments · Jan 19, 2024 · 174b97c · 174b97c
1 parent cf06b08
commit 174b97c
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/ui/daily-forecast.js b/src/ui/daily-forecast.js
@@ -20,12 +20,24 @@ const Day = ({ data }) => {
 
   const classname = useStyle(`
     $ {
+      --radius: 5px;
+      --big-radius: calc(var(--radius) * 3);
       position: relative;
-      border: 1px solid gray;
       padding: 10px;
       margin: 10px;
-      border-radius: 10px;
+      border-radius: var(--radius);
       line-height: 1.4;
+      background: rgba(255, 255, 255, 0.03);
+    }
+
+    $:first-of-type {
+      border-top-left-radius: var(--big-radius);
+      border-top-right-radius: var(--big-radius);
+    }
+
+    $:last-of-type {
+      border-bottom-left-radius: var(--big-radius);
+      border-bottom-right-radius: var(--big-radius);
     }
 
     $ .toggle {