styles.css•10 kB
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #f8f9fa;
color: #212529;
line-height: 1.6;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
background: white;
padding: 30px;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
h1 {
font-size: 28px;
font-weight: 600;
color: #212529;
}
h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
color: #212529;
}
.file-inputs {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.file-input-wrapper {
position: relative;
}
.file-label {
display: inline-block;
padding: 10px 20px;
background-color: #FFA500;
color: white;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.file-label:hover {
background-color: #ff8c00;
}
.file-label-secondary {
background-color: #6c757d;
}
.file-label-secondary:hover {
background-color: #5a6268;
}
#jsonFile, #benchmarkFile {
position: absolute;
left: -9999px;
}
.error-message {
background-color: #fee;
border: 1px solid #fcc;
color: #c33;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}
.warning-message {
background-color: #fff3cd;
border: 1px solid #ffc107;
color: #856404;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}
.warning-message code {
background-color: rgba(0, 0, 0, 0.1);
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
font-size: 0.9em;
}
.benchmark-summary {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
padding: 12px 15px;
border-radius: 6px;
margin-bottom: 20px;
font-size: 14px;
}
.metrics-section {
background: white;
padding: 30px;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.config-info {
display: flex;
gap: 30px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #e9ecef;
flex-wrap: wrap;
}
.config-item {
display: flex;
gap: 8px;
}
.config-item-small {
margin-left: auto;
font-size: 0.875rem;
color: #6c757d;
}
.config-item .label {
font-weight: 600;
color: #6c757d;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.metric-card {
background: #f8f9fa;
padding: 20px;
border-radius: 6px;
border-left: 4px solid #FFA500;
}
.metric-label {
font-size: 13px;
color: #6c757d;
font-weight: 500;
margin-bottom: 8px;
}
.metric-value {
font-size: 24px;
font-weight: 600;
color: #212529;
}
.metric-delta {
font-size: 14px;
font-weight: 500;
padding: 3px 8px;
border-radius: 4px;
display: inline-block;
}
.delta-positive {
background-color: #d4edda;
color: #155724;
}
.delta-negative {
background-color: #f8d7da;
color: #721c24;
}
.delta-neutral {
background-color: #e2e3e5;
color: #383d41;
}
.tools-section {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tool-item {
border: 1px solid #dee2e6;
border-radius: 6px;
margin-bottom: 12px;
overflow: hidden;
}
.tool-header {
padding: 16px 20px;
cursor: pointer;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s;
}
.tool-header:hover {
background-color: #f8f9fa;
}
.tool-header.expanded {
background-color: #fff5e6;
border-bottom: 1px solid #dee2e6;
}
.tool-info {
flex: 1;
}
.tool-name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.tool-name {
font-weight: 600;
font-size: 15px;
color: #212529;
}
.status-change-badge {
font-size: 11px;
font-weight: 500;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
}
.status-change-regression {
background-color: #f8d7da;
color: #721c24;
}
.status-change-improvement {
background-color: #d4edda;
color: #155724;
}
.tool-id {
font-size: 12px;
color: #6c757d;
font-family: 'Monaco', 'Courier New', monospace;
}
.status-indicators {
display: flex;
gap: 20px;
align-items: center;
}
.mode-status {
display: flex;
flex-direction: column;
gap: 4px;
}
.mode-label {
font-size: 11px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
}
.status-badges {
display: flex;
gap: 6px;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
min-width: 115px;
}
.badge-success {
background-color: #d4edda;
color: #155724;
}
.badge-failure {
background-color: #f8d7da;
color: #721c24;
}
.badge-partial {
background-color: #fff3cd;
color: #856404;
}
.badge-neutral {
background-color: #e9ecef;
color: #6c757d;
}
.tool-content {
display: none;
padding: 20px;
background-color: #f8f9fa;
}
.tool-content.expanded {
display: block;
}
.mode-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #dee2e6;
}
.tab {
padding: 10px 20px;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-weight: 500;
color: #6c757d;
transition: all 0.2s;
}
.tab:hover {
color: #FFA500;
}
.tab.active {
color: #FFA500;
border-bottom-color: #FFA500;
}
.no-attempts-message {
padding: 40px 20px;
text-align: center;
color: #6c757d;
font-style: italic;
background: white;
border: 1px dashed #dee2e6;
border-radius: 6px;
}
.attempt-card {
background: white;
border-radius: 6px;
margin-bottom: 15px;
border: 1px solid #dee2e6;
overflow: hidden;
}
.attempt-card-header {
padding: 12px 16px;
background: #f8f9fa;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.2s;
}
.attempt-card-header:hover {
background: #e9ecef;
}
.attempt-title {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.attempt-mode {
font-weight: 600;
font-size: 14px;
color: #212529;
}
.attempt-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.expand-icon-small {
font-size: 12px;
color: #6c757d;
transition: transform 0.2s;
}
.attempt-body {
padding: 20px;
}
.attempt-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.attempt-times {
display: flex;
gap: 20px;
font-size: 13px;
color: #6c757d;
}
.time-item {
display: flex;
gap: 4px;
}
.time-label {
font-weight: 500;
}
.attempt-status {
display: flex;
gap: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.status-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.status-item-label {
font-size: 11px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
}
.status-item-value {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.error-section {
background: #fff5f5;
border: 1px solid #fcc;
padding: 12px;
border-radius: 4px;
margin-bottom: 15px;
}
.error-title {
font-weight: 600;
color: #c33;
margin-bottom: 6px;
font-size: 13px;
}
.error-content {
font-family: 'Monaco', 'Courier New', monospace;
font-size: 12px;
color: #721c24;
white-space: pre-wrap;
word-break: break-word;
}
.llm-section {
background: #fff8e6;
border: 1px solid #FFD699;
padding: 12px;
border-radius: 4px;
margin-bottom: 15px;
}
.llm-title {
font-weight: 600;
color: #FFA500;
margin-bottom: 6px;
font-size: 13px;
}
.llm-judgment {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 8px;
}
.llm-reason {
font-size: 13px;
color: #495057;
font-style: italic;
}
.data-section {
margin-top: 15px;
}
.data-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.data-title {
font-weight: 600;
font-size: 14px;
color: #212529;
}
.copy-button {
padding: 6px 12px;
background-color: #FFA500;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: background-color 0.2s;
}
.copy-button:hover {
background-color: #ff8c00;
}
.json-viewer {
background: #f8f9fa;
border: 1px solid #dee2e6;
padding: 15px;
border-radius: 4px;
font-family: 'Monaco', 'Courier New', monospace;
font-size: 12px;
overflow-x: auto;
max-height: 400px;
overflow-y: auto;
}
.json-viewer pre {
margin: 0;
}
.no-attempts {
padding: 20px;
text-align: center;
color: #6c757d;
font-style: italic;
}
.expand-icon {
font-size: 14px;
color: #6c757d;
transition: transform 0.2s;
}
.tool-header.expanded .expand-icon {
transform: rotate(90deg);
}
.instruction-box {
background: #f0f0f0;
border-left: 3px solid #6c757d;
padding: 10px 12px;
margin-bottom: 12px;
font-size: 13px;
color: #495057;
border-radius: 4px;
}
.description-box {
background: #e7f3ff;
border-left: 3px solid #0066cc;
padding: 10px 12px;
margin-bottom: 15px;
font-size: 13px;
color: #495057;
border-radius: 4px;
}