Spaces:
Runtime error
Runtime error
| /* Arabic Function Calling Leaderboard - RTL Arabic Styles */ | |
| /* Import Arabic fonts */ | |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap'); | |
| /* RTL Support */ | |
| [dir="rtl"], | |
| .rtl { | |
| direction: rtl; | |
| text-align: right; | |
| } | |
| /* Arabic text styling */ | |
| .arabic-text { | |
| font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', 'Arial', sans-serif; | |
| line-height: 1.8; | |
| } | |
| /* Leaderboard header */ | |
| .leaderboard-header { | |
| background: linear-gradient(135deg, #1a5f2a 0%, #2d8f4a 100%); | |
| color: white; | |
| padding: 2rem; | |
| border-radius: 12px; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .leaderboard-header h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .leaderboard-header .subtitle { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| } | |
| /* Table styling */ | |
| .leaderboard-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .leaderboard-table th, | |
| .leaderboard-table td { | |
| padding: 12px 16px; | |
| text-align: center; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .leaderboard-table th { | |
| background-color: #f5f5f5; | |
| font-weight: 600; | |
| color: #333; | |
| } | |
| .leaderboard-table tr:hover { | |
| background-color: #f9f9f9; | |
| } | |
| /* Rank badges */ | |
| .rank-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| font-weight: bold; | |
| } | |
| .rank-1 { | |
| background: linear-gradient(135deg, #ffd700, #ffed4a); | |
| color: #8b6914; | |
| } | |
| .rank-2 { | |
| background: linear-gradient(135deg, #c0c0c0, #e8e8e8); | |
| color: #666; | |
| } | |
| .rank-3 { | |
| background: linear-gradient(135deg, #cd7f32, #daa520); | |
| color: #5c3d1e; | |
| } | |
| .rank-other { | |
| background-color: #f0f0f0; | |
| color: #666; | |
| } | |
| /* Score cells */ | |
| .score-cell { | |
| font-weight: 500; | |
| } | |
| .score-high { | |
| color: #2ca02c; | |
| } | |
| .score-medium { | |
| color: #1f77b4; | |
| } | |
| .score-low { | |
| color: #ff7f0e; | |
| } | |
| .score-very-low { | |
| color: #d62728; | |
| } | |
| /* Model name styling */ | |
| .model-name { | |
| font-weight: 600; | |
| color: #1a5f2a; | |
| } | |
| /* Category tabs */ | |
| .category-tabs { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-bottom: 1rem; | |
| } | |
| .category-tab { | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| background-color: #f0f0f0; | |
| color: #666; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .category-tab:hover { | |
| background-color: #e0e0e0; | |
| } | |
| .category-tab.active { | |
| background-color: #1a5f2a; | |
| color: white; | |
| } | |
| /* Cards */ | |
| .stat-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| text-align: center; | |
| } | |
| .stat-card .value { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: #1a5f2a; | |
| } | |
| .stat-card .label { | |
| font-size: 0.9rem; | |
| color: #666; | |
| margin-top: 0.5rem; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| /* Language toggle */ | |
| .lang-toggle { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: flex-end; | |
| margin-bottom: 1rem; | |
| } | |
| .lang-btn { | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| border: 1px solid #ddd; | |
| background: white; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .lang-btn.active { | |
| background-color: #1a5f2a; | |
| color: white; | |
| border-color: #1a5f2a; | |
| } | |
| /* Submission form */ | |
| .submission-form { | |
| background: #f9f9f9; | |
| border-radius: 12px; | |
| padding: 2rem; | |
| } | |
| .submission-form h2 { | |
| margin-bottom: 1.5rem; | |
| color: #333; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .form-field { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-field label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .form-field input, | |
| .form-field select { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| } | |
| .submit-btn { | |
| background: linear-gradient(135deg, #1a5f2a 0%, #2d8f4a 100%); | |
| color: white; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.2s ease; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| } | |
| /* About section */ | |
| .about-section { | |
| line-height: 1.8; | |
| font-family: 'Noto Kufi Arabic', sans-serif; | |
| } | |
| .about-section h2 { | |
| color: #1a5f2a; | |
| margin-top: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .about-section ul { | |
| padding-right: 2rem; | |
| } | |
| .about-section li { | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .leaderboard-header h1 { | |
| font-size: 1.5rem; | |
| } | |
| .leaderboard-table { | |
| font-size: 0.85rem; | |
| } | |
| .leaderboard-table th, | |
| .leaderboard-table td { | |
| padding: 8px 10px; | |
| } | |
| .stat-card .value { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* Dark mode support */ | |
| @media (prefers-color-scheme: dark) { | |
| .leaderboard-table th { | |
| background-color: #2a2a2a; | |
| color: #e0e0e0; | |
| } | |
| .leaderboard-table td { | |
| border-color: #3a3a3a; | |
| } | |
| .leaderboard-table tr:hover { | |
| background-color: #2a2a2a; | |
| } | |
| .stat-card { | |
| background: #1a1a1a; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.3); | |
| } | |
| .submission-form { | |
| background: #1a1a1a; | |
| } | |
| .category-tab { | |
| background-color: #2a2a2a; | |
| color: #ccc; | |
| } | |
| } | |
| /* Gradio overrides */ | |
| .gradio-container { | |
| font-family: 'Noto Kufi Arabic', 'Arial', sans-serif ; | |
| } | |
| .gradio-container .prose { | |
| font-family: 'Noto Kufi Arabic', 'Arial', sans-serif ; | |
| } | |