fix: 整合下拉菜单重复类定义，使界面更美观
This commit is contained in:
Joseph Hau committed
1 parent
aca1825d7b
commit
d017dc983e
1 file changed
+56
-109
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user