LearnFlow-AI / static /style.css
Kyo-Kai's picture
Public Release
7bd8010
.gradio-container {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
font-family: 'Inter', sans-serif;
}
.tab-nav {
background: rgba(51, 65, 85, 0.8) !important;
border-radius: 12px !important;
padding: 4px !important;
}
.tab-nav button {
background: transparent !important;
border: none !important;
color: #94a3b8 !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
.tab-nav button.selected {
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
color: white !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}
/* .panel { THIS CAUSES ISSUES
background: rgba(30, 41, 59, 0.9);
border-radius: 16px;
border: 1px solid rgba(71, 85, 105, 0.3);
backdrop-filter: blur(10px);
} */
.gr-button {
background: linear-gradient(135deg, #059669, #047857) !important;
border: none !important;
border-radius: 8px !important;
color: white !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.gr-button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4) !important;
}
.secondary-btn {
background: linear-gradient(135deg, #475569, #334155) !important;
}
.danger-btn {
background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}
.gr-textbox, .gr-dropdown {
background: rgba(51, 65, 85, 0.6) !important;
border: 1px solid rgba(71, 85, 105, 0.4) !important;
border-radius: 8px !important;
color: white !important;
}
/* Ensure dropdown options appear correctly */
.gr-dropdown {
position: relative !important; /* Ensure dropdown options are positioned relative to this */
}
/* More robust selector for dropdown options, targeting the 'options' class */
.options {
background: rgba(51, 65, 85, 0.95) !important; /* Slightly darker background for options */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}
.gr-file {
background: rgba(51, 65, 85, 0.6) !important;
border: 2px dashed rgba(71, 85, 105, 0.4) !important;
border-radius: 12px !important;
}
/* Existing custom classes, ensure they are compatible or overridden */
.learnflow-button-large {
min-height: 40px !important; /* Increase height */
font-size: 1.2em !important; /* Increase font size */
padding: 15px 30px !important; /* Adjust padding */
}
.learnflow-button-rounded {
border-radius: 20px !important; /* Apply rounded corners */
}
.quiz-section {
background: rgba(51, 65, 85, 0.6) !important;
border-radius: 12px !important;
padding: 20px !important;
margin-bottom: 20px !important;
}
.correct-feedback {
color: #10b981 !important;
font-weight: bold !important;
}
.incorrect-feedback {
color: #dc2626 !important;
font-weight: bold !important;
}