490 lines
11 KiB
CSS
490 lines
11 KiB
CSS
/* Global Styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'MiSans', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background-color: transparent;
|
|
color: #1e293b;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.ant-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
transition: box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
|
|
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.ant-btn:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.ant-btn:active {
|
|
transform: none;
|
|
}
|
|
|
|
.ant-btn .anticon {
|
|
font-size: 0.98em;
|
|
}
|
|
|
|
.ant-btn.ant-btn-default,
|
|
.ant-btn.ant-btn-dashed {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border-color: rgba(148, 163, 184, 0.2);
|
|
color: #294261;
|
|
}
|
|
|
|
.ant-btn.ant-btn-default:hover,
|
|
.ant-btn.ant-btn-dashed:hover {
|
|
background: #ffffff;
|
|
border-color: rgba(59, 130, 246, 0.28);
|
|
color: #1d4ed8;
|
|
box-shadow: 0 8px 18px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.ant-btn.ant-btn-primary {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 45%, #1e40af 100%);
|
|
border-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
.ant-btn.ant-btn-primary:hover {
|
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 48%, #1d4ed8 100%);
|
|
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
|
|
}
|
|
|
|
.ant-btn.ant-btn-primary.ant-btn-dangerous,
|
|
.ant-btn.ant-btn-dangerous:not(.ant-btn-link):not(.ant-btn-text) {
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 48%, #b91c1c 100%);
|
|
border-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
.ant-btn.ant-btn-primary.ant-btn-dangerous:hover,
|
|
.ant-btn.ant-btn-dangerous:not(.ant-btn-link):not(.ant-btn-text):hover {
|
|
box-shadow: 0 10px 20px rgba(220, 38, 38, 0.18);
|
|
}
|
|
|
|
.ant-btn.ant-btn-link,
|
|
.ant-btn.ant-btn-text {
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link {
|
|
padding-inline: 6px;
|
|
color: #31568b;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link:hover {
|
|
color: #1d4ed8;
|
|
background: rgba(37, 99, 235, 0.08);
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.ant-btn-dangerous,
|
|
.ant-btn.ant-btn-text.ant-btn-dangerous {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.ant-btn-dangerous:hover,
|
|
.ant-btn.ant-btn-text.ant-btn-dangerous:hover {
|
|
background: rgba(220, 38, 38, 0.08);
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.ant-btn.btn-soft-blue,
|
|
.ant-btn.ant-btn-primary.btn-soft-blue {
|
|
background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
|
|
border-color: #bfdbfe;
|
|
color: #1d4ed8;
|
|
box-shadow: 0 10px 22px rgba(59, 130, 246, 0.12);
|
|
}
|
|
|
|
.ant-btn.btn-soft-blue:hover,
|
|
.ant-btn.ant-btn-primary.btn-soft-blue:hover {
|
|
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
|
|
border-color: #93c5fd;
|
|
color: #1d4ed8;
|
|
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.14);
|
|
}
|
|
|
|
.ant-btn.btn-soft-violet,
|
|
.ant-btn.ant-btn-primary.btn-soft-violet {
|
|
background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
|
|
border-color: #d8b4fe;
|
|
color: #7c3aed;
|
|
box-shadow: 0 10px 22px rgba(124, 58, 237, 0.12);
|
|
}
|
|
|
|
.ant-btn.btn-soft-violet:hover,
|
|
.ant-btn.ant-btn-primary.btn-soft-violet:hover {
|
|
background: linear-gradient(180deg, #f3e8ff 0%, #e9d5ff 100%);
|
|
border-color: #c084fc;
|
|
color: #6d28d9;
|
|
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.14);
|
|
}
|
|
|
|
.ant-btn.btn-soft-green,
|
|
.ant-btn.ant-btn-primary.btn-soft-green {
|
|
background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
|
|
border-color: #86efac;
|
|
color: #15803d;
|
|
box-shadow: 0 10px 22px rgba(34, 197, 94, 0.12);
|
|
}
|
|
|
|
.ant-btn.btn-soft-green:hover,
|
|
.ant-btn.ant-btn-primary.btn-soft-green:hover {
|
|
background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
|
|
border-color: #4ade80;
|
|
color: #166534;
|
|
box-shadow: 0 10px 20px rgba(34, 197, 94, 0.14);
|
|
}
|
|
|
|
.ant-btn.btn-soft-red,
|
|
.ant-btn.ant-btn-primary.btn-soft-red {
|
|
background: linear-gradient(180deg, #fff7f7 0%, #fff1f2 100%);
|
|
border-color: #fecdd3;
|
|
color: #dc2626;
|
|
box-shadow: 0 10px 22px rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.ant-btn.btn-soft-red:hover,
|
|
.ant-btn.ant-btn-primary.btn-soft-red:hover {
|
|
background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
|
|
border-color: #fda4af;
|
|
color: #b91c1c;
|
|
box-shadow: 0 10px 20px rgba(239, 68, 68, 0.12);
|
|
}
|
|
|
|
.ant-btn.btn-pill-primary {
|
|
height: 40px;
|
|
padding-inline: 16px;
|
|
border-radius: 999px;
|
|
box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
|
|
}
|
|
|
|
.ant-btn.ant-btn-lg.btn-pill-primary {
|
|
height: 44px;
|
|
padding-inline: 18px;
|
|
}
|
|
|
|
.ant-btn.btn-pill-secondary {
|
|
height: 40px;
|
|
padding-inline: 16px;
|
|
border-radius: 999px;
|
|
border-color: #dbe3ef;
|
|
background: #fff;
|
|
color: #49627f;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ant-btn.btn-pill-secondary:hover,
|
|
.ant-btn.btn-pill-secondary:focus {
|
|
border-color: #c7d4e4;
|
|
background: #f8fafc;
|
|
color: #355171;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ant-btn.ant-btn-lg.btn-pill-secondary {
|
|
height: 44px;
|
|
padding-inline: 18px;
|
|
}
|
|
|
|
.ant-card-hoverable {
|
|
transition: box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
|
|
}
|
|
|
|
.ant-card-hoverable:hover {
|
|
transform: none !important;
|
|
box-shadow: 0 12px 24px rgba(31, 78, 146, 0.12);
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-view,
|
|
.ant-btn.ant-btn-text.btn-text-view,
|
|
.ant-btn.ant-btn-link.btn-text-neutral,
|
|
.ant-btn.ant-btn-text.btn-text-neutral,
|
|
.ant-btn.ant-btn-link.btn-text-edit,
|
|
.ant-btn.ant-btn-text.btn-text-edit,
|
|
.ant-btn.ant-btn-link.btn-text-accent,
|
|
.ant-btn.ant-btn-text.btn-text-accent,
|
|
.ant-btn.ant-btn-link.btn-text-delete,
|
|
.ant-btn.ant-btn-text.btn-text-delete,
|
|
.ant-btn.ant-btn-link.ant-btn-dangerous.btn-text-delete,
|
|
.ant-btn.ant-btn-text.ant-btn-dangerous.btn-text-delete {
|
|
border: 1px solid #d7e4f6;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 8px rgba(25, 63, 121, 0.06);
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-view,
|
|
.ant-btn.ant-btn-text.btn-text-view {
|
|
color: #2563eb;
|
|
border-color: #c9ddfb;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-view:hover,
|
|
.ant-btn.ant-btn-text.btn-text-view:hover {
|
|
background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
|
|
border-color: #a9c9fa;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-neutral,
|
|
.ant-btn.ant-btn-text.btn-text-neutral {
|
|
color: #5f7392;
|
|
border-color: #d7e4f6;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-neutral:hover,
|
|
.ant-btn.ant-btn-text.btn-text-neutral:hover {
|
|
background: linear-gradient(180deg, #fbfdff 0%, #f1f6fc 100%);
|
|
border-color: #bfd0e6;
|
|
color: #355171;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-edit,
|
|
.ant-btn.ant-btn-text.btn-text-edit {
|
|
color: #1d4ed8;
|
|
border-color: #c9ddfb;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-edit:hover,
|
|
.ant-btn.ant-btn-text.btn-text-edit:hover {
|
|
background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
|
|
border-color: #a9c9fa;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-accent,
|
|
.ant-btn.ant-btn-text.btn-text-accent {
|
|
color: #7c3aed;
|
|
border-color: #dbc8fb;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-accent:hover,
|
|
.ant-btn.ant-btn-text.btn-text-accent:hover {
|
|
background: linear-gradient(180deg, #fbf8ff 0%, #f3ebff 100%);
|
|
border-color: #caa6fb;
|
|
color: #6d28d9;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-delete,
|
|
.ant-btn.ant-btn-text.btn-text-delete,
|
|
.ant-btn.ant-btn-link.ant-btn-dangerous.btn-text-delete,
|
|
.ant-btn.ant-btn-text.ant-btn-dangerous.btn-text-delete {
|
|
color: #dc2626;
|
|
border-color: #fecdd3;
|
|
}
|
|
|
|
.ant-btn.ant-btn-link.btn-text-delete:hover,
|
|
.ant-btn.ant-btn-text.btn-text-delete:hover,
|
|
.ant-btn.ant-btn-link.ant-btn-dangerous.btn-text-delete:hover,
|
|
.ant-btn.ant-btn-text.ant-btn-dangerous.btn-text-delete:hover {
|
|
background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
|
|
border-color: #fda4af;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.ant-btn.ant-btn-icon-only.ant-btn-text,
|
|
.ant-btn.ant-btn-icon-only.ant-btn-link {
|
|
min-width: 36px;
|
|
}
|
|
|
|
.ant-btn-icon-only {
|
|
min-width: 40px;
|
|
}
|
|
|
|
.ant-btn.btn-action-text-lg {
|
|
min-height: 32px;
|
|
padding-inline: 12px;
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ant-btn.btn-action-text-sm,
|
|
.ant-btn.btn-action-inline {
|
|
min-height: 26px;
|
|
padding-inline: 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ant-btn.btn-action-icon-lg,
|
|
.ant-btn.btn-action-icon-sm,
|
|
.ant-btn.btn-action-compact {
|
|
gap: 0;
|
|
}
|
|
|
|
.ant-btn.btn-action-icon-lg.ant-btn-icon-only {
|
|
width: 32px;
|
|
min-width: 32px;
|
|
height: 32px;
|
|
padding-inline: 0;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.ant-btn.btn-action-icon-sm.ant-btn-icon-only,
|
|
.ant-btn.btn-action-compact.ant-btn-icon-only {
|
|
width: 26px;
|
|
min-width: 26px;
|
|
height: 26px;
|
|
padding-inline: 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.ant-btn.btn-action-icon-lg .anticon {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.ant-btn.btn-action-icon-sm .anticon,
|
|
.ant-btn.btn-action-compact .anticon {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.app-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
color: #64748b;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid #e2e8f0;
|
|
border-top: 3px solid #667eea;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.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-2 { margin-bottom: 0.5rem; }
|
|
.mb-3 { margin-bottom: 0.75rem; }
|
|
.mb-4 { margin-bottom: 1rem; }
|
|
|
|
.p-1 { padding: 0.25rem; }
|
|
.p-2 { padding: 0.5rem; }
|
|
.p-3 { padding: 0.75rem; }
|
|
.p-4 { padding: 1rem; }
|
|
|
|
/* Button Styles */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, #667eea, #764ba2);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
/* Input Styles */
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 2px solid #e1e5e9;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
/* Card Styles */
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
/* Text Styles */
|
|
.text-sm { font-size: 0.875rem; }
|
|
.text-base { font-size: 1rem; }
|
|
.text-lg { font-size: 1.125rem; }
|
|
.text-xl { font-size: 1.25rem; }
|
|
|
|
.font-medium { font-weight: 500; }
|
|
.font-semibold { font-weight: 600; }
|
|
.font-bold { font-weight: 700; }
|
|
|
|
.text-gray-500 { color: #64748b; }
|
|
.text-gray-600 { color: #475569; }
|
|
.text-gray-700 { color: #334155; }
|
|
.text-gray-900 { color: #0f172a; }
|