From d017dc983e4dc09efa86ba66910059428aced71e Mon Sep 17 00:00:00 2001 From: Joseph Hau Date: Wed, 5 Mar 2025 11:42:23 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B4=E5=90=88=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E9=87=8D=E5=A4=8D=E7=B1=BB=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=95=8C=E9=9D=A2=E6=9B=B4=E7=BE=8E=E8=A7=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/styles/theme.css | 165 +++++++++++-------------------- 1 file changed, 56 insertions(+), 109 deletions(-) diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index 03619b37..c418f284 100644 --- a/packages/ui/src/styles/theme.css +++ b/packages/ui/src/styles/theme.css @@ -203,78 +203,90 @@ html * { } /* ===== 下拉菜单 ===== */ - +.theme-dropdown { + @apply absolute z-50 min-w-[300px] w-max max-w-[90vw] mt-1 px-1 + bg-white/95 dark:bg-gray-800/95 + theme-blue:bg-blue-50/95 theme-green:bg-green-50/95 theme-purple:bg-purple-900/95 + backdrop-blur-sm rounded-lg + border border-gray-200/50 dark:border-gray-700/50 + theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/30 + shadow-xl; +} + /* 下拉菜单按钮 */ .theme-select-button { - @apply bg-white/30 dark:bg-gray-800/30 + @apply w-full h-10 px-3 py-2 rounded-lg transition-all + bg-white/10 dark:bg-gray-900/30 theme-blue:bg-blue-100/30 theme-green:bg-green-100/30 theme-purple:bg-black/20 - border border-gray-300/50 dark:border-gray-600/50 + border border-gray-300/50 dark:border-gray-700/50 theme-blue:border-blue-300/50 theme-green:border-green-300/50 theme-purple:border-purple-600/50 - rounded-lg px-3 py-2 - text-gray-900 dark:text-white + text-gray-900 dark:text-white theme-blue:text-blue-900 theme-green:text-green-900 theme-purple:text-white hover:border-purple-500/70 theme-blue:hover:border-blue-500/70 theme-green:hover:border-green-500/70 theme-purple:hover:border-purple-500/70 focus:ring-2 focus:ring-purple-500/50 focus:border-transparent theme-blue:focus:ring-blue-500/50 theme-green:focus:ring-green-500/50 theme-purple:focus:ring-purple-500/50 - outline-none transition-colors; + outline-none; } - - /* 下拉菜单 */ - .theme-dropdown { - @apply bg-white/95 dark:bg-slate-900/95 - theme-blue:bg-blue-100/95 theme-green:bg-green-100/95 theme-purple:bg-gray-800/95 - border border-gray-200 dark:border-slate-700 - theme-blue:border-blue-400 theme-green:border-green-400 theme-purple:border-purple-600/30 - rounded-lg shadow-lg overflow-hidden; - } - /* 下拉菜单项 */ .theme-dropdown-item { - @apply bg-gray-100 dark:bg-slate-800 - theme-blue:bg-blue-200 theme-green:bg-green-200 theme-purple:bg-purple-600/30 - text-gray-900 dark:text-slate-200 - theme-blue:text-blue-950 theme-green:text-green-950 theme-purple:text-purple-200; + @apply px-3 py-2 mb-1 rounded-lg cursor-pointer transition-colors + text-gray-900 dark:text-slate-200 + theme-blue:text-blue-950 theme-green:text-green-950 theme-purple:text-purple-200; } - + .theme-dropdown-item:last-child { + @apply mb-0 + } + /* 下拉菜单项激活 */ .theme-dropdown-item-active { - @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 - theme-blue:hover:bg-blue-100/50 theme-green:hover:bg-green-100/50 theme-purple:hover:bg-gray-700/50 - text-gray-900 dark:text-gray-200 - theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-gray-300; + @apply bg-purple-100/70 dark:bg-purple-800/50 + theme-blue:bg-blue-200/90 theme-green:bg-green-200/90 theme-purple:bg-purple-600/30 + text-purple-800 dark:text-purple-200 + theme-blue:text-blue-800 theme-green:text-green-800 theme-purple:text-purple-200; } - + /* 下拉菜单项未激活 */ .theme-dropdown-item-inactive { - @apply border-l-2 border-transparent - theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20; + @apply border-transparent + theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20 + hover:bg-gray-100/50 dark:hover:bg-gray-700/50 + theme-blue:hover:bg-blue-100/50 theme-green:hover:bg-green-100/50 theme-purple:hover:bg-purple-800/50 + text-gray-700 dark:text-gray-300 + theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-gray-300; } - + /* 下拉菜单分组 */ .theme-dropdown-section { - @apply bg-purple-100 dark:bg-purple-800/30 - theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20 - text-purple-700 dark:text-purple-300 - theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300 - hover:bg-purple-200 dark:hover:bg-purple-800/50 - theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30 - cursor-pointer; + @apply p-2 border-t border-gray-200/50 dark:border-gray-700/50 + theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20 + bg-purple-100 dark:bg-purple-800/30 + theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20 + text-purple-700 dark:text-purple-300 + theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300 + hover:bg-purple-200 dark:hover:bg-purple-800/50 + theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30 + cursor-pointer; } - + /* 下拉菜单按钮 */ .theme-dropdown-button { - @apply text-gray-500 dark:text-gray-400 - theme-blue:text-blue-500 theme-green:text-green-500 theme-purple:text-gray-400 - hover:text-gray-700 dark:hover:text-gray-300; + @apply w-full px-3 py-2 text-sm rounded-lg + bg-purple-100 dark:bg-purple-800/30 + theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20 + text-purple-700 dark:text-purple-300 + theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300 + hover:bg-purple-200 dark:hover:bg-purple-800/50 + theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30 + transition-colors flex items-center justify-center space-x-1; } - + /* 下拉菜单空状态 */ .theme-dropdown-empty { - @apply text-gray-400 dark:text-gray-500 - theme-blue:text-blue-400 theme-green:text-green-400 theme-purple:text-white/50; + @apply px-3 py-2 text-sm + text-gray-500 dark:text-gray-400 + theme-blue:text-blue-500 theme-green:text-green-500 theme-purple:text-gray-400; } - /* 占位符 */ .theme-placeholder { @apply text-gray-400 dark:text-gray-500 @@ -504,71 +516,6 @@ html * { display: none; } -/* ===== 下拉菜单 ===== */ -.theme-select-button { - @apply w-full h-10 px-3 - bg-white/10 dark:bg-gray-900/30 - theme-blue:bg-blue-100/30 theme-green:bg-green-100/30 theme-purple:bg-black/20 - border border-gray-300/50 dark:border-gray-700/50 - theme-blue:border-blue-300/50 theme-green:border-green-300/50 theme-purple:border-purple-600/50 - rounded-lg text-gray-900 dark:text-white - theme-blue:text-blue-900 theme-green:text-green-900 theme-purple:text-white - hover:border-purple-500/70 - theme-blue:hover:border-blue-500/70 theme-green:hover:border-green-500/70 theme-purple:hover:border-purple-500/70 - focus:ring-2 focus:ring-purple-500/50 focus:border-transparent - theme-blue:focus:ring-blue-500/50 theme-green:focus:ring-green-500/50 theme-purple:focus:ring-purple-500/50 - transition-all; -} - -.theme-dropdown { - @apply absolute z-50 min-w-[300px] w-max max-w-[90vw] mt-1 - bg-white/95 dark:bg-gray-800/95 - theme-blue:bg-blue-50/95 theme-green:bg-green-50/95 theme-purple:bg-gray-800/95 - backdrop-blur-sm rounded-lg - border border-gray-200/50 dark:border-gray-700/50 - theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/30 - shadow-xl; -} - -.theme-dropdown-item { - @apply px-3 py-2 rounded-lg cursor-pointer transition-colors; -} - -.theme-dropdown-item-active { - @apply bg-purple-100/70 dark:bg-purple-800/50 - theme-blue:bg-blue-100/70 theme-green:bg-green-100/70 theme-purple:bg-purple-600/30 - text-purple-800 dark:text-purple-200 - theme-blue:text-blue-800 theme-green:text-green-800 theme-purple:text-purple-200; -} - -.theme-dropdown-item-inactive { - @apply hover:bg-gray-100/50 dark:hover:bg-gray-700/50 - theme-blue:hover:bg-blue-100/50 theme-green:hover:bg-green-100/50 theme-purple:hover:bg-gray-700/50 - text-gray-700 dark:text-gray-300 - theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-gray-300; -} - -.theme-dropdown-section { - @apply p-2 border-t border-gray-200/50 dark:border-gray-700/50 - theme-blue:border-blue-200/50 theme-green:border-green-200/50 theme-purple:border-purple-600/20; -} - -.theme-dropdown-button { - @apply w-full px-3 py-2 text-sm rounded-lg - bg-purple-100 dark:bg-purple-800/30 - theme-blue:bg-blue-100 theme-green:bg-green-100 theme-purple:bg-purple-600/20 - text-purple-700 dark:text-purple-300 - theme-blue:text-blue-700 theme-green:text-green-700 theme-purple:text-purple-300 - hover:bg-purple-200 dark:hover:bg-purple-800/50 - theme-blue:hover:bg-blue-200 theme-green:hover:bg-green-200 theme-purple:hover:bg-purple-600/30 - transition-colors flex items-center justify-center space-x-1; -} - -.theme-dropdown-empty { - @apply px-3 py-2 text-gray-500 dark:text-gray-400 - theme-blue:text-blue-500 theme-green:text-green-500 theme-purple:text-gray-400 - text-sm; -} /* 占位符文本 */ .theme-placeholder {