/* 布局样式 */ /* 网格布局 */ .grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .grid-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .grid-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } /* Flex布局 */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1 1 0%; } .flex-row { flex-direction: row; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } /* 间距 */ .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-6 { margin-bottom: 1.5rem; } .ml-auto { margin-left: auto; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; } .pb-2 { padding-bottom: 0.5rem; } /* 尺寸 */ .h-full { height: 100%; } .h-24 { height: 6rem; } .h-32 { height: 8rem; } .h-56 { height: 14rem; } .h-60 { height: 15rem; } .h-72 { height: 18rem; } .w-full { width: 100%; } .w-1\/4 { width: 25%; } .w-3\/4 { width: 75%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .min-h-screen { min-height: 100vh; } .min-h-0 { min-height: 0px; } .min-h-\[250px\] { min-height: 250px; } .min-h-\[90vh\] { min-height: 90vh; } /* 文本对齐 */ .text-left { text-align: left; } .text-right { text-align: right; } /* 边框 */ .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-t { border-top-width: 1px; } .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-r { border-right-width: 1px; } .border-l { border-left-width: 1px; } .border-gray-200 { border-color: #e5e7eb; } .border-gray-300 { border-color: #d1d5db; } .border-blue-400 { border-color: #60a5fa; } .border-blue-600 { border-color: #2563eb; } /* 圆角 */ .rounded { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded-tl-none { border-top-left-radius: 0px; } .rounded-tr-none { border-top-right-radius: 0px; } /* 阴影 */ .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); } /* 溢出 */ .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } /* 光标 */ .cursor-pointer { cursor: pointer; } /* 文本大小 */ .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-sm-top-time { font-size: 0.875rem; line-height: 1.25rem; text-align: end; } .text-sm-top-time p { color: #fff !important; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } /* 文本粗细 */ .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* 文本颜色 */ .text-white { color: #ffffff; } .text-gray-500 { color: #6b7280; } .text-gray-600 { color: #4b5563; } .text-gray-700 { color: #374151; } .text-gray-900 { color: #111827; } .text-blue-500 { color: #3b82f6; } .text-blue-600 { color: #2563eb; } .text-blue-700 { color: #1d4ed8; } .text-green-500 { color: #22c55e; } .text-green-600 { color: #16a34a; } .text-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; } .text-purple-500 { color: #a855f7; } /* 背景颜色 */ .bg-white { background-color: #ffffff; } .bg-white .wrap label { border: unset !important; border-color: unset !important; } .bg-gray-50 { background-color: #f9fafb; } .bg-gray-100 { background-color: #f3f4f6; } .bg-gray-200 { background-color: #e5e7eb; } .bg-blue-50 { background-color: #eff6ff; } .bg-blue-500 { background-color: #3b82f6; } .bg-blue-600 { background-color: #2563eb; } .bg-green-500 { background-color: #22c55e; } .bg-purple-500 { background-color: #a855f7; } .bg-red-500 { background-color: #ef4444; } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-to: rgba(37, 99, 235, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-blue-800 { --tw-gradient-to: #1e40af; } /* 对象适应 */ .object-contain { object-fit: contain; } /* 最小宽度 */ .min-w-0 { min-width: 0px; } /* 最大宽度 */ .max-w-\[85\%\] { max-width: 85%; } /* .gradio-container-5-49-1 { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family:unset !important; -moz-tab-size: 4; tab-size: 4 } */ /* [class^="gradio-container-"] { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family: unset !important; -moz-tab-size: 4; tab-size: 4; } */ main { /* min-width: 1440px !important; */ padding: 0 !important; width: 100vw !important; max-width: 100vw !important; min-width: 1200px !important; } /* main .wrap { height: 100vh !important; } */ /* main .wrap .contain { height: 100% !important; } */ /* main .wrap .contain .column { height: 100vh !important; } */ .main-content-box { gap: unset !important; min-height: calc(100vh - 80px) !important; } .gradio-container { overflow: auto !important; }