From 3279813ab6c1d93fee2a89f82ea5a37fc83beb60 Mon Sep 17 00:00:00 2001
From: troyeguo <13820674+troyeguo@users.noreply.github.com>
Date: Tue, 15 Sep 2026 11:16:03 +0800
Subject: [PATCH] feat(account): enhance pro banner button with trial animation
 and styling

---
 .../dialogs/settingDialog/settingDialog.css   | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/settingDialog/settingDialog.css b/src/components/dialogs/settingDialog/settingDialog.css
index ed3e3fc9..d0e55a52 100644
--- a/src/components/dialogs/settingDialog/settingDialog.css
+++ b/src/components/dialogs/settingDialog/settingDialog.css
@@ -645,11 +645,47 @@
   color: #1b2745;
   border: none;
 }
+@property --pro-banner-btn-trial-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
 .pro-banner-btn-trial {
-  border: 1px solid rgba(255, 255, 255, 0.8);
+  position: relative;
+  border: 1px solid transparent;
   color: #fff;
   background: transparent;
 }
+.pro-banner-btn-trial::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: conic-gradient(
+    from var(--pro-banner-btn-trial-angle),
+    rgba(255, 255, 255, 0.35),
+    rgba(255, 255, 255, 1) 90deg,
+    rgba(255, 255, 255, 0.35) 180deg,
+    rgba(139, 180, 255, 0.9) 270deg,
+    rgba(255, 255, 255, 0.35)
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  animation: pro-banner-btn-trial-shine 3s linear infinite;
+  pointer-events: none;
+}
+@keyframes pro-banner-btn-trial-shine {
+  to {
+    --pro-banner-btn-trial-angle: 360deg;
+  }
+}
 
 /* AI Setting styles */
 .ai-setting-form-row {