Add result_visualization/css/components.css

2026-01-26 12:23:42 +00:00 · 2026-01-26 12:23:42 +00:00 · d912ca8a6e
commit d912ca8a6e
parent 7452b093de
1 changed files with 152 additions and 0 deletions
--- a/result_visualization/css/components.css
+++ b/result_visualization/css/components.css
@ -0,0 +1,152 @@
+:root {
+  --primary: #2b6cb0;
+  --secondary: #4a5568;
+  --background: #f7fafc;
+  --card-bg: #ffffff;
+  --border-color: #e2e8f0;
+  --text-color: #1a202c;
+  --text-muted: #718096;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --border-radius: 0.5rem;
+  --transition-fast: 0.15s ease-in-out;
+  --font-base: 'system-ui', sans-serif;
+}
+
+/* ===============================================
+   Filter Panel Styles
+   =============================================== */
+.filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  min-width: 160px;
+}
+
+.filter-item label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.filter-item select,
+.filter-item input {
+  padding: var(--spacing-sm);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background);
+  font-family: var(--font-base);
+  color: var(--text-color);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.filter-item select:focus,
+.filter-item input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.2);
+  outline: none;
+}
+
+.run-selector {
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.run-selector:hover,
+.run-selector:focus {
+  background-color: rgba(43, 108, 176, 0.05);
+  border-color: var(--primary);
+}
+
+/* ===============================================
+   Chart Panel Styles
+   =============================================== */
+.chart-panel {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.results-chart {
+  width: 100%;
+  height: 400px;
+  display: block;
+  border-radius: var(--border-radius);
+  background-color: var(--background);
+  overflow: hidden;
+}
+
+.results-chart canvas,
+.results-chart svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ===============================================
+   Statistics Cards
+   =============================================== */
+.overview-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-lg);
+}
+
+.stat-card {
+  background-color: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.stat-card p {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+@media (min-width: 640px) {
+  .results-chart {
+    height: 500px;
+  }
+  .filter-panel {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (min-width: 1024px) {
+  .results-chart {
+    height: 600px;
+  }
+}