Add max_outlier_visualization/css/components.css

2026-03-11 12:43:08 +00:00 · 2026-03-11 12:43:08 +00:00 · c1f30c9b13
commit c1f30c9b13
parent 9629d2e696
1 changed files with 143 additions and 0 deletions
--- a/max_outlier_visualization/css/components.css
+++ b/max_outlier_visualization/css/components.css
@ -0,0 +1,143 @@
+:root {
+  --primary-color: #2a78e4;
+  --secondary-color: #e8eef6;
+  --text-color: #222;
+  --text-muted: #666;
+  --border-color: #d4dce6;
+  --background-light: #f9f9fb;
+  --font-base: 'Arial', sans-serif;
+  --font-size-base: 1rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+}
+
+/* --------------------------------------------- */
+/* Filter Bar Styles */
+/* --------------------------------------------- */
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background-color: var(--background-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  margin-bottom: var(--spacing-md);
+}
+
+.filter-bar select,
+.filter-bar input,
+.filter-bar button {
+  font-family: var(--font-base);
+  font-size: var(--font-size-base);
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: #fff;
+  color: var(--text-color);
+}
+
+.filter-bar button {
+  background-color: var(--primary-color);
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.filter-bar button:hover,
+.filter-bar button:focus {
+  background-color: #175ccc;
+}
+
+.filter-bar__group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* --------------------------------------------- */
+/* Chart Panel Styles */
+/* --------------------------------------------- */
+.chart-panel {
+  width: 100%;
+  background-color: var(--background-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  padding: var(--spacing-md);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.chart-panel__header {
+  font-family: var(--font-base);
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: var(--spacing-sm);
+}
+
+.chart-panel__canvas {
+  width: 100%;
+  height: 300px;
+}
+
+@media (min-width: 768px) {
+  .chart-panel__canvas {
+    height: 400px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .chart-panel__canvas {
+    height: 450px;
+  }
+}
+
+/* --------------------------------------------- */
+/* Results Table Styles */
+/* --------------------------------------------- */
+.results-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-base);
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  background-color: #fff;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.results-table thead {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+
+.results-table th,
+.results-table td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.results-table tbody tr:hover {
+  background-color: var(--secondary-color);
+}
+
+.results-table tbody tr:nth-child(even) {
+  background-color: var(--background-light);
+}
+
+.results-table__cell--muted {
+  color: var(--text-muted);
+}
+
+@media (max-width: 640px) {
+  .results-table th,
+  .results-table td {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: 0.9rem;
+  }
+}