179 lines
3.3 KiB
CSS
179 lines
3.3 KiB
CSS
/* 公共样式 */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-200;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-indigo-600 hover:bg-indigo-700 text-white focus:ring-indigo-500;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white border-gray-300 hover:bg-gray-50 text-gray-700 focus:ring-indigo-500;
|
|
}
|
|
|
|
.btn-success {
|
|
@apply bg-green-600 hover:bg-green-700 text-white focus:ring-green-500;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-red-600 hover:bg-red-700 text-white focus:ring-red-500;
|
|
}
|
|
|
|
.btn-warning {
|
|
@apply bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-500;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-xs;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply px-6 py-3 text-base;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply p-2;
|
|
}
|
|
|
|
/* 卡片组件 */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-sm transition-all duration-200;
|
|
}
|
|
|
|
.card:hover {
|
|
@apply shadow-md;
|
|
}
|
|
|
|
.card-header {
|
|
@apply p-4 border-b border-gray-100;
|
|
}
|
|
|
|
.card-body {
|
|
@apply p-4;
|
|
}
|
|
|
|
.card-footer {
|
|
@apply p-4 bg-gray-50 border-t border-gray-100;
|
|
}
|
|
|
|
/* 表格样式 */
|
|
.table {
|
|
@apply min-w-full divide-y divide-gray-200;
|
|
}
|
|
|
|
.table th {
|
|
@apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
|
}
|
|
|
|
.table td {
|
|
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
|
}
|
|
|
|
.table tr {
|
|
@apply border-b border-gray-100;
|
|
}
|
|
|
|
.table-hover tr:hover {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form-control {
|
|
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
|
}
|
|
|
|
.form-group {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.form-help {
|
|
@apply mt-1 text-xs text-gray-500;
|
|
}
|
|
|
|
.form-error {
|
|
@apply mt-1 text-xs text-red-600;
|
|
}
|
|
|
|
/* 标签样式 */
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply bg-green-100 text-green-800;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply bg-yellow-100 text-yellow-800;
|
|
}
|
|
|
|
.badge-danger {
|
|
@apply bg-red-100 text-red-800;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply bg-blue-100 text-blue-800;
|
|
}
|
|
|
|
.badge-default {
|
|
@apply bg-gray-100 text-gray-800;
|
|
}
|
|
|
|
/* 动画 */
|
|
@keyframes pulse-ring {
|
|
0% {
|
|
transform: scale(0.8);
|
|
opacity: 0.8;
|
|
}
|
|
70%, 100% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-pulse-ring:before {
|
|
content: '';
|
|
@apply absolute rounded-full bg-current w-full h-full;
|
|
z-index: -1;
|
|
animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
|
|
}
|
|
|
|
/* 响应式实用工具 */
|
|
.responsive-grid {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6;
|
|
}
|
|
|
|
/* 聊天气泡 */
|
|
.chat-bubble {
|
|
@apply max-w-[70%] p-3 rounded-lg;
|
|
}
|
|
|
|
.chat-bubble-outgoing {
|
|
@apply bg-indigo-100 rounded-tl-lg rounded-tr-lg rounded-bl-lg ml-auto;
|
|
}
|
|
|
|
.chat-bubble-incoming {
|
|
@apply bg-gray-100 rounded-tl-lg rounded-tr-lg rounded-br-lg;
|
|
}
|
|
|
|
/* 高级导航 */
|
|
.nav-tabs {
|
|
@apply flex border-b border-gray-200;
|
|
}
|
|
|
|
.nav-tab {
|
|
@apply py-2 px-4 text-center border-b-2 font-medium text-sm;
|
|
}
|
|
|
|
.nav-tab-active {
|
|
@apply border-indigo-500 text-indigo-600;
|
|
}
|
|
|
|
.nav-tab-inactive {
|
|
@apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
|
|
}
|