root/kidsai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve readability and contrast in answer reveal section

Browse Source 
- Replace purple gradient with white background for better text readability
- Add proper contrast for answer content with black text on white background
- Improve reveal button design with better color contrast
- Add visual hierarchy with proper spacing and typography
- Make answer text more readable with gray background sections
- Add subtle shadows and borders for better visual separation
- Ensure all text meets accessibility standards for readability
This commit is contained in:
root
2025-06-29 16:40:19 +02:00
parent c065dcfb33
commit ad5d9b9192
1 changed files with 101 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
html/kidsai/style.css
View File

@@ -1207,14 +1207,15 @@ body {
/* Make reveal section part of the chat flow */ /* Make reveal section part of the chat flow */
.reveal-section { .reveal-section {
margin-top: 30px; margin-top: 30px;
padding: 20px; padding: 25px;
background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #4299e1, #3182ce);
border-radius: 20px; border-radius: 20px;
color: white; color: white;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
transition: all 0.5s ease-out; transition: all 0.5s ease-out;
box-shadow: 0 5px 20px rgba(66, 153, 225, 0.3);
} }
.reveal-section.visible { .reveal-section.visible {
@@ -1224,24 +1225,112 @@ body {
.reveal-prompt p { .reveal-prompt p {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.1em; font-size: 1.2em;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
.reveal-btn { .reveal-btn {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.9);
color: white; color: #3182ce;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 25px; border-radius: 25px;
padding: 12px 25px; padding: 15px 30px;
font-size: 1em; font-size: 1.1em;
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
backdrop-filter: blur(10px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
display: inline-flex;
align-items: center;
gap: 8px;
} }
.reveal-btn:hover { .reveal-btn:hover {
background: rgba(255, 255, 255, 0.3); background: white;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
/* Final Answer Styles - Better Readability */
.final-answer {
background: white;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
}
.final-answer .answer-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f7fafc;
flex-wrap: wrap;
}
.final-answer .answer-icon {
font-size: 1.8rem;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
padding: 8px;
border-radius: 10px;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.final-answer h4 {
color: #1a202c;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
flex: 1;
}
.final-answer .answer-source {
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.final-answer .answer-text {
color: #2d3748;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 20px;
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #48bb78;
}
.final-answer .answer-footer {
background: linear-gradient(135deg, #e6fffa, #b2f5ea);
border-radius: 10px;
padding: 15px 20px;
text-align: center;
}
.final-answer .answer-footer p {
color: #234e52;
font-weight: 600;
margin: 0;
font-size: 1.1rem;
}
/* Fallback answer styles */
.final-answer.fallback {
background: linear-gradient(135deg, #fed7d7, #feb2b2);
border-left-color: #e53e3e;
}
.final-answer.fallback .answer-text {
background: rgba(255, 255, 255, 0.8);
border-left-color: #e53e3e;
} }