From 0517690ed39244268e00d2abc1eb1bae97bc8b7e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 1 Jan 2023 17:19:20 +0800
Subject: [PATCH] Spruce up the compose button

---
 src/app.css | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index 0e728f2f..ebb37d1e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -595,10 +595,23 @@ button.carousel-dot[disabled].active {
   right: 16px;
   right: max(16px, env(safe-area-inset-right));
   padding: 16px;
-  box-shadow: 0 0 32px var(--bg-color);
+  background-color: var(--button-bg-blur-color);
+  backdrop-filter: blur(16px);
   z-index: 1;
-  border: 1px solid var(--bg-color);
-  opacity: 0.75;
+  box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
+    0 10px 36px -4px var(--button-bg-blur-color);
+  transition: background-color 0.2s ease-in-out;
+}
+#compose-button:is(:hover, :focus) {
+  background-color: var(--button-bg-color);
+  filter: none;
+}
+#compose-button:active {
+  filter: brightness(0.75);
+  transform: translateY(1px);
+}
+#compose-button .icon {
+  filter: drop-shadow(0 1px 2px var(--button-bg-color));
 }
 
 /* SHEET */