summaryrefslogtreecommitdiff
path: root/api/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'api/static/css')
-rw-r--r--api/static/css/base.css66
-rw-r--r--api/static/css/components.css269
-rw-r--r--api/static/css/layout.css71
-rw-r--r--api/static/css/results.css113
4 files changed, 519 insertions, 0 deletions
diff --git a/api/static/css/base.css b/api/static/css/base.css
new file mode 100644
index 0000000..aa28ba5
--- /dev/null
+++ b/api/static/css/base.css
@@ -0,0 +1,66 @@
+:root {
+ /* Colors - Deep Industrial Dark */
+ --color-bg-0: #0a0a0b; /* Deepest background */
+ --color-bg-1: #121214; /* Sidebar / Cards */
+ --color-bg-2: #1c1c1f; /* Input fields */
+ --color-bg-3: #2a2a2e; /* Borders / Hover */
+
+ /* Text */
+ --color-text-primary: #f0f0f2;
+ --color-text-secondary: #9ea0a6;
+ --color-text-muted: #62646c;
+
+ /* Accent - Pure Purple */
+ --color-accent: #9d4edd;
+ --color-accent-hover: #7b2cbf;
+ --color-accent-text: #ffffff;
+
+ /* Semantic */
+ --color-success: #10b981;
+ --color-warning: #f59e0b;
+ --color-danger: #ef4444;
+ --color-info: #3b82f6;
+
+ /* Spacing & Borders */
+ --border-width: 1px;
+ --border-radius: 4px; /* Crisp corners */
+ --space-xs: 4px;
+ --space-sm: 8px;
+ --space-md: 16px;
+ --space-lg: 24px;
+ --space-xl: 32px;
+
+ /* Transitions */
+ --transition-fast: 0.15s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background-color: var(--color-bg-0);
+ color: var(--color-text-primary);
+ line-height: 1.5;
+ height: 100vh;
+ overflow: hidden; /* Main scroll happens in panes */
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+::-webkit-scrollbar-track {
+ background: var(--color-bg-0);
+}
+::-webkit-scrollbar-thumb {
+ background: var(--color-bg-3);
+ border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: var(--color-accent);
+}
diff --git a/api/static/css/components.css b/api/static/css/components.css
new file mode 100644
index 0000000..e576b3a
--- /dev/null
+++ b/api/static/css/components.css
@@ -0,0 +1,269 @@
+/* Buttons */
+.btn {
+ appearance: none;
+ border: none;
+ font-family: inherit;
+ font-size: 0.875rem;
+ font-weight: 600;
+ padding: 10px 16px;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ transition: var(--transition-fast);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+}
+
+.btn-primary {
+ background-color: var(--color-accent);
+ color: var(--color-accent-text);
+}
+.btn-primary:hover:not(:disabled) {
+ background-color: var(--color-accent-hover);
+}
+
+.btn-danger {
+ background-color: transparent;
+ border: var(--border-width) solid var(--color-danger);
+ color: var(--color-danger);
+}
+.btn-danger:hover:not(:disabled) {
+ background-color: var(--color-danger);
+ color: white;
+}
+
+.btn-ghost {
+ background-color: transparent;
+ color: var(--color-text-secondary);
+ border: var(--border-width) solid var(--color-bg-3);
+}
+.btn-ghost:hover:not(:disabled) {
+ background-color: var(--color-bg-3);
+ color: var(--color-text-primary);
+}
+
+.btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ filter: grayscale(1);
+}
+
+/* Forms */
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ margin-bottom: var(--space-md);
+}
+
+.form-label {
+ font-size: 0.75rem;
+ font-weight: 700;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+.input-field {
+ background-color: var(--color-bg-2);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ padding: 10px 12px;
+ color: var(--color-text-primary);
+ font-size: 0.9375rem;
+ width: 100%;
+ transition: border-color var(--transition-fast);
+}
+
+.input-field:focus {
+ outline: none;
+ border-color: var(--color-accent);
+}
+
+/* Tabs */
+.tab-nav {
+ display: flex;
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ padding: 0 var(--space-lg);
+ background-color: var(--color-bg-1);
+}
+
+.tab-trigger {
+ background: none;
+ border: none;
+ padding: 14px 20px;
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ font-weight: 600;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: var(--transition-fast);
+}
+
+.tab-trigger:hover {
+ color: var(--color-text-primary);
+}
+
+.tab-trigger.active {
+ color: var(--color-accent);
+ border-bottom-color: var(--color-accent);
+}
+
+.tab-panel {
+ display: none;
+ padding: var(--space-lg);
+}
+
+.tab-panel.active {
+ display: block;
+}
+
+/* Cards */
+.card {
+ background-color: var(--color-bg-1);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+}
+
+.card-header {
+ padding: var(--space-md);
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ font-size: 0.75rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: var(--color-text-muted);
+}
+
+.card-body {
+ padding: var(--space-md);
+}
+
+/* Badges */
+.badge {
+ font-size: 0.7rem;
+ font-weight: 800;
+ padding: 2px 8px;
+ border-radius: 2px;
+ text-transform: uppercase;
+}
+
+.badge-idle { background: var(--color-bg-3); color: var(--color-text-secondary); }
+.badge-running { background: var(--color-accent); color: white; animation: blink 1.5s infinite; }
+.badge-complete { background: var(--color-success); color: white; }
+
+/* Checkbox Groups for Filtering */
+.checkbox-group {
+ background-color: var(--color-bg-0);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ padding: var(--space-xs) 0;
+ max-height: 160px;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.checkbox-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: 6px 10px;
+ cursor: pointer;
+ transition: var(--transition-fast);
+ font-size: 0.8rem;
+ user-select: none;
+}
+
+.checkbox-item:hover {
+ background-color: var(--color-bg-3);
+}
+
+.checkbox-item input[type="checkbox"] {
+ accent-color: var(--color-accent);
+ cursor: pointer;
+}
+
+.checkbox-item span {
+ color: var(--color-text-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.checkbox-item:has(input:checked) span {
+ color: var(--color-text-primary);
+ font-weight: 600;
+}
+
+.filter-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.filter-link {
+ font-size: 0.6rem;
+ font-weight: 800;
+ text-transform: uppercase;
+ color: var(--color-accent);
+ cursor: pointer;
+ transition: var(--transition-fast);
+}
+
+.filter-link:hover {
+ color: var(--color-text-primary);
+ text-decoration: underline;
+}
+
+/* Modal */
+.modal-overlay {
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background-color: rgba(0, 0, 0, 0.85);
+ backdrop-filter: blur(4px);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xl);
+}
+
+.modal-content {
+ background-color: var(--color-bg-1);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ width: 90vw;
+ max-width: 1200px;
+ position: relative;
+ padding: var(--space-lg);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+
+.btn-close {
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ background: none;
+ border: none;
+ color: var(--color-text-muted);
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: var(--transition-fast);
+}
+
+.btn-close:hover {
+ color: var(--color-danger);
+}
+
+/* Make chart containers clickable */
+.chart-container canvas {
+ cursor: pointer;
+}
+
+@keyframes blink {
+ 0% { opacity: 1; }
+ 50% { opacity: 0.6; }
+ 100% { opacity: 1; }
+}
diff --git a/api/static/css/layout.css b/api/static/css/layout.css
new file mode 100644
index 0000000..2946461
--- /dev/null
+++ b/api/static/css/layout.css
@@ -0,0 +1,71 @@
+.dashboard-root {
+ display: grid;
+ grid-template-columns: 320px 1fr;
+ height: 100vh;
+ width: 100vw;
+}
+
+/* Sidebar - Left Column */
+.sidebar {
+ grid-column: 1;
+ grid-row: 1;
+ background-color: var(--color-bg-1);
+ border-right: var(--border-width) solid var(--color-bg-3);
+ padding: var(--space-lg);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xl);
+ z-index: 10;
+}
+
+/* Main Area - Right */
+.main-viewport {
+ grid-column: 2;
+ grid-row: 1;
+ overflow-y: auto;
+ background-color: var(--color-bg-0);
+ display: flex;
+ flex-direction: column;
+}
+
+/* Header */
+.app-header {
+ padding: var(--space-md) var(--space-lg);
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo-area {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+}
+
+.logo-area h1 {
+ font-size: 1rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ color: var(--color-accent);
+}
+
+/* Mobile notice */
+@media (max-width: 900px) {
+ .dashboard-root {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto 1fr;
+ overflow-y: auto;
+ }
+ .sidebar {
+ grid-row: 1;
+ border-right: none;
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ }
+ .main-viewport {
+ grid-column: 1;
+ grid-row: 2;
+ height: auto;
+ }
+} \ No newline at end of file
diff --git a/api/static/css/results.css b/api/static/css/results.css
new file mode 100644
index 0000000..9a532b8
--- /dev/null
+++ b/api/static/css/results.css
@@ -0,0 +1,113 @@
+.results-container {
+ padding: var(--space-sm);
+}
+
+.results-controls {
+ padding: var(--space-md) var(--space-lg);
+ background-color: var(--color-bg-1);
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ display: flex;
+ align-items: center;
+}
+
+.data-table-wrapper {
+ margin-bottom: var(--space-xl);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+}
+
+.data-table-title {
+ background-color: var(--color-bg-1);
+ padding: var(--space-sm) var(--space-md);
+ font-size: 0.75rem;
+ font-weight: 800;
+ color: var(--color-accent);
+ text-transform: uppercase;
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+}
+
+.data-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.8125rem;
+ background-color: var(--color-bg-1);
+ table-layout: auto;
+}
+
+.data-table th {
+ text-align: left;
+ padding: 12px 16px;
+ background-color: var(--color-bg-2);
+ color: var(--color-text-secondary);
+ font-weight: 700;
+ text-transform: uppercase;
+ font-size: 0.65rem;
+ letter-spacing: 0.05em;
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ white-space: nowrap;
+}
+
+.data-table td {
+ padding: 10px 16px;
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ color: var(--color-text-primary);
+ max-width: 400px;
+ white-space: normal;
+ word-wrap: break-word;
+ vertical-align: top;
+}
+
+.data-table tr:last-child td {
+ border-bottom: none;
+}
+
+.data-table tr:hover td {
+ background-color: var(--color-bg-2);
+}
+
+/* Image Grid */
+.image-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+ gap: var(--space-lg);
+ padding: var(--space-lg);
+}
+
+.image-card {
+ background-color: var(--color-bg-1);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+ transition: var(--transition-fast);
+}
+
+.image-card:hover {
+ border-color: var(--color-accent);
+}
+
+.image-card img {
+ width: 100%;
+ height: auto;
+ display: block;
+ background-color: white; /* Charts usually have white background */
+}
+
+.image-card-footer {
+ padding: var(--space-sm) var(--space-md);
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--color-text-secondary);
+ text-align: center;
+ border-top: var(--border-width) solid var(--color-bg-3);
+}
+
+/* Chart Canvas Container */
+.chart-container {
+ background-color: var(--color-bg-1);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ padding: var(--space-md);
+ position: relative;
+ height: 300px;
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-10-03 05:43:28 +0000