| custom_css = """ | |
| /* General Body and Font Styling */ | |
| body { | |
| color: #333; | |
| background-color: #f0f2f5; | |
| } | |
| /* Header Styling */ | |
| .gradio-container h1 { | |
| color: #0056b3; /* A deep blue for the main title */ | |
| text-align: center; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| font-size: 2.5em; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .gradio-container h2 { | |
| color: #007bff; /* A slightly lighter blue for subtitles */ | |
| text-align: center; | |
| margin-top: 0; | |
| margin-bottom: 30px; | |
| font-weight: 400; | |
| font-size: 1.2em; | |
| } | |
| /* Card-like styling for individual components */ | |
| .gradio-container .gr-box { | |
| background-color: #ffffff; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border: 1px solid #e0e0e0; | |
| } | |
| /* Input Textbox Styling */ | |
| .gradio-container input[type="text"], | |
| .gradio-container textarea { | |
| border: 1px solid #ced4da; | |
| border-radius: 8px; | |
| padding: 12px 15px; | |
| font-size: 1em; | |
| color: #495057; | |
| transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; | |
| } | |
| .gradio-container input[type="text"]:focus, | |
| .gradio-container textarea:focus { | |
| border-color: #007bff; | |
| box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); | |
| outline: none; | |
| } | |
| /* Button Styling */ | |
| .gradio-container button { | |
| background-color: #28a745; /* A vibrant green for action */ | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| padding: 12px 25px; | |
| font-size: 1.1em; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .gradio-container button:hover { | |
| background-color: #218838; /* Darker green on hover */ | |
| transform: translateY(-2px); | |
| } | |
| .gradio-container button:active { | |
| transform: translateY(0); | |
| } | |
| /* Labels for outputs */ | |
| .gradio-container label { | |
| font-weight: 600; | |
| color: #495057; | |
| margin-bottom: 8px; | |
| display: block; /* Ensure labels are on their own line */ | |
| font-size: 1.1em; | |
| } | |
| /* --- Specific Styling for Outputs --- */ | |
| /* 2. Retrieved Constraints Styling */ | |
| .constraints-container { | |
| padding: 15px; | |
| background-color: #f8f9fa; | |
| border-radius: 8px; | |
| border: 1px solid #e9ecef; | |
| font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */ | |
| line-height: 1.6; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .constraint-item { | |
| margin-bottom: 10px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px dashed #e0e0e0; | |
| } | |
| .constraint-item:last-child { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .constraint-title { | |
| font-weight: bold; | |
| color: #004085; /* Darker blue for constraint titles */ | |
| font-size: 1.1em; | |
| } | |
| .constraint-description { | |
| color: #333; | |
| font-size: 1em; | |
| } | |
| /* 7. Best Technology Combinations Found & 9. Final Best Technologies Styling */ | |
| .combinations-outer-container, .final-tech-container { | |
| padding: 15px; | |
| background-color: #f8f9fa; | |
| border-radius: 8px; | |
| border: 1px solid #e9ecef; | |
| max-height: 500px; /* Adjust as needed */ | |
| overflow-y: auto; | |
| font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */ | |
| } | |
| .problem-card { | |
| background-color: #ffffff; | |
| border: 1px solid #cfe2ff; /* Light blue border for problem card */ | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .problem-card-title { | |
| color: #0056b3; /* Deep blue for problem title */ | |
| font-size: 1.4em; | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| border-bottom: 2px solid #cfe2ff; | |
| padding-bottom: 10px; | |
| } | |
| .technologies-inner-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid for technologies */ | |
| gap: 15px; | |
| } | |
| .technology-card, .final-tech-card { | |
| background-color: #f0faff; /* Very light blue for technology cards */ | |
| border: 1px solid #b0d9ff; /* Slightly darker blue border */ | |
| border-radius: 8px; | |
| padding: 15px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.2s ease-in-out; | |
| } | |
| .technology-card:hover, .final-tech-card:hover { | |
| transform: translateY(-3px); | |
| } | |
| .tech-card-title, .final-tech-title { | |
| color: #007bff; /* Gradio's primary blue */ | |
| font-size: 1.2em; | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| font-weight: 600; | |
| } | |
| .technology-card p, .final-tech-card p { | |
| font-size: 0.95em; | |
| line-height: 1.5; | |
| margin-bottom: 5px; | |
| color: #555; | |
| } | |
| .technology-card p strong, .final-tech-card p strong { | |
| color: #004085; /* Darker blue for bold labels */ | |
| } | |
| /* --- Prior Art Section Styling --- */ | |
| .prior-art-container { | |
| background-color: #e6f7ff; /* Very light blue background for distinct section */ | |
| border: 2px solid #99d6ff; /* A clear blue border */ | |
| border-radius: 15px; | |
| padding: 25px; | |
| margin-top: 30px; | |
| box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); | |
| font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; /* Different font */ | |
| color: #2c3e50; /* Darker text for readability */ | |
| line-height: 1.7; | |
| max-height: 800px; /* Constrain height */ | |
| overflow-y: auto; /* Enable scrolling */ | |
| } | |
| .prior-art-container h3, .prior-art-container h4, .prior-art-container h5 { | |
| color: #003366; /* Even darker blue for headings */ | |
| font-weight: 700; | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| } | |
| .prior-art-summary p { | |
| margin-bottom: 10px; | |
| } | |
| .prior-art-summary .summary-bullet { | |
| margin-left: 20px; | |
| margin-bottom: 5px; | |
| } | |
| .prior-art-summary .summary-bullet strong { | |
| color: #0056b3; | |
| } | |
| .prior-art-documents { | |
| margin-top: 25px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .prior-art-document-card { | |
| background-color: #ffffff; | |
| border: 1px solid #b3e0ff; /* Lightest blue for document cards */ | |
| border-radius: 10px; | |
| padding: 20px; | |
| box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.2s ease-in-out; | |
| } | |
| .prior-art-document-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .document-title { | |
| color: #007bff; | |
| font-size: 1.3em; | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid #e0f2ff; | |
| padding-bottom: 8px; | |
| } | |
| .document-description { | |
| font-size: 0.95em; | |
| color: #444; | |
| margin-bottom: 15px; | |
| } | |
| .document-description strong { | |
| color: #004085; | |
| } | |
| .document-technologies h5 { | |
| color: #0056b3; | |
| font-size: 1em; | |
| margin-top: 10px; | |
| margin-bottom: 8px; | |
| border-bottom: 1px dashed #cceeff; | |
| padding-bottom: 5px; | |
| } | |
| .document-technologies ul { | |
| list-style-type: none; /* Remove default bullet points */ | |
| padding-left: 0; | |
| margin-top: 0; | |
| } | |
| .document-technologies li { | |
| background-color: #f5fcff; /* Even lighter background for list items */ | |
| border-left: 3px solid #007bff; | |
| padding: 8px 10px; | |
| margin-bottom: 5px; | |
| border-radius: 4px; | |
| font-size: 0.9em; | |
| color: #333; | |
| } | |
| .document-technologies li strong { | |
| color: #003366; | |
| } | |
| /* Disruptive line */ | |
| .disruptive-line { | |
| border: none; | |
| border-top: 3px dashed #007bff; /* Blue dashed line */ | |
| margin: 40px auto; | |
| width: 80%; | |
| opacity: 0.7; | |
| } | |
| /* Prior Art Inline Links (e.g., [1]) */ | |
| .prior-art-inline-link { | |
| color: #007bff; /* Blue for clickable numbers */ | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: color 0.2s ease-in-out; | |
| } | |
| .prior-art-inline-link:hover { | |
| color: #0056b3; | |
| text-decoration: underline; | |
| } | |
| /* Grouped URI Links at the end */ | |
| .grouped-uris-section { | |
| margin-top: 30px; | |
| padding-top: 20px; | |
| border-top: 1px solid #cceeff; | |
| } | |
| .grouped-uris-section h3 { | |
| text-align: center; | |
| color: #0056b3; | |
| } | |
| .grouped-uris-section ul { | |
| list-style-type: decimal; /* Numbered list */ | |
| padding-left: 25px; | |
| margin-top: 15px; | |
| } | |
| .grouped-uris-section li { | |
| margin-bottom: 8px; | |
| } | |
| .prior-art-grouped-link { | |
| color: #007bff; | |
| text-decoration: none; | |
| transition: text-decoration 0.2s ease-in-out; | |
| } | |
| .prior-art-grouped-link:hover { | |
| text-decoration: underline; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .gradio-container { | |
| padding: 15px; | |
| } | |
| .gradio-container h1 { | |
| font-size: 2em; | |
| } | |
| .gradio-container button { | |
| width: 100%; | |
| padding: 15px; | |
| } | |
| .technologies-inner-container, .prior-art-documents { | |
| grid-template-columns: 1fr; /* Stack columns on smaller screens */ | |
| } | |
| } | |
| """ |