Spaces:
Running
Running
/* Global styles */ | |
body { | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; | |
color: #333; | |
background-color: #f7f9fc; | |
} | |
/* Heading styles */ | |
h1 { | |
color: #2c3e50; | |
font-weight: 700; | |
margin-bottom: 1rem; | |
} | |
h2, h3, h4 { | |
color: #3498db; | |
font-weight: 600; | |
} | |
/* Button styles */ | |
button.primary { | |
background: linear-gradient(135deg, #3498db, #2980b9); | |
border: none; | |
box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3); | |
} | |
button.secondary { | |
background: #ecf0f1; | |
color: #2980b9; | |
border: 1px solid #bdc3c7; | |
} | |
button:hover { | |
transform: translateY(-2px); | |
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); | |
transition: all 0.3s ease; | |
} | |
/* Input fields enhancement */ | |
input, textarea, select { | |
border: 1px solid #ddd; | |
border-radius: 8px; | |
padding: 10px; | |
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); | |
transition: all 0.3s ease; | |
} | |
input:focus, textarea:focus, select:focus { | |
border-color: #3498db; | |
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25); | |
} | |
/* Tab styles */ | |
.tabs { | |
border-bottom: 2px solid #e0e0e0; | |
} | |
.tab-selected { | |
color: #3498db; | |
border-bottom: 2px solid #3498db; | |
} | |
/* Concept card styles */ | |
.concept-card { | |
transition: all 0.3s ease; | |
border: 1px solid #e0e0e0; | |
border-radius: 12px; | |
padding: 16px; | |
margin-bottom: 16px; | |
cursor: pointer; | |
background-color: #fff; | |
box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
} | |
.concept-card:hover { | |
box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
transform: translateY(-3px); | |
border-color: #bdc3c7; | |
} | |
.selected-card { | |
border-color: #3498db; | |
background-color: rgba(52, 152, 219, 0.05); | |
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3); | |
} | |
.concept-title { | |
font-weight: bold; | |
margin-bottom: 8px; | |
color: #2c3e50; | |
font-size: 1.1em; | |
} | |
.concept-desc { | |
font-size: 0.95em; | |
color: #7f8c8d; | |
line-height: 1.5; | |
} | |
/* Knowledge graph styles */ | |
#concept-graph { | |
background-color: #fff; | |
border-radius: 12px; | |
padding: 16px; | |
box-shadow: 0 2px 10px rgba(0,0,0,0.05); | |
} | |
#concept-graph img { | |
max-width: 100%; | |
height: auto; | |
border-radius: 8px; | |
box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
transition: all 0.3s ease; | |
} | |
#concept-graph img:hover { | |
box-shadow: 0 8px 25px rgba(0,0,0,0.15); | |
} | |
/* Example box styles */ | |
.example-box { | |
background-color: #f1f8fe; | |
border-left: 4px solid #3498db; | |
padding: 15px; | |
margin: 15px 0; | |
border-radius: 0 8px 8px 0; | |
} | |
.example-box h4 { | |
margin-top: 0; | |
color: #2980b9; | |
} | |
/* Resource item styles */ | |
.resource-item { | |
padding: 12px; | |
margin: 10px 0; | |
border-bottom: 1px dashed #e0e0e0; | |
transition: all 0.2s ease; | |
} | |
.resource-item:hover { | |
background-color: #f9f9f9; | |
} | |
/* Details and answers styles */ | |
details { | |
margin: 10px 0; | |
padding: 10px; | |
border: 1px solid #e0e0e0; | |
border-radius: 8px; | |
background-color: #f9f9f9; | |
} | |
summary { | |
cursor: pointer; | |
color: #3498db; | |
font-weight: 600; | |
padding: 5px; | |
} | |
summary:hover { | |
color: #2980b9; | |
} | |
/* Layout container styles */ | |
.container { | |
background-color: #fff; | |
border-radius: 12px; | |
padding: 20px; | |
box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
margin-bottom: 20px; | |
} | |
/* Responsive adjustments */ | |
@media (max-width: 768px) { | |
.concept-card { | |
padding: 12px; | |
} | |
.example-box { | |
padding: 12px; | |
} | |
} | |
/* Answer box styles */ | |
.answer-box { | |
background-color: #f8f9fa; | |
border-radius: 12px; | |
padding: 20px; | |
margin: 15px 0; | |
border: 1px solid #e9ecef; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
} | |
.answer-content { | |
margin-bottom: 15px; | |
line-height: 1.6; | |
color: #2c3e50; | |
} | |
.answer-content h4 { | |
color: #3498db; | |
margin-top: 0; | |
margin-bottom: 10px; | |
} | |
.main-concept { | |
background-color: #e3f2fd; | |
padding: 10px 15px; | |
border-radius: 8px; | |
color: #1976d2; | |
font-size: 0.95em; | |
} | |
.main-concept strong { | |
color: #1565c0; | |
} | |
/* Answer section styles */ | |
.answer-section { | |
margin-top: 20px; | |
background: white; | |
border-radius: 15px; | |
padding: 20px; | |
} | |
.answer-box { | |
background-color: #f8f9fa; | |
border-radius: 12px; | |
padding: 20px; | |
margin: 15px 0; | |
border: 1px solid #e9ecef; | |
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |
transition: all 0.3s ease; | |
} | |
.answer-box:hover { | |
box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
} | |
.answer-content { | |
margin-bottom: 15px; | |
line-height: 1.6; | |
color: #2c3e50; | |
font-size: 1.1em; | |
} | |
.main-concept { | |
background-color: #e3f2fd; | |
padding: 12px 16px; | |
border-radius: 8px; | |
color: #1976d2; | |
font-size: 0.95em; | |
margin-top: 15px; | |
border: 1px solid rgba(25, 118, 210, 0.1); | |
} | |
.main-concept strong { | |
color: #1565c0; | |
font-weight: 600; | |
} | |
/* Loading animation styles */ | |
.loading { | |
padding: 20px; | |
text-align: center; | |
color: #666; | |
font-size: 1.1em; | |
position: relative; | |
} | |
.loading:after { | |
content: '...'; | |
position: absolute; | |
animation: dots 1.5s steps(5, end) infinite; | |
} | |
@keyframes dots { | |
0%, 20% { content: '.'; } | |
40% { content: '..'; } | |
60% { content: '...'; } | |
80%, 100% { content: ''; } | |
} | |
.loading::before { | |
content: ''; | |
display: block; | |
width: 30px; | |
height: 30px; | |
border: 3px solid #3498db; | |
border-top-color: transparent; | |
border-radius: 50%; | |
margin: 0 auto 10px; | |
animation: spin 1s linear infinite; | |
} | |
@keyframes spin { | |
to { transform: rotate(360deg); } | |
} | |
/* 概念详解面板样式 */ | |
.concept-explanation { | |
padding: 20px; | |
background: white; | |
border-radius: 12px; | |
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
} | |
.explanation-content { | |
line-height: 1.6; | |
margin: 15px 0; | |
color: #2c3e50; | |
} | |
.examples-section { | |
margin-top: 20px; | |
} | |
.example-box { | |
background: #f8f9fa; | |
border-left: 4px solid #3498db; | |
padding: 15px; | |
margin: 15px 0; | |
border-radius: 0 8px 8px 0; | |
} | |
.example-problem { | |
margin-bottom: 10px; | |
color: #2c3e50; | |
} | |
.example-solution { | |
color: #34495e; | |
padding: 10px; | |
background: rgba(52, 152, 219, 0.05); | |
border-radius: 4px; | |
} | |
/* 加载动画样式 */ | |
.loading { | |
text-align: center; | |
padding: 20px; | |
} | |
.loading-spinner { | |
border: 3px solid #f3f3f3; | |
border-top: 3px solid #3498db; | |
border-radius: 50%; | |
width: 30px; | |
height: 30px; | |
animation: spin 1s linear infinite; | |
margin: 0 auto 10px; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
.loading-text { | |
color: #666; | |
font-size: 0.9em; | |
} | |
/* 新增的样式 */ | |
.concept-explanation-container { | |
margin-top: 20px; | |
padding: 15px; | |
background: white; | |
border-radius: 12px; | |
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
transition: all 0.3s ease; | |
max-height: 600px; /* 固定最大高度 */ | |
overflow-y: auto; /* 添加垂直滚动条 */ | |
/* 自定义滚动条样式 */ | |
scrollbar-width: thin; | |
scrollbar-color: #3498db #f1f1f1; | |
} | |
/* Webkit浏览器的滚动条样式 */ | |
.concept-explanation-container::-webkit-scrollbar { | |
width: 8px; | |
} | |
.concept-explanation-container::-webkit-scrollbar-track { | |
background: #f1f1f1; | |
border-radius: 4px; | |
} | |
.concept-explanation-container::-webkit-scrollbar-thumb { | |
background: #3498db; | |
border-radius: 4px; | |
} | |
.concept-explanation-container::-webkit-scrollbar-thumb:hover { | |
background: #2980b9; | |
} | |
.concept-explanation-container h3 { | |
color: #2c3e50; | |
margin-bottom: 15px; | |
position: sticky; | |
top: 0; | |
background: white; | |
padding: 10px 0; | |
z-index: 1; | |
} | |
/* 内容区域样式 */ | |
.card-explanation { | |
padding: 20px; | |
background: white; | |
border-radius: 12px; | |
} | |
.explanation-section, .key-points-section, .examples-section, | |
.practice-section, .resources-section { | |
margin-top: 20px; | |
padding: 15px; | |
background: #f8f9fa; | |
border-radius: 8px; | |
} | |
.explanation-section h4, .key-points-section h4, | |
.examples-section h4, .practice-section h4, | |
.resources-section h4 { | |
color: #2c3e50; | |
margin-bottom: 10px; | |
} | |
/* 修改generate_card_explanation函数中的标题文本 */ | |
.explanation-section h4:before { content: "📚 Concept Explanation"; } | |
.key-points-section h4:before { content: "🎯 Key Points"; } | |
.examples-section h4:before { content: "📝 Example Analysis"; } | |
.practice-section h4:before { content: "✍️ Practice Problems"; } | |
.resources-section h4:before { content: "📚 Learning Resources"; } | |
/* 加载动画容器 */ | |
.loading-container { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
padding: 40px; | |
background: white; | |
border-radius: 12px; | |
box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
} | |
/* 加载动画旋转器 */ | |
.loading-spinner { | |
width: 50px; | |
height: 50px; | |
border: 4px solid #f3f3f3; | |
border-top: 4px solid #3498db; | |
border-radius: 50%; | |
animation: spin 1s linear infinite; | |
margin-bottom: 20px; | |
} | |
/* 加载文本 */ | |
.loading-text { | |
color: #666; | |
font-size: 1.1em; | |
margin-top: 10px; | |
} | |
/* 旋转动画 */ | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} |