Spaces:
Running
Running
| /* Enhanced styles for R&D DocMap Catalog */ | |
| /* Document card enhancements */ | |
| .document-item { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .document-item:hover { | |
| transform: translateX(5px); | |
| background-color: #f8fafc; | |
| } | |
| /* Phase-specific colors */ | |
| .document-item[data-phase="Discovery"] { border-left-color: #3b82f6; } | |
| .document-item[data-phase="Preclinical"] { border-left-color: #10b981; } | |
| .document-item[data-phase="Clinical Phase 1"] { border-left-color: #6366f1; } | |
| .document-item[data-phase="Clinical Phase 2"] { border-left-color: #8b5cf6; } | |
| .document-item[data-phase="Clinical Phase 3"] { border-left-color: #a855f7; } | |
| .document-item[data-phase="Clinical (All Phases)"] { border-left-color: #7c3aed; } | |
| .document-item[data-phase="Regulatory Submission"] { border-left-color: #ec4899; } | |
| .document-item[data-phase="Post-Marketing"] { border-left-color: #f59e0b; } | |
| .document-item[data-phase="Pre/Post-Approval"] { border-left-color: #f97316; } | |
| /* Enhanced modal styles */ | |
| .details-tabs { | |
| display: flex; | |
| border-bottom: 1px solid #e5e7eb; | |
| margin-bottom: 1rem; | |
| } | |
| .details-tab { | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| } | |
| .details-tab.active { | |
| border-bottom-color: #3b82f6; | |
| color: #1e40af; | |
| } | |
| .details-tab:hover:not(.active) { | |
| border-bottom-color: #e5e7eb; | |
| } | |
| .details-content { | |
| display: none; | |
| } | |
| .details-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* Dependency graph styles */ | |
| .dependency-graph { | |
| width: 100%; | |
| height: 400px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| } | |
| /* Flow card styles */ | |
| .flow-card { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| background-color: white; | |
| } | |
| .flow-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| border-color: #3b82f6; | |
| } | |
| .flow-card.active { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| /* Loading spinner */ | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| margin: 2rem auto; | |
| border-radius: 50%; | |
| border: 4px solid #e5e7eb; | |
| border-top-color: #3b82f6; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Enhanced detail card styles for better readability */ | |
| .detail-card { | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| padding: 1.25rem; | |
| margin-bottom: 1rem; | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .detail-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.75rem; | |
| border-bottom: 1px solid #e5e7eb; | |
| padding-bottom: 0.75rem; | |
| } | |
| .detail-card-title { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: #1e40af; | |
| } | |
| .detail-card-badge { | |
| background-color: #eff6ff; | |
| color: #1e40af; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .detail-card-section { | |
| margin-bottom: 0.75rem; | |
| } | |
| .detail-card-label { | |
| font-weight: 500; | |
| color: #4b5563; | |
| margin-bottom: 0.25rem; | |
| display: block; | |
| } | |
| .detail-card-value { | |
| background-color: #f9fafb; | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.875rem; | |
| color: #1f2937; | |
| } | |
| /* Data lineage view styles */ | |
| .lineage-container { | |
| padding: 1.5rem; | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .lineage-filters { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .lineage-filters select { | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| border: 1px solid #d1d5db; | |
| background-color: white; | |
| min-width: 200px; | |
| } | |
| .lineage-graph { | |
| height: 600px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| } | |
| /* Template card styles */ | |
| .template-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| background-color: white; | |
| transition: all 0.3s ease; | |
| margin-bottom: 1rem; | |
| } | |
| .template-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .template-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.75rem; | |
| border-bottom: 1px solid #e5e7eb; | |
| padding-bottom: 0.75rem; | |
| } | |
| .template-header h3 { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: #1e3a8a; | |
| margin: 0; | |
| } | |
| .template-badge { | |
| background-color: #eff6ff; | |
| color: #1e40af; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| } | |
| .template-description { | |
| font-size: 0.875rem; | |
| color: #4b5563; | |
| margin-bottom: 0.75rem; | |
| } | |
| .template-sections { | |
| background-color: #f9fafb; | |
| border-radius: 0.375rem; | |
| padding: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .template-section { | |
| margin-bottom: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 1px dashed #e5e7eb; | |
| } | |
| .template-section:last-child { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .template-section-title { | |
| font-weight: 500; | |
| color: #1f2937; | |
| font-size: 0.875rem; | |
| } | |
| .template-section-description { | |
| font-size: 0.75rem; | |
| color: #6b7280; | |
| margin-top: 0.25rem; | |
| } | |
| .template-metadata { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .template-metadata-item { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.75rem; | |
| color: #6b7280; | |
| padding: 0.25rem 0.5rem; | |
| background-color: #f3f4f6; | |
| border-radius: 0.25rem; | |
| } | |
| .template-metadata-item i { | |
| margin-right: 0.375rem; | |
| color: #4b5563; | |
| } | |
| /* Section lineage specific styles */ | |
| .section-card { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| padding: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| background-color: white; | |
| transition: all 0.2s ease; | |
| } | |
| .section-card:hover { | |
| background-color: #f9fafb; | |
| cursor: pointer; | |
| } | |
| .section-card-title { | |
| font-weight: 600; | |
| color: #1e40af; | |
| margin-bottom: 0.25rem; | |
| } | |
| .section-card-document { | |
| font-size: 0.75rem; | |
| color: #6b7280; | |
| } | |
| .section-input { | |
| font-size: 0.75rem; | |
| color: #4b5563; | |
| margin-top: 0.25rem; | |
| } | |
| .section-input-name { | |
| font-weight: 500; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .details-tabs { | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| padding-bottom: 0.5rem; | |
| } | |
| .lineage-filters { | |
| flex-direction: column; | |
| } | |
| .lineage-filters select { | |
| width: 100%; | |
| } | |
| .detail-card-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .detail-card-badge { | |
| margin-top: 0.5rem; | |
| } | |
| } |