Course Assistant
Ask questions about course materials and get AI-powered answers.
Welcome to Ontology Generation Assistant
/* Global styles for Gradio interface */
:root {
--ai-primary: #8a2be2;
--ai-secondary: #4b0082;
--ai-accent: #00ffc3;
--ai-dark: #0c0521;
--ai-light: #ffffff;
--ai-glow: 0 0 10px rgba(138, 43, 226, 0.7);
}
/* Apply futuristic sci-fi fonts */
body * {
font-family: 'Orbitron', 'Raleway', sans-serif !important;
}
/* Overall container styling */
.gradio-container, .wrap, .contain, .gap {
background: linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.9), rgba(36, 36, 62, 0.95)) !important;
border: none !important;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5) !important;
}
/* Header elements */
h1, h2, h3, h4 {
color: var(--ai-light) !important;
text-shadow: var(--ai-glow) !important;
letter-spacing: 1.5px !important;
font-weight: 500 !important;
}
/* Markdown areas - make them pop */
.prose {
color: var(--ai-light) !important;
background: rgba(15, 12, 41, 0.4) !important;
border-radius: 10px !important;
padding: 15px !important;
border-left: 2px solid var(--ai-accent) !important;
}
/* All buttons with futuristic design */
button, .button-primary {
background: linear-gradient(135deg, var(--ai-primary), var(--ai-secondary)) !important;
border: none !important;
border-radius: 5px !important;
color: var(--ai-light) !important;
box-shadow: var(--ai-glow) !important;
transition: all 0.3s ease !important;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
position: relative !important;
overflow: hidden !important;
}
/* Button hover effects */
button:hover, .button-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 0 15px rgba(138, 43, 226, 0.9) !important;
}
/* Button active/click effect */
button:active, .button-primary:active {
transform: translateY(1px) !important;
}
/* Tabs with glowing borders */
.tabs {
background: rgba(15, 12, 41, 0.4) !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.tab-nav {
border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
background: rgba(0, 0, 0, 0.3) !important;
}
.tab-item {
color: var(--ai-light) !important;
opacity: 0.7 !important;
transition: all 0.3s ease !important;
}
.tab-item.selected {
color: var(--ai-light) !important;
opacity: 1 !important;
border-bottom: 2px solid var(--ai-accent) !important;
font-weight: bold !important;
text-shadow: var(--ai-glow) !important;
}
/* Special arrow send button */
.submit-btn {
border-radius: 50% !important;
padding: 8px !important;
min-width: auto !important;
width: 45px !important;
height: 45px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, var(--ai-primary), var(--ai-secondary)) !important;
box-shadow: 0 0 15px rgba(138, 43, 226, 0.5) !important;
position: relative !important;
overflow: hidden !important;
}
.submit-btn::before {
content: "โ" !important;
font-size: 24px !important;
margin: 0 !important;
color: white !important;
z-index: 2 !important;
position: relative !important;
}
.submit-btn::after {
content: "" !important;
position: absolute !important;
top: -10px !important;
left: -10px !important;
width: 0 !important;
height: 0 !important;
background: linear-gradient(135deg, var(--ai-accent), transparent) !important;
border-radius: 50% !important;
transition: all 0.5s ease !important;
opacity: 0 !important;
}
.submit-btn:hover::after {
width: 150% !important;
height: 150% !important;
opacity: 0.3 !important;
}
.submit-btn span {
display: none !important;
}
/* Message styling for chat interface */
.messages {
background: rgba(15, 12, 41, 0.6) !important;
border-radius: 10px !important;
border: 1px solid rgba(138, 43, 226, 0.2) !important;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
}
.message {
border-radius: 10px !important;
margin: 10px !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
position: relative !important;
overflow: hidden !important;
}
/* User message with cool glow effect */
.user-message {
background: rgba(138, 43, 226, 0.15) !important;
border-left: 3px solid var(--ai-primary) !important;
}
.user-message::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(45deg, rgba(138, 43, 226, 0.1), transparent) !important;
pointer-events: none !important;
}
/* Assistant message with different glow */
.assistant-message {
background: rgba(75, 0, 130, 0.15) !important;
border-right: 3px solid var(--ai-secondary) !important;
}
.assistant-message::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(-45deg, rgba(0, 255, 195, 0.05), transparent) !important;
pointer-events: none !important;
}
/* Input fields styling */
input, textarea, select, .input {
background: rgba(15, 12, 41, 0.3) !important;
border: 1px solid rgba(138, 43, 226, 0.3) !important;
border-radius: 8px !important;
color: var(--ai-light) !important;
padding: 12px !important;
transition: all 0.3s ease !important;
}
input:focus, textarea:focus, select:focus, .input:focus {
border: 1px solid var(--ai-primary) !important;
box-shadow: 0 0 10px rgba(138, 43, 226, 0.5) !important;
outline: none !important;
background: rgba(15, 12, 41, 0.5) !important;
}
/* Labels and other text elements */
label, p, span, div {
color: var(--ai-light) !important;
}
/* Textbox with placeholder animation */
.textbox:focus-within label {
color: var(--ai-accent) !important;
transform: translateY(-2px) !important;
}
/* Progress bars and sliders */
progress, .progress, .slider-track {
background: rgba(15, 12, 41, 0.4) !important;
border-radius: 50px !important;
height: 8px !important;
border: none !important;
}
progress::-webkit-progress-value, .progress-bar, .slider-track-fill {
background: linear-gradient(90deg, var(--ai-primary), var(--ai-accent)) !important;
border-radius: 50px !important;
}
.slider-handle {
background: var(--ai-primary) !important;
border: 2px solid var(--ai-light) !important;
box-shadow: 0 0 10px rgba(138, 43, 226, 0.5) !important;
}
/* Chatbot typing animation */
@keyframes typing-dot {
0%, 100% {
opacity: 0.3;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-2px);
}
}
.typing-animation span {
display: inline-block !important;
width: 8px !important;
height: 8px !important;
background: var(--ai-accent) !important;
border-radius: 50% !important;
margin: 0 2px !important;
animation: typing-dot 1s infinite !important;
}
.typing-animation span:nth-child(2) {
animation-delay: 0.2s !important;
}
.typing-animation span:nth-child(3) {
animation-delay: 0.4s !important;
}
/* Code blocks styling */
pre, code {
background: rgba(0, 0, 0, 0.3) !important;
border-radius: 8px !important;
border: 1px solid rgba(0, 255, 195, 0.2) !important;
color: var(--ai-accent) !important;
font-family: monospace !important;
padding: 10px !important;
}
/* Scrollbars styling */
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-track {
background: rgba(15, 12, 41, 0.2) !important;
border-radius: 10px !important;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--ai-primary), var(--ai-secondary)) !important;
border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(var(--ai-primary), var(--ai-accent)) !important;
}