| """ | |
| CSS and styling for the GuardBench Leaderboard. | |
| """ | |
| custom_css = """ | |
| .markdown-text { | |
| font-size: 16px !important; | |
| text-align: justify !important; | |
| } | |
| .tab-buttons button.selected { | |
| border-color: #2196F3 !important; | |
| background: #E3F2FD !important; | |
| color: #2196F3 !important; | |
| } | |
| #citation-button textarea { | |
| font-family: monospace !important; | |
| } | |
| .leaderboard-container { | |
| margin-top: 20px; | |
| } | |
| .category-header { | |
| font-weight: bold; | |
| background-color: #f5f5f5; | |
| padding: 10px; | |
| margin-top: 15px; | |
| border-radius: 5px; | |
| } | |
| .metric-name { | |
| font-weight: bold; | |
| color: #2196F3; | |
| } | |
| .model-name { | |
| font-weight: bold; | |
| } | |
| .model-link:hover { | |
| text-decoration: underline; | |
| color: #1976D2; | |
| } | |
| .version-selector { | |
| margin: 0 !important; | |
| padding: 5px; | |
| border-radius: 5px; | |
| } | |
| .version-selector label { | |
| font-weight: bold; | |
| color: #2196F3; | |
| } | |
| .version-selector select { | |
| border-color: #2196F3; | |
| border-radius: 4px; | |
| } | |
| /* Make sure the version selector is properly aligned with refresh button */ | |
| .version-selector > .block { | |
| padding: 0 !important; | |
| } | |
| .version-selector > .block > .wrap { | |
| position: relative; | |
| top: -5px; | |
| } | |
| """ | |