From 66b5d6ba6f09d7a4973bbf91a5bf6b6a553681d2 Mon Sep 17 00:00:00 2001
From: John Pham <john@highlight.run>
Date: Mon, 14 Feb 2022 12:18:52 -0800
Subject: [PATCH] Change click behavior/visual

---
 package.json                |  2 +-
 src/replay/styles/style.css | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f2ecdf6c..dc32d524 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",
diff --git a/src/replay/styles/style.css b/src/replay/styles/style.css
index 19657a1e..e1efb0f0 100644
--- a/src/replay/styles/style.css
+++ b/src/replay/styles/style.css
@@ -12,6 +12,11 @@
   background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iNyA1IDE4IDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyOCAyOCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgaGVpZ2h0PSIzMDBweCIgd2lkdGg9IjMwMHB4Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC4yLDIwLjkgOC4yLDQuOSAxOS44LDE2LjUgMTMsMTYuNSAxMi42LDE2LjYgIi8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE3LjMsMjEuNiAxMy43LDIzLjEgOSwxMiAxMi43LDEwLjUgIi8+DQo8cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPg0KPHBvbHlnb24gcG9pbnRzPSI5LjIsNy4zIDkuMiwxOC41IDEyLjIsMTUuNiAxMi42LDE1LjUgMTcuNCwxNS41ICIvPg0KPC9zdmc+DQo=');
   border-color: transparent; /* otherwise we transition from black when .touch-device class is added */
 }
+
+.replayer-mouse::after {
+  background: transparent;
+}
+
 .replayer-mouse.active::after {
   animation: click 0.2s ease-in-out 1;
 }
@@ -47,11 +52,16 @@
     opacity: 0.3;
     width: 20px;
     height: 20px;
+    background: transparent;
   }
-  50% {
-    opacity: 0.5;
-    width: 10px;
-    height: 10px;
+  75% {
+    width: 24px;
+    height: 24px;
+    opacity: 0.8;
+    background: #dc2626;
+  }
+  100% {
+    background: transparent;
   }
 }