From 0aba9bb15ef4ff5b071df8021890ec0e953a0b25 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Fri, 21 Mar 2025 17:23:31 +0800
Subject: [PATCH] adjust PulseCard operating style.

---
 .../pattern-editor/PulseCard.module.css       | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/page-components/pattern-editor/PulseCard.module.css b/src/page-components/pattern-editor/PulseCard.module.css
index 281bfff..8be190b 100644
--- a/src/page-components/pattern-editor/PulseCard.module.css
+++ b/src/page-components/pattern-editor/PulseCard.module.css
@@ -8,9 +8,6 @@
     background-color: var(--color-surface);
     border-radius: calc(var(--border-radius) * 2);
     padding: 0;
-    &.selected {
-      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
-    }
     .order {
       padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
       background-color: var(--color-secondary-container);
@@ -21,5 +18,36 @@
     .offset {
       padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
     }
+    &.selected {
+      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
+      .order {
+        background-color: color-mix(
+          in oklch,
+          var(--color-secondary-container) 88%,
+          var(--color-white)
+        );
+      }
+    }
+    &:hover {
+      background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
+      box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
+      .order {
+        background-color: color-mix(
+          in oklch,
+          var(--color-secondary-container) 60%,
+          var(--color-white)
+        );
+      }
+    }
+    &:active {
+      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
+      .order {
+        background-color: color-mix(
+          in oklch,
+          var(--color-secondary-container) 68%,
+          var(--color-white)
+        );
+      }
+    }
   }
 }