From 94cb0e1a4affd840a8541792e01a413ee5d58bd1 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Fri, 15 Nov 2024 16:53:48 +0100
Subject: [PATCH] Make reactions background use the frosted glass look

---
 src/reactions/ReactionIndicator.module.css | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/reactions/ReactionIndicator.module.css b/src/reactions/ReactionIndicator.module.css
index 53652925..cc05ab1a 100644
--- a/src/reactions/ReactionIndicator.module.css
+++ b/src/reactions/ReactionIndicator.module.css
@@ -1,19 +1,25 @@
 .reactionIndicatorWidget {
   display: flex;
-  background-color: var(--cpd-color-bg-subtle-primary);
+  /* background-color: var(--cpd-color-bg-subtle-primary); */
   border-radius: var(--cpd-radius-pill-effect);
-  color: var(--cpd-color-icon-secondary);
+  box-shadow: 0 0 var(--cpd-space-2x) #00000040;
+  background: "ffffff40";
+  backdrop-filter: blur(10px);
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
 }
 
 .reactionIndicatorWidget > p {
   padding: none;
   margin-top: auto;
   margin-bottom: auto;
-  width: 4em;
+  width: 3em;
 }
 
 .reactionIndicatorWidgetLarge > p {
   padding: var(--cpd-space-2x);
+  padding-right: var(--cpd-space-4x);
+  padding-left: 0;
 }
 
 .reactionLarge {
@@ -25,13 +31,13 @@
 .reaction {
   margin: var(--cpd-space-1x);
   color: var(--cpd-color-icon-secondary);
-  background-color: var(--cpd-color-icon-secondary);
+  /* background-color: var(--cpd-color-icon-secondary); */
   display: flex;
   align-items: center;
   border-radius: var(--cpd-radius-pill-effect);
   user-select: none;
   overflow: hidden;
-  box-shadow: var(--small-drop-shadow);
+  /* box-shadow: var(--small-drop-shadow); */
   box-sizing: border-box;
   max-inline-size: 100%;
   max-width: fit-content;